:root { --ink: #193a2b; --muted: #587061; --surface: #ffffff; --canvas: #e8f0e2; --primary: #45704d; --primary-dark: #2f5438; --line: #cbdcc8; --accent: #b9853f; }
* { box-sizing: border-box; }
body { min-height: 100vh; color: var(--ink); background: linear-gradient(145deg, #fafbf6 0%, var(--canvas) 54%, #dce9d9 100%); font-family: Georgia, 'Times New Roman', serif; }
.app-header { padding: .7rem 0; border-bottom: 1px solid rgba(69, 112, 77, .16); }
.app-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); font-size: 1.1rem; font-weight: 700; text-decoration: none; }
.brand-logo { width: 2.65rem; height: 2.65rem; object-fit: contain; border: 1px solid var(--line); border-radius: 5px; }
.user-panel { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-family: system-ui, sans-serif; font-size: .8rem; }
.user-panel a, .back-link { color: var(--primary); font-weight: 700; text-decoration: none; }
.app-main { width: min(100% - .5rem, 760px); padding-top: 1.5rem; padding-bottom: 2rem; }
.login-shell { display: grid; gap: 2.5rem; min-height: calc(100vh - 90px); align-items: center; }
@media (max-width: 767.98px) { .login-shell { gap: 1.5rem; min-height: 0; padding-top: 3rem; align-items: start; }.login-intro, .login-intro .eyebrow { text-align: center; } }
.login-intro h1, h1 { font-size: clamp(2.15rem, 8vw, 3.7rem); line-height: .98; letter-spacing: 0; }
.login-intro p:not(.eyebrow) { max-width: 30rem; color: var(--muted); font-size: 1.08rem; }
.eyebrow { margin-bottom: .55rem; color: var(--primary); font-family: system-ui, sans-serif; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.login-form, .payment-form { padding: 1.5rem; background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 14px 35px rgba(34, 76, 71, .08); }
.login-form h2 { font-size: 1.7rem; }.form-hint { color: var(--muted); }
.form-label { font-family: system-ui, sans-serif; font-size: .85rem; font-weight: 700; }.form-control, .input-group-text { border-color: var(--line); }.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(15,118,110,.14); }
.btn-primary { border-color: var(--primary); background: var(--primary); }.btn-primary:hover, .btn-primary:focus { border-color: var(--primary-dark); background: var(--primary-dark); }.btn-outline-primary { color: var(--primary); border-color: var(--primary); }.btn-outline-primary:hover { background: var(--primary); }
.status-badge { display: inline-block; padding: .2rem .45rem; border: 0; border-radius: 4px; font-family: system-ui, sans-serif; font-size: .72rem; font-weight: 700; }.status-toggle { cursor: pointer; }.status-toggle:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; }.status-1 { color: #2f5438; background: #deebdb; }.status-9 { color: #8c2e2e; background: #f7dddd; }.code-actions { display: flex; gap: .35rem; align-items: center; }.code-actions form { margin: 0; }.active-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: .75rem; padding: .75rem; border-top: 2px solid var(--primary); font-family: system-ui, sans-serif; }.active-total span { color: var(--muted); font-size: .9rem; }.active-total strong { color: var(--primary-dark); font-size: 1.25rem; }.code-table-wrap { overflow-x: auto; }.code-table-wrap .table { font-size: .78rem; }.code-table-wrap .table > :not(caption) > * > * { padding: .5rem .3rem; white-space: nowrap; }.code-table-wrap .note-cell { min-width: 5rem; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }.note-toggle { display: block; width: 100%; overflow: hidden; padding: 0; color: var(--ink); border: 0; background: transparent; text-align: left; text-overflow: ellipsis; white-space: nowrap; }.note-modal-text { white-space: pre-wrap; }
.menu-heading, .page-heading { margin-bottom: 2rem; }.action-list { display: grid; gap: .75rem; }.action-row { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: 1rem; padding: 1rem; color: var(--ink); background: rgba(255,255,255,.78); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; transition: transform .2s ease, border-color .2s ease; }.action-row:hover { color: var(--ink); border-color: var(--primary); transform: translateY(-2px); }.action-row-primary { color: white; background: var(--primary); border-color: var(--primary); }.action-row-primary:hover { color: white; border-color: var(--primary-dark); background: var(--primary-dark); }.action-icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 6px; color: var(--primary); background: #dceeea; font-family: system-ui, sans-serif; font-size: 1.45rem; font-weight: 500; }.action-row-primary .action-icon { color: var(--primary); background: var(--accent); }.action-row small { display: block; margin-top: .15rem; color: var(--muted); font-family: system-ui, sans-serif; font-size: .76rem; }.action-row-primary small { color: #d5eeea; }.arrow { font-size: 1.3rem; }.payment-details { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; padding: 1rem 0; border-top: 1px solid var(--line); color: var(--muted); font-family: system-ui, sans-serif; font-size: .82rem; }.payment-details strong { color: var(--ink); text-align: right; }.qr-result { max-width: 380px; margin: 0 auto; }.qr-meta, .qr-note { color: var(--muted); }.qr-frame { display: grid; min-height: 312px; margin: 2rem 0 1rem; place-items: center; background: white; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 14px 35px rgba(34, 76, 71, .08); }.qr-frame img { width: 280px; max-width: 100%; height: auto; }.code-table-wrap { overflow: hidden; background: rgba(255,255,255,.8); border: 1px solid var(--line); border-radius: 8px; }.table { font-family: system-ui, sans-serif; font-size: .85rem; }.table thead th { padding-top: 1rem; color: var(--muted); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }.table td { padding-top: 1rem; padding-bottom: 1rem; }.date-cell { display: block; white-space: nowrap; }.table small { color: var(--muted); }.note-cell { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.empty-state { padding: 2rem; text-align: center; background: rgba(255,255,255,.78); border: 1px solid var(--line); border-radius: 8px; }.empty-state a { display: inline-block; }
@media (min-width: 768px) { .login-shell { grid-template-columns: 1.1fr .9fr; }.login-form { padding: 2rem; }.app-main { padding-top: 4rem; } }