:root {
  --ink: #13201c;
  --forest: #0f3d32;
  --forest-2: #174f41;
  --lime: #ccf36f;
  --gold: #b78224;
  --paper: #f5f3ec;
  --white: #fffdf8;
  --line: rgba(19, 32, 28, .13);
  --muted: #65716c;
  --red: #a84437;
  --blue: #3b6c91;
  --shadow: 0 24px 65px rgba(16, 45, 37, .13);
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Arial, Helvetica, sans-serif; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }

/* Shared brand */
.brand { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: .75rem; font-weight: 900; font-size: .9rem; letter-spacing: .24em; }
.brand-mark { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--forest); color: white; letter-spacing: 0; font-family: Georgia, serif; font-size: 1.25rem; }
.brand-light { color: white; }
.brand-light .brand-mark { background: var(--lime); color: var(--forest); }

/* Public verifier */
.public-shell { min-height: 100vh; overflow: hidden; position: relative; }
.public-shell::before { content: ""; position: absolute; width: 41rem; height: 41rem; border: 1px solid var(--line); border-radius: 50%; right: -12rem; top: -18rem; pointer-events: none; }
.public-nav { height: 6.4rem; margin: 0 5.5vw; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 4; }
.public-nav nav { display: flex; align-items: center; gap: 2.4rem; }
.public-nav nav a { color: #53605b; font-size: .78rem; text-decoration: none; }
.public-nav nav a:hover { color: var(--forest); }
.public-nav .nav-admin { color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: .75rem 1rem; background: rgba(255,255,255,.38); }
.public-nav .nav-admin span { margin-left: .5rem; }
.public-hero { min-height: calc(100vh - 6.4rem); max-width: 1320px; margin: auto; padding: 5rem 5vw 5.5rem; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .72fr); gap: clamp(3rem, 8vw, 9rem); align-items: center; position: relative; z-index: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: .65rem; color: #527068; font-size: .67rem; letter-spacing: .22em; font-weight: 900; }
.eyebrow i { width: 2rem; height: 2px; background: var(--forest); }
.hero-copy h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(4.5rem, 7.8vw, 8rem); line-height: .83; letter-spacing: -.072em; font-weight: 500; margin: 1.7rem 0 2.2rem; }
.hero-copy h1 em { color: var(--forest); font-weight: 500; }
.hero-copy > p { max-width: 37rem; color: #515e59; font-size: 1.02rem; line-height: 1.75; }
.device-pill { margin-top: 2.1rem; display: inline-flex; align-items: center; gap: .55rem; padding: .65rem .85rem; border: 1px solid var(--line); border-radius: 999px; font-size: .7rem; color: #53605b; background: rgba(255,255,255,.45); }
.status-dot { width: .45rem; height: .45rem; background: #63a36f; border-radius: 50%; box-shadow: 0 0 0 .23rem rgba(99,163,111,.13); }
.verify-card { background: var(--white); border: 1px solid rgba(19,32,28,.12); box-shadow: var(--shadow); border-radius: 1.7rem; padding: .9rem; position: relative; }
.verify-card-head { padding: .75rem .75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; }
.verify-card-head span { font-size: .64rem; letter-spacing: .17em; font-weight: 900; color: var(--forest); }
.verify-card-head small { color: #7a8580; font-size: .61rem; }
.verify-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; background: #eceae3; border-radius: 999px; padding: .25rem; }
.verify-tabs.single { grid-template-columns: 1fr; }
.verify-tabs button { cursor: pointer; border: 0; background: transparent; border-radius: 999px; min-height: 2.8rem; color: #67736e; font-size: .72rem; font-weight: 800; }
.verify-tabs button.active { background: white; color: var(--forest); box-shadow: 0 2px 12px rgba(19,32,28,.08); }
.scan-panel, .code-panel { min-height: 25.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.3rem 2rem 1.2rem; }
.scan-illustration { width: 9.6rem; height: 9.6rem; border-radius: 50%; background: #eef4e3; display: grid; place-items: center; position: relative; }
.scan-illustration b { width: 3.3rem; height: 3.3rem; display: grid; place-items: center; border-radius: .8rem; background: var(--forest); color: white; font-family: Georgia, serif; font-size: 1.2rem; }
.scan-corners { position: absolute; inset: 2rem; border: 2px dashed #8ca16a; border-radius: .8rem; }
.scan-panel h2, .code-panel h2 { font-family: Georgia, serif; font-size: 1.7rem; margin: 1.4rem 0 .45rem; }
.scan-panel > p { margin: 0 auto 1.5rem; color: var(--muted); max-width: 19rem; font-size: .78rem; line-height: 1.6; }
.button-primary, .button-secondary, .button-dark, .outline-action, .upload-button { min-height: 3.2rem; border-radius: 999px; border: 1px solid var(--forest); padding: 0 1.35rem; display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 900; cursor: pointer; text-decoration: none; }
.button-primary { width: min(100%, 18.5rem); background: var(--forest); color: white; }
.button-primary:hover, .button-dark:hover { background: #092d25; }
.button-secondary { width: 100%; background: transparent; color: var(--forest); margin-top: 1rem; }
.text-button, .link-button { border: 0; background: transparent; cursor: pointer; text-decoration: underline; color: #65716c; font-size: .68rem; margin-top: .85rem; }
.code-panel { align-items: stretch; text-align: left; }
.code-panel > label { font-size: .69rem; font-weight: 800; margin-bottom: .55rem; }
.code-input-wrap { display: flex; align-items: center; min-height: 4rem; border: 1px solid var(--line); background: white; border-radius: .85rem; overflow: hidden; }
.code-input-wrap:focus-within { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(15,61,50,.08); }
.code-input-wrap.has-error { border-color: var(--red); }
.code-input-wrap input { border: 0; outline: none; background: transparent; min-width: 0; flex: 1; padding: 0 1rem; font-family: "Courier New", monospace; font-size: 1.05rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.code-input-wrap span { padding-right: 1rem; font-size: .64rem; color: #89918e; }
.field-help, .field-error { font-size: .65rem; margin: .6rem 0 1.6rem; color: #7b8581; }
.field-error { color: var(--red); margin-bottom: 0; }
.code-panel .button-primary { width: 100%; }
.code-panel .text-button { align-self: center; }
.verify-footer { border-top: 1px solid var(--line); margin-top: .6rem; padding: 1rem .5rem .25rem; text-align: center; color: #8a928f; font-size: .58rem; text-transform: uppercase; letter-spacing: .12em; }
.verify-footer span { color: var(--forest); }
.result-card { min-height: 30rem; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; padding: 2.5rem 2rem 1.5rem; }
.result-icon { width: 4.4rem; height: 4.4rem; display: grid; place-items: center; border-radius: 50%; font-size: 1.7rem; font-weight: 900; margin-bottom: 1.3rem; }
.result-authentic .result-icon { background: var(--lime); color: var(--forest); }
.result-warning .result-icon { background: #f4dca8; color: #6c4a0d; }
.result-invalid .result-icon { background: #f0cbc5; color: #842f25; }
.result-eyebrow { color: var(--forest); letter-spacing: .19em; font-size: .61rem; font-weight: 900; }
.result-warning .result-eyebrow { color: #80601d; }
.result-invalid .result-eyebrow { color: var(--red); }
.result-card h2 { font-family: Georgia, serif; font-size: 2rem; margin: .8rem 0 .55rem; letter-spacing: -.03em; }
.result-message { max-width: 21rem; color: var(--muted); font-size: .75rem; line-height: 1.55; margin: 0 auto 1.5rem; }
.result-details { width: 100%; margin: 0 0 .7rem; }
.result-details div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding: .72rem 0; text-align: left; }
.result-details dt { color: #7b8580; font-size: .65rem; }
.result-details dd { margin: 0; font-size: .68rem; font-weight: 800; text-align: right; }
.how-strip { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1320px; margin: auto; }
.how-strip article { display: flex; gap: 1.1rem; padding: 2.5rem 3vw; border-right: 1px solid var(--line); }
.how-strip article:last-child { border: 0; }
.how-strip article > b { color: #9aa29f; font-family: Georgia, serif; font-size: .7rem; }
.how-strip h2 { margin: 0 0 .45rem; font-family: Georgia, serif; font-size: 1rem; }
.how-strip p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.ios-banner-overlay { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; background: rgba(5, 10, 27, .58); backdrop-filter: blur(10px) saturate(.72); -webkit-backdrop-filter: blur(10px) saturate(.72); }
.ios-banner { position: relative; width: min(27rem, 100vw); border-radius: 2rem 2rem 0 0; overflow: hidden; box-shadow: 0 -20px 70px rgba(0,0,0,.34); background: #241e16; padding-bottom: env(safe-area-inset-bottom); }
.ios-banner img { display: block; width: 100%; height: auto; }
.ios-banner button { position: absolute; right: 1.5rem; top: .65rem; width: 2.2rem; height: 2.2rem; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: #38413c; color: white; cursor: pointer; font-size: 1.1rem; }
.ios-vertta-brand { position: absolute; right: .35rem; bottom: calc(.25rem + env(safe-area-inset-bottom)); min-width: 6.4rem; height: 3.25rem; padding: .38rem .58rem .38rem .38rem; border-radius: .58rem; display: flex; align-items: center; gap: .42rem; background: var(--forest); color: white; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.ios-vertta-brand i { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--forest); font-family: Georgia, serif; font-style: normal; font-weight: 900; }
.ios-vertta-brand b { font-size: .68rem; letter-spacing: .1em; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; background: rgba(8, 21, 17, .75); backdrop-filter: blur(7px); }
.scanner-modal, .simple-modal { width: min(100%, 31rem); max-height: calc(100vh - 2rem); overflow: auto; background: var(--white); border-radius: 1.4rem; padding: 1.2rem; box-shadow: 0 30px 90px rgba(0,0,0,.35); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: .4rem .25rem 1rem; }
.modal-head span { color: var(--forest); font-size: .57rem; letter-spacing: .18em; font-weight: 900; }
.modal-head h2 { font-family: Georgia, serif; margin: .35rem 0 0; font-size: 1.7rem; }
.modal-head > button { border: 1px solid var(--line); background: transparent; border-radius: 50%; width: 2.3rem; height: 2.3rem; font-size: 1.2rem; cursor: pointer; }
.qr-reader { min-height: 22rem; background: #0d1714; border-radius: 1rem; overflow: hidden; }
.qr-reader video { object-fit: cover; }
.scanner-note { text-align: center; color: #7d8783; font-size: .62rem; line-height: 1.5; margin: 1rem .6rem .2rem; }
.camera-error { min-height: 22rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; background: #f4eee9; border-radius: 1rem; }
.camera-error p { color: var(--muted); font-size: .75rem; line-height: 1.5; }
.camera-error button { border: 0; background: transparent; color: var(--forest); text-decoration: underline; cursor: pointer; }

/* Android scanner experience */
.android-scanner-overlay { position: fixed; inset: 0; z-index: 80; overflow-y: auto; overscroll-behavior: contain; background: #082c25; }
.android-scanner-shell { width: min(100%, 31rem); min-height: 100dvh; margin: 0 auto; color: white; background: radial-gradient(circle at 85% 0, rgba(210,239,133,.16), transparent 30%), linear-gradient(160deg, #0f4c3e, #092f28 68%, #06251f); display: flex; flex-direction: column; }
.android-scanner-head { min-height: 5.4rem; display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: .7rem; padding: max(1rem, env(safe-area-inset-top)) 1rem .8rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.android-menu { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; border-radius: .65rem; background: rgba(255,255,255,.92); color: var(--forest); font-size: 1.25rem; line-height: 1; }
.android-scanner-brand { display: flex; align-items: center; gap: .55rem; font-weight: 900; letter-spacing: .14em; }
.android-scanner-brand i { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--forest); font-family: Georgia, serif; font-style: normal; font-size: 1.05rem; }
.android-secure { color: rgba(255,255,255,.55); font-size: .45rem; letter-spacing: .14em; font-weight: 900; }
.android-prepare-card { width: calc(100% - 2rem); margin: auto; padding: 1.45rem; border-radius: 1.2rem; background: #fbfbf7; color: var(--ink); box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.android-prepare-kicker { color: var(--forest); font-size: .5rem; letter-spacing: .16em; font-weight: 900; }
.android-prepare-card h2 { margin: .5rem 0 1.2rem; font-family: Georgia, serif; font-size: 1.7rem; font-weight: 500; }
.android-prepare-card ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.android-prepare-card li { display: grid; grid-template-columns: 2rem 1fr; gap: .7rem; align-items: start; }
.android-prepare-card li > b { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--forest); color: var(--lime); font-size: .62rem; }
.android-prepare-card li strong, .android-prepare-card li span { display: block; }
.android-prepare-card li strong { font-size: .72rem; margin: .08rem 0 .2rem; }
.android-prepare-card li span { color: #78827d; font-size: .61rem; line-height: 1.45; }
.android-prepare-card > p { margin: 1.25rem 0 .45rem; text-align: center; color: #68736e; font-size: .6rem; }
.android-loadbar { height: .38rem; border-radius: 999px; overflow: hidden; background: #e4e8e1; }
.android-loadbar i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--forest), var(--lime)); transform-origin: left; animation: android-load 1.45s ease-out both; }
.android-cancel { width: 100%; margin-top: 1rem; min-height: 2.7rem; border: 0; background: transparent; color: var(--forest); font-size: .62rem; font-weight: 800; }
.android-camera-stage { flex: 1; padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.android-camera-frame { width: 100%; max-width: 27rem; aspect-ratio: 1; margin: .2rem auto 0; position: relative; overflow: hidden; border-radius: 1.2rem; background: #08130f; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.android-qr-reader { position: absolute; inset: 0; min-height: 0; width: 100%; height: 100%; border-radius: 0; }
.android-qr-reader video { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.android-corner { position: absolute; z-index: 4; width: 3rem; height: 3rem; pointer-events: none; }
.android-corner.corner-a { left: 1.2rem; top: 1.2rem; border-left: .25rem solid var(--lime); border-top: .25rem solid var(--lime); border-radius: .8rem 0 0; }
.android-corner.corner-b { right: 1.2rem; top: 1.2rem; border-right: .25rem solid var(--lime); border-top: .25rem solid var(--lime); border-radius: 0 .8rem 0 0; }
.android-corner.corner-c { left: 1.2rem; bottom: 1.2rem; border-left: .25rem solid var(--lime); border-bottom: .25rem solid var(--lime); border-radius: 0 0 0 .8rem; }
.android-corner.corner-d { right: 1.2rem; bottom: 1.2rem; border-right: .25rem solid var(--lime); border-bottom: .25rem solid var(--lime); border-radius: 0 0 .8rem; }
.android-scan-line { position: absolute; z-index: 3; left: 2rem; right: 2rem; top: 22%; height: 2px; background: linear-gradient(90deg, transparent, var(--lime), transparent); box-shadow: 0 0 12px var(--lime); animation: android-scan 2.2s ease-in-out infinite alternate; }
.torch-button { position: absolute; z-index: 5; right: 1rem; bottom: 1rem; width: 3.25rem; height: 3.25rem; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; display: grid; place-items: center; background: rgba(15,61,50,.86); color: white; font-size: 1.2rem; box-shadow: 0 10px 25px rgba(0,0,0,.28); }
.torch-button.active { background: var(--lime); color: var(--forest); }
.torch-button:disabled { opacity: .45; }
.android-camera-error { position: absolute; inset: 0; z-index: 6; min-height: 0; border-radius: 0; }
.android-guide { margin-top: 1rem; padding: 1rem 0 .9rem; border-top: 1px solid rgba(255,255,255,.18); display: grid; grid-template-columns: 1.9rem 1fr; gap: .7rem; align-items: start; }
.android-guide > span { width: 1.55rem; height: 1.55rem; display: grid; place-items: center; border-radius: 50%; background: white; color: var(--forest); font-family: Georgia, serif; font-weight: 900; }
.android-guide h2 { margin: 0 0 .25rem; font-family: Georgia, serif; font-weight: 500; font-size: 1.35rem; }
.android-guide p, .android-privacy { margin: 0; color: rgba(255,255,255,.65); font-size: .61rem; line-height: 1.45; }
.android-privacy { text-align: center; margin: auto 0 .65rem; }
.android-stop { min-height: 3.3rem; border: 0; border-radius: .65rem; background: var(--lime); color: var(--forest); font-size: .73rem; font-weight: 900; }
@keyframes android-load { from { transform: scaleX(.05); } to { transform: scaleX(1); } }
@keyframes android-scan { from { transform: translateY(0); } to { transform: translateY(13rem); } }

/* Login */
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .82fr) minmax(480px, 1.18fr); }
.login-brand-panel { background: var(--forest); color: white; padding: 3.5rem 5.5vw; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.login-brand-panel::before, .login-brand-panel::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; pointer-events: none; }
.login-brand-panel::before { width: 35rem; height: 35rem; left: -18rem; bottom: -17rem; }
.login-brand-panel::after { width: 19rem; height: 19rem; right: -7rem; top: 10rem; }
.login-brand-copy { position: relative; z-index: 1; }
.login-brand-copy > span, .login-kicker { color: var(--lime); font-size: .63rem; letter-spacing: .19em; font-weight: 900; }
.login-brand-copy h1 { font-family: Georgia, serif; font-size: clamp(3.2rem, 5vw, 5.8rem); line-height: .89; letter-spacing: -.055em; font-weight: 500; margin: 1.6rem 0 2rem; }
.login-brand-copy h1 em { color: var(--lime); font-weight: 500; }
.login-brand-copy p { color: rgba(255,255,255,.65); max-width: 28rem; font-size: .85rem; line-height: 1.7; }
.login-proof { position: relative; z-index: 1; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.15); display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; }
.login-proof b { font-family: Georgia, serif; font-size: 2rem; }
.login-proof span { color: rgba(255,255,255,.6); font-size: .65rem; line-height: 1.4; }
.login-proof i { color: var(--lime); border: 1px solid rgba(204,243,111,.3); border-radius: 999px; padding: .45rem .7rem; font-size: .62rem; font-style: normal; }
.login-form-panel { background: var(--paper); display: flex; flex-direction: column; justify-content: center; padding: 4rem clamp(2rem, 9vw, 9rem) 2rem; position: relative; }
.login-form-wrap { width: min(100%, 27rem); margin: auto; }
.login-form-wrap > h2 { font-family: Georgia, serif; font-size: 2.7rem; letter-spacing: -.04em; margin: 1rem 0 .45rem; }
.login-form-wrap > p { color: var(--muted); font-size: .77rem; margin: 0 0 2.2rem; }
.login-form-wrap form > label, .simple-modal > label, .generation-form label { display: flex; flex-direction: column; gap: .55rem; font-size: .66rem; font-weight: 800; margin-bottom: 1.15rem; }
.login-form-wrap input, .simple-modal input, .simple-modal select, .generation-form input, .generation-form select { width: 100%; min-height: 3.4rem; border: 1px solid var(--line); background: rgba(255,255,255,.55); border-radius: .7rem; padding: 0 1rem; outline: none; }
.login-form-wrap input:focus, .simple-modal input:focus, .generation-form input:focus, .generation-form select:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(15,61,50,.07); }
.password-wrap { position: relative; }
.password-wrap button { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--forest); font-size: .62rem; cursor: pointer; }
.login-row { display: flex; align-items: center; justify-content: space-between; margin: -.25rem 0 1.4rem; }
.remember { color: var(--muted); font-size: .65rem; display: flex; align-items: center; gap: .4rem; }
.remember input { width: .8rem; min-height: 0; }
.login-row .link-button { margin: 0; text-decoration: none; color: var(--forest); }
.login-error, .form-error { color: var(--red); background: #f7e8e5; border: 1px solid #e7c3bd; border-radius: .6rem; padding: .75rem; font-size: .66rem; margin-bottom: 1rem; }
.login-submit { width: 100%; min-height: 3.6rem; border: 0; border-radius: .7rem; background: var(--forest); color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 1.2rem; font-weight: 800; font-size: .75rem; cursor: pointer; }
.login-submit span { font-size: 1.1rem; }
.demo-access { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.demo-access > span { display: block; color: #8a938f; font-size: .55rem; letter-spacing: .15em; font-weight: 900; margin-bottom: .55rem; }
.demo-access button { width: 100%; border: 0; background: transparent; padding: .6rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; text-align: left; }
.demo-access button b { font-size: .67rem; }
.demo-access button small { color: #77817d; font-size: .58rem; }
.login-form-panel > footer { color: #98a09d; font-size: .56rem; text-align: center; margin-top: 2rem; }

/* Admin */
.admin-shell { min-height: 100vh; background: #f1efe8; display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); }
.admin-sidebar { position: sticky; top: 0; height: 100vh; background: var(--forest); color: white; padding: 1.75rem 1.25rem 1.1rem; display: flex; flex-direction: column; z-index: 10; }
.admin-brand { color: white; padding: 0 .5rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.admin-brand .brand-mark { background: var(--lime); color: var(--forest); }
.admin-context { padding: 1.4rem .55rem 1rem; }
.admin-context span { display: block; color: rgba(255,255,255,.42); font-size: .53rem; letter-spacing: .16em; font-weight: 900; }
.admin-context strong { display: block; margin-top: .35rem; font-family: Georgia, serif; font-size: 1rem; font-weight: 500; }
.admin-sidebar nav { display: flex; flex-direction: column; gap: .25rem; }
.admin-sidebar nav button { border: 0; background: transparent; color: rgba(255,255,255,.64); min-height: 2.9rem; border-radius: .6rem; padding: 0 .65rem; display: grid; grid-template-columns: 1.55rem 1fr auto; align-items: center; text-align: left; cursor: pointer; font-size: .7rem; }
.admin-sidebar nav button i { font-style: normal; font-size: .9rem; color: rgba(255,255,255,.7); }
.admin-sidebar nav button small { min-width: 1.35rem; height: 1.35rem; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; font-size: .55rem; }
.admin-sidebar nav button:hover { background: rgba(255,255,255,.06); color: white; }
.admin-sidebar nav button.active { background: var(--lime); color: var(--forest); font-weight: 900; }
.admin-sidebar nav button.active i { color: var(--forest); }
.admin-sidebar nav button.active small { background: var(--forest); color: white; }
.sidebar-bottom { margin-top: auto; }
.security-note { margin: 1rem .3rem; padding: .85rem; border: 1px solid rgba(255,255,255,.1); border-radius: .7rem; display: flex; gap: .6rem; color: var(--lime); }
.security-note span { font-size: .75rem; }
.security-note p { margin: 0; }
.security-note b, .security-note small { display: block; }
.security-note b { color: white; font-size: .6rem; margin-bottom: .2rem; }
.security-note small { color: rgba(255,255,255,.45); font-size: .52rem; }
.profile-block { width: 100%; border: 0; border-top: 1px solid rgba(255,255,255,.12); background: transparent; color: white; display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: .65rem; text-align: left; padding: 1rem .35rem 0; cursor: pointer; }
.avatar { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: #416d60; font-size: .62rem; font-weight: 800; }
.profile-block b, .profile-block small { display: block; }
.profile-block b { font-size: .62rem; }
.profile-block small { color: rgba(255,255,255,.42); font-size: .5rem; margin-top: .18rem; }
.profile-block i { font-style: normal; color: rgba(255,255,255,.5); }
.admin-main { min-width: 0; }
.admin-topbar { height: 5rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 3vw; background: rgba(245,243,236,.82); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 7; }
.admin-topbar > div:first-child span, .admin-topbar > div:first-child b { display: block; }
.admin-topbar > div:first-child span { color: #8b9490; font-size: .5rem; letter-spacing: .16em; font-weight: 900; }
.admin-topbar > div:first-child b { font-family: Georgia, serif; font-weight: 500; font-size: .95rem; margin-top: .2rem; }
.top-actions { display: flex; align-items: center; gap: 1rem; }
.sync-status { display: flex; align-items: center; gap: .5rem; color: #66726d; font-size: .6rem; }
.sync-status i, .client-active i { width: .4rem; height: .4rem; background: #63a36f; border-radius: 50%; box-shadow: 0 0 0 .2rem rgba(99,163,111,.12); }
.button-dark { min-height: 2.8rem; background: var(--forest); color: white; border-radius: .55rem; }
.button-dark span { margin-left: .7rem; }
.admin-content { padding: 2.7rem 3vw 4rem; max-width: 1560px; margin: auto; }
.narrow-content { max-width: 1300px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.2rem; }
.page-heading > div:first-child > span { color: #7a8580; font-size: .55rem; letter-spacing: .18em; font-weight: 900; }
.page-heading h1 { font-family: Georgia, serif; font-size: clamp(2.3rem, 4vw, 4rem); line-height: .95; letter-spacing: -.045em; margin: .55rem 0 .65rem; font-weight: 500; }
.page-heading p { color: var(--muted); font-size: .72rem; margin: 0; }
.outline-action { background: transparent; border-color: var(--line); border-radius: .55rem; min-height: 2.8rem; }
.outline-action:disabled { opacity: .35; cursor: not-allowed; }
.heading-actions { display: flex; gap: .6rem; }
.upload-button { min-height: 2.8rem; border-color: var(--line); border-radius: .55rem; position: relative; overflow: hidden; }
.upload-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.notice-bar { margin: 1rem 3vw 0; background: #e8f2dc; color: #285441; border: 1px solid #c8dcb0; min-height: 2.8rem; border-radius: .55rem; display: flex; align-items: center; gap: .65rem; padding: 0 .9rem; font-size: .68rem; }
.notice-bar > span { width: 1.2rem; height: 1.2rem; background: var(--forest); color: white; border-radius: 50%; display: grid; place-items: center; font-size: .55rem; }
.notice-bar button { margin-left: auto; border: 0; background: transparent; cursor: pointer; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.kpi-card { min-height: 10rem; border: 1px solid var(--line); border-radius: .85rem; padding: 1.25rem; background: rgba(255,255,255,.48); display: flex; flex-direction: column; }
.kpi-card > div { display: flex; align-items: center; justify-content: space-between; }
.kpi-card span { color: #75807b; font-size: .52rem; letter-spacing: .13em; font-weight: 900; }
.kpi-card i { width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; background: #e8ebe4; font-style: normal; font-size: .72rem; }
.kpi-card strong { margin-top: auto; font-family: Georgia, serif; font-weight: 500; font-size: 2.4rem; letter-spacing: -.03em; }
.kpi-card small { margin-top: .35rem; font-size: .58rem; color: #6a756f; }
.kpi-green { border-top: 3px solid var(--forest); }
.kpi-green i { background: #dcecd5; color: var(--forest); }
.kpi-gold { border-top: 3px solid #c09850; }
.kpi-gold i { background: #f1e7ce; color: #745516; }
.kpi-red { border-top: 3px solid var(--red); }
.kpi-red i { background: #f4deda; color: var(--red); }
.kpi-dark { background: var(--forest); color: white; }
.kpi-dark span, .kpi-dark small { color: rgba(255,255,255,.55); }
.kpi-dark i { background: rgba(255,255,255,.13); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: .8rem; margin-top: .8rem; }
.panel { background: rgba(255,255,255,.58); border: 1px solid var(--line); border-radius: .85rem; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.3rem 1.4rem; border-bottom: 1px solid var(--line); }
.panel-head span { display: block; color: #7b8581; font-size: .51rem; letter-spacing: .17em; font-weight: 900; }
.panel-head h2 { font-family: Georgia, serif; font-size: 1.35rem; font-weight: 500; margin: .35rem 0 0; }
.panel-head select, .table-toolbar select { min-height: 2.2rem; border: 1px solid var(--line); background: transparent; border-radius: .45rem; padding: 0 .7rem; color: #66716c; font-size: .58rem; outline: none; }
.bar-chart { padding: 1.2rem 1.4rem .6rem; }
.bar-row { display: grid; grid-template-columns: 1.6rem 9.5rem minmax(4rem, 1fr) 2rem; gap: .7rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid rgba(19,32,28,.07); }
.bar-rank { color: #9aa19e; font-family: Georgia, serif; font-size: .68rem; }
.bar-name { font-size: .66rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: .5rem; background: #e4e5de; border-radius: 1rem; overflow: hidden; }
.bar-track i { display: block; height: 100%; border-radius: inherit; background: var(--forest); }
.bar-row:nth-child(2) .bar-track i { background: #80947c; }
.bar-row:nth-child(3) .bar-track i { background: #b09f6b; }
.bar-row b { text-align: right; font-size: .65rem; }
.panel-link { width: 100%; min-height: 3.1rem; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--forest); display: flex; align-items: center; justify-content: space-between; padding: 0 1.4rem; font-size: .64rem; font-weight: 800; cursor: pointer; }
.activity-list { padding: 0 1.4rem; }
.live-dot { width: .45rem; height: .45rem; border-radius: 50%; background: #62a66c; box-shadow: 0 0 0 .3rem rgba(98,166,108,.1); }
.activity { display: grid; grid-template-columns: 2rem 1fr auto; gap: .7rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid rgba(19,32,28,.07); }
.activity-icon { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-size: .6rem; font-style: normal; }
.activity-icon.green { background: #deedd8; color: var(--forest); }
.activity-icon.red { background: #f3dcd8; color: var(--red); }
.activity-icon.gold { background: #f1e7ce; color: #745516; }
.activity-icon.blue { background: #dce7ef; color: var(--blue); }
.activity b, .activity span { display: block; }
.activity b { font-size: .63rem; margin-bottom: .2rem; }
.activity span { color: #76807c; font-size: .53rem; }
.activity time { color: #929a97; font-size: .52rem; }

/* Generation */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: .9rem; align-items: start; }
.generation-form { padding: 1.5rem; }
.form-section-title { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1.4rem; }
.form-section-title.divided { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: .6rem; }
.form-section-title > span { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--forest); color: white; display: grid; place-items: center; font-family: Georgia, serif; font-size: .6rem; }
.form-section-title h2 { font-family: Georgia, serif; font-size: 1.2rem; font-weight: 500; margin: 0 0 .25rem; }
.form-section-title p { margin: 0; color: var(--muted); font-size: .6rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; padding-left: 2.65rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
.generation-form label { color: #43504b; }
.generation-form select:disabled { opacity: .65; }
.security-explainer { margin: .3rem 0 1.3rem 2.65rem; display: flex; gap: .7rem; background: #eaf1dd; border: 1px solid #d2dfbd; border-radius: .7rem; padding: .9rem; }
.security-explainer i { color: var(--forest); font-style: normal; }
.security-explainer b { font-size: .65rem; }
.security-explainer p { color: #65715f; font-size: .58rem; line-height: 1.5; margin: .25rem 0 0; }
.generation-form .form-error { margin-left: 2.65rem; }
.form-actions { border-top: 1px solid var(--line); padding-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.form-actions > span { color: var(--muted); font-size: .62rem; }
.form-actions > span b { color: var(--ink); }
.generation-summary { background: var(--forest); color: white; border-radius: .85rem; padding: 1.25rem; }
.generation-summary > span { color: rgba(255,255,255,.48); font-size: .5rem; letter-spacing: .16em; font-weight: 900; }
.label-preview { margin-top: 1rem; background: var(--white); color: var(--ink); border-radius: .7rem; text-align: center; padding: 1.3rem 1rem 1rem; }
.label-preview small { color: var(--forest); font-size: .48rem; letter-spacing: .16em; font-weight: 900; }
.label-preview h3 { font-family: Georgia, serif; font-weight: 500; font-size: 1rem; margin: .45rem 0 .8rem; min-height: 2.3rem; }
.fake-qr { width: 8.3rem; height: 8.3rem; margin: auto; position: relative; background-color: #fff; background-image: repeating-linear-gradient(0deg, transparent, transparent 5px, #17372e 5px, #17372e 7px), repeating-linear-gradient(90deg, transparent, transparent 6px, #17372e 6px, #17372e 8px); border: .55rem solid white; box-shadow: inset 0 0 0 1px #d8dad5; }
.fake-qr i { position: absolute; width: 1.8rem; height: 1.8rem; border: .38rem solid var(--forest); background: white; }
.fake-qr i:nth-child(1) { left: .4rem; top: .4rem; }
.fake-qr i:nth-child(2) { right: .4rem; top: .4rem; }
.fake-qr i:nth-child(3) { left: .4rem; bottom: .4rem; }
.fake-qr b { position: absolute; inset: 0; margin: auto; width: 2rem; height: 2rem; display: grid; place-items: center; background: var(--forest); color: white; border-radius: .3rem; }
.label-preview > strong { display: block; font-family: "Courier New", monospace; letter-spacing: .14em; font-size: .7rem; margin-top: .8rem; }
.label-preview > p { margin: .35rem 0 0; color: #77817c; font-size: .5rem; }
.generation-summary dl { margin: 1rem 0 0; }
.generation-summary dl div { display: flex; justify-content: space-between; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.11); }
.generation-summary dt { color: rgba(255,255,255,.48); font-size: .54rem; }
.generation-summary dd { margin: 0; font-size: .55rem; font-weight: 800; }

/* Codes */
.codes-panel { overflow: hidden; }
.table-toolbar { min-height: 4.4rem; padding: 0 1rem; display: flex; align-items: center; gap: .7rem; border-bottom: 1px solid var(--line); }
.search-box { min-height: 2.6rem; flex: 1; display: flex; align-items: center; border: 1px solid var(--line); border-radius: .5rem; background: rgba(255,255,255,.55); }
.search-box span { padding-left: .8rem; color: #87908c; }
.search-box input { min-width: 0; flex: 1; border: 0; outline: none; background: transparent; padding: 0 .7rem; font-size: .65rem; }
.result-count { color: #7f8985; font-size: .57rem; white-space: nowrap; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: .8rem 1rem; color: #838d89; background: rgba(235,234,228,.65); font-size: .51rem; letter-spacing: .1em; text-align: left; }
td { padding: .9rem 1rem; border-top: 1px solid rgba(19,32,28,.07); font-size: .63rem; white-space: nowrap; }
td b, td small { display: block; }
td small { color: #828b87; font-size: .53rem; margin-top: .22rem; }
.unit-id { color: #7c8681; font-family: "Courier New", monospace; }
td code { font-family: "Courier New", monospace; font-weight: 800; letter-spacing: .09em; font-size: .65rem; }
.status-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .38rem .6rem; font-size: .53rem; font-weight: 800; }
.status-ativo { background: #e4eedc; color: #315b45; }
.status-verificado { background: #dbe8ec; color: #345c69; }
.status-suspeito { background: #f4e5c7; color: #795718; }
.status-bloqueado { background: #f2deda; color: #873b31; }
.status-active, .status-generated { background: #e4eedc; color: #315b45; }
.status-verified, .status-multiple { background: #dbe8ec; color: #345c69; }
.status-suspect { background: #f4e5c7; color: #795718; }
.status-blocked, .status-cancelled, .status-expired { background: #f2deda; color: #873b31; }
.row-action { border: 1px solid var(--line); background: transparent; border-radius: .4rem; padding: .35rem; font-size: .56rem; }
.empty-state { text-align: center; padding: 5rem 1rem; }
.empty-state p { color: var(--muted); font-size: .65rem; }

/* Clients and reports */
.client-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.client-card { background: rgba(255,255,255,.58); border: 1px solid var(--line); border-radius: .85rem; padding: 1.3rem; }
.client-card header { display: flex; justify-content: space-between; align-items: center; }
.client-logo { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: .6rem; background: var(--forest); color: white; font-family: Georgia, serif; }
.client-active { color: #5b7065; display: flex; align-items: center; gap: .45rem; font-size: .55rem; }
.client-card h2 { font-family: Georgia, serif; font-size: 1.45rem; margin: 1rem 0 .25rem; }
.client-card > p { color: var(--muted); font-size: .6rem; margin: 0 0 1.1rem; }
.client-card dl { margin: 0; border-top: 1px solid var(--line); }
.client-card dl div { padding: .7rem 0; display: flex; justify-content: space-between; gap: .7rem; }
.client-card dt { color: #7d8783; font-size: .55rem; }
.client-card dd { margin: 0; font-size: .56rem; font-weight: 800; }
.client-card > button { width: 100%; border: 0; border-top: 1px solid var(--line); background: transparent; padding: .9rem 0 0; display: flex; justify-content: space-between; color: var(--forest); font-size: .6rem; font-weight: 800; cursor: pointer; }
.simple-modal { padding: 1.4rem; }
.simple-modal > label { margin: .3rem 0 1rem; }
.simple-modal > .button-dark { width: 100%; }
.modal-hint { color: var(--muted); background: #edf0e9; padding: .8rem; border-radius: .5rem; font-size: .58rem; line-height: 1.5; }
.report-hero { min-height: 12rem; background: var(--forest); color: white; padding: 1.8rem; display: flex; align-items: center; justify-content: space-between; overflow: hidden; position: relative; }
.report-hero::before { content: ""; position: absolute; width: 20rem; height: 20rem; right: -4rem; top: -8rem; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }
.report-hero span { color: var(--lime); font-size: .56rem; letter-spacing: .16em; font-weight: 900; }
.report-hero h2 { font-family: Georgia, serif; font-size: 2.2rem; font-weight: 500; margin: .6rem 0 .4rem; }
.report-hero p { color: rgba(255,255,255,.55); font-size: .65rem; }
.report-hero > strong { position: relative; font-family: Georgia, serif; font-size: 7rem; color: rgba(255,255,255,.08); }
.report-table { margin-top: .8rem; overflow: hidden; }
.report-table .panel-head small { color: #858e8a; font-size: .56rem; }
.index-pill { background: #e1ebdc; color: #355845; padding: .4rem .6rem; border-radius: 999px; font-weight: 800; }

/* Live demonstration and visual QR labels */
.result-demo-badge { margin-bottom: 1rem; border: 1px solid #cbd8bb; background: #edf3e4; color: var(--forest); border-radius: 999px; padding: .45rem .75rem; font-size: .5rem; font-weight: 900; letter-spacing: .12em; }
.demo-content { max-width: 1680px; }
.demo-banner { min-height: 10rem; margin-bottom: 1rem; border-radius: 1rem; padding: 1.6rem 1.8rem; color: white; background: linear-gradient(115deg, #0b3028, #164d3f); display: flex; align-items: center; justify-content: space-between; gap: 2rem; position: relative; overflow: hidden; }
.demo-banner::after { content: ""; position: absolute; width: 18rem; height: 18rem; right: 7rem; top: -11rem; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; }
.demo-banner > div { position: relative; z-index: 1; }
.demo-banner > div > span { color: var(--lime); font-size: .52rem; letter-spacing: .17em; font-weight: 900; }
.demo-banner h1 { margin: .5rem 0 .4rem; font-family: Georgia, serif; font-weight: 500; font-size: clamp(1.8rem, 3vw, 3rem); letter-spacing: -.03em; }
.demo-banner p { margin: 0; color: rgba(255,255,255,.62); font-size: .66rem; }
.demo-live { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: .55rem; border: 1px solid rgba(210,239,133,.32); background: rgba(210,239,133,.09); border-radius: 999px; padding: .65rem .9rem; color: var(--lime); font-size: .56rem; font-weight: 800; }
.demo-live i { width: .45rem; height: .45rem; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 .25rem rgba(210,239,133,.13); }
.demo-layout { display: grid; grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr); align-items: start; gap: 1rem; }
.demo-generator { padding: 1.4rem; position: sticky; top: 5.6rem; }
.demo-card-title { display: flex; align-items: center; gap: .75rem; padding-bottom: 1.25rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.demo-card-title > span { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: .55rem; background: #e5efda; color: var(--forest); font-size: 1rem; }
.demo-card-title h2, .demo-results-head h2 { font-family: Georgia, serif; font-weight: 500; margin: 0; font-size: 1.3rem; }
.demo-card-title p { margin: .25rem 0 0; color: var(--muted); font-size: .55rem; }
.demo-generator label { display: flex; flex-direction: column; gap: .5rem; color: #43504b; font-size: .62rem; font-weight: 800; margin-bottom: 1rem; }
.demo-generator input, .demo-generator select { min-height: 3.2rem; width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.65); border-radius: .65rem; padding: 0 .9rem; outline: none; }
.demo-generator input:focus, .demo-generator select:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(15,61,50,.07); }
.demo-generate-button { width: 100%; margin-top: .3rem; }
.demo-generate-button span { font-size: 1rem; margin: 0 .55rem 0 0; }
.demo-results { min-height: 31rem; overflow: hidden; }
.demo-results-head { min-height: 5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--line); }
.demo-results-head > div > span { color: #7d8783; font-size: .49rem; letter-spacing: .15em; font-weight: 900; }
.demo-results-head > div h2 { margin-top: .25rem; }
.demo-results-head > b { background: #dff0d5; color: #27643f; border-radius: 999px; padding: .5rem .75rem; font-size: .51rem; letter-spacing: .06em; }
.demo-limit-note { margin: 1rem 1.2rem 0; padding: .7rem .8rem; border-radius: .55rem; background: #f2ead7; color: #745719; font-size: .58rem; }
.demo-code-grid { padding: 1.2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .8rem; align-items: start; }
.demo-code-card { border: 1px solid var(--line); background: rgba(255,255,255,.65); border-radius: .85rem; padding: .85rem; text-align: center; }
.demo-unit { display: block; color: #929b97; text-align: left; font-family: "Courier New", monospace; font-size: .55rem; font-weight: 800; }
.demo-qr-image { width: min(100%, 11.5rem); aspect-ratio: 1; display: grid; place-items: center; margin: .35rem auto .65rem; border: 1px solid #e0e3dd; border-radius: .65rem; background: white; object-fit: contain; }
.qr-loading { color: #929a97; font-size: .55rem; }
.demo-code-card > code { display: block; border: 1px solid #e3e5df; background: #f5f6f3; border-radius: .45rem; padding: .55rem; color: #20302a; font-family: "Courier New", monospace; font-weight: 900; letter-spacing: .09em; }
.demo-code-card > small { display: block; min-height: 2.2rem; margin: .55rem 0; color: #77817c; font-size: .52rem; line-height: 1.45; }
.demo-read-count { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: .4rem 0 .75rem; color: #76807b; font-size: .5rem; }
.demo-read-count b { color: #3456b0; background: #e7ebff; border-radius: .25rem; padding: .2rem .3rem; }
.demo-read-count b.over { color: #963c31; background: #f5dfdb; }
.demo-code-card > button { width: 100%; min-height: 2.6rem; }
.demo-code-card > a { display: block; margin-top: .65rem; color: var(--forest); font-size: .53rem; font-weight: 800; }
.demo-empty { min-height: 25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; }
.demo-empty > span { width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 50%; background: #f0f2ed; color: #bcc3be; font-size: 2.2rem; font-weight: 200; }
.demo-empty h3 { font-family: Georgia, serif; font-weight: 500; font-size: 1.25rem; margin: 1rem 0 .35rem; }
.demo-empty p { max-width: 25rem; margin: 0; color: #89918e; font-size: .62rem; line-height: 1.55; }
.qr-table-link { display: inline-flex; border-radius: .4rem; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.qr-thumb { width: 3.8rem; height: 3.8rem; display: grid; place-items: center; object-fit: contain; background: white; color: #8b9490; font-size: .45rem; text-align: center; white-space: normal; }

@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .client-grid { grid-template-columns: repeat(2, 1fr); }
  .form-layout { grid-template-columns: 1fr; }
  .generation-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .demo-layout { grid-template-columns: 1fr; }
  .demo-generator { position: static; }
}

@media (max-width: 850px) {
  .public-nav { height: 5.2rem; margin-inline: 1.2rem; }
  .public-nav nav > a:first-child { display: none; }
  .public-nav .nav-admin { font-size: 0; padding: .7rem; }
  .public-nav .nav-admin span { font-size: .9rem; margin: 0; }
  .public-hero { grid-template-columns: 1fr; padding: 4rem 1.2rem 3rem; gap: 3rem; }
  .hero-copy h1 { font-size: clamp(4.1rem, 18vw, 6rem); }
  .verify-card { width: min(100%, 34rem); margin: auto; }
  .how-strip { grid-template-columns: 1fr; margin-inline: 1.2rem; }
  .how-strip article { border-right: 0; border-bottom: 1px solid var(--line); padding-inline: 0; }
  .login-shell { grid-template-columns: 1fr; }
  .login-brand-panel { min-height: 29rem; padding: 2rem 1.5rem; }
  .login-proof { display: none; }
  .login-form-panel { padding: 3.5rem 1.5rem 2rem; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: 4.8rem; padding: .5rem; flex-direction: row; z-index: 20; border-top: 1px solid rgba(255,255,255,.1); }
  .admin-brand, .admin-context, .sidebar-bottom { display: none; }
  .admin-sidebar nav { width: 100%; flex-direction: row; justify-content: space-around; }
  .admin-sidebar nav button { min-width: 3.5rem; grid-template-columns: 1fr; justify-items: center; gap: .15rem; padding: .25rem; font-size: .48rem; }
  .admin-sidebar nav button i { font-size: .9rem; }
  .admin-sidebar nav button small { display: none; }
  .admin-topbar { height: 4.3rem; padding-inline: 1rem; }
  .sync-status { display: none; }
  .top-actions .button-dark { min-height: 2.4rem; padding-inline: .8rem; font-size: .6rem; }
  .admin-content { padding: 2rem 1rem 7rem; }
  .notice-bar { margin-inline: 1rem; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .page-heading h1 { font-size: 2.6rem; }
  .heading-actions { width: 100%; }
  .heading-actions > * { flex: 1; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .kpi-card { min-height: 8.7rem; }
  .kpi-card strong { font-size: 2rem; }
  .client-grid { grid-template-columns: 1fr; }
  .generation-summary { display: block; }
  .demo-banner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .brand { letter-spacing: .16em; }
  .brand-mark { width: 2.35rem; height: 2.35rem; }
  .hero-copy h1 { font-size: clamp(3.7rem, 20vw, 5rem); }
  .scan-panel, .code-panel { min-height: 25rem; padding-inline: 1rem; }
  .kpi-grid { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 1.4rem minmax(6rem, 7.5rem) 1fr 1.4rem; gap: .4rem; }
  .form-grid { grid-template-columns: 1fr; padding-left: 0; }
  .form-grid .span-2 { grid-column: auto; }
  .security-explainer, .generation-form .form-error { margin-left: 0; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .table-toolbar { align-items: stretch; flex-wrap: wrap; padding-block: .8rem; }
  .search-box { flex-basis: 100%; }
  .demo-access button { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .login-brand-copy h1 { font-size: 3.4rem; }
  .demo-code-grid { grid-template-columns: 1fr; padding: .8rem; }
  .demo-results-head { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; }
}

/* Hostinger production shell */
[hidden], .hidden { display: none !important; }
.primary-button { min-height: 3.2rem; border: 0; border-radius: .65rem; background: var(--forest); color: white; display: inline-flex; align-items: center; justify-content: center; padding: 0 1.2rem; font-weight: 800; font-size: .72rem; text-decoration: none; cursor: pointer; }
.installer-page { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: var(--paper); }
.installer-card { width: min(100%, 34rem); background: var(--white); border: 1px solid var(--line); border-radius: 1.3rem; box-shadow: var(--shadow); padding: 2rem; }
.installer-card .eyebrow { margin-top: 2.5rem; }
.installer-card h1 { font-family: Georgia, serif; font-size: 2.8rem; margin: 1rem 0 .6rem; }
.installer-card > p { color: var(--muted); font-size: .75rem; line-height: 1.6; }
.installer-card form { margin-top: 1.5rem; display: grid; gap: .9rem; }
.installer-card label { display: grid; gap: .4rem; font-size: .65rem; font-weight: 800; }
.installer-card input { min-height: 3.1rem; border: 1px solid var(--line); border-radius: .6rem; padding: 0 .8rem; background: white; }
.install-message { padding: .8rem; border-radius: .55rem; margin: 1rem 0; font-size: .68rem; }
.install-message.success { background: #e5f0dc; color: #285441; }
.install-message.error { background: #f5dfdb; color: var(--red); }
.production-login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: var(--forest); }
.production-login .login-form-wrap { width: min(100%, 28rem); background: var(--paper); border-radius: 1rem; padding: 2rem; box-shadow: 0 30px 90px rgba(0,0,0,.25); }
.production-login .brand { margin-bottom: 2rem; }
.api-error { margin: .8rem 0; color: var(--red); background: #f4dfdb; padding: .75rem; border-radius: .5rem; font-size: .65rem; }
.admin-mobile-brand { display: none; }
.admin-loading { min-height: 100vh; display: grid; place-items: center; color: var(--muted); font-size: .75rem; }
.admin-view-empty { text-align: center; padding: 5rem 1rem; color: var(--muted); }
.admin-view-empty h2 { color: var(--ink); font-family: Georgia, serif; font-size: 2rem; }
.admin-toast { position: fixed; z-index: 100; right: 1rem; bottom: 1rem; max-width: 26rem; border-radius: .7rem; padding: .9rem 1rem; background: var(--forest); color: white; box-shadow: var(--shadow); font-size: .67rem; }
.admin-toast.error { background: var(--red); }
.production-form { display: grid; gap: .9rem; }
.production-form label { display: grid; gap: .45rem; font-size: .65rem; font-weight: 800; }
.production-form input, .production-form select { min-height: 3rem; border: 1px solid var(--line); border-radius: .55rem; background: white; padding: 0 .8rem; }
.production-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.scanner-launch { position: relative; }
.production-result { padding: 2rem 1.3rem; }
.production-result .result-details { margin-top: 1rem; }
.ios-production-banner { position: fixed; right: 1rem; top: 1rem; z-index: 100; width: min(23rem, calc(100vw - 2rem)); box-shadow: var(--shadow); border-radius: 1rem; overflow: hidden; }
.ios-production-banner img { width: 100%; display: block; }
.ios-production-banner button { position: absolute; top: .5rem; right: .5rem; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.45); color: white; cursor: pointer; }
@media (max-width: 850px) { .admin-mobile-brand { display: flex; } }