:root {
  color-scheme: light;
  --ink: #10251f;
  --muted: #60736c;
  --line: #d9e7df;
  --paper: #f3faf6;
  --panel: #ffffff;
  --teal: #078a72;
  --teal-dark: #075c50;
  --gold: #e3a51c;
  --gold-soft: #fff0bd;
  --wine: #5e3bd3;
  --red: #b42318;
  --green: #15803d;
  --shadow: 0 24px 70px rgba(12, 72, 55, .16);
  --glow: 0 18px 46px rgba(28, 190, 132, .2);
}

* { box-sizing: border-box; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: radial-gradient(circle at 10% 0%, rgba(247,190,41,.18), transparent 30%), radial-gradient(circle at 92% 82%, rgba(18,191,135,.18), transparent 32%), linear-gradient(135deg, #f1faf5, #fffdf5 48%, #eaf8f3); background-attachment: fixed; letter-spacing: 0; overscroll-behavior-y: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease; -webkit-tap-highlight-color: transparent; }
button:hover { transform: translateY(-1px); }
button:active { transform: translateY(1px) scale(.99); }
.hidden { display: none !important; }

.intro { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: linear-gradient(135deg, #120f0a, #241a12 48%, #0d302d); color: #fff; animation: introOut .7s ease 2.2s forwards; }
.intro-stage { position: relative; width: min(76vw, 520px); display: grid; place-items: center; perspective: 900px; }
.intro-logo { width: 100%; max-height: 48vh; object-fit: contain; filter: drop-shadow(0 28px 48px rgba(0,0,0,.45)); animation: logoReveal 2.1s cubic-bezier(.2,.8,.2,1) forwards; }
.intro p { margin-top: -30px; font-weight: 800; }
.intro-orbit { position: absolute; width: 74%; aspect-ratio: 1; border: 3px solid transparent; border-top-color: #f4c96a; border-right-color: #0fd0c1; border-radius: 50%; filter: drop-shadow(0 0 12px rgba(244,201,106,.5)); animation: introOrbit 1.7s linear infinite; }
.loading-dots { display: inline-block; animation: loadingPulse 1s ease-in-out infinite; }
@keyframes logoReveal { 0% { opacity: 0; transform: scale(.72) rotateX(16deg); } 55% { opacity: 1; transform: scale(1.05) rotateX(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes introOut { to { opacity: 0; visibility: hidden; } }
@keyframes introOrbit { to { transform: rotate(360deg); } }
@keyframes loadingPulse { 50% { opacity: .25; letter-spacing: 5px; } }

.shell { min-height: 100vh; }
.auth-view { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 1.05fr) minmax(320px, .8fr); }
.brand-panel { padding: clamp(28px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; gap: 28px; background: linear-gradient(140deg, #130b0d, #2a1d12 38%, #0d3f3a 78%, #061f21); color: #fff; position: relative; overflow: hidden; }
.brand-panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent); transform: translateX(-120%); animation: sheen 7s ease-in-out infinite; }
.brand-panel > * { position: relative; z-index: 1; }
.brand-top, .side-brand { display: flex; gap: 14px; align-items: center; }
.brand-mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(135deg, var(--gold), var(--teal)); color: white; font-weight: 900; box-shadow: var(--glow); }
.brand-logo { width: 96px; height: 72px; object-fit: contain; }
.eyebrow { margin: 0 0 8px; color: #bca575; text-transform: uppercase; font-size: 12px; font-weight: 800; letter-spacing: 0; }
.hero-rank { width: fit-content; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(255,215,112,.48); border-radius: 999px; color: #ffe49a; background: linear-gradient(110deg, rgba(255,199,68,.2), rgba(13,179,142,.14)); box-shadow: 0 0 30px rgba(255,190,57,.16); letter-spacing: .08em; }
.hero-rank span { color: #ffd15a; filter: drop-shadow(0 0 6px rgba(255,205,81,.6)); animation: rankSpark 2.4s ease-in-out infinite; }
h1, h2, h3 { margin: 0; line-height: 1.05; }
h1 { font-size: clamp(42px, 7vw, 78px); }
.brand-copy { max-width: 760px; color: #dfe9e5; font-size: clamp(18px, 2vw, 23px); line-height: 1.55; }
.product-preview { max-width: 760px; min-height: 310px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: 20px; background: rgba(255,255,255,.09); backdrop-filter: blur(16px); box-shadow: 0 30px 90px rgba(0,0,0,.28); animation: liftIn .8s cubic-bezier(.2,.8,.2,1) both; }
.product-poster { width: min(100%, 760px); max-height: 58vh; object-fit: contain; filter: drop-shadow(0 28px 60px rgba(0,0,0,.28)); animation: liftIn .8s cubic-bezier(.2,.8,.2,1) both; }
.feature-slider { width: min(100%, 780px); overflow: hidden; border: 1px solid rgba(255,255,255,.24); border-radius: 22px; background: radial-gradient(circle at 75% 20%, rgba(26,208,190,.15), transparent 38%), rgba(255,255,255,.08); box-shadow: 0 30px 70px rgba(0,0,0,.24); backdrop-filter: blur(16px); animation: liftIn .8s cubic-bezier(.2,.8,.2,1) both; perspective: 1100px; touch-action: pan-y; }
.feature-track { display: flex; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.feature-slide { min-width: 100%; min-height: 330px; display: grid; grid-template-columns: minmax(190px, .72fr) minmax(260px, 1.28fr); gap: 30px; align-items: center; padding: 34px; transform-style: preserve-3d; }
.feature-art { position: relative; width: min(220px, 100%); aspect-ratio: 1; display: grid; place-items: center; margin: auto; transform: rotateX(12deg) rotateY(-14deg); transform-style: preserve-3d; animation: artFloat 4s ease-in-out infinite; }
.feature-art::before { content: ""; position: absolute; inset: 18%; border-radius: 28%; background: linear-gradient(145deg, #ffcf58, #bd701d 45%, #0e6b62); box-shadow: -18px 22px 38px rgba(0,0,0,.35), inset 8px 8px 18px rgba(255,255,255,.45), inset -10px -12px 20px rgba(0,0,0,.25); transform: translateZ(28px); }
.feature-art > span { position: relative; z-index: 4; font-size: clamp(54px, 8vw, 92px); font-weight: 900; color: #fff; text-shadow: 0 8px 18px rgba(0,0,0,.38); transform: translateZ(62px); }
.feature-art i { position: absolute; inset: 8%; border: 1px solid rgba(255,255,255,.27); border-radius: 32%; transform: translateZ(-10px) rotate(12deg); }
.feature-art i:nth-of-type(2) { inset: 2%; border-color: rgba(15,208,193,.35); transform: translateZ(-25px) rotate(-14deg); }
.feature-art i:nth-of-type(3) { inset: 26%; border-color: rgba(255,207,88,.6); transform: translateZ(48px) rotate(45deg); }
.feature-copy { min-width: 0; display: grid; gap: 12px; }
.feature-copy small { color: #f4c96a; font-weight: 900; letter-spacing: .14em; }
.feature-copy b { font-size: clamp(24px, 3.5vw, 42px); color: #fff; line-height: 1.08; }
.feature-copy p { margin: 0; color: #cbdad6; font-size: clamp(15px, 1.7vw, 19px); line-height: 1.6; }
.feature-slider-controls { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.feature-slider-controls button { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; }
#featureDots { display: flex; gap: 7px; }
#featureDots button { width: 8px; height: 8px; min-width: 0; padding: 0; border: 0; background: rgba(255,255,255,.35); }
#featureDots button.active { width: 24px; border-radius: 8px; background: #f4c96a; }
@keyframes artFloat { 0%,100% { transform: rotateX(12deg) rotateY(-14deg) translateY(0); } 50% { transform: rotateX(6deg) rotateY(10deg) translateY(-10px); } }
@keyframes rankSpark { 0%,100% { transform: scale(.92) rotate(-8deg); opacity: .72; } 50% { transform: scale(1.14) rotate(8deg); opacity: 1; } }
.preview-bar { display: flex; gap: 8px; padding-bottom: 20px; }
.preview-bar span { width: 10px; height: 10px; border-radius: 50%; background: #d2b369; }
.preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.preview-grid div { min-height: 96px; padding: 18px; border-radius: 8px; background: rgba(255,255,255,.12); }
.preview-grid b { display: block; font-size: 28px; }
.preview-grid small { color: #bfd0cc; }
.preview-lines { display: grid; gap: 12px; margin-top: 22px; }
.preview-lines i { height: 16px; border-radius: 4px; background: rgba(255,255,255,.18); }
.preview-lines i:nth-child(2) { width: 82%; }
.preview-lines i:nth-child(3) { width: 68%; }
.preview-lines i:nth-child(4) { width: 91%; }

.auth-panel { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(22px, 5vw, 54px); background: linear-gradient(180deg, #fff, #fffaf1); }
.public-discovery { grid-column: 1 / -1; display: grid; gap: clamp(28px,5vw,58px); padding: clamp(42px,7vw,92px) clamp(18px,7vw,96px); background: radial-gradient(circle at 12% 12%,rgba(18,191,135,.13),transparent 26%),linear-gradient(180deg,#f8fffaf5,#fff9ec); }
.public-discovery-intro { max-width: 920px; margin-inline: auto; text-align: center; }
.public-discovery h2 { color:#133d35; font-size:clamp(28px,4vw,48px); line-height:1.12; }
.public-discovery p { color:var(--muted); line-height:1.72; }
.public-discovery-intro > p:last-child { max-width:800px; margin:18px auto 0; font-size:clamp(15px,1.7vw,19px); }
.discovery-highlights { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin-top:20px; }
.discovery-highlights span { padding:9px 14px; border:1px solid #cde8d8; border-radius:999px; background:#fff; color:#125d4e; font-size:13px; font-weight:800; box-shadow:0 8px 20px rgba(12,88,68,.06); }
.workflow-showcase { max-width:1180px; width:100%; margin-inline:auto; display:grid; grid-template-columns:minmax(260px,.85fr) minmax(320px,1fr); gap:clamp(24px,5vw,64px); align-items:center; padding:clamp(20px,4vw,40px); border-radius:28px; background:radial-gradient(circle at 80% 10%,rgba(247,197,82,.25),transparent 35%),linear-gradient(135deg,#092e2a,#064c43); color:#fff; overflow:hidden; }
.workflow-showcase h2 { color:#fff; }
.workflow-showcase p { color:#d2e9e1; }
.workflow-showcase .eyebrow { color:#f5d27b; }
.workflow-showcase-copy a { display:inline-flex; gap:10px; align-items:center; min-height:44px; margin-top:8px; color:#ffe6a2; font-weight:850; text-decoration:none; }
.workflow-showcase-copy a:hover { text-decoration:underline; }
.workflow-preview { padding:20px; border:1px solid rgba(255,255,255,.23); border-radius:22px; background:rgba(255,255,255,.93); color:#173a34; box-shadow:0 24px 60px rgba(0,0,0,.22); transform:rotate(1deg); }
.workflow-preview-top { display:flex; align-items:center; gap:12px; padding:0 2px 14px; }
.workflow-preview-top strong,.workflow-preview-top small { display:block; }
.workflow-preview-top small { margin-top:3px; color:#667c74; font-size:12px; }
.workflow-preview-mark { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:13px; background:linear-gradient(145deg,#0d856f,#d69c2e); color:#fff; font-size:24px; }
.workflow-preview-live { margin-left:auto; padding:6px 9px; border-radius:999px; background:#e4f6ed; color:#087351; font-size:11px; font-weight:850; }
.workflow-preview ol { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.workflow-preview li { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid #e6eee8; border-radius:13px; background:#fff; }
.workflow-preview li:nth-child(3) { background:#fff9e8; border-color:#f5e4ae; }
.workflow-preview li>span { color:#bd8a25; font-size:12px; font-weight:900; }
.workflow-preview li div { min-width:0; }
.workflow-preview li strong,.workflow-preview li small { display:block; }
.workflow-preview li strong { font-size:14px; }
.workflow-preview li small { margin-top:2px; color:#65766f; font-size:11px; }
.workflow-preview li i { margin-left:auto; color:#087b65; font-style:normal; font-weight:900; }
.seo-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:1180px; width:100%; margin-inline:auto; }
.seo-feature-grid article { min-height:210px; padding:22px; border:1px solid rgba(18,153,105,.2); border-radius:16px; background:rgba(255,255,255,.92); box-shadow:0 18px 48px rgba(14,91,66,.08); transition:transform .2s ease,box-shadow .2s ease; }
.seo-feature-grid article:hover { transform:translateY(-4px); box-shadow:0 22px 52px rgba(14,91,66,.14); }
.seo-feature-grid span { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:#fff4cb; background:linear-gradient(135deg,#0d6958,#d69419); font-weight:900; }
.seo-feature-grid h3 { margin-top:18px; color:#173c38; font-size:20px; }
.seo-feature-grid p { margin-bottom:0; font-size:14px; }
.public-use-cases,.public-cta { max-width:1180px; width:100%; margin-inline:auto; display:grid; grid-template-columns:minmax(260px,.8fr) minmax(320px,1.2fr); gap:clamp(24px,5vw,64px); align-items:center; padding:clamp(24px,4vw,46px); border-radius:20px; background:linear-gradient(135deg,#12231e,#0b5a4c 68%,#9b6b17); color:#fff; box-shadow:0 24px 70px rgba(6,61,49,.18); }
.public-use-cases h2,.public-cta h2 { color:#fff; }
.public-use-cases p,.public-cta p { color:#d9ebe5; }
.public-faq { max-width:980px; width:100%; margin-inline:auto; display:grid; gap:10px; }
.public-faq > div { margin-bottom:12px; text-align:center; }
.public-faq details { padding:16px 18px; border:1px solid rgba(18,153,105,.2); border-radius:12px; background:#fff; }
.public-faq summary { cursor:pointer; color:#173c38; font-weight:850; }
.public-faq details p { margin:10px 0 0; }
.public-cta { grid-template-columns:1fr auto; background:linear-gradient(135deg,#24170d,#0c443a); }
.public-cta > div:last-child { display:flex; gap:10px; flex-wrap:wrap; }
.public-cta a { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 18px; text-decoration:none; }
.public-cta .ghost { border-color:rgba(255,255,255,.35); color:#fff; background:rgba(255,255,255,.08); }
.public-ad-slot { max-width:1180px; width:100%; margin-inline:auto; }
.public-ad-slot[hidden] { display:none; }
.platform-hub { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.platform-hub a { min-width:0; min-height:58px; display:grid; grid-template-columns:28px 1fr; grid-template-rows:auto auto; column-gap:8px; align-content:center; padding:8px 10px; border:1px solid rgba(155,116,43,.2); border-radius:13px; color:var(--ink); text-decoration:none; background:rgba(255,255,255,.74); box-shadow:0 9px 22px rgba(52,42,22,.07); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.platform-hub a:hover { transform:translateY(-2px); border-color:#c99a45; box-shadow:0 14px 28px rgba(52,42,22,.12); }
.platform-hub a>span { grid-row:1/3; width:28px; height:28px; display:grid; place-items:center; border-radius:9px; color:#f5d481; background:#0c493d; }
.platform-hub b { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.platform-hub small { color:var(--muted); font-size:9px; }
.lang-row, .segmented, .auth-actions, .top-actions, .row-actions, .filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.language-selector { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 0; }
.language-selector select { width: 150px; max-width: 100%; min-height: 36px; padding: 6px 8px; font-size: 14px; }
.dashboard-language-tools { display:inline-flex; align-items:center; gap:6px; }
.chip, .segmented button, .ghost, .icon-btn { border: 1px solid var(--line); background: rgba(255,255,255,.92); color: var(--ink); min-height: 40px; padding: 0 14px; border-radius: 8px; }
.chip.active, .segmented button.active { background: #fff6df; color: #714a0c; border-color: #e5c37d; box-shadow: var(--glow); }
.segmented { background: #efe8dc; padding: 5px; border-radius: 8px; }
.segmented button { flex: 1; border: 0; background: transparent; }
.segmented button.active { background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.auth-form { display: grid; gap: 14px; }
.checkline { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.checkline input { width: auto; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 12px 13px; color: var(--ink); background: #fff; outline-color: var(--gold); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,154,69,.16); }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(180,35,24,.12); }
input:user-valid, select:user-valid, textarea:user-valid { border-color: #82bca9; }
textarea { min-height: 90px; resize: vertical; }
.field-status { min-height: 18px; margin: -3px 0 0; }
.field-status.error-text { color: var(--red); font-weight: 700; }
select:disabled { cursor: not-allowed; opacity: .66; background: #f4f4f1; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.primary { border: 0; border-radius: 10px; min-height: 44px; padding: 0 18px; background: linear-gradient(120deg, #05745f, #0ca678 46%, #5fca57 70%, #e3a51c); background-size: 180% 180%; color: #fff; font-weight: 800; box-shadow: 0 12px 24px rgba(9, 134, 98, .24); animation: growthGradient 7s ease infinite; }
.primary:hover { box-shadow: 0 16px 34px rgba(13, 164, 115, .3); }
.primary:disabled { opacity: .45; cursor: not-allowed; }
.small { min-height: 38px; }
.hint { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
meter { width: 100%; height: 10px; }
.password-field { position:relative; display:block; width:100%; line-height:0; }
.password-field input { padding-right:46px !important; }
.password-toggle { appearance:none; position:absolute; z-index:2; top:50%; right:5px; display:flex !important; align-items:center; justify-content:center; width:34px; min-width:34px; height:34px; min-height:34px !important; padding:0 !important; margin:0 !important; border:0 !important; border-radius:8px; color:#665b49; background:transparent !important; box-shadow:none !important; transform:translateY(-50%); }
.password-toggle:hover,.password-toggle:focus-visible { color:#075c50; background:rgba(7,92,80,.08) !important; outline:0; }
.password-toggle:active { transform:translateY(-50%) scale(.94); }
.password-toggle svg { display:block; width:21px; height:21px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.password-toggle .eye-pupil { fill:currentColor; stroke:none; }
.password-toggle.is-visible .eye-slash { display:none; }

.app-view { min-height: 100vh; display: grid; grid-template-columns: 280px 1fr; }
.mobile-menu-toggle, .mobile-close, .nav-scrim { display: none; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow: auto; padding: 18px; background: radial-gradient(circle at 15% 8%, rgba(247,190,41,.2), transparent 26%), linear-gradient(165deg, #071c18, #073f35 52%, #075c50); color: #fff; border-right: 1px solid rgba(255,255,255,.12); box-shadow: 18px 0 60px rgba(4,55,43,.12); }
.side-brand { margin-bottom: 18px; }
.side-brand img { width: 58px; height: 46px; object-fit: contain; }
.sidebar nav { display: grid; gap: 6px; }
.nav-btn { width: 100%; border: 1px solid transparent; border-radius: 8px; padding: 12px; text-align: left; color: #ece4d5; background: transparent; }
.nav-btn.active, .nav-btn:hover { background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.07)); color: #fff; border-color: rgba(255,216,91,.48); box-shadow: inset 3px 0 0 var(--gold), 0 12px 30px rgba(0,0,0,.12); }
.full { width: 100%; margin-top: 18px; background: transparent; color: #fff; border-color: rgba(255,255,255,.24); }
.workspace { min-width: 0; }
.topbar-heading { min-width: 0; display: flex; align-items: center; gap: 12px; }
.topbar { position: sticky; top: 0; z-index: 5; min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(16px, 3vw, 34px); background: rgba(248,255,251,.86); backdrop-filter: blur(22px) saturate(145%); border-bottom: 1px solid rgba(16,150,105,.2); box-shadow: 0 12px 38px rgba(12,90,67,.08); }
.content { padding: clamp(16px, 3vw, 34px); display: grid; gap: 18px; }
.grid { display: grid; gap: 16px; }
.metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric, .panel, .item, .pricing-card { background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,253,248,.94)); border: 1px solid rgba(18,153,105,.2); border-radius: 14px; box-shadow: 0 16px 42px rgba(14,91,66,.09); }
.metric:hover, .panel:hover, .item:hover, .pricing-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #dcc28d; }
.metric, .panel, .item, .pricing-card, .photo, .dropzone { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.metric { padding: 18px; min-height: 112px; position: relative; overflow: hidden; }
.metric::after { content: ""; position: absolute; width: 96px; height: 96px; right: -32px; bottom: -42px; border-radius: 50%; background: radial-gradient(circle, rgba(38,202,139,.22), transparent 68%); animation: positivePulse 4s ease-in-out infinite; }
.metric b { display: block; font-size: clamp(24px, 3vw, 36px); }
.metric span { color: var(--muted); font-size: 13px; }
.blurred b { filter: blur(9px); user-select: none; }
.panel { padding: 18px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.service-editor { grid-column: 1 / -1; display: grid; gap: 7px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: #fbf8ef; }
.service-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink); font-size: 12px; font-weight: 800; }
.service-lines { display: grid; gap: 6px; }
.service-line { display: grid; grid-template-columns: minmax(110px,.7fr) minmax(130px,1fr) 34px; align-items: end; gap: 6px; }
.service-line label { min-width: 0; }
.service-remove { width: 34px; min-width: 34px; min-height: 34px; padding: 0; color: var(--red); }
.service-summary { display: flex; flex-wrap: wrap; gap: 7px; }
.service-summary span { min-width: 110px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 11px; background: #fff; }
.service-summary b { color: var(--ink); }
.permission-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fffaf1; }
.permission-grid legend { padding: 0 8px; color: var(--ink); font-weight: 800; }
.list { display: grid; gap: 10px; }
.item { padding: 14px; display: grid; gap: 10px; }
.item-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 999px; background: #fff3cf; color: #76500f; font-size: 12px; font-weight: 800; border: 1px solid #ead09a; }
.danger { color: var(--red); }
.success { color: var(--green); }
.table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.table th, .table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { background: linear-gradient(90deg, #e9f8f0, #fff5d4); font-size: 12px; text-transform: uppercase; color: #315e4f; }
.kanban { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof-count { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: grid; gap: 4px; }
.proof-count b { font-size: 26px; }
.proof-folders { display: flex; gap: 8px; flex-wrap: wrap; }
.proof-folder-chip { display:inline-flex; align-items:center; gap:6px; }
.proof-folder-chip small { display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 4px; border-radius:999px; background:rgba(16,64,52,.1); font-size:10px; line-height:1; }
.proof-workspace { display: grid; gap: 14px; }
.proof-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #f8f1e4; }
.proof-media { position:relative; width:100%; height:min(68vh,660px); min-height:360px; display:grid; place-items:center; background:#101010; border-radius:8px; overflow:hidden; }
.proof-media img { width:100%; height:100%; object-fit:contain; }
.proof-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.proof-media:fullscreen,.proof-media.app-fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.proof-media:fullscreen img,.proof-media.app-fullscreen img { height: 100vh; }
.proof-media:fullscreen,.proof-media.app-fullscreen { touch-action: none; }
.fullscreen-shortcuts { position: absolute; z-index: 6; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100% - 28px); padding: 9px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; background: rgba(5,8,8,.76); backdrop-filter: blur(12px); pointer-events: none; white-space: nowrap; }
.fullscreen-shortcuts span, .fullscreen-shortcuts small { color: #f4d28a; }
.fullscreen-proof-actions { position:absolute; z-index:8; left:0; right:0; bottom:max(7px,env(safe-area-inset-bottom)); display:none; justify-content:center; padding:5px; pointer-events:none; }
.proof-media:fullscreen .fullscreen-proof-actions,.proof-media.app-fullscreen .fullscreen-proof-actions { display:grid; }
.fullscreen-proof-actions button { min-height:32px; border-radius:6px; border:1px solid rgba(255,255,255,.2); color:#fff; background:rgba(255,255,255,.12); font-weight:700; }
.fullscreen-proof-actions .reject { color:#ffd4d0; }.fullscreen-proof-actions .wait { color:#ffe5a7; }.fullscreen-proof-actions .select { color:#c9ffe9; }
.fullscreen-proof-actions small { grid-column:1/-1; color:rgba(255,255,255,.7); text-align:center; }
.mobile-staff-auth { display:grid; gap:6px; padding:10px; border:1px solid rgba(190,145,55,.35); border-radius:10px; background:rgba(246,231,194,.28); }
.mobile-staff-auth .row-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.mobile-staff-auth .row-actions button { min-width:0; min-height:44px; padding:6px; font-size:12px; touch-action:manipulation; }
.mobile-staff-auth .hint { margin:0; font-size:12px; }
.mobile-staff-auth.hidden { display:none; }
.proof-media canvas.pointer-mode { pointer-events: none; cursor: default; }
.proof-note { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.dropzone { min-height: 180px; border: 1px dashed #bda776; border-radius: 8px; padding: 12px; background: #fffdf8; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.photo { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #dde7e4; }
.photo div { padding: 10px; display: grid; gap: 8px; }
.swipe-stage { min-height:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; padding:0; }
.swipe-card { width:100%; max-width:520px; border:1px solid var(--line); border-radius:8px; background:#fff; overflow:hidden; box-shadow:var(--shadow); touch-action:pan-y; cursor:grab; transition:transform .16s ease; user-select:none; }
.swipe-card:active { cursor: grabbing; }
.swipe-card img { width: 100%; aspect-ratio: 4/3; object-fit: contain; display: block; background: #e6efec; }
.swipe-card > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; }
.swipe-action { min-height: 52px; border: 1px solid var(--line); border-radius: 8px; background: #fffdf8; color: var(--ink); font-weight: 900; }
.swipe-action.reject { grid-area: reject; border-color: #f3c1bd; color: #a33a30; }
.swipe-action.select { grid-area: select; border-color: #b7dfcf; color: #0c6c52; }
.swipe-action.wait { grid-area: wait; border-color: #e5d08e; color: #73510f; }
.ellipsis { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.client-focus .sidebar .nav-btn:not(.active) { opacity: .48; }
.guide-list { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.5; }
.correction-stage { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.media-box { min-height: 620px; border: 1px solid var(--line); border-radius: 8px; background: #151515; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.media-shell { flex: 1; min-height: 540px; position: relative; display: grid; place-items: center; overflow: hidden; touch-action:pan-y; transition:transform .14s ease,opacity .14s ease; will-change:transform,opacity; }
.media-shell.is-dragging { transition:none; }
.correction-gallery-nav { position:absolute; z-index:7; inset:0 10px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.correction-gallery-nav button { pointer-events:auto; width:44px; min-height:44px; padding:0; border:1px solid rgba(255,255,255,.32); border-radius:50%; color:#fff; background:rgba(4,8,8,.56); backdrop-filter:blur(8px); font-size:30px; line-height:1; }
.correction-gallery-nav span { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); padding:5px 9px; border-radius:999px; color:#fff; background:rgba(4,8,8,.58); font-size:12px; font-weight:800; }
.media-shell img, .media-shell video { display: block; width: 100%; height: 100%; max-height: 78vh; object-fit: contain; background: #080808; }
.media-shell video { min-height: 520px; }
canvas.markup { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
canvas.markup.video-markup { bottom: 58px; height: auto; }
canvas.markup.eraser-active { cursor: cell; }
canvas.markup.pointer-mode { pointer-events: none; cursor: default; }
.paint-toolbar { z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; background: #f8f1e4; border-bottom: 1px solid var(--line); }
.paint-toolbar .ghost { min-height: 36px; }
.color-swatch { width: 28px; height: 28px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px #8b7b62; }
.tool-size, .speed-control { display: inline-flex; align-items: center; gap: 6px; color: #33291f; font-size: 12px; font-weight: 800; }
.tool-size input { width: 90px; padding: 0; }
.speed-control select { width: auto; min-height: 36px; padding: 5px 8px; }
.media-error { margin: 0; padding: 10px 14px; background: #fee2e2; color: #991b1b; }
.media-box:fullscreen,.media-box.app-fullscreen { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
.media-box:fullscreen .paint-toolbar,.media-box.app-fullscreen .paint-toolbar { position:absolute; top:max(8px,env(safe-area-inset-top)); left:8px; right:8px; z-index:12; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; padding:6px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(5,8,8,.48); backdrop-filter:blur(10px); opacity:.48; transition:opacity .18s ease; }
.media-box:fullscreen .paint-toolbar:hover,.media-box:fullscreen .paint-toolbar:focus-within,.media-box.app-fullscreen .paint-toolbar:hover,.media-box.app-fullscreen .paint-toolbar:focus-within { opacity:1; }
.media-box:fullscreen .paint-toolbar > *,.media-box.app-fullscreen .paint-toolbar > * { flex: 0 0 auto; }
.media-box:fullscreen .paint-toolbar .ghost,.media-box.app-fullscreen .paint-toolbar .ghost { min-height:32px; padding:5px 8px; font-size:11px; }
.media-box:fullscreen .paint-toolbar .color-swatch,.media-box.app-fullscreen .paint-toolbar .color-swatch { width:22px; height:22px; }
.media-box:fullscreen .paint-toolbar input[type="color"],.media-box.app-fullscreen .paint-toolbar input[type="color"] { width:28px; height:28px; min-height:28px; padding:2px; }
.media-box:fullscreen .paint-toolbar .tool-size input,.media-box.app-fullscreen .paint-toolbar .tool-size input { width:64px; }
.media-box:fullscreen .media-shell,.media-box.app-fullscreen .media-shell { min-height: 0; touch-action:none; }
.media-box:fullscreen .media-shell img,.media-box:fullscreen .media-shell video,.media-box.app-fullscreen .media-shell img,.media-box.app-fullscreen .media-shell video { max-height:100dvh; }
body.app-fullscreen-open { overflow:hidden; }
.app-fullscreen { position:fixed!important; inset:0!important; z-index:1000!important; width:100vw!important; height:100dvh!important; margin:0!important; background:#050707!important; }
.dashboard-filters { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; }
.dashboard-filters > h3 { margin-right: auto; align-self: center; }
.dashboard-filters label { min-width: 160px; }
.attendance-hero { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(135deg, #fff, #fff6df 55%, #e7f4f1); }
.attendance-punch { display: flex; gap: 6px; flex-wrap: nowrap; }
.attendance-punch button { min-height: 34px; padding: 5px 10px; white-space: nowrap; }
.attendance-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.staff-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; }
.staff-card { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.staff-avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #fff; font-weight: 900; background: linear-gradient(135deg, var(--teal), var(--gold)); }
.status-pill { padding: 6px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; }
.status-pill.online { color: #075d46; background: #d9f8eb; }
.status-pill.offline { color: #6f6254; background: #f1ece5; }
.staff-work, .staff-last { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 6px; color: var(--muted); font-size: 11px; }
.staff-work { display: grid; justify-content: initial; }
.staff-last span { flex: 1; padding: 6px; border-radius: 7px; background: #f8f1e4; }
.attendance-timeline { display: grid; gap: 4px; }
.attendance-timeline > div { display: grid; grid-template-columns: 14px minmax(140px,1fr) 80px auto; gap: 10px; align-items: center; padding: 10px; border-bottom: 1px solid var(--line); }
.timeline-dot { width: 9px; height: 9px; border-radius: 50%; background: #9a8f80; }
.timeline-dot.in { background: #16a36a; box-shadow: 0 0 0 4px #d9f8eb; }
.timeline-dot.out { background: #d45a4f; box-shadow: 0 0 0 4px #fee7e4; }
.ad-slot:empty { display: none; }
.ad-slot > span { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.pricing-hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: stretch; padding: clamp(20px, 4vw, 34px); border: 1px solid rgba(201,154,69,.35); border-radius: 8px; background: linear-gradient(135deg, #15100b, #123b38 58%, #fff4d8); color: #fff; box-shadow: var(--shadow); overflow: hidden; position: relative; }
.pricing-hero::after { content: ""; position: absolute; inset: -35% -20%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent); animation: sheen 8s ease-in-out infinite; pointer-events: none; }
.pricing-hero > * { position: relative; z-index: 1; }
.pricing-hero h3 { font-size: clamp(26px, 4vw, 48px); max-width: 920px; }
.pricing-hero p { color: #e8efe9; line-height: 1.65; max-width: 920px; }
.payment-pulse { display: grid; gap: 8px; align-content: center; padding: 18px; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; background: rgba(255,255,255,.12); backdrop-filter: blur(12px); animation: pulseGlow 2.8s ease-in-out infinite; }
.payment-pulse span { color: #f3dca0; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.payment-pulse b { font-size: 24px; }
.payment-pulse small { color: #d7e5df; line-height: 1.5; }
.pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.pricing-card { padding: 18px; display: grid; gap: 12px; align-content: start; position: relative; overflow: hidden; }
.pricing-card.featured { border-color: var(--gold); box-shadow: var(--glow); }
.pricing-card.featured::before { content: "Recommended"; position: absolute; top: 14px; right: 14px; min-height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: #17110b; color: #f4d28a; font-size: 12px; font-weight: 800; }
.pricing-card strong { font-size: 28px; }
.billing-stack { display: grid; gap: 9px; }
.plan-period-card { grid-template-rows:auto auto auto auto auto 1fr auto auto auto; }
.plan-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.plan-offer { padding:5px 9px; border-radius:999px; background:#123b38; color:#fff7dc; font-size:11px; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.plan-price { display:flex; align-items:baseline; gap:9px; padding:12px 0 4px; border-bottom:1px solid rgba(153,116,48,.18); }
.plan-price strong { color:#113f35; font-size:clamp(30px,4vw,42px); line-height:1; }
.plan-price span,.plan-period-copy { color:var(--muted); font-size:13px; }
.plan-period-copy { min-height:40px; margin:0; line-height:1.5; }
.plan-benefits { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.plan-benefits li { position:relative; padding-left:24px; color:#34483f; line-height:1.45; }
.plan-benefits li::before { content:"✓"; position:absolute; left:0; top:0; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#e5f6ed; color:#0b7956; font-size:11px; font-weight:900; }
.plan-buy-button { width:100%; justify-content:center; }
.plan-free-note { padding-top:10px; border-top:1px solid rgba(153,116,48,.16); }
.locked-plan-summary { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; align-items:center; padding:12px; border:1px solid rgba(186,142,58,.28); border-radius:12px; background:linear-gradient(135deg,rgba(255,248,229,.96),rgba(243,253,248,.96)); }
.locked-plan-summary .nav-lock { grid-row:1 / span 2; color:#765716; background:#fff7db; border-color:#d9b75f; font-size:9px; }
.locked-plan-summary b { color:var(--ink); }
.locked-plan-summary small { color:var(--muted); }
.client-entitlement { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:10px 0 14px; }
.client-entitlement span { display:grid; gap:2px; min-width:0; padding:8px 9px; border:1px solid rgba(18,153,105,.16); border-radius:10px; background:rgba(246,253,249,.88); }
.client-entitlement b { overflow-wrap:anywhere; font-size:13px; line-height:1.2; }
.client-entitlement small { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.04em; }
.client-limit-summary { margin-top:8px; }
.client-create-confirm ul { margin:10px 0; padding-left:20px; text-align:left; }
@media (max-width: 640px) { .client-entitlement { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; } .client-entitlement span { min-height:54px; align-content:center; padding:7px 6px; } .client-entitlement b { font-size:11px; } .client-entitlement span:last-child { grid-column:auto; } }
.prompt-gallery-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; overflow:hidden; background:linear-gradient(135deg,rgba(240,255,249,.96),rgba(255,248,229,.96)); }
.prompt-gallery-mark { width:76px; aspect-ratio:1; flex:0 0 auto; display:grid; place-items:center; border-radius:24px; color:#fff; font:900 24px/1 Georgia,serif; background:linear-gradient(135deg,#075b49,#d6a52f); box-shadow:0 16px 34px rgba(7,91,73,.22); transform:rotate(5deg); }
.prompt-preview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.prompt-preview-card { overflow:hidden; border:1px solid rgba(180,132,32,.22); border-radius:16px; background:rgba(255,255,255,.92); box-shadow:0 10px 26px rgba(30,57,47,.08); }
.prompt-preview-art { min-height:132px; position:relative; display:grid; place-items:center; color:#fff; font-size:38px; isolation:isolate; }
.prompt-preview-art::after { content:""; position:absolute; inset:0 50% 0 0; z-index:-1; background:rgba(10,31,27,.42); backdrop-filter:grayscale(1); }
.prompt-preview-art b { width:62px; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(255,255,255,.58); border-radius:50%; background:rgba(255,255,255,.14); backdrop-filter:blur(8px); }
.prompt-image-comparison { min-height:132px; display:grid; grid-template-columns:1fr 1fr; background:#112c25; }
.prompt-comparison-only { min-height:132px; position:relative; margin:0; overflow:hidden; background:#112c25; }.prompt-comparison-only img { width:100%; height:100%; min-height:132px; display:block; object-fit:cover; }.prompt-comparison-only figcaption { position:absolute; top:10px; left:10px; padding:4px 8px; border-radius:99px; color:#fff; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; background:rgba(9,35,29,.7); }
.prompt-image-comparison figure { min-width:0; position:relative; margin:0; overflow:hidden; }.prompt-image-comparison figure + figure { border-left:2px solid rgba(255,255,255,.9); }
.prompt-image-comparison img { width:100%; height:100%; min-height:132px; display:block; object-fit:cover; }.prompt-image-comparison figcaption { position:absolute; top:10px; left:10px; padding:4px 8px; border-radius:99px; color:#fff; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; background:rgba(9,35,29,.7); }
.prompt-before,.prompt-after { position:absolute; top:10px; padding:4px 8px; border-radius:99px; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; background:rgba(9,35,29,.66); }
.prompt-before { left:10px; }.prompt-after { right:10px; }
.prompt-art-1 { background:linear-gradient(120deg,#402334,#d6a35d); }.prompt-art-2 { background:linear-gradient(120deg,#5d5548,#bea97f); }.prompt-art-3 { background:linear-gradient(120deg,#182f45,#b76b4e); }.prompt-art-4 { background:linear-gradient(120deg,#164d43,#bca16c); }.prompt-art-5 { background:linear-gradient(120deg,#2d2b42,#a9743b); }.prompt-art-6 { background:linear-gradient(120deg,#6f263e,#e0a42f); }
.prompt-preview-copy { display:grid; gap:7px; padding:14px; }.prompt-preview-copy h3,.prompt-preview-copy p { margin:0; }.prompt-preview-copy p { color:var(--muted); font-size:13px; line-height:1.45; }
.prompt-lock-row { display:flex; align-items:center; gap:8px; min-height:38px; padding:8px 10px; border:1px dashed rgba(7,91,73,.26); border-radius:10px; color:#31594f; font-size:12px; font-weight:800; background:repeating-linear-gradient(135deg,rgba(232,246,240,.88),rgba(232,246,240,.88) 8px,rgba(247,251,248,.92) 8px,rgba(247,251,248,.92) 16px); }
.prompt-lock { width:25px; aspect-ratio:1; display:grid; place-items:center; border-radius:8px; color:#fff; background:#075b49; }.prompt-app-status { color:#765716; font-size:12px; font-weight:900; }.prompt-website-link { justify-self:start; text-decoration:none; }
.prompt-gallery-note { text-align:center; }
.prompt-category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.prompt-category-card { padding:0; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; text-align:left; border:1px solid rgba(180,132,32,.24); border-radius:18px; background:rgba(255,255,255,.94); box-shadow:0 10px 28px rgba(30,57,47,.09); color:var(--text); cursor:pointer; }
.prompt-category-card .prompt-image-comparison,.prompt-category-card .prompt-comparison-only,.prompt-category-card .prompt-preview-art { grid-column:1/-1; width:100%; min-height:130px; }
.prompt-category-card>span { display:grid; gap:3px; padding:0 0 14px 16px; }.prompt-category-card>span b { font-size:17px; }.prompt-category-card>span small { color:var(--muted); }
.prompt-category-card>i { padding:0 16px 14px 0; font-size:24px; font-style:normal; color:var(--gold); }
.prompt-category-head { display:flex; align-items:center; gap:14px; }.prompt-category-head h3,.prompt-category-head p { margin:0; }
.owner-prompt-studio { border-color:rgba(7,91,73,.28); background:linear-gradient(140deg,rgba(242,255,250,.98),rgba(255,250,236,.96)); }
.owner-prompt-form .wide { grid-column:1/-1; }.owner-prompt-form textarea { resize:vertical; min-height:140px; }.owner-prompt-form small { color:var(--muted); }
.owner-prompt-import { grid-column:1/-1; display:grid; gap:12px; margin-top:18px; padding-top:18px; border-top:1px solid rgba(7,91,73,.18); }
.owner-prompt-import h4 { margin:0 0 4px; font:800 18px/1.2 Georgia,serif; color:var(--ink); }
.owner-prompt-import-grid { align-items:start; }.owner-prompt-import-grid small { display:block; margin-top:5px; color:var(--muted); line-height:1.4; }
.prompt-csv-status { min-height:42px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.68); border:1px dashed rgba(7,91,73,.24); }
.owned-prompt-modal textarea { width:100%; min-height:230px; resize:vertical; font-family:inherit; line-height:1.55; }
@media (max-width: 900px) { .prompt-preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 900px) { .prompt-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .prompt-gallery-mark { width:58px; border-radius:18px; }.prompt-preview-grid,.prompt-category-grid { grid-template-columns:1fr; }.prompt-preview-art { min-height:116px; }.owner-prompt-form .wide { grid-column:auto; }.prompt-category-head { align-items:flex-start; flex-direction:column; } }
.billing-option { width: 100%; min-height: 84px; display: grid; gap: 4px; text-align: left; padding: 12px; border: 1px solid #ead6a7; border-radius: 8px; background: linear-gradient(180deg, #fffdf8, #fff7e8); color: var(--ink); }
.billing-option:hover { border-color: var(--gold); background: #fff9e9; box-shadow: var(--glow); }
.billing-option span { color: #775110; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.billing-option b { font-size: 24px; }
.billing-option small { color: var(--muted); line-height: 1.4; }
.specification-panel { background: linear-gradient(180deg, #fff, #f8f9f5); }
.spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.spec-grid span { min-height: 112px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fffaf1; color: var(--muted); line-height: 1.5; }
.spec-grid b { color: var(--ink); }
.locked-panel { border-color: #e5c37d; background: linear-gradient(135deg, #fff9e8, #fff); box-shadow: var(--glow); }
.payment-modal { display: grid; gap: 14px; padding-right: 24px; }
.checkout-summary { display: grid; gap: 5px; padding: 16px; border: 1px solid #d8bd7a; border-radius: 10px; background: linear-gradient(145deg,#fffdf8,#fff5dc); }
.checkout-summary span { color: #765316; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.checkout-summary b { font-size: 28px; }
.checkout-summary small { color: var(--muted); }
.promo-entry { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: end; }
.promo-entry button { min-width: 84px; }
.promo-scope { display:flex; flex-wrap:wrap; gap:8px 14px; grid-column:1 / -1; margin:0; padding:10px 12px; border:1px solid var(--line); border-radius:10px; }
.promo-scope legend { padding:0 5px; color:var(--muted); font-size:12px; }
.promo-scope .checkline { margin:0; }
.promo-management-list { display:grid; gap:8px; margin-top:14px; }
.promo-management-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; }
.promo-management-row small { display:block; margin-top:4px; color:var(--muted); }
.promo-threshold-form { grid-template-columns:minmax(180px,260px) minmax(240px,1fr) auto; }
.promo-filters { display:grid; grid-template-columns:minmax(160px,1fr) minmax(170px,.7fr) minmax(150px,.6fr); align-items:end; margin-bottom:12px; }
.promo-offer-modal { display:grid; gap:14px; }
.promo-offer-code { color:#855d15; letter-spacing:.06em; }
.promo-offer-modal .hint { font-size:11px; }
.promo-offer-modal { --festival-a:#ffe2a0; --festival-b:#17735d; position:relative; overflow:hidden; border-radius:18px; padding:20px; background:radial-gradient(circle at 85% 8%,var(--festival-a),transparent 38%),linear-gradient(145deg,#fffdf7,#eef7f2); border:1px solid #dccca6; box-shadow:0 18px 42px #07352b24; }
.festival-diwali { --festival-a:#ffc970; --festival-b:#a55226; }
.festival-pongal { --festival-a:#f5d77b; --festival-b:#278555; }
.festival-newyear { --festival-a:#a6d5ff; --festival-b:#4a56a2; }
.promo-art { position:absolute; right:14px; top:8px; width:82px; height:82px; display:grid; place-items:center; color:var(--festival-b); pointer-events:none; }
.promo-art span { font-size:56px; line-height:1; filter:drop-shadow(0 4px 4px #0002); animation:festival-bloom 2.8s ease-in-out infinite; }
.promo-art i { position:absolute; width:5px; height:5px; border-radius:50%; background:#d9a741; animation:festival-spark 2.4s ease-in-out infinite; }
.promo-art i:nth-of-type(1){left:4px;top:18px}.promo-art i:nth-of-type(2){right:5px;bottom:16px;animation-delay:.7s}.promo-art i:nth-of-type(3){left:17px;bottom:4px;animation-delay:1.4s}
.promo-offer-modal h3 { max-width:calc(100% - 65px); margin:0; font-size:clamp(22px,5vw,30px); }
.promo-discount { display:flex; align-items:center; gap:12px; margin:4px 0; color:var(--festival-b); }
.promo-discount strong { font-size:clamp(40px,11vw,62px); line-height:1; }
.promo-discount span { font-size:15px; font-weight:800; line-height:1.2; }
.promo-current-plan,.promo-code-card { display:grid; gap:4px; padding:10px 12px; border-radius:12px; background:#ffffffc9; border:1px solid #d8e4da; }
.promo-current-plan small,.promo-code-card small { color:var(--muted); }
.promo-code-card strong { color:var(--festival-b); font-size:20px; letter-spacing:.1em; overflow-wrap:anywhere; }
.promo-expiry { margin:0; color:#873824; }
@keyframes festival-bloom { 50% { transform:scale(1.1) rotate(8deg); } }
@keyframes festival-spark { 50% { transform:translateY(-7px); opacity:.3; } }
@media (prefers-reduced-motion:reduce) { .promo-art span,.promo-art i { animation:none; } }
.gallery-export-dialog { width:min(92vw,440px); border:1px solid #cadfd4; border-radius:18px; padding:18px; background:linear-gradient(150deg,#fffdf6,#eef8f3); box-shadow:0 20px 45px #063c312e; }
.drive-sync-dialog { width:min(92vw,420px); border:1px solid #9bd9be; border-radius:18px; padding:20px; background:linear-gradient(145deg,#ffffff,#eaf8f0); color:var(--ink); box-shadow:0 22px 55px #063c3140; }
.drive-sync-dialog::backdrop { background:#041e1780; backdrop-filter:blur(5px); }
.drive-sync-dialog .export-art { display:grid; place-items:center; width:50px; height:50px; border-radius:15px; background:linear-gradient(145deg,#12614f,#28a878); color:#fff; font-size:26px; }
.gallery-export-dialog::backdrop { background:#041e17a8; }
.gallery-export-dialog h3 { margin:4px 0 6px; }
.gallery-export-dialog .export-art { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:#12614f; color:#fff; font-size:30px; box-shadow:0 5px 14px #12614f42; }
.export-category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0; }
.export-category-grid button { display:flex; justify-content:space-between; gap:6px; min-width:0; }
.export-format { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; }
.export-format label { display:flex; align-items:center; gap:5px; padding:7px 9px; border:1px solid #c6d8ce; border-radius:9px; background:#fff; }
.legal-notice { padding: 14px; border-left: 4px solid var(--gold); border-radius: 8px; background: #f8f3e8; }
.legal-notice p { margin: 6px 0 0; color: var(--muted); line-height: 1.55; }
.legal-check { align-items: flex-start; line-height: 1.55; }
.legal-check input { margin-top: 5px; flex: 0 0 auto; }
.legal-check a, .legal-footer a, .legal-document a { color: #916516; font-weight: 800; }
.legal-footer { display: flex; justify-content: space-between; gap: 16px; padding: 14px clamp(18px,4vw,54px); border-top: 1px solid rgba(201,154,69,.24); background: #15110c; color: #e8dcc3; font-size: 12px; }
.legal-footer nav { display: flex; flex-wrap: wrap; gap: 14px; }
.legal-footer a { color: #f2d58c; }
.legal-page { min-height: 100vh; margin: 0; padding: 36px 18px; background: radial-gradient(circle at top,#302112,#0f0d0a 62%); }
.legal-document { max-width: 900px; margin: auto; padding: clamp(24px,5vw,56px); border: 1px solid rgba(222,184,96,.45); border-radius: 16px; background: #fffdf8; box-shadow: 0 28px 80px rgba(0,0,0,.35); color: #26332f; }
.legal-document h1 { color: #684817; font-size: clamp(30px,5vw,52px); }
.legal-document h2 { margin-top: 28px; color: #173c38; }
.legal-document p { line-height: 1.72; }
.ad-slot { min-height: 96px; border: 1px solid rgba(18,153,105,.15); border-radius: 12px; display: grid; place-items: center; color: var(--muted); background: #fffdf8; overflow:hidden; }
.mini-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mini-metrics span { min-height: 56px; display: grid; align-content: center; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fffaf1; color: var(--muted); font-size: 12px; }
.mini-metrics b { color: var(--ink); font-size: 18px; }
.inline-edit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 10px; border: 1px solid rgba(201,154,69,.22); border-radius: 8px; background: rgba(255,250,241,.72); }
.inline-edit-grid input { padding: 9px 10px; }
.workflow-tools { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 14px; align-items: end; }
.workflow-summary { min-height: 58px; display: grid; grid-template-columns: minmax(180px, 1fr) auto auto auto auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid rgba(201,154,69,.26); border-radius: 8px; background: linear-gradient(135deg, #fffdf8, #f7ead0); }
.workflow-summary span { display: grid; gap: 2px; color: var(--muted); font-size: 12px; }
.workflow-summary b { color: var(--ink); }
.workflow-item { padding: 0; overflow: hidden; }
.compact-summary { min-height: 70px; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,246,223,.82)); }
.workflow-item .compact-summary { cursor: pointer; }
.drive-auto-sync { align-items: flex-start; margin: 12px 0; padding: 12px; border: 1px solid rgba(10,89,72,.18); border-radius: 14px; background: rgba(230,249,240,.65); }
.drive-auto-sync span { display: grid; gap: 3px; }
.drive-auto-sync small { color: var(--muted); line-height: 1.4; }
.client-validity-banner { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 12px; padding:12px 16px; border:1px solid rgba(10,89,72,.2); border-radius:16px; background:linear-gradient(100deg,rgba(226,250,239,.96),rgba(255,246,218,.92)); color:var(--green-deep); }
.client-validity-banner span:first-child { display:grid; gap:2px; }
.client-validity-banner small { color:var(--muted); }
.client-validity-banner > span:last-child { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.client-validity-banner.expired { border-color:rgba(190,48,48,.3); background:#fff1ef; color:#a52b2b; }
.client-id-validity { display:block; margin-top:4px; color:var(--green-deep); }
.client-id-list { display:grid; gap:8px; }
.client-id-row { display:grid; grid-template-columns:minmax(150px,1.2fr) minmax(170px,1.4fr) minmax(150px,1fr) minmax(125px,.9fr) auto; gap:12px; align-items:center; padding:10px 12px; border:1px solid rgba(201,154,69,.3); border-radius:12px; background:linear-gradient(95deg,#fffdf8,#f5fbf8); }
.client-id-row>div { min-width:0; }
.client-id-row small { display:block; color:var(--muted); font-size:10px; }
.client-id-row b,.client-id-row span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.client-id-primary>b { font-size:15px; }
.client-id-time span { color:var(--muted); font-size:10px; }
.client-id-status { padding:7px 9px; border-radius:9px; background:#fff5df; color:#855309; }
.client-id-status.finished { background:#e9f8ef; color:#11653b; }
.client-id-status.partial { background:#eef4ff; color:#315e9c; }
.client-id-actions { display:flex; gap:6px; justify-content:flex-end; }
@media(max-width:850px) { .client-id-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; align-items:stretch; } .client-id-primary { grid-column:auto; padding:7px 9px; } .client-id-access,.client-id-time { padding:7px 9px; border:1px solid rgba(10,89,72,.1); border-radius:9px; background:rgba(255,255,255,.72); } .client-id-actions { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch; } .client-id-actions button { width:100%; min-height:38px; padding:7px 8px; } }
@media(max-width:520px) { .client-id-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7px; padding:9px; } .client-id-row b,.client-id-row span { white-space:normal; line-height:1.25; } .client-id-primary,.client-id-actions { grid-column:auto; } .client-id-actions { grid-column:1/-1; } }
.compact-main { min-width: 0; }
.compact-main h3, .compact-main p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expand-btn { width: 36px; height: 36px; border: 1px solid #ead09a; border-radius: 8px; background: #17110b; color: #f4d28a; font-weight: 900; box-shadow: 0 10px 22px rgba(23,17,11,.14); }
.workflow-details { display: grid; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid rgba(201,154,69,.22); animation: detailOpen .24s ease both; }
.task-step { min-width: 0; min-height: 42px; display: grid !important; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 6px !important; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.task-step span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 750; }
.task-step small { color: var(--muted); font-size: 9px; }
.task-step.completed { border-color: rgba(12,108,82,.35); background: #eef9f4; }
.task-step.current { border-color: rgba(201,154,69,.6); background: #fff8e8; }
.task-step.locked { opacity: .58; background: #f2f3f2; }
.dashboard-work-panel { padding: 9px; }
.account-usage-card { display:grid; gap:10px; overflow:hidden; background:linear-gradient(135deg,#fffdf7,#eff9f4); }
.account-usage-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.account-usage-head h3 { margin:3px 0 0; font-size:20px; }
.account-usage-head h3 small { font:500 12px/1.3 system-ui,sans-serif; color:var(--muted); }
.account-usage-head>strong { color:#087454; font-size:22px; }
.account-usage-track { width:100%; height:10px; overflow:hidden; border-radius:999px; background:#dce9e3; box-shadow:inset 0 1px 2px #19392d20; }
.account-usage-track>span { display:block; height:100%; min-width:2px; border-radius:inherit; background:linear-gradient(90deg,#0b795a,#5fc995); transition:width .35s ease; }
.account-usage-card.usage-warning { border-color:#d79835; background:linear-gradient(135deg,#fffaf0,#fff1d3); }
.account-usage-card.usage-warning .account-usage-track>span,.usage-limit-notice .account-usage-track>span { background:linear-gradient(90deg,#e5a129,#dc5a39); }
.usage-limit-notice { width:min(430px,calc(100vw - 48px)); }
.usage-pack-section { margin-top:18px; }
.usage-pack-card { display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:16px 24px; align-items:center; }
.usage-pack-card .plan-benefits { grid-column:1 / -1; margin:0; }
.usage-pack-buy { display:grid; justify-items:end; gap:10px; }
.usage-pack-buy .plan-price { margin:0; text-align:right; }
.usage-limit-art { display:grid; place-items:center; width:94px; height:82px; border-radius:32px 32px 32px 12px; background:linear-gradient(135deg,#ffe8a6,#ffb596); box-shadow:0 12px 30px #a8492928; animation:pulseGlow 2.2s ease-in-out infinite; }
.usage-limit-art span { display:grid; place-items:center; width:58px; height:58px; border:3px solid #9b482f; border-radius:50%; color:#8a3827; font-weight:900; }
.dashboard-work-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.work-status-card { min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); text-align: left; }
.work-status-card span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 800; }
.work-status-card b { flex: 0 0 auto; font-size: 19px; }
.work-status-card.active { box-shadow: 0 0 0 2px rgba(201,154,69,.28); }
.work-status-completed b { color: #0c6c52; }
.work-status-pending b { color: #a42a24; }
.work-status-urgent b { color: #b26a00; }
.dashboard-status-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.dashboard-status-list > button { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fffdf8; color: var(--ink); text-align: left; }
.dashboard-status-list span { min-width: 0; display: grid; gap: 2px; }
.dashboard-status-list b, .dashboard-status-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-status-list small { color: var(--muted); font-size: 10px; }
.dashboard-status-list strong { color: #a42a24; font-size: 11px; }
.payment-ledger { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(201,154,69,.28); border-radius: 10px; background: linear-gradient(145deg, #fffdf8, #f4f8f5); }
.payment-ledger h4 { margin: 0; }
.payment-entry { display: grid; grid-template-columns: .75fr 1.2fr 1fr 1.3fr auto; gap: 10px; align-items: end; }
.payment-entry button { min-height: 42px; }
.payment-history { display: grid; gap: 7px; }
.payment-history > div { display: grid; grid-template-columns: 32px minmax(150px, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.payment-history span { display: grid; gap: 2px; }
.payment-history small, .payment-history time { color: var(--muted); font-size: 12px; }
.payment-index { width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #173c38; color: #fff; font-weight: 900; }
.correction-strip { display: flex; gap: 10px; overflow-x: auto; }
.media-pill { min-width: 150px; min-height: 58px; display: grid; gap: 4px; text-align: left; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: #fff; color: var(--ink); }
.media-pill.active { border-color: var(--gold); box-shadow: var(--glow); background: #fff7e5; }
.media-pill span { color: var(--muted); font-size: 12px; }
.pen-hint { position: absolute; left: 12px; bottom: 12px; padding: 6px 9px; border-radius: 8px; background: rgba(20,15,10,.72); color: #fff3cf; font-size: 12px; pointer-events: none; }
.view-enter > * { animation: liftIn .36s cubic-bezier(.2,.8,.2,1) both; }
.view-enter > *:nth-child(2) { animation-delay: .04s; }
.view-enter > *:nth-child(3) { animation-delay: .08s; }
.view-enter .item, .view-enter .pricing-card, .view-enter .metric { animation: liftIn .38s cubic-bezier(.2,.8,.2,1) both; }
.view-enter .item:nth-child(2), .view-enter .pricing-card:nth-child(2), .view-enter .metric:nth-child(2) { animation-delay: .05s; }
.view-enter .item:nth-child(3), .view-enter .pricing-card:nth-child(3), .view-enter .metric:nth-child(3) { animation-delay: .1s; }
.view-enter .item:nth-child(4), .view-enter .pricing-card:nth-child(4), .view-enter .metric:nth-child(4) { animation-delay: .15s; }
@keyframes liftIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes detailOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sheen { 0%, 40% { transform: translateX(-120%); } 70%, 100% { transform: translateX(120%); } }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 rgba(201,154,69,0); } 50% { box-shadow: 0 0 34px rgba(201,154,69,.28); } }
@keyframes growthGradient { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes positivePulse { 0%,100% { transform: scale(.8); opacity: .6; } 50% { transform: scale(1.18); opacity: 1; } }
dialog { border: 1px solid #d5e5dd; padding: 0; border-radius: 18px; background:linear-gradient(145deg,#fffef9,#f0f8f4); color:var(--ink); box-shadow:0 24px 80px #062e3040; max-width: min(680px, calc(100vw - 28px)); }
.connection-status { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:1000; width:max-content; max-width:calc(100vw - 32px); padding:10px 16px; border:1px solid #e3c477; border-radius:14px; background:#fff8df; color:#644c18; box-shadow:0 8px 24px #192f2520; font-size:13px; pointer-events:none; }
.connection-status[hidden] { display:none; }
.studio-review-dialog { padding:24px; width:min(400px,calc(100vw - 28px)); text-align:center; }
.studio-review-dialog img { width:64px; height:64px; border-radius:16px; box-shadow:0 8px 24px #0c684926; }
.studio-review-dialog h3 { margin:12px 0 8px; font-size:24px; }
.studio-review-dialog p { line-height:1.5; }
.studio-review-dialog .review-stars { color:#b88118; font-size:36px; letter-spacing:6px; }
.studio-review-dialog button { margin:5px; min-height:42px; border-radius:12px; }
.studio-review-dialog button[data-review="open"] { display:block; width:100%; background:#08664e; color:white; }
.studio-review-dialog .review-hint,.studio-review-dialog .review-platform { font-size:12px; color:#577065; }
dialog::backdrop { background: rgba(17,24,23,.54); }
.modal-box { min-width: min(620px, calc(100vw - 28px)); padding: 22px; position: relative; display: grid; gap: 14px; }
.modal-close { position: absolute; top: 10px; right: 10px; border: 0; background: transparent; font-size: 24px; }
/* Shared popup language: compact illustration, clear content and accessible actions. */
dialog[open] { animation:studioDialogEnter .18s ease-out; max-height:calc(100dvh - 32px); overflow:auto; }
dialog::backdrop { backdrop-filter:blur(3px); }
.modal-box { min-width:0; width:min(620px,calc(100vw - 30px)); box-sizing:border-box; padding:26px; background:radial-gradient(ellipse at top left,#dff2e5 0,transparent 55%),linear-gradient(145deg,#fffdf6,#f4faf7); }
.modal-close { z-index:2; width:36px; height:36px; min-height:36px; padding:0; border-radius:50%; background:#ffffffc9; color:#234a3d; }
#modalContent>h3:first-child { padding-right:30px; display:flex; align-items:center; gap:12px; }
#modalContent>h3:first-child::before { content:'✦'; flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:14px; color:#09694f; background:linear-gradient(135deg,#d5eee2,#fff0c6); box-shadow:0 4px 12px #234b3510; }
#modalContent:has(input[type="file"])>h3:first-child::before { content:'↥'; }
#modalContent .row-actions { flex-wrap:wrap; gap:8px; }
#modalContent input,#modalContent select,#modalContent textarea { max-width:100%; box-sizing:border-box; }
.studio-notice { display:grid; justify-items:center; gap:18px; padding:16px 6px 4px; text-align:center; }
.studio-notice h3 { margin:0; font-family:inherit; font-size:18px; line-height:1.5; overflow-wrap:anywhere; }
.studio-notice-art { display:grid; place-items:center; width:88px; height:76px; border-radius:28px 28px 28px 12px; background:linear-gradient(135deg,#bde5d1,#fff0bb); box-shadow:inset 0 0 0 1px #ffffff80,0 8px 24px #175a3820; transform:rotate(-5deg); }
.studio-notice-art span { display:grid; place-items:center; width:42px; height:42px; border:2px solid #227559; border-radius:50%; font:bold 28px Georgia,serif; color:#17674e; transform:rotate(5deg); }
.studio-notice button { min-width:120px; min-height:44px; border-radius:12px; }
@keyframes studioDialogEnter { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { dialog[open] { animation:none; } }
@media(max-width:480px) { .modal-box { padding:20px 16px; } .studio-notice h3 { font-size:16px; } }
/* Device unlock dialogs share the compact visual language without exposing secrets. */
#biometricDialog,#mpinSetupDialog,#quickMpinDialog { width:min(390px,calc(100vw - 36px)); box-sizing:border-box; padding:24px; border:1px solid #c9ddd2; border-radius:22px; background:linear-gradient(145deg,#fffdf6,#edf8f1); color:#173f32; }
#biometricDialog::before,#mpinSetupDialog::before { content:'◉'; display:grid; place-items:center; width:48px; height:48px; margin:0 0 14px; border-radius:16px; color:#087857; background:linear-gradient(135deg,#c0ead6,#ffe6a3); font-size:28px; }
#mpinSetupDialog::before { content:'🔒'; font-size:24px; }
#biometricDialog h3,#mpinSetupDialog h3,#quickMpinDialog h3 { margin:0 0 12px; font-size:20px; }
#biometricDialog .form-grid,#mpinSetupDialog .form-grid { display:grid; grid-template-columns:1fr; gap:12px; }
#biometricDialog input,#mpinSetupDialog input,#quickMpinDialog input { box-sizing:border-box; width:100%; }
dialog[open]::backdrop { animation:studioBackdropEnter .18s ease-out; }
@keyframes studioBackdropEnter { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { dialog[open]::backdrop { animation:none; } }
.help-bot { position: fixed; right: 18px; bottom: 18px; z-index: 12; }
.bot-toggle { min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: #17110b; color: #f4d28a; font-weight: 900; box-shadow: var(--shadow); }
.bot-panel { width: min(380px, calc(100vw - 36px)); padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fffdf8; box-shadow: var(--shadow); display: grid; gap: 12px; }
.bot-messages { max-height: 280px; overflow: auto; display: grid; gap: 10px; }
.bot-messages p { margin: 0; padding: 10px; border-radius: 8px; background: #f5ead6; color: var(--ink); line-height: 1.45; }
.bot-messages p.user { background: #e8f4f1; }
.bot-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

@media (max-width: 1050px) {
  .auth-view, .app-view, .correction-stage, .pricing-hero, .workflow-tools { grid-template-columns: 1fr; }
  body.nav-open { overflow: hidden; }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 31; width: min(86vw, 330px); height: 100dvh; padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); transform: translateX(-105%); transition: transform .26s cubic-bezier(.2,.8,.2,1); box-shadow: 24px 0 70px rgba(0,0,0,.34); }
  body.nav-open .sidebar { transform: translateX(0); }
  .sidebar nav { grid-template-columns: 1fr; }
  .mobile-menu-toggle, .mobile-close { display: inline-grid; place-items: center; }
  .mobile-menu-toggle { min-width: 46px; padding: 0; font-size: 22px; }
  .mobile-close { width: 42px; min-height: 42px; margin-left: auto; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; color: #fff; background: rgba(255,255,255,.08); font-size: 25px; }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 30; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(2,20,16,.58); opacity: 0; visibility: hidden; pointer-events: none; backdrop-filter: blur(3px); transition: opacity .22s ease, visibility .22s ease; }
  body.nav-open .nav-scrim { opacity: 1; visibility: visible; pointer-events: auto; }
  .metrics, .pricing, .attendance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-entry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-summary { grid-template-columns: minmax(180px, 1fr) repeat(2, auto); }
}

@media (max-width: 640px) {
  .dashboard-status-list { grid-template-columns: 1fr; }
  .two-col, .pricing, .kanban, .form-grid, .preview-grid, .spec-grid, .inline-edit-grid, .permission-grid, .payment-entry, .workflow-summary { grid-template-columns: 1fr; }
  .payment-history > div { grid-template-columns: 28px 1fr; }
  .payment-history time { grid-column: 2; }
  .swipe-stage { grid-template-columns: 1fr 1fr; grid-template-areas: "card card" "reject select" "wait wait"; min-height: 0; }
  .topbar { min-height: 76px; align-items: flex-start; flex-wrap: wrap; padding-top: max(14px, env(safe-area-inset-top)); }
  .topbar-heading { width: 100%; }
  .top-actions { width: 100%; padding-left: 58px; }
  .top-actions > button { flex: 1; min-width: 72px; }
  button, .chip, .ghost, .icon-btn, input, select { min-height: 44px; }
  .content { padding: 14px; padding-bottom: max(22px, env(safe-area-inset-bottom)); }
  .panel, .item, .pricing-card { padding: 14px; }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .panel-head .row-actions { width: 100%; }
  .panel-head .row-actions > button { flex: 1; }
  .auth-panel, .brand-panel { padding: 20px; }
  .brand-panel { gap: 14px; min-height: auto; }
  .brand-logo { width: 68px; height: 52px; }
  .brand-copy { font-size: 16px; line-height: 1.45; }
  .product-poster { display: none; }
  .feature-slide { min-height: 420px; grid-template-columns: 1fr; gap: 10px; padding: 18px; text-align: center; }
  .feature-art { width: min(170px, 52vw); }
  .feature-copy { gap: 7px; }
  .feature-copy b { font-size: 25px; }
  .feature-copy p { font-size: 14px; line-height: 1.45; }
  .fullscreen-shortcuts { width: calc(100% - 20px); justify-content: center; flex-wrap: wrap; border-radius: 14px; white-space: normal; text-align: center; }
  .attendance-hero { align-items: stretch; flex-direction: column; }
  .attendance-punch { align-items: center; flex-direction: row; width: 100%; }
  .attendance-punch button { flex: 1; }
  .attendance-timeline > div { grid-template-columns: 12px 1fr auto; }
  .attendance-timeline time { grid-column: 2 / -1; }
  .proof-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-toolbar { flex-wrap: nowrap; overflow-x: auto; position: sticky; top: 0; z-index: 7; overscroll-behavior-inline: contain; }
  .proof-toolbar > * { flex: 0 0 auto; }
  .proof-media { min-height: 300px; }
  .proof-media img { height: min(56vh, 560px); }
  .media-box { min-height: 480px; }
  .media-shell { min-height: min(62vh, 540px); }
  .media-shell video { min-height: min(58vh, 500px); }
  .paint-toolbar { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; }
  .paint-toolbar > * { flex: 0 0 auto; }
  .swipe-action { min-height: 56px; }
  .help-bot { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  h1 { font-size: 36px; }
}

@media (max-width: 640px) {
  .brand-panel { gap:10px; }
  .brand-top { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:10px; }
  .brand-top>div { min-width:0; }
  .brand-logo { width:64px; height:64px; max-width:64px; object-fit:contain; }
  .hero-rank { margin:0 0 5px; padding:5px 8px; border-radius:8px; font-size:9px; line-height:1.25; letter-spacing:.08em; }
  .brand-top h1 { font-size:clamp(27px,9vw,36px); line-height:1; white-space:nowrap; overflow-wrap:normal; }
  .feature-slider { border-radius:14px; }
  .feature-slide { min-height:0; grid-template-columns:86px minmax(0,1fr); gap:12px; align-items:center; padding:14px; text-align:left; }
  .feature-art { width:82px; margin:0; }
  .feature-art>span { font-size:34px; }
  .feature-copy { gap:4px; }
  .feature-copy small { font-size:9px; }
  .feature-copy b { font-size:18px; line-height:1.12; }
  .feature-copy p { font-size:11px; line-height:1.35; }
  .feature-slider-controls { gap:5px; padding:6px; }
  .feature-slider-controls>button { flex-basis:28px; width:28px; height:28px; min-height:28px; font-size:12px; }
  #featureDots { gap:3px; }
  #featureDots button { flex-basis:6px; width:6px; height:6px; min-height:6px; }
  #featureDots button.active { flex-basis:15px; width:15px; }
}

@media (hover: none) and (pointer: coarse) {
  button:hover, .metric:hover, .panel:hover, .item:hover, .pricing-card:hover { transform: none; }
  button:active { transform: scale(.98); }
}

@supports (height: 100dvh) {
  .auth-view, .app-view, .shell { min-height: 100dvh; }
  .proof-media:fullscreen, .media-box:fullscreen, .proof-media.app-fullscreen, .media-box.app-fullscreen { height: 100dvh; }
  .proof-media:fullscreen img, .proof-media.app-fullscreen img { height: 100dvh; }
}

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

@media (max-width: 900px) {
  .seo-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .public-use-cases,.public-cta,.workflow-showcase { grid-template-columns:1fr; }
}

@media (max-width: 560px) {
  .seo-feature-grid { grid-template-columns:1fr; }
  .public-discovery { padding:36px 16px; gap:30px; }
  .seo-feature-grid article { min-height:auto; }
}

.sales-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:16px; }
.sales-cards dl { margin:0; }
.sales-cards dl div { padding:8px 0; border-bottom:1px solid var(--border); }
.sales-cards dt { font-size:.8rem; opacity:.7; text-transform:capitalize; }
.sales-cards dd { margin:4px 0 0; overflow-wrap:anywhere; }
#salesFilters button, #salesFilters input, #salesFilters select { min-height:44px; }
.ad-slot:has(ins[data-ad-status="unfilled"]) { display:none; }
.plan-status-card { display:flex; align-items:center; justify-content:space-between; gap:12px; background:linear-gradient(135deg,#fffaf0,#f4ead4); }
.plan-status-card h3 { margin:3px 0 0; }
.plan-status-card strong { color:var(--gold-dark,#79551c); white-space:nowrap; }
.dashboard-banner-row:empty { display:none; }
.dashboard-banner-ad { min-height:72px; }
.metric-profit { border-color:rgba(21,128,61,.55); background:linear-gradient(145deg,#f3fff6,#e5f8e9); }
.metric-profit b,.metric-profit span { color:var(--green); }
.metric-pending { border-color:rgba(180,35,24,.45); background:linear-gradient(145deg,#fff8f7,#fde9e6); }
.metric-pending b,.metric-pending span { color:var(--red); }
.client-open-link { min-height:auto; padding:0; border:0; border-radius:0; background:transparent; color:var(--gold-dark,#79551c); font:inherit; font-weight:800; text-align:left; text-decoration:underline; }
.dashboard-table { width:100%; table-layout:auto; }
.dashboard-table th,.dashboard-table td { white-space:nowrap; }
.dashboard-project-line { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.dashboard-project-meta { display:inline; margin:0; color:var(--muted); font-size:10px; line-height:1.2; }
.editing-pending-panel .panel-head > b { color: var(--red); }
.pending-client-list { display: grid; gap: 7px; }
.pending-client-group { display: grid; gap: 7px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.pending-client-group > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pending-client-group > div:first-child span { min-width: 0; display: grid; gap: 2px; }
.pending-client-group small { color: var(--muted); font-size: 10px; }
.pending-client-group strong { color: var(--red); font-size: 15px; white-space: nowrap; }
.pending-record-links { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; overscroll-behavior-inline: contain; }
.pending-record-links button { flex: 0 0 auto; min-height: 32px; display: inline-flex; align-items: center; gap: 7px; font-size: 10px; }
.pending-record-links button b { color: var(--red); }
.cash-delete { width:28px; min-width:28px; min-height:28px; padding:0; border:1px solid rgba(159,39,39,.2); border-radius:8px; background:rgba(159,39,39,.06); color:#9f2727; font-size:20px; line-height:1; }

/* Royal cinematic experience */
:root {
  --royal-ink: #07110e;
  --royal-emerald: #0b4a3d;
  --royal-emerald-bright: #16866e;
  --royal-gold: #d8ad54;
  --royal-gold-light: #f5dda0;
  --royal-ivory: #fffaf0;
  --royal-shadow: 0 28px 80px rgba(3, 24, 20, .18);
}

body { background: radial-gradient(circle at 8% 2%, rgba(216,173,84,.17), transparent 28%), radial-gradient(circle at 96% 90%, rgba(11,118,94,.15), transparent 30%), linear-gradient(135deg, #f6f0e4, #fffdf7 45%, #edf7f2); }
h1, h2, h3, .side-brand-copy b, .intro-title strong { font-family: Georgia, "Times New Roman", serif; letter-spacing: -.025em; }
::selection { color: #fff; background: #9b742b; }

.pointer-aura { position: fixed; z-index: 100; width: 260px; height: 260px; left: 0; top: 0; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(245,221,160,.14), rgba(216,173,84,.045) 32%, transparent 70%); transform: translate3d(-50%, -50%, 0); transition: opacity .3s ease; mix-blend-mode: multiply; }
body.pointer-active .pointer-aura { opacity: 1; }

.intro { overflow: hidden; z-index: 1000; align-content: center; gap: 22px; isolation: isolate; background: radial-gradient(circle at 50% 46%, #174b3f 0, #09251f 34%, #040a08 74%); animation: royalIntroOut .9s cubic-bezier(.7,0,.2,1) 3.4s forwards; }
.intro::before { content: ""; position: absolute; inset: -45%; z-index: -2; opacity: .4; background: repeating-conic-gradient(from 0deg, transparent 0 8deg, rgba(220,177,88,.07) 9deg 10deg); animation: introRay 28s linear infinite; }
.intro::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,239,188,.14) 48%, transparent 64%); transform: translateX(-130%); animation: introCurtain 2.8s cubic-bezier(.2,.8,.2,1) .3s both; }
.intro-stars { position: absolute; inset: 0; opacity: .52; background-image: radial-gradient(circle, #f5dda0 0 1px, transparent 1.5px), radial-gradient(circle, #fff 0 1px, transparent 1.5px); background-position: 0 0, 38px 64px; background-size: 94px 94px, 137px 137px; mask-image: radial-gradient(circle, #000, transparent 78%); animation: starDrift 18s linear infinite; }
.intro-aurora { position: absolute; width: 52vw; height: 52vw; border-radius: 50%; filter: blur(80px); opacity: .18; }
.intro-aurora-left { left: -30vw; top: -18vw; background: #e5bb5e; animation: auroraBreath 5s ease-in-out infinite; }
.intro-aurora-right { right: -32vw; bottom: -24vw; background: #19af8d; animation: auroraBreath 5s ease-in-out 1.2s infinite; }
.intro-stage { width: min(88vw, 580px); min-height: 480px; perspective: 1200px; transform-style: preserve-3d; }
.intro-emblem { position: relative; z-index: 3; width: min(72vw, 390px); aspect-ratio: 1.25; display: grid; place-items: center; transform-style: preserve-3d; animation: emblemArrival 2.2s cubic-bezier(.16,1,.3,1) both; }
.intro-emblem::before, .intro-emblem::after { content: ""; position: absolute; inset: 14%; border: 1px solid rgba(245,221,160,.5); transform: rotate(45deg) translateZ(-30px); box-shadow: 0 0 48px rgba(216,173,84,.18), inset 0 0 38px rgba(216,173,84,.08); }
.intro-emblem::after { inset: 22%; border-color: rgba(255,255,255,.28); transform: rotate(45deg) translateZ(-10px); }
.intro-logo { position: relative; z-index: 3; width: 100%; max-height: 280px; filter: drop-shadow(0 34px 50px rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(216,173,84,.18)); animation: introLogoFloat 4s ease-in-out 1.5s infinite; transform: translateZ(70px); }
.intro-crown { position: absolute; z-index: 8; top: 2%; color: var(--royal-gold-light); font-size: 20px; text-shadow: 0 0 22px var(--royal-gold); animation: crownDrop 1.2s cubic-bezier(.16,1,.3,1) .5s both, crownGlow 2s ease-in-out 1.7s infinite; }
.intro-orbit { position: absolute; border-width: 1px; border-top-color: var(--royal-gold-light); border-right-color: rgba(216,173,84,.12); border-bottom-color: var(--royal-emerald-bright); }
.intro-orbit-outer { width: 76%; animation-duration: 8s; }
.intro-orbit-inner { width: 59%; animation: introOrbitReverse 5.5s linear infinite; }
.intro-title { position: absolute; z-index: 8; bottom: 10px; display: grid; justify-items: center; gap: 7px; color: #fff; text-align: center; animation: titleRise 1.15s cubic-bezier(.16,1,.3,1) 1.2s both; }
.intro-title small { color: var(--royal-gold-light); font-size: 10px; font-weight: 800; letter-spacing: .36em; }
.intro-title strong { font-size: clamp(34px, 6vw, 64px); font-weight: 500; text-shadow: 0 12px 28px rgba(0,0,0,.52); }
.intro-title span { color: #c9dbd4; font-size: 13px; letter-spacing: .1em; }
.royal-loader { width: min(62vw, 300px); height: 2px; overflow: hidden; background: rgba(255,255,255,.12); box-shadow: 0 0 0 1px rgba(216,173,84,.12); }
.royal-loader i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, var(--royal-gold-light), #fff, var(--royal-gold)); transform-origin: left; animation: royalLoad 2.7s cubic-bezier(.65,0,.2,1) .4s both; }
.intro-loading { margin: -8px 0 0; color: #b9cbc4; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; animation: titleRise .8s ease 1.2s both; }

.app-view { grid-template-columns: 260px 1fr; }
.sidebar { isolation: isolate; overflow-x: hidden; padding: 20px 18px; background: radial-gradient(circle at 10% 0%, rgba(240,198,106,.18), transparent 30%), radial-gradient(circle at 90% 90%, rgba(31,157,128,.22), transparent 30%), linear-gradient(165deg, #06110e, #0a3028 52%, #09231e); border-right: 1px solid rgba(235,205,137,.22); box-shadow: 26px 0 70px rgba(3,25,20,.2); perspective: 900px; }
.sidebar::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .32; background-image: linear-gradient(30deg, transparent 48%, rgba(255,255,255,.045) 49%, rgba(255,255,255,.045) 51%, transparent 52%), linear-gradient(-30deg, transparent 48%, rgba(216,173,84,.04) 49%, rgba(216,173,84,.04) 51%, transparent 52%); background-size: 34px 58px; pointer-events: none; }
.side-brand { min-height: 70px; gap: 11px; margin-bottom: 12px; padding: 8px 6px; }
.side-brand-emblem { position: relative; flex: 0 0 60px; height: 60px; display: grid; place-items: center; border: 1px solid rgba(235,205,137,.35); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(216,173,84,.05)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 30px rgba(0,0,0,.22); transform: rotateY(8deg); }
.side-brand-emblem::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(216,173,84,.25); border-radius: 13px; }
.side-brand img { position: relative; z-index: 1; width: 54px; height: 45px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.32)); }
.side-brand-copy { min-width: 0; display: grid; line-height: 1; }
.side-brand-copy small { color: var(--royal-gold-light); font-size: 9px; font-weight: 900; letter-spacing: .3em; }
.side-brand-copy b { overflow: hidden; color: #fffaf0; font-size: 23px; font-weight: 500; text-overflow: ellipsis; }
.side-brand-copy em { margin-top: 7px; color: #8fb2a6; font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .18em; }
.side-ornament { display: flex; align-items: center; gap: 9px; margin: 4px 5px 18px; color: var(--royal-gold); font-size: 8px; }
.side-ornament::before, .side-ornament::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(216,173,84,.55)); }
.side-ornament::after { transform: scaleX(-1); }
.sidebar nav { gap: 16px; transform-style: preserve-3d; }
.nav-group { display: grid; gap: 6px; transform-style: preserve-3d; }
.nav-group-title { display: flex; align-items: center; gap: 8px; padding: 0 10px 2px; color: #7eaa9c; font-size: 9px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.nav-group-title::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, rgba(127,175,159,.3), transparent); }
.nav-btn { position: relative; min-height: 48px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; overflow: hidden; padding: 7px 10px; border-radius: 13px; color: #cfe0da; transform-style: preserve-3d; transition: transform .24s cubic-bezier(.2,.8,.2,1), background .24s ease, border-color .24s ease, box-shadow .24s ease; }
.nav-btn::before { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.12), transparent 72%); transform: translateX(-70%); transition: opacity .2s ease, transform .45s ease; }
.nav-btn:hover::before, .nav-btn.active::before { opacity: 1; transform: translateX(70%); }
.nav-btn:hover { transform: translateX(4px) rotateY(-3deg); }
.nav-btn.active { color: #fffdf6; background: linear-gradient(110deg, rgba(216,173,84,.22), rgba(255,255,255,.09) 58%, rgba(22,134,110,.16)); border-color: rgba(239,206,132,.52); box-shadow: inset 3px 0 0 var(--royal-gold), inset 0 1px 0 rgba(255,255,255,.12), 0 14px 32px rgba(0,0,0,.22); transform: translateZ(20px); }
.nav-icon { position: relative; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; color: #e9c978; background: rgba(0,0,0,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.09); font-size: 16px; }
.nav-label { position: relative; z-index: 1; overflow: hidden; font-size: 13px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.nav-lock { position: relative; z-index: 1; padding: 4px 6px; border: 1px solid rgba(228,194,116,.3); border-radius: 999px; color: #e9c978; background: rgba(0,0,0,.16); font-size: 8px; font-weight: 900; letter-spacing: .05em; }
.side-footer { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; margin-top: 22px; padding: 12px; border: 1px solid rgba(216,173,84,.2); border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.side-footer-seal { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #cda44f; border-radius: 50%; color: #f7dea0; background: radial-gradient(circle, #785b21, #2f2718); font-family: Georgia, serif; box-shadow: 0 0 18px rgba(216,173,84,.16); }
.side-footer p { display: grid; gap: 4px; margin: 0; }
.side-footer b { color: #f7f0df; font-size: 11px; }
.side-footer small { color: #86aa9e; font-size: 9px; }
.side-platform-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin:12px 0 8px; }
.side-platform-links a { overflow:hidden; padding:7px 4px; border:1px solid rgba(216,173,84,.2); border-radius:9px; color:#e9d399; background:rgba(0,0,0,.12); font-size:9px; font-weight:800; text-align:center; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }
.side-platform-links a:hover { border-color:rgba(242,208,132,.58); background:rgba(216,173,84,.13); }
.sidebar .full { min-height: 45px; display: flex; justify-content: center; gap: 9px; border-radius: 13px; color: #d8e4df; background: rgba(0,0,0,.13); }

.topbar { background: linear-gradient(110deg, rgba(255,253,247,.9), rgba(243,250,246,.84)); border-bottom-color: rgba(155,116,43,.18); box-shadow: 0 12px 38px rgba(36,28,11,.07); }
.topbar::after { content: ""; position: absolute; left: clamp(16px,3vw,34px); right: clamp(16px,3vw,34px); bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(184,139,55,.55), transparent); }
.topbar h2 { color: #12251f; font-size: clamp(25px,3vw,36px); font-weight: 500; }
.topbar .eyebrow { color: #9a722b; letter-spacing: .14em; }
.workspace { background: radial-gradient(circle at 95% 6%, rgba(216,173,84,.09), transparent 24%); }
.auth-panel { position: relative; isolation: isolate; overflow: hidden; border-left: 1px solid rgba(174,132,50,.22); background: radial-gradient(circle at 88% 4%, rgba(216,173,84,.18), transparent 28%), linear-gradient(155deg, #fffdf8, #f7f1e5 72%, #edf7f2); }
.auth-panel::before { content: ""; position: absolute; z-index: -1; width: 360px; height: 360px; right: -210px; bottom: -180px; border: 1px solid rgba(155,116,43,.15); transform: rotate(45deg); box-shadow: 0 0 0 38px rgba(216,173,84,.025), 0 0 0 78px rgba(11,118,94,.02); }
.auth-panel .lang-row, .auth-panel .segmented, .auth-panel .auth-form { width: min(100%, 560px); margin-inline: auto; }
.auth-panel .auth-form { padding: clamp(18px,3vw,28px); border: 1px solid rgba(155,116,43,.2); border-radius: 20px; background: rgba(255,255,255,.68); box-shadow: 0 26px 70px rgba(52,42,22,.1), inset 0 1px 0 rgba(255,255,255,.92); backdrop-filter: blur(18px); }
.auth-panel input, .auth-panel select { min-height: 48px; border-color: rgba(129,105,59,.24); border-radius: 12px; background: rgba(255,255,255,.82); box-shadow: inset 0 1px 2px rgba(38,31,19,.035); }
.auth-panel label > span { color: #493d29; letter-spacing: .02em; }
.auth-panel .segmented { padding: 6px; border: 1px solid rgba(155,116,43,.16); border-radius: 14px; background: rgba(228,216,192,.52); }
.auth-panel .segmented button { border-radius: 10px; }
.auth-panel .chip { border-radius: 999px; background: rgba(255,255,255,.62); }
.metric, .panel, .item, .pricing-card { border-color: rgba(153,116,48,.18); background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(249,246,237,.95)); box-shadow: 0 18px 50px rgba(34,45,39,.08), inset 0 1px 0 rgba(255,255,255,.9); transform-style: preserve-3d; will-change: transform; }
.metric:hover, .panel:hover, .item:hover, .pricing-card:hover { border-color: rgba(186,142,58,.45); box-shadow: 0 28px 70px rgba(31,45,38,.14), 0 0 0 1px rgba(231,199,126,.1); }
.primary { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(115deg, #092a23, #0d715c 42%, #b98b35 78%, #e0bd69); background-size: 220% 100%; box-shadow: 0 14px 30px rgba(9,69,57,.25), inset 0 1px 0 rgba(255,255,255,.25); }
.primary:hover { background-position: 100% 0; box-shadow: 0 18px 38px rgba(9,69,57,.31), 0 0 20px rgba(216,173,84,.13); }
.chip, .segmented button, .ghost, .icon-btn { border-color: rgba(155,116,43,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.chip, .segmented button, .ghost, .icon-btn, .metric, .item, .pricing-card { position: relative; overflow: hidden; }
.touch-ripple { position: absolute; z-index: 8; width: 12px; height: 12px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.84), rgba(235,199,116,.45) 42%, transparent 70%); transform: translate(-50%,-50%) scale(0); animation: touchRipple .62s ease-out forwards; }
.royal-press { animation: royalPress .34s ease; }

@keyframes royalIntroOut { 0% { opacity: 1; filter: blur(0); } 70% { opacity: 0; filter: blur(5px); } 100% { opacity: 0; visibility: hidden; filter: blur(8px); } }
@keyframes emblemArrival { 0% { opacity: 0; transform: translateZ(-500px) rotateX(40deg) rotateY(-28deg) scale(.5); } 58% { opacity: 1; transform: translateZ(70px) rotateX(-3deg) rotateY(4deg) scale(1.05); } 100% { opacity: 1; transform: translateZ(0) rotateX(0) rotateY(0) scale(1); } }
@keyframes introLogoFloat { 0%,100% { transform: translateZ(70px) translateY(0) rotateY(-2deg); } 50% { transform: translateZ(90px) translateY(-7px) rotateY(3deg); } }
@keyframes crownDrop { from { opacity: 0; transform: translateY(-40px) rotate(45deg) scale(.4); } to { opacity: 1; transform: translateY(0) rotate(45deg) scale(1); } }
@keyframes crownGlow { 50% { filter: brightness(1.4); text-shadow: 0 0 34px #f0c763; } }
@keyframes titleRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes introOrbitReverse { to { transform: rotate(-360deg); } }
@keyframes introRay { to { transform: rotate(360deg); } }
@keyframes introCurtain { 0% { transform: translateX(-130%); } 60%,100% { transform: translateX(130%); } }
@keyframes starDrift { to { background-position: 94px 94px, -99px 201px; } }
@keyframes auroraBreath { 50% { opacity: .3; transform: scale(1.16); } }
@keyframes royalLoad { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes touchRipple { to { opacity: 0; transform: translate(-50%,-50%) scale(15); } }
@keyframes royalPress { 45% { filter: brightness(1.12); } }

@media (max-width: 1050px) {
  .app-view { grid-template-columns: 1fr; }
  .sidebar { width: min(88vw, 350px); }
}

@media (max-width: 640px) {
  .legal-footer { flex-direction: column; }
  .intro-stage { min-height: 410px; }
  .intro-title { bottom: 18px; }
  .intro-title small { letter-spacing: .2em; }
  .side-footer { margin-top: 18px; }
  .pointer-aura { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  .royal-tilt { transition: transform .16s ease-out, box-shadow .22s ease, border-color .22s ease; }
}

@media (prefers-reduced-motion: reduce) {
  .intro { animation: royalIntroOut .01ms linear .2s forwards !important; }
  .pointer-aura { display: none; }
}

/* Ultimate responsive royal interface */
.intro-rank { position:absolute; z-index:12; top:max(8vh,42px); margin:0; color:#f8dfa2; font-size:clamp(12px,2vw,19px); font-weight:900; letter-spacing:.28em; text-align:center; text-shadow:0 0 28px rgba(241,194,92,.72); animation:rankReveal .75s ease both, rankLift .8s ease 1.05s forwards; }
.intro-emblem { animation-delay:.85s; }
.intro-title { animation-delay:1.5s; }
@keyframes rankReveal { from { opacity:0; transform:scale(.8) translateY(14px); filter:blur(8px); } to { opacity:1; transform:scale(1); filter:blur(0); } }
@keyframes rankLift { to { opacity:.7; transform:translateY(-18px) scale(.84); } }

.busy-overlay { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:20px; background:rgba(3,13,11,.76); backdrop-filter:blur(14px) saturate(130%); }
.busy-overlay.hidden { display:none; }
.field-invalid { color:#a61b1b !important; }
.field-invalid input,.field-invalid select,.field-invalid textarea,input.field-invalid,input:user-invalid,select:user-invalid,textarea:user-invalid { border-color:#c62828 !important; box-shadow:0 0 0 3px rgba(198,40,40,.13) !important; }
.owner-insights .insights-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.owner-insights .insights-metrics { gap:7px; }
.owner-insights .insights-metrics .metric { min-height:58px; padding:7px 9px; }
.owner-insights .insights-metrics .metric b { font-size:22px; line-height:1; }
.owner-insights .insights-metrics .metric span { font-size:10px; line-height:1.15; }
.usage-platform-report { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
.usage-people { display:grid; gap:8px; padding:8px 0; }
.usage-person { min-width:0; padding:9px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.72); }
.usage-person h4,.usage-platform h5 { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:0; font-size:12px; }
.usage-person h4 span { min-width:0; overflow-wrap:anywhere; }
.usage-person h4 small { display:block; text-transform:capitalize; font-weight:normal; }
.usage-person h4>b { white-space:nowrap; color:#137357; }
.usage-platform h5 span { white-space:nowrap; color:#137357; }
.usage-platform { min-width:0; padding:9px; border:1px solid var(--line); border-radius:10px; background:#fffdf8; }
.usage-platform h4 { display:flex; justify-content:space-between; gap:6px; margin:0 0 6px; font-size:12px; }
.usage-platform h4 span { color:#137357; white-space:nowrap; }
.settings-data-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:12px 0; }
.settings-data-actions button { min-width:0; white-space:normal; }
.play-restore-action { margin:10px 0; display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.play-restore-action > span { display:grid; gap:1px; margin-right:auto; }
.play-restore-action small { color:var(--muted); max-width:34rem; }
.play-restore-action .tutorial-button { flex:0 0 22px; width:22px; min-width:22px; height:22px; min-height:22px; padding:0; }
.play-order-restore-dialog { width:min(92vw,31rem); border:1px solid var(--border); border-radius:22px; padding:0; background:var(--surface); color:var(--text); box-shadow:0 24px 70px rgba(13,48,41,.24); }
.play-order-restore-dialog::backdrop { background:rgba(7,28,24,.58); backdrop-filter:blur(5px); }
.play-order-restore-dialog form { padding:1.35rem; }
.id-media-sources { grid-column:1/-1; padding:9px 12px; border:1px solid var(--line); border-radius:10px; }
.id-media-sources summary { cursor:pointer; font-weight:700; }
.id-media-sources label { display:block; margin-top:9px; }
.id-media-sources .hint { margin:7px 0; font-size:12px; }
@media(max-width:680px) { .usage-platform-report { grid-template-columns:1fr; } }
@media(max-width:680px) { .usage-pack-card { grid-template-columns:1fr; } .usage-pack-buy { justify-items:stretch; } .usage-pack-buy .plan-price { text-align:left; } }
@media(max-width:760px) { .settings-security-grid { grid-template-columns:1fr; } }
.insights-platforms { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
.insights-platforms article { display:grid; gap:4px; padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.72); }
.insights-platforms b { text-transform:capitalize; }
.insights-platforms span { color:var(--muted); font-size:12px; }
.insight-usage-head { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-bottom:8px; }
.insight-usage-head h3 { margin:0; }
.insight-filters { display:grid; grid-template-columns:minmax(150px,1.5fr) repeat(2,minmax(105px,.7fr)); gap:6px; width:min(100%,560px); }
.insight-filters input,.insight-filters select { min-height:34px; padding:5px 8px; font-size:12px; }
.promo-wheel-modal { text-align:center; }
.promo-wheel-wrap { position:relative; width:min(72vw,280px); aspect-ratio:1; margin:10px auto 14px; }
.promo-wheel { width:100%; height:100%; display:grid; place-items:center; border:8px solid #f2d27d; border-radius:50%; background:conic-gradient(#0f725c 0 60deg,#d7a62f 60deg 120deg,#173f35 120deg 180deg,#e8c45e 180deg 240deg,#0c5948 240deg 300deg,#c68d1d 300deg); box-shadow:0 14px 32px rgba(0,0,0,.22); transition:transform 1.8s cubic-bezier(.12,.7,.12,1); }
.promo-wheel span { position:absolute; width:38%; color:#fff; font-size:10px; font-weight:900; line-height:1.1; text-align:center; text-shadow:0 1px 3px #000; transform-origin:132% 50%; }
.promo-wheel span:nth-child(1){transform:rotate(30deg)}.promo-wheel span:nth-child(2){transform:rotate(90deg)}.promo-wheel span:nth-child(3){transform:rotate(150deg)}.promo-wheel span:nth-child(4){transform:rotate(210deg)}.promo-wheel span:nth-child(5){transform:rotate(270deg)}.promo-wheel span:nth-child(6){transform:rotate(330deg)}
.promo-wheel-pointer { position:absolute; z-index:2; top:-4px; left:50%; width:0; height:0; border-left:13px solid transparent; border-right:13px solid transparent; border-top:28px solid #8b1d1d; transform:translateX(-50%); filter:drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.busy-card { width:min(88vw,350px); min-height:340px; display:grid; place-items:center; align-content:center; gap:14px; overflow:visible; padding:26px; border:1px solid rgba(242,208,132,.38); border-radius:28px; color:#fff; text-align:center; background:radial-gradient(circle at 50% 35%,rgba(34,139,113,.35),transparent 52%),linear-gradient(145deg,#071611,#0a3027); box-shadow:0 38px 100px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14); transform-style:flat; animation:busyCardIn .45s cubic-bezier(.2,.9,.2,1); }
.busy-card p { margin:0; color:#f1d38e; font-size:10px; font-weight:900; letter-spacing:.2em; }
.busy-card img { display:block; width:min(46vw,160px); height:min(46vw,160px); max-width:160px; max-height:160px; object-fit:contain; transform-origin:center; filter:drop-shadow(0 18px 24px rgba(0,0,0,.45)); animation:busyLogo 2.2s ease-in-out infinite; }
.busy-card b { color:#d8e8e1; font-size:13px; }
.busy-orbit { position:relative; width:104px; height:15px; display:flex; justify-content:center; gap:8px; }
.busy-orbit i { width:8px; height:8px; border-radius:50%; background:#e7c267; box-shadow:0 0 18px #e7c267; animation:busyDot 1.1s ease-in-out infinite; }
.busy-orbit i:nth-child(2){animation-delay:.14s}.busy-orbit i:nth-child(3){animation-delay:.28s}
@keyframes busyCardIn { from { opacity:0; transform:perspective(800px) rotateX(18deg) scale(.88); } }
@keyframes busyLogo { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-6px) scale(1.04); filter:drop-shadow(0 24px 28px rgba(0,0,0,.55)) brightness(1.08); } }
@keyframes busyDot { 50% { transform:translateY(-7px) scale(1.3); background:#fff3c4; } }

.otp-row { padding:14px; border:1px solid rgba(190,145,55,.3); border-radius:14px; background:rgba(246,231,194,.34); }
.password-reset { display:grid; gap:14px; padding-right:22px; }
.password-reset h2,.password-reset p { margin:0; }
.password-reset label { display:grid; gap:7px; font-weight:700; color:#493d29; }
.password-reset input { width:100%; min-height:48px; border:1px solid rgba(129,105,59,.3); border-radius:12px; padding:11px 13px; font:inherit; }
.password-reset .otp-row { display:grid; gap:14px; }
.password-reset .otp-row.hidden { display:none; }
.password-reset .error-text { color:#9f2727; font-weight:800; }
.gesture-hint { display:none; opacity:.28; transition:opacity .2s ease; }
.proof-media:fullscreen .gesture-hint,.media-box:fullscreen .gesture-hint,.proof-media.app-fullscreen .gesture-hint,.media-box.app-fullscreen .gesture-hint { display:flex; }
.proof-media:fullscreen:hover .gesture-hint,.media-box:fullscreen:hover .gesture-hint,.proof-media.app-fullscreen:hover .gesture-hint,.media-box.app-fullscreen:hover .gesture-hint { opacity:.58; }
.proof-media:fullscreen canvas.pointer-mode,.media-box:fullscreen .markup.pointer-mode,.proof-media.app-fullscreen canvas.pointer-mode,.media-box.app-fullscreen .markup.pointer-mode { pointer-events:none; }
.zoomable-media { transition:transform .16s ease; transform-origin:center; will-change:transform; }
.content,.workspace,.panel,.correction-stage { min-width:0; }
.panel { overflow:hidden; }
.table-wrap,.panel:has(table) { overflow-x:auto; }

@media (max-width: 1050px) {
  .sidebar { width:min(68vw,220px); padding:max(10px,env(safe-area-inset-top)) 9px max(10px,env(safe-area-inset-bottom)); }
  .sidebar nav { gap:6px; }
  .nav-btn { min-height:37px; padding:4px 7px; font-size:12px; }
  .nav-icon { width:26px; height:26px; font-size:12px; }
  .side-brand-emblem { flex-basis:44px; height:44px; }
  .side-brand img { width:38px; height:34px; }
  .side-brand-copy b { font-size:17px; }
}

/* Four-plan responsive purchase experience. */
.pricing-title { align-items:center; }
.pricing-title h3 { margin:2px 0 0; }
.secure-purchase { display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border-radius:999px; background:#e7f4ed; color:#08614c; font-size:12px; font-weight:800; }
.pricing.pricing-four { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:stretch; }
.pricing-four .pricing-card { min-height:320px; padding:20px; border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(241,248,242,.97)); }
.pricing-four .pricing-card::after { content:""; position:absolute; width:92px; height:92px; right:-34px; top:-38px; border-radius:50%; background:rgba(211,164,65,.14); animation:planGlow 3.8s ease-in-out infinite; pointer-events:none; }
.pricing-four .plan-card-head,.pricing-four .plan-price,.pricing-four .plan-period-copy,.pricing-four .plan-details,.pricing-four .plan-buy-button,.pricing-four .hint,.pricing-four h3,.pricing-four>.pricing-card>.eyebrow { position:relative; z-index:1; }
.pricing-four .plan-mini-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:12px; background:#fff0c7; color:#916210; font-weight:900; }
.pricing-four .plan-price { display:flex; align-items:baseline; gap:9px; }
.pricing-four .plan-price strong { color:#08614c; font-size:36px; }
.pricing-four .plan-period-copy { color:#506a60; }
.pricing-four .plan-buy-button { width:100%; margin-top:auto; border-radius:14px; background:linear-gradient(100deg,#064638,#158d68 55%,#e7bd55); box-shadow:0 10px 22px rgba(7,83,62,.18); }
.pricing-four .usage-pack-card { grid-template-columns:1fr; gap:12px; align-items:start; border-color:rgba(18,153,105,.28); }
@keyframes planGlow { 50% { transform:scale(1.16); opacity:.62; } }

.play-activation-dialog { width:min(520px,calc(100% - 28px)); max-width:520px; padding:0; border:0; border-radius:26px; background:transparent; color:#12251e; overflow:visible; }
.play-activation-dialog::backdrop { background:rgba(10,20,16,.62); backdrop-filter:blur(7px); }
.play-activation-card { padding:28px; border:1px solid rgba(18,153,105,.22); border-radius:26px; background:linear-gradient(145deg,#fffef9,#edf8f1); text-align:center; box-shadow:0 28px 80px rgba(5,31,24,.34); }
.play-activation-card h3 { margin:6px 0 8px; font-size:clamp(24px,5vw,34px); }
.activation-copy { margin:0 auto 16px; color:#5b6e66; line-height:1.55; }
.activation-orbit { position:relative; display:grid; place-items:center; width:76px; height:76px; margin:0 auto 15px; border-radius:24px; background:#e0f3e9; color:#087052; }
.activation-orbit>span { position:absolute; inset:-5px; border:3px solid transparent; border-top-color:#d4a33d; border-radius:29px; animation:activationSpin 1.15s linear infinite; }
.activation-orbit>b { font-size:28px; }
.activation-count { display:flex; justify-content:center; align-items:baseline; gap:7px; margin:8px 0; }
.activation-count>b { color:#087052; font-size:48px; line-height:1; }
.activation-count>span { color:#697b74; }
.activation-track { height:8px; margin:13px 0; border-radius:999px; background:#dce9e2; overflow:hidden; }
.activation-track>span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#087052,#e2b950); transition:width 1s linear; }
.activation-status { min-height:24px; color:#586b63; font-size:13px; }
.activation-action .primary { width:100%; margin-top:8px; border-radius:14px; }
.activation-entitlement { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:15px 0; }
.activation-entitlement>span { display:grid; gap:3px; padding:11px 8px; border-radius:14px; background:#fff; }
.activation-entitlement small { color:#667970; }
.activation-complete .activation-orbit>span { display:none; }
.activation-complete .activation-orbit { background:#d8f2e5; animation:activationDone .42s ease both; }
.activation-complete .activation-track>span { width:100%!important; }
@keyframes activationSpin { to { transform:rotate(360deg); } }
@keyframes activationDone { 50% { transform:scale(1.12); } }

.quick-mpin-form { display:grid; gap:14px; min-width:min(360px,calc(100vw - 64px)); padding:8px; text-align:center; }
.quick-mpin-form h3 { margin:0; }
.quick-mpin-form input { text-align:center; letter-spacing:.55em; font-size:24px; }
.quick-mpin-lock { display:grid; place-items:center; width:58px; height:58px; margin:0 auto; border-radius:19px; background:linear-gradient(135deg,#d9f1e5,#fff0c6); color:#08614c; font-size:22px; }
.device-unlock-actions { margin-bottom:8px; }

@media (max-width:700px) {
  .pricing.pricing-four { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .pricing-four .pricing-card,.pricing-four .usage-pack-card { min-height:0; display:flex; flex-direction:column; align-items:stretch; gap:7px; padding:11px; border-radius:15px; }
  .pricing-four>.pricing-card>.eyebrow,.pricing-four .plan-details,.pricing-four>.pricing-card>.hint { display:block; }
  .pricing-four .plan-card-head { margin:0 0 3px; }
  .pricing-four .plan-card-head .plan-mini-icon { display:none; }
  .pricing-four .plan-card-head .plan-offer { font-size:9px; padding:4px 6px; }
  .pricing-four .badge { font-size:9px; padding:4px 6px; }
  .pricing-four h3 { margin:2px 0; font-size:15px; line-height:1.18; }
  .pricing-four .plan-price { margin:2px 0; }
  .pricing-four .plan-price { display:grid; gap:0; }
  .pricing-four .plan-price strong { font-size:25px; }
  .pricing-four .plan-price span,.pricing-four .plan-period-copy,.pricing-four>.pricing-card>.hint { margin:0; font-size:10px; line-height:1.35; }
  .pricing-four .plan-details { margin:2px 0; }
  .pricing-four .plan-details summary { font-size:10px; }
  .pricing-four .plan-benefits { gap:4px; }
  .pricing-four .plan-benefits li { padding-left:15px; font-size:9px; line-height:1.3; }
  .pricing-four .plan-benefits li::before { width:12px; height:12px; font-size:8px; }
  .pricing-four .plan-buy-button { width:100%; min-width:0; min-height:40px; margin-top:auto; padding:8px 6px; font-size:10px; line-height:1.2; }
  .pricing-card.featured::before { top:8px; right:8px; min-height:20px; padding:0 6px; font-size:8px; }
  .pricing-title { align-items:flex-start; }
  .secure-purchase { min-height:30px; padding:0 9px; }
  .activation-entitlement { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-four .pricing-card::after,.activation-orbit>span,.activation-complete .activation-orbit { animation:none; }
  .activation-track>span { transition:none; }
}

@media (max-width: 640px) {
  .promo-threshold-form, .promo-filters { grid-template-columns:1fr; }
  .promo-management-row { align-items:flex-start; flex-direction:column; }
  .promo-management-row .row-actions { width:100%; }
  .promo-management-row .row-actions button { flex:1; }
}

@media (max-width: 640px) {
  html { width:100%; max-width:100%; overflow-x:clip; font-size:14px; }
  body,.shell,.auth-view,.brand-panel,.auth-panel { width:100%; max-width:100%; min-width:0; overflow-x:clip; }
  .intro-rank { top:max(7vh,34px); max-width:88vw; letter-spacing:.16em; }
  .intro-stage { width:min(94vw,430px); min-height:350px; }
  .intro-emblem { width:min(65vw,260px); }
  .intro-logo { max-height:180px; }
  .intro-title strong { font-size:32px; }
  .auth-view { grid-template-columns:1fr; }
  .brand-panel,.auth-panel { padding:clamp(16px,5vw,20px); }
  .brand-top { min-width:0; flex-wrap:wrap; gap:8px; }
  .brand-top>div { min-width:0; flex:1 1 190px; }
  .hero-rank { max-width:100%; padding:6px 9px; gap:5px; font-size:9px; white-space:normal; }
  .brand-logo { max-width:88px; }
  .platform-hub { gap:6px; }
  .platform-hub a { min-height:48px; grid-template-columns:22px 1fr; column-gap:5px; padding:6px; }
  .platform-hub a>span { width:22px; height:22px; border-radius:7px; font-size:10px; }
  .platform-hub b { font-size:10px; }
  h1 { max-width:100%; overflow-wrap:anywhere; font-size:28px; }
  .brand-copy { max-width:100%; overflow-wrap:anywhere; }
  .feature-slider { width:100%; max-width:100%; min-width:0; }
  .feature-track { min-width:0; }
  .feature-slide { width:100%; max-width:100%; min-width:100%; }
  .feature-slider-controls { max-width:100%; gap:7px; padding:10px 7px; }
  .feature-slider-controls>button { flex:0 0 34px; width:34px; height:34px; padding:0; }
  #featureDots { min-width:0; gap:4px; }
  #featureDots button { flex:0 1 7px; width:7px; height:7px; }
  #featureDots button.active { flex-basis:18px; width:18px; }
  .auth-panel .auth-form { padding:16px; border-radius:16px; }
  .two-col { grid-template-columns:1fr; }
  .metrics, .attendance-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .topbar { min-height:0; flex-wrap:wrap; align-items:center; gap:6px; padding:max(8px,env(safe-area-inset-top)) 10px 8px; }
  .topbar-heading { width:100%; flex:1 1 100%; gap:7px; }
  .topbar-heading>div { min-width:0; }
  .topbar h2 { overflow:hidden; font-size:21px; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }
  .topbar .eyebrow { overflow:hidden; max-width:42vw; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
  .top-actions { width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; padding-left:45px; }
  .top-actions .icon-btn,.top-actions .primary { min-width:0; min-height:38px; padding:7px 9px; border-radius:10px; font-size:10px; }
  .mobile-menu-toggle { width:38px; height:38px; }
  .content { padding:12px; }
  .panel,.item,.metric,.pricing-card { padding:9px; border-radius:12px; }
  .metric b { font-size:16px; line-height:1.2; }
  .metric span { font-size:10px; }
  .panel-head { align-items:flex-start; gap:10px; }
  .panel-head h3 { font-size:20px; }
  .row-actions { gap:7px; }
  button,.ghost,.primary,.chip { min-height:38px; padding:7px 10px; font-size:12px; }
  .form-grid { gap:9px; }
  .form-grid label, .auth-form label { gap:4px; font-size:12px; }
  .auth-panel .auth-form { gap:9px; }
  .dashboard-filters { gap:7px; padding:9px; }
  .dashboard-filters > h3 { flex:1 0 100%; margin:0 0 2px; }
  .dashboard-filters label { min-width:0; flex:1 1 45%; }
  .dashboard-filters input, .dashboard-filters select { min-height:38px; padding:7px 9px; }
  .dashboard-table { min-width:580px; font-size:9px; }
  .dashboard-table th, .dashboard-table td { padding:6px 4px; }
  .dashboard-table th { font-size:8px; letter-spacing:-.02em; }
  .dashboard-project-meta { font-size:8px; }
  .client-open-link { all:unset; display:inline; color:var(--gold-dark,#79551c); font-size:10px; font-weight:800; text-decoration:underline; white-space:nowrap; cursor:pointer; }
  .filters { flex-wrap:nowrap; gap:6px; overflow-x:auto; overscroll-behavior-inline:contain; padding:2px 0 6px; }
  .filters > button { flex:0 0 auto; min-height:34px; padding:6px 9px; font-size:11px; }
  .filters > label { flex:0 0 130px; margin-left:auto; }
  .filters select { min-height:34px; padding:5px 8px; font-size:11px; }
  .proof-counts { gap:8px; }
  .proof-count { min-height:76px; padding:10px; }
  .proof-count b { font-size:24px; }
  .proof-folders { gap:6px; }
  .proof-folder-chip { min-height:32px; padding:5px 8px; font-size:10px; }
  .proof-folder-chip small { min-width:17px; height:17px; font-size:9px; }
  .proof-toolbar,.paint-toolbar { position:static; flex-wrap:wrap; overflow:visible; gap:6px; padding:9px; }
  .proof-toolbar button,.paint-toolbar button { min-height:36px; padding:6px 9px; }
  .proof-toolbar input[type="color"],.paint-toolbar input[type="color"] { flex:0 0 36px; width:36px; min-width:36px; height:36px; min-height:36px; padding:2px; border-radius:50%; }
  .tool-size { width:100%; }
  .tool-size input { width:100%; }
  .swipe-stage { gap:8px; padding:8px 0; }
  .swipe-card { min-width:0; }
  .proof-media { min-height:220px; border-radius:12px; }
  .proof-media img { height:min(48vh,430px); }
  .swipe-action { min-height:42px; }
  .proof-note { grid-template-columns:1fr; }
  .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .photo { min-width:0; }
  .photo .row-actions { display:none; }
  .correction-stage { grid-template-columns:1fr; }
  .correction-strip { display:flex; overflow-x:auto; padding:9px; }
  .media-pill { flex:0 0 auto; max-width:180px; }
  .media-box { min-height:0; }
  .media-shell { min-height:min(48vh,420px); }
  .media-shell video { min-height:min(45vh,390px); }
  .pen-hint { opacity:.3; font-size:10px; }
  .fullscreen-shortcuts { bottom:max(10px,env(safe-area-inset-bottom)); width:auto; max-width:calc(100% - 32px); padding:6px 10px; border-radius:999px; font-size:10px; }
  .help-bot { right:-5px; bottom:max(8px,env(safe-area-inset-bottom)); }
  .bot-toggle { width:42px; height:42px; min-height:42px; padding:0; font-size:9px; opacity:.72; }
  .bot-toggle:focus-visible,.bot-toggle:active { opacity:1; }
  .bot-panel { right:0; bottom:58px; width:min(calc(100vw - 16px),360px); max-height:min(68dvh,520px); }
  .legal-footer nav { display:flex; flex-wrap:wrap; gap:10px; }
  .side-footer { display:none !important; }
}

/* Compact workflow pricing and payment controls without shrinking regular forms. */
.inline-edit-grid label,
.payment-entry label { gap: 3px; font-size: 11px; }
.inline-edit-grid input {
  min-height: 36px !important;
  height: 36px;
  padding: 6px 9px;
  font-size: 14px;
  border-radius: 7px;
}
.payment-entry input,
.payment-entry select {
  min-height: 36px !important;
  height: 36px;
  padding: 6px 9px;
  font-size: 14px;
  border-radius: 7px;
}
.mini-metrics { gap: 7px; }
.mini-metrics span { min-height: 46px; gap: 2px; padding: 7px 9px; font-size: 11px; }
.mini-metrics b { font-size: 16px; }
input[type="checkbox"] {
  appearance: auto;
  width: 18px !important;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  min-height: 18px !important;
  padding: 0 !important;
  margin: 0;
  flex: 0 0 18px;
  accent-color: #0c6c52;
}

.privacy-toggle { display: inline-grid; place-items: center; }
.privacy-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 640px) {
  .topbar { min-height: 52px; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; padding: 6px 10px; }
  .topbar-heading { width: auto; flex: 0 0 auto; }
  .topbar-heading > div { display: none; }
  .top-actions { width: auto; display: flex; flex: 0 0 auto; gap: 0; padding: 0; }
  .top-actions #profileBtn,
  .top-actions #upgradeBtn { display: none !important; }
  .top-actions #privacyBtn { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 9px; }
}

/* App-wide compact sizing shared by the website and the mobile webview. */
label { gap: 4px; font-size: 12px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
select,
textarea {
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 14px;
}
textarea { min-height: 68px; }
input[type="checkbox"], input[type="radio"] { margin: 0; }
.auth-panel .auth-form { gap: 9px; padding: 14px; border-radius: 14px; }
.auth-panel input:not([type="checkbox"]), .auth-panel select { min-height: 40px; padding: 7px 10px; border-radius: 8px; }
.auth-panel label { gap: 3px; font-size: 12px; }
.topbar { min-height: 68px; padding-block: 12px; }
.topbar h2 { font-size: clamp(22px, 2.4vw, 29px); }
.content { padding: clamp(12px, 2vw, 22px); gap: 12px; }
.panel, .item, .pricing-card { padding: 12px; border-radius: 11px; }
.item { gap: 7px; }
.panel-head { gap: 8px; margin-bottom: 9px; }
.panel-head h3 { font-size: 18px; }
.form-grid { gap: 8px; }
.table th, .table td { padding: 7px 8px; }
.dashboard-table { font-size: 11px; }
.dashboard-table th, .dashboard-table td { padding: 5px 6px; }
.metric { min-height: 76px; padding: 12px; }
.metric b { font-size: clamp(20px, 2.2vw, 28px); }
.metric span { font-size: 11px; }
.mini-metrics span { min-height: 42px; }
.auth-panel h2, .auth-panel h3 { font-size: 20px; }
.auth-panel .lang-row button, .auth-panel .segmented button { min-height: 34px; padding: 5px 8px; }
.dashboard-table button, .dashboard-table .chip { min-height: 30px; padding: 4px 7px; font-size: 11px; }
.panel h4, .item h4 { font-size: 15px; }
.payment-entry button, .form-grid button, .auth-form button, .panel-head .row-actions button,
.segmented button, .chip, .ghost { min-height: 36px; padding: 6px 10px; font-size: 12px; }
.nav-btn { min-height: 40px; padding: 6px 9px; font-size: 13px; }

@media (max-width: 640px) {
  .topbar { min-height: 52px; padding: 6px 10px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  select { min-height: 36px; height: 36px; padding: 6px 9px; font-size: 13px; }
  textarea { min-height: 58px; padding: 7px 9px; font-size: 13px; }
  .auth-panel input:not([type="checkbox"]), .auth-panel select { min-height: 38px; height: 38px; font-size: 13px; }
  .content { padding: 10px; padding-bottom: max(18px, env(safe-area-inset-bottom)); gap: 10px; }
  .panel, .item, .pricing-card { padding: 10px; }
  .form-grid { gap: 7px; }
  .service-editor { padding: 7px; }
  .service-line { grid-template-columns: minmax(92px,.8fr) minmax(112px,1fr) 32px; gap: 5px; }
  .service-remove { width: 32px; min-width: 32px; min-height: 32px; }
  .table th, .table td { padding: 6px 5px; }
  .dashboard-table { font-size: 10px; }
  .dashboard-table th, .dashboard-table td { padding: 4px; }
  .pending-client-group { padding: 7px; }
  .pending-client-group strong { font-size: 13px; }
  .panel-head h3 { font-size: 17px; }
}

.proofing-topline { display:flex; align-items:center; gap:6px; min-width:0; }
.proofing-topline .proof-folders { flex:1; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.proofing-topline .proof-folder-chip { flex:0 0 auto; min-height:34px; padding:5px 8px; font-size:11px; }
.proofing-topline .tutorial-button { flex:0 0 24px; }
.proof-exports { padding:7px 0; border-top:1px solid var(--line); }
.proof-exports summary { color:var(--muted); font-size:12px; font-weight:700; cursor:pointer; }
.proof-exports .row-actions { flex-wrap:wrap; padding-top:7px; }
.tutorial-button { display:inline-grid; place-items:center; flex:0 0 18px!important; width:18px; min-width:18px; height:18px; min-height:18px; padding:0; border:1px solid var(--line); border-radius:50%; color:#785917; background:#fffaf1; font-size:6px; line-height:1; box-shadow:none; }
.tutorial-dialog { width:min(560px,calc(100vw - 24px)); max-width:none; max-height:min(84dvh,760px); padding:0; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:#fffdf8; box-shadow:0 25px 90px #0006; }
.tutorial-dialog::backdrop { background:#061410a8; backdrop-filter:blur(3px); }
.tutorial-dialog-card { display:grid; gap:10px; padding:14px; overflow:auto; }
.tutorial-dialog-card .panel-head { align-items:center; flex-direction:row; margin:0; }
.tutorial-dialog-card ol { display:grid; gap:7px; margin:0; padding-left:23px; color:var(--muted); font-size:13px; line-height:1.5; }
.tutorial-video { width:100%; aspect-ratio:16/9; border:0; border-radius:9px; background:#080808; }
.proof-media:fullscreen .fullscreen-proof-actions,.proof-media.app-fullscreen .fullscreen-proof-actions { display:flex; width:auto; padding:5px; border:0; border-radius:0; background:transparent; opacity:.72; transition:opacity .16s ease; }
.proof-media:fullscreen .fullscreen-proof-actions:hover,.proof-media:fullscreen .fullscreen-proof-actions:focus-within,.proof-media.app-fullscreen .fullscreen-proof-actions:hover,.proof-media.app-fullscreen .fullscreen-proof-actions:focus-within { opacity:1; }
.fullscreen-proof-actions button { min-height:32px; padding:4px 10px; border-radius:6px; font-size:11px; }
.fullscreen-proof-actions .reject { color:#fff; background:rgba(196,44,44,.56); }
.fullscreen-proof-actions .wait { color:#fff; background:rgba(215,166,20,.58); }
.fullscreen-proof-actions .select { color:#fff; background:rgba(13,137,74,.58); }
.fullscreen-proof-actions .fullscreen-exit { background:rgba(255,255,255,.22); }
.proof-action-toast { display:none; grid-column:1/-1; justify-self:center; padding:4px 10px; border-radius:999px; color:#fff; background:#333a; font-size:12px; font-weight:900; }
.proof-action-toast.visible { display:block; }
.fullscreen-proof-actions .proof-action-toast.visible { position:absolute; left:50%; bottom:48px; transform:translateX(-50%); white-space:nowrap; }
.proof-action-toast.selected { background:#07874c; }
.proof-action-toast.rejected { background:#ca3434; }
.proof-action-toast.waiting { background:#c99b12; color:#1f1a08; }
.proof-image { touch-action:none; }
.swipe-card { touch-action:pan-y; }
.proof-photo-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; width:min(100%,520px); padding:5px 0; }
.proof-photo-nav button { min-width:76px; min-height:36px; padding:5px 12px; font-size:11px; touch-action:manipulation; text-transform:uppercase; letter-spacing:.08em; }
.proof-photo-nav .wait { color:#776100; background:#dfff00; border-color:#c7df00; }
.fullscreen-proof-nav { width:min(94vw,520px); padding:6px; border:1px solid #ffffff35; border-radius:7px; background:#090c0bcc; backdrop-filter:blur(6px); pointer-events:auto; }
.fullscreen-proof-nav .fullscreen-exit { padding-inline:8px; }
.proof-swipe-hints { position:absolute; z-index:5; top:58%; left:10px; right:10px; display:flex; justify-content:space-between; gap:8px; color:#fff; font-size:10px; font-weight:700; text-shadow:0 1px 5px #000; opacity:.82; pointer-events:none; }
.proof-swipe-hints span { max-width:44%; padding:3px 5px; border-radius:4px; background:#0006; }
.proof-toolbar { width:100%; max-width:520px; gap:5px; padding:7px; }
.proof-toolbar > .ghost { min-height:34px; padding:4px 9px; font-size:11px; touch-action:manipulation; }
.proof-toolbar .color-swatch { flex:0 0 32px; width:32px; min-width:32px; height:32px; min-height:32px; padding:0; border:5px solid #fff; }
.swipe-card > div:last-child { padding:5px 8px; font-size:11px; }
.proof-media:fullscreen,.proof-media.app-fullscreen,.media-box:fullscreen,.media-box.app-fullscreen { overscroll-behavior:none; touch-action:none; }
.media-load-error { display:grid; place-items:center; min-height:140px; background:#171717; }
.id-form-grid .checkline { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.id-form-grid .checkline .hint { flex:1 0 100%; padding-left:25px; font-size:10px; font-weight:500; }
.id-form-grid > label:has(#idLink), .id-form-grid > #staffPermissions, .id-form-grid > .row-actions { grid-column:1/-1; }
.id-form-grid + .table-wrap { width:100%; }
.module-title-line { display:flex; align-items:center; gap:8px; }
.module-title-line h3 { margin:0; }
.media-box:fullscreen .media-shell video,.media-box.app-fullscreen .media-shell video { min-height:0; }
.media-box:fullscreen .correction-gallery-nav button,.media-box.app-fullscreen .correction-gallery-nav button { opacity:.42; transition:opacity .16s ease; }
.media-box:fullscreen .correction-gallery-nav button:hover,.media-box:fullscreen .correction-gallery-nav button:focus-visible,.media-box.app-fullscreen .correction-gallery-nav button:hover,.media-box.app-fullscreen .correction-gallery-nav button:focus-visible { opacity:1; }

@media (max-width: 1050px) {
  .proofing-topline { position:fixed; top:max(7px,env(safe-area-inset-top)); left:51px; right:8px; z-index:18; height:38px; }
  .proofing-topline .proof-folder-chip { min-height:32px; }
}

@media (max-width: 640px) {
  .proof-media { height:min(74dvh,660px); min-height:min(54dvh,380px); border-radius:0; }
  .proof-media img { height:100%; }
  .swipe-stage { gap:3px; }
  .proof-photo-nav { padding:3px 1px; }
  .proof-photo-nav button { min-width:82px; min-height:36px; padding:4px 10px; font-size:10px; }
  .proof-swipe-hints { top:58%; font-size:9px; }
  .proofing-topline .proof-folder-chip { font-size:10px; }
  .proof-exports .row-actions { width:100%; }
  .proof-toolbar { gap:5px; padding:6px; }
  .proof-toolbar .color-swatch { flex-basis:32px; width:32px; min-width:32px; height:32px; min-height:32px; }
  .proof-toolbar input[type="color"] { flex:0 0 32px; width:32px; min-width:32px; height:32px; min-height:32px; padding:2px; }
  .paint-toolbar .color-swatch { width:22px; height:22px; }
  .paint-toolbar input[type="color"] { width:28px; min-width:28px; height:28px; min-height:28px; padding:2px; }
  .id-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .id-form-grid > label:has(#idLink),.id-form-grid > #staffPermissions,.id-form-grid > .row-actions { grid-column:1/-1; }
  .correction-stage { gap:9px; }
  .media-box { min-height:0; }
  .media-shell { min-height:min(54vh,460px); }
  .media-shell video { min-height:0; }
  .paint-toolbar { gap:5px; padding:6px; }
  .media-box:fullscreen .paint-toolbar,.media-box.app-fullscreen .paint-toolbar { opacity:.38; }
  .media-box:fullscreen .paint-toolbar:hover,.media-box:fullscreen .paint-toolbar:focus-within,.media-box.app-fullscreen .paint-toolbar:hover,.media-box.app-fullscreen .paint-toolbar:focus-within { opacity:1; }
}

@media (max-width: 380px) {
  .id-form-grid { grid-template-columns:1fr; }
  .id-form-grid > label:has(#idLink),.id-form-grid > #staffPermissions,.id-form-grid > .row-actions { grid-column:auto; }
}

/* Exact mobile sign-up grid and compact landing card based on the supplied reference. */
@media (max-width: 640px) {
  #signupForm .signup-pair { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  #signupForm { padding:14px; }
  #signupForm label > span:not(.password-field) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  #signupForm input::placeholder { color:#77766f; opacity:1; text-align:center; }
  #signupForm select { text-align-last:center; }
  #signupForm .field-status:not(.error-text) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  #signupForm > label > input,
  #signupForm .signup-pair input,
  #signupForm .signup-pair select { min-width:0; }
  .brand-panel { gap:10px; }
  .brand-top { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:10px; }
  .brand-logo { width:64px; max-width:64px; height:64px; }
  .hero-rank { margin:0 0 5px; padding:5px 8px; border-radius:8px; font-size:9px; line-height:1.25; letter-spacing:.08em; }
  .brand-top h1 { font-size:clamp(27px,9vw,36px); line-height:1; white-space:nowrap; }
  .feature-slider { border-radius:14px; }
  .feature-slide { min-height:0; grid-template-columns:86px minmax(0,1fr); gap:12px; align-items:center; padding:14px; text-align:left; }
  .feature-art { width:82px; margin:0; }
  .feature-art>span { font-size:34px; }
  .feature-copy { gap:4px; }
  .feature-copy small { font-size:9px; }
  .feature-copy b { font-size:18px; line-height:1.12; }
  .feature-copy p { font-size:11px; line-height:1.35; }
  .feature-slider-controls { gap:5px; padding:6px; }
  .feature-slider-controls>button { flex-basis:28px; width:28px; height:28px; min-height:28px; font-size:12px; }
  #featureDots { gap:3px; }
  #featureDots button { flex-basis:6px; width:6px; height:6px; min-height:6px; }
  #featureDots button.active { flex-basis:15px; width:15px; }
}

/* Header actions live only beside the dashboard Profit total; all views stay content-first. */
.floating-menu-toggle { display: none; }
.mobile-workspace-header { display:none; }
#connectionRequired { width:min(90vw,390px); max-width:none; max-height:min(86dvh,520px); box-sizing:border-box; overflow:auto; border:1px solid #cfe1d8; border-radius:24px; padding:25px; color:#18372f; text-align:center; background:radial-gradient(circle at 50% 5%,#e9f8ed 0,#fff 56%); box-shadow:0 24px 65px rgba(13,65,48,.18); }
#connectionRequired::backdrop { background:rgba(7,32,25,.42); backdrop-filter:blur(5px); }
.connection-art { position:relative; display:grid; place-items:center; width:90px; height:90px; margin:0 auto 18px; border-radius:25px; background:linear-gradient(145deg,#d6f3e5,#fff2d4); box-shadow:inset 0 1px #fff,0 12px 24px rgba(15,105,76,.12); }
.connection-ring { position:absolute; inset:10px; border:1px solid rgba(15,105,76,.18); border-radius:50%; animation:connectionPulse 2.4s ease-in-out infinite; }
.connection-wifi { position:relative; display:grid; justify-items:center; align-content:end; width:48px; height:42px; transform:rotate(180deg); }
.connection-wifi i { position:absolute; bottom:0; border:3px solid #156b55; border-bottom:0; border-radius:55px 55px 0 0; }
.connection-wifi i:nth-child(1) { width:42px; height:28px; }
.connection-wifi i:nth-child(2) { width:27px; height:18px; }
.connection-wifi i:nth-child(3) { width:7px; height:7px; border:0; border-radius:50%; background:#156b55; }
.connection-slash { position:absolute; width:58px; height:4px; border-radius:4px; background:#bb513e; transform:rotate(-43deg); box-shadow:0 0 0 3px #ecf7e8; }
#connectionRequired h2 { margin:0 auto 9px; max-width:290px; font-size:clamp(21px,5vw,26px); line-height:1.15; }
#connectionRequired p { margin:8px 0; line-height:1.4; }
#connectionRequired .connection-languages { color:#186c55; font-size:13px; font-weight:700; }
#connectionRequired .connection-detail { color:#52665c; font-size:14px; }
.connection-retry { min-height:42px; margin-top:12px; padding:0 17px; border:0; border-radius:12px; background:linear-gradient(110deg,#075340,#1b8462); color:#fff; font-weight:700; box-shadow:0 6px 15px rgba(10,101,74,.2); }
.connection-retry:disabled { opacity:.65; cursor:wait; }
.network-activity { position:fixed; z-index:1150; top:max(10px,env(safe-area-inset-top)); left:50%; display:flex; align-items:center; gap:9px; max-width:calc(100vw - 28px); padding:9px 14px; border:1px solid rgba(199,231,213,.8); border-radius:999px; background:#0d4d3f; color:#fff; box-shadow:0 8px 25px rgba(0,0,0,.2); font-size:12px; font-weight:700; white-space:nowrap; transform:translateX(-50%); pointer-events:none; }
.network-activity-spinner { display:block; width:15px; height:15px; flex:none; border:2px solid rgba(255,255,255,.3); border-top-color:#eccc78; border-radius:50%; animation:networkSpin .75s linear infinite; }
@keyframes connectionPulse { 50% { transform:scale(1.14); opacity:.35; } }
@keyframes networkSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .connection-ring,.network-activity-spinner { animation:none; } }
.owner-insights .insights-metrics .metric b { overflow-wrap:anywhere; font-size:clamp(18px,5vw,24px); }
.owner-insights .insights-metrics .metric span { overflow-wrap:anywhere; }
.insight-filters { grid-template-columns:minmax(150px,1.4fr) repeat(3,minmax(95px,.75fr)); width:min(100%,690px); }
.usage-account summary { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(100px,1fr) auto auto; align-items:center; gap:10px; cursor:pointer; }
.usage-account summary span { min-width:0; }
.usage-account summary b,.usage-account summary small { display:block; overflow-wrap:anywhere; }
.usage-account summary small { color:var(--muted); font-size:11px; }
.usage-account-plan b { color:#137357; font-size:12px; }
@media (max-width:680px) { .insight-usage-head { display:grid; } .insight-filters { grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; } .usage-account summary { grid-template-columns:minmax(0,1fr) auto; } .usage-account-plan { grid-column:1; } .usage-detail-cue { grid-column:2; grid-row:2; font-size:11px; } }
@media(max-width:1050px) {
  .workspace { position:relative; }
  .mobile-workspace-header { position:sticky; top:max(6px,env(safe-area-inset-top)); z-index:9; display:block; width:0; height:0; min-height:0; padding:0; overflow:visible; pointer-events:none; }
  .mobile-workspace-header .mobile-menu-toggle { pointer-events:auto; transform:translate(6px,0); box-shadow:0 7px 18px rgba(18,37,31,.18); }
  .content { padding-top:2px!important; }
}
.metric > span { display: flex; align-items: center; gap: 5px; }
.metric-privacy-toggle {
  display: inline-grid;
  place-items: center;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
}
.metric-privacy-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1050px) {
  .floating-menu-toggle {
    position: relative;
    top: auto;
    left: auto;
    z-index: 6;
    display: inline-grid;
    place-items: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 9px;
    font-size: 20px;
  }
}

@media (max-width: 640px) {
  .workspace,.content,.content > * { width:100%; max-width:100%; min-width:0; }
  .content { gap:8px; padding:6px; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  .dashboard-banner-row { min-height:46px; margin-left:44px; display:grid; align-items:stretch; }
  .dashboard-banner-row:empty { display:none; min-height:0; margin:0; }
  .dashboard-banner-ad { min-height:46px; border-radius:8px; }
  .dashboard-banner-ad > span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .plan-status-card { min-height:64px; padding:8px 10px; }
  .plan-status-card > * { min-width:0; }
  .plan-status-card h3 { font-size:18px; }
  .plan-status-card .eyebrow { margin-bottom:3px; font-size:10px; }
  .plan-status-card .row-actions { flex-wrap:wrap; justify-content:flex-end; gap:4px; }
  .dashboard-language-tools .language-selector select { width:104px; min-height:32px; padding:4px 6px; font-size:12px; }
  .content > .plan-status-card:first-child { padding-inline-start:46px; }
  .dashboard-filters { gap:5px; padding:7px; }
  .dashboard-filters > h3 { font-size:18px; }
  .dashboard-filters label { font-size:10px; }
  .dashboard-filters input,.dashboard-filters select { min-height:34px; padding:5px 7px; font-size:10px; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .metrics .metric { min-height:58px; padding:7px 9px; }
  .metrics .metric b { font-size:22px; }
  .metrics .metric span { font-size:10px; }
  .dashboard-table { width:100%; min-width:0; table-layout:fixed; font-size:8px; }
  .dashboard-table th,.dashboard-table td { padding:5px 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dashboard-table th:first-child,.dashboard-table td:first-child { width:28%; }
  .dashboard-table th:not(:first-child),.dashboard-table td:not(:first-child) { width:18%; }
  .dashboard-project-line { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .dashboard-project-meta { display:none; }
  .dashboard-table .client-open-link { display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }
  .editing-pending-panel { padding:8px; }
  .editing-pending-panel .panel-head { margin-bottom:7px; }
  .editing-pending-panel .panel-head h3 { font-size:17px; }
}

@media (max-width: 420px) {
  .floating-menu-toggle { width:36px; min-width:36px; height:36px; min-height:36px; }
  .dashboard-banner-row { min-height:42px; margin-left:40px; }
  .dashboard-banner-ad { min-height:42px; }
  .plan-status-card h3 { font-size:16px; }
  .plan-status-card strong { font-size:11px; }
  .dashboard-filters > h3 { font-size:16px; }
  .dashboard-filters input,.dashboard-filters select { min-height:32px; height:32px; font-size:9px; }
  .metrics .metric { min-height:54px; padding:6px 8px; }
  .metrics .metric b { font-size:19px; }
  .dashboard-table { font-size:7.5px; }
  .dashboard-table th { font-size:7px; letter-spacing:-.03em; }
  .dashboard-table th,.dashboard-table td { padding:4px 2px; }
  .dashboard-table .client-open-link { font-size:8px; }
}

/* Mobile gallery flow: folders -> grid -> distraction-free viewer. */
.gallery-home { width:min(100%,760px); margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,3vw,22px); padding:clamp(12px,3vw,24px); }
.gallery-home-screen { width:min(100%,760px); margin:0 auto; }
.gallery-home-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 18px 0; }
.gallery-head-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.gallery-finish { min-height:30px; padding:5px 10px; border:1px solid #9bd9be; border-radius:8px; background:#eaf8f0; color:#12614f; font-size:10px; font-weight:750; white-space:nowrap; }
.gallery-finish.pending { border-color:#12614f; background:#12614f; color:#fff; box-shadow:0 5px 14px #12614f2e; }
.gallery-export { min-height:30px; padding:4px 9px; font-size:10px; white-space:nowrap; justify-self:end; }
.gallery-folder-card { min-width:0; padding:0; border:0; color:var(--ink); background:transparent; text-align:center; box-shadow:none; }
.gallery-folder-card:hover { transform:translateY(-2px); }
.folder-collage { position:relative; display:grid; grid-template-columns:repeat(2,1fr); width:100%; aspect-ratio:1; overflow:hidden; border:3px solid transparent; border-radius:18px; background:#edf2f0; box-shadow:0 7px 22px #153a3020; }
.folder-collage img,.folder-collage > span { width:100%; height:100%; min-width:0; min-height:0; object-fit:cover; display:grid; place-items:center; color:#87938f; font-size:34px; background:linear-gradient(145deg,#edf4f1,#dce8e4); }
.gallery-folder-card.waiting .folder-collage { border-color:#e5b817; }
.gallery-folder-card.rejected .folder-collage { border-color:#df3d36; }
.gallery-folder-card.selected .folder-collage { border-color:#18a45e; }
.gallery-folder-card.all-videos .folder-collage { border-color:#3279c7; }
.gallery-folder-card.correction .folder-collage { border-color:#dc8f20; }
.gallery-folder-card.ok .folder-collage { border-color:#18a45e; }
.folder-label { display:grid; gap:2px; padding:8px 4px 0; font-weight:900; font-size:16px; }
.folder-label small { color:var(--muted); font-size:13px; }
.gallery-folder-card.waiting .folder-label { color:#a57800; }
.gallery-folder-card.rejected .folder-label { color:#bf2828; }
.gallery-folder-card.selected .folder-label { color:#087c43; }
.gallery-folder-card.all-videos .folder-label { color:#245f9f; }
.gallery-folder-card.correction .folder-label { color:#a95f00; }
.gallery-folder-card.ok .folder-label { color:#087c43; }
.gallery-grid-screen { width:100%; min-height:65vh; background:#fff; }
.gallery-screen-head { position:sticky; top:0; z-index:8; min-height:70px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid #e4e8e6; background:#fffffff2; backdrop-filter:blur(10px); }
.gallery-screen-head > div { display:grid; justify-items:center; line-height:1.2; }
.gallery-screen-head b { font-size:17px; }
.gallery-screen-head small { color:var(--muted); font-size:12px; }
.gallery-back { width:40px; min-width:40px; height:40px; min-height:40px; padding:0; border:0; background:transparent; font-size:26px; }
.mobile-photo-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; }
.gallery-photo-tile { position:relative; width:100%; min-width:0; aspect-ratio:1; min-height:0; padding:0; overflow:hidden; border:0; border-radius:0; background:#dfe7e4; }
.gallery-photo-tile img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-photo-tile .video-badge { position:absolute; z-index:2; right:5px; bottom:5px; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#0009; font-size:10px; }
.empty-gallery { grid-column:1/-1; padding:32px 12px; text-align:center; }
.proof-viewer-tools { position:absolute; z-index:9; left:50%; bottom:max(58px,calc(env(safe-area-inset-bottom) + 58px)); display:none; align-items:center; gap:8px; padding:6px 9px; transform:translateX(-50%); border:1px solid #ffffff38; border-radius:12px; background:#080b0acc; backdrop-filter:blur(8px); }
.proof-media:fullscreen .proof-viewer-tools,.proof-media.app-fullscreen .proof-viewer-tools { display:flex; }
.proof-viewer-tools button,.proof-viewer-tools input { width:34px; min-width:34px; height:34px; min-height:34px; padding:3px; border:1px solid #ffffff33; border-radius:8px; color:#fff; background:#ffffff16; font-size:17px; }
.proof-viewer-tools input { overflow:hidden; }
.proof-media:fullscreen .proof-action-toast.visible,.proof-media.app-fullscreen .proof-action-toast.visible { position:fixed; z-index:20; top:50%; left:50%; bottom:auto; transform:translate(-50%,-50%); padding:9px 18px; font-size:22px; }
.proof-media.controls-hidden .proof-viewer-tools,.proof-media.controls-hidden .fullscreen-proof-actions,.proof-media.controls-hidden .proof-swipe-hints,.media-box.controls-hidden .paint-toolbar,.media-box.controls-hidden .correction-gallery-nav,.media-box.controls-hidden .gesture-hint,.media-box.controls-hidden .pen-hint { opacity:0!important; pointer-events:none!important; }
.proof-viewer-tools,.fullscreen-proof-actions,.proof-swipe-hints,.paint-toolbar,.correction-gallery-nav,.gesture-hint,.pen-hint { transition:opacity .18s ease; }
.compact-icon-toolbar > button { width:36px; min-width:36px; padding:4px; font-size:17px; }

@media (max-width:640px) {
  .gallery-home { min-height:calc(100dvh - 86px); align-content:start; gap:14px; padding:16px 14px; }
  .folder-collage { border-radius:13px; }
  .folder-label { padding-top:6px; font-size:14px; }
  .folder-label small { font-size:11px; }
  .gallery-grid-screen { margin:-6px; width:calc(100% + 12px); }
  .gallery-screen-head { min-height:60px; padding:7px 8px; }
  .mobile-photo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; }
  .proof-media:fullscreen,.proof-media.app-fullscreen { background:#000; }
  .proof-media:fullscreen img,.proof-media.app-fullscreen img { object-fit:contain; }
  .fullscreen-proof-nav { width:calc(100vw - 12px); gap:5px; padding:5px; }
  .fullscreen-proof-nav button { flex:1 1 0; min-width:0; padding-inline:5px; }
  .compact-icon-toolbar { justify-content:center; }
}

/* Compact, task-first panels based on the approved mobile references. */
@media (max-width:760px) {
  .owner-insights .insights-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
  .owner-insights .insights-metrics .metric { min-height:48px; padding:5px 3px; text-align:center; }
  .owner-insights .insights-metrics .metric b { font-size:17px; white-space:normal; overflow-wrap:anywhere; min-width:0; }
  .owner-insights .insights-metrics .metric span { font-size:8px; }
  .insights-platforms { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .insights-platforms article { padding:8px 5px; }
  .insight-usage-head { display:grid; gap:6px; }
  .insight-filters { grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.8fr); width:100%; }
  .insight-filters input,.insight-filters select { min-width:0; min-height:32px; padding:4px 5px; font-size:10px; }
}
.compact-module-head { align-items:center; margin-bottom:8px; }
.compact-module-head > .tutorial-button { margin-left:auto; }
.settings-profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.settings-profile-grid label:has(#setAddress) { grid-column:1/-1; }
.settings-save { width:100%; margin-top:10px; }
.settings-security-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.settings-security-panel { min-width:0; }
.settings-security-panel .form-grid { grid-template-columns:1fr; gap:8px; }
.settings-security-panel .primary { width:100%; }
.id-records { display:grid; width:100%; min-width:0; gap:5px; overflow:hidden; }
.id-record { display:grid; grid-template-columns:minmax(54px,.55fr) minmax(44px,.45fr) minmax(92px,1.1fr) minmax(72px,.8fr) minmax(78px,.85fr) minmax(58px,.6fr) auto; align-items:center; gap:6px; min-width:0; padding:7px 8px; border:1px solid var(--line); border-radius:9px; background:#fffdf8; font-size:11px; }
.id-record > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.id-record-head { color:var(--muted); background:linear-gradient(90deg,#edf8f4,#fff4d9); font-size:9px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; }
.id-person { display:grid; gap:1px; line-height:1.15; }
.id-person small { overflow:hidden; color:var(--muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.id-icon-actions { display:flex; gap:3px; overflow:visible!important; }
.icon-action { display:inline-grid; place-items:center; width:27px; min-width:27px; height:27px; min-height:27px; padding:0; border-radius:7px; font-size:13px; line-height:1; }
.compact-summary { touch-action:manipulation; }
.compact-summary:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; }
.workflow-entry-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
.workflow-entry-form > .service-editor,.workflow-entry-form > label:has(textarea),.workflow-entry-form > label:has(input[id$="Note"]),.workflow-entry-form > button { grid-column:1/-1; }
.workflow-entry-form > .workflow-autosave-status { grid-column:1/-1; min-height:14px; color:var(--muted); font-size:11px; text-align:center; }
.service-editor { padding:0; border:0; background:transparent; }
.service-lines { display:grid; gap:6px; }
.service-editor-total { display:flex; justify-content:flex-end; gap:8px; padding:6px 4px 0; color:var(--muted); font-size:12px; }
.service-editor-total b { color:var(--ink); font-size:15px; }
.service-line { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:6px; align-items:end; }
.service-custom { margin-top:5px; }
.service-line-actions { display:flex; gap:4px; }
.service-add,.service-remove { width:34px; min-width:34px; min-height:36px; padding:0; font-size:18px; }
.service-add { color:#087c43; }
.workflow-tools { grid-template-columns:minmax(220px,420px) 1fr; align-items:center; padding-block:9px; }
.workflow-tools > input { width:100%; }
.workflow-tools-row { display:flex; min-width:0; align-items:end; gap:7px; padding:9px 12px; overflow:hidden; }
.workflow-tools-row > input[type="search"] { flex:1 1 260px; min-width:150px; height:38px; }
.workflow-tools-row > .filters { display:flex; flex:0 0 auto; flex-wrap:nowrap; gap:5px; }
.workflow-tools-row > label { flex:0 0 168px; margin:0; font-size:11px; }
.workflow-tools-row > label select { height:38px; padding:6px 9px; }
.workflow-tools-row .chip { min-height:38px; padding:7px 12px; white-space:nowrap; }
.workflow-tools-row .workflow-summary { flex:0 0 100%; }
.workflow-item .compact-summary { min-height:52px; }
.cash-form { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cash-form > button { grid-column:1/-1; }
.promo-filters { grid-template-columns:minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.3fr); }
.sales-filter-grid { display:grid; grid-template-columns:minmax(220px,1.5fr) repeat(4,minmax(120px,.75fr)) auto auto; gap:8px; align-items:end; }
.sales-export { display:flex; gap:5px; }
.sales-rows { display:grid; gap:7px; }
.sales-row { overflow:hidden; border:1px solid var(--line); border-radius:9px; background:#fffdf8; }
.sales-row-summary { display:grid; grid-template-columns:minmax(150px,1.4fr) minmax(80px,.7fr) minmax(95px,.8fr) minmax(100px,.8fr) auto; gap:9px; align-items:center; padding:9px 10px; }
.sales-row-summary > * { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sales-row dl { display:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:0; padding:8px 10px; border-top:1px solid var(--line); }
.sales-row.expanded dl { display:grid; }
.sales-row dl div { min-width:0; padding:7px; }
.sales-row dt { color:var(--muted); font-size:10px; text-transform:capitalize; }
.sales-row dd { margin:2px 0 0; overflow-wrap:anywhere; }
.sales-pagination { display:flex; justify-content:space-between; margin-top:10px; }

@media (max-width:640px) {
  .settings-profile-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .settings-profile-grid label { min-width:0; }
  .settings-profile-grid input,.settings-profile-grid select { width:100%; min-width:0; }
  .workflow-entry-form { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .service-line { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; }
  .service-line-actions { flex-direction:column; }
  .service-add,.service-remove { width:30px; min-width:30px; min-height:28px; height:28px; }
  .workflow-tools-row { display:flex; width:100%; min-width:0; flex-wrap:nowrap; gap:2px; padding:6px; overflow:hidden; }
  .workflow-tools-row > input[type="search"] { flex:1 1 72px; min-width:55px; width:auto; height:32px; padding:5px 5px; font-size:9px; }
  .workflow-tools-row > .filters { min-width:0; gap:2px; }
  .workflow-tools-row .chip { min-width:0; min-height:32px; padding:4px 5px; font-size:9px; }
  .workflow-tools-row > label { flex:0 1 88px; min-width:72px; font-size:8px; }
  .workflow-tools-row > label select { width:100%; min-width:0; height:32px; padding:3px 4px; font-size:9px; }
  .workflow-tools-row .workflow-summary { flex:0 0 100%; }
  .promo-filters { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:5px; overflow:visible; }
  .promo-filters label { min-width:0; font-size:10px; }
  .promo-filters input,.promo-filters select { width:100%; min-width:0; padding-inline:5px; font-size:11px; }
  .cash-form { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
  .cash-form label { min-width:0; }
  .cash-form input { width:100%; min-width:0; padding-inline:5px; }
  .sales-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sales-filter-grid > label:first-child { grid-column:1/-1; }
  .sales-export { align-self:stretch; }
  .sales-export button { flex:1; }
  .sales-row-summary { grid-template-columns:minmax(90px,1.1fr) minmax(55px,.65fr) minmax(70px,.75fr) minmax(60px,.7fr) auto; gap:4px; padding:7px 6px; font-size:10px; }
  .sales-row-summary button { min-width:48px; padding-inline:4px; font-size:9px; }
  .sales-row dl { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .settings-security-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
  .settings-security-panel { padding:8px; }
  .settings-security-panel h3 { font-size:13px; line-height:1.05; }
  .settings-security-panel .hint { font-size:8px; line-height:1.25; }
  .settings-security-panel label { min-width:0; font-size:8px; }
  .settings-security-panel input { width:100%; min-width:0; min-height:32px; height:32px; padding:4px 5px; font-size:10px; }
  .settings-security-panel .primary { min-height:32px; padding:5px; font-size:9px; }
  .id-record { grid-template-columns:38px 28px minmax(0,1.2fr) minmax(0,.9fr) minmax(0,.9fr) 30px 59px; gap:2px; padding:5px 3px; border-radius:6px; font-size:7.5px; }
  .id-record-head { font-size:6.5px; letter-spacing:-.02em; }
  .id-person small { font-size:6.5px; }
  .id-icon-actions { gap:1px; }
  .icon-action { width:18px; min-width:18px; height:18px; min-height:18px; border-radius:5px; font-size:8px; }
  .gallery-home-head { padding:6px 8px 0; font-size:13px; }
  .gallery-screen-head { grid-template-columns:26px minmax(0,1fr) auto; gap:3px; padding-right:6px; }
  .gallery-export { min-height:26px; height:26px; padding:3px 7px; font-size:8px; }
  .gallery-finish { min-height:26px; height:26px; padding:3px 7px; font-size:8px; }
  .tutorial-button,.proofing-topline .tutorial-button { flex:0 0 16px; width:16px; min-width:16px; height:16px; min-height:16px; padding:0; font-size:6px; }
  .panel-head .row-actions > .tutorial-button { flex:0 0 16px; width:16px; min-width:16px; height:16px; min-height:16px; padding:0; }
}

@media (hover:none),(pointer:coarse) {
  .view-enter > *, .view-enter .item, .view-enter .pricing-card, .view-enter .metric, .workflow-details { animation:none!important; }
  button,.ghost,.primary,.chip,.metric,.panel,.item,.pricing-card,.sidebar,.nav-scrim { transition-duration:.08s!important; }
  .nav-scrim { backdrop-filter:none; }
}

/* Compact, readable mobile workflows without horizontal scrolling. */
.workflow-title-line { display:flex; align-items:baseline; justify-content:space-between; gap:6px; }
.workflow-title-line h3 { white-space:normal; overflow-wrap:anywhere; }
.workflow-title-line time { flex:none; font-size:11px; color:var(--muted); }
.workflow-inline-details { display:grid; grid-template-columns:minmax(210px,.85fr) minmax(0,1.4fr); align-items:center; gap:10px; }
.workflow-note { color:var(--muted); overflow-wrap:anywhere; }
.workflow-note-detail { margin:8px 0; padding:8px 10px; border-left:3px solid var(--accent); border-radius:6px; background:var(--soft); overflow-wrap:anywhere; }
.workflow-status-controls { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.workflow-status-check { display:inline-flex!important; align-items:center; gap:5px!important; min-height:30px; margin:0!important; padding:4px 7px; border:1px solid var(--line); border-radius:7px; background:#fff; font-size:11px; font-weight:700; cursor:pointer; }
.workflow-status-check input { width:16px; height:16px; min-height:16px!important; margin:0; accent-color:#087d5c; }
.workflow-status-check.checked { border-color:#9bd9be; background:#eaf8f0; }
.workflow-quick-actions { display:flex; flex-wrap:wrap; gap:6px; padding:8px 14px; border-top:1px solid rgba(201,154,69,.18); background:rgba(255,253,248,.86); }
.workflow-quick-actions .small { min-height:32px; padding:5px 10px; font-size:11px; }
.workflow-quick-actions .active,.urgent-action.active { border-color:#e2a63b; color:#7e4b00; background:#fff0c9; }
.workflow-delete-confirm .danger-art { background:linear-gradient(135deg,#ffe1d8,#fff0bd); }
.workflow-delete-confirm .danger-art span { color:#a42a24; border-color:#b9564d; }
.workflow-inline-checklist { display:flex; align-items:center; flex-wrap:wrap; gap:5px; min-width:0; }
.workflow-inline-task { display:inline-flex!important; align-items:center; gap:5px!important; max-width:100%; min-height:30px; margin:0!important; padding:4px 7px; border:1px solid var(--line); border-radius:7px; background:#fff; font-size:11px; font-weight:650; cursor:pointer; overflow-wrap:anywhere; }
.workflow-inline-task input { flex:none; width:16px; height:16px; min-height:16px!important; margin:0; accent-color:#087d5c; }
.workflow-inline-task span { min-width:0; }
.workflow-inline-task.completed { border-color:#9bd9be; background:#eaf8f0; }
.workflow-inline-task.current { border-color:#e1be73; background:#fff8e7; }
.workflow-inline-task.locked { opacity:.62; cursor:not-allowed; }
@media(max-width:700px) { .workflow-inline-details { grid-template-columns:1fr; gap:7px; } .workflow-inline-task { min-height:30px; } .workflow-item { padding:0; } .workflow-item .compact-summary { padding:8px; gap:7px; grid-template-columns:30px minmax(0,1fr); } .workflow-quick-actions { padding:7px 8px; gap:4px; } .workflow-quick-actions .small { flex:1 1 auto; min-height:30px; padding:4px 7px; font-size:9px; } }
.workflow-amount-line,.workflow-payment-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.workflow-amount-line span { display:grid; font-size:11px; }
.workflow-amount-line b { font-size:clamp(11px,3.3vw,16px); overflow-wrap:anywhere; }
.workflow-payment-row { grid-column:1/-1; align-items:end; }
.workflow-payment-row label { min-width:0; }
.workflow-payment-row output { display:block; min-height:36px; padding:8px 4px; overflow-wrap:anywhere; }
.workflow-entry-form .service-editor-total { display:none; }
.workflow-item .mini-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
.workflow-item .mini-metrics span:nth-child(n+4) { grid-column:1/-1; }
.money-pending,.mini-metrics .money-pending b { color:#b42318!important; }
.money-profit { color:#18783a!important; }
.money-advance,.mini-metrics .money-advance b { color:#926600!important; }
.payment-ledger>summary { cursor:pointer; width:max-content; margin-bottom:8px; }
.payment-ledger[hidden] { display:none!important; }
.workflow-details>.row-actions { gap:5px; flex-wrap:wrap; }
.workflow-details>.row-actions>button { padding:6px 8px; font-size:11px; min-height:34px; }
.payment-entry { grid-template-columns:repeat(2,minmax(0,1fr)); }
.payment-entry>button { grid-column:1/-1; }
.compact-payment-ledger { gap:8px; padding:10px 12px; }
.compact-payment-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.compact-payment-totals { display:flex; flex-wrap:wrap; gap:6px; }
.compact-payment-totals span { padding:5px 8px; border-radius:999px; background:#f2f7f4; color:var(--muted); font-size:11px; }
.compact-payment-totals b { color:var(--ink); }
.compact-payment-entry { grid-template-columns:minmax(110px,.7fr) minmax(130px,1fr) auto; gap:8px; align-items:end; }
.compact-payment-entry>button { grid-column:auto; min-width:74px; }
@media(max-width:560px) { .compact-payment-entry { grid-template-columns:1fr 1fr; } .compact-payment-entry>button { grid-column:1/-1; } }
.service-line-actions { flex-direction:row!important; }
.usage-account { padding:8px 0; border-bottom:1px solid var(--line); }
.usage-account>summary { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; cursor:pointer; font-size:12px; }
.usage-account b { overflow-wrap:anywhere; }
.usage-account small,.dashboard-customer small { display:block; color:var(--muted); font-size:10px; }
.usage-sections { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding-top:8px; }
.usage-sections>div { display:flex; justify-content:space-between; gap:4px; font-size:11px; }
.dashboard-customer summary { cursor:pointer; font-weight:600; overflow-wrap:anywhere; }
.dashboard-customer button { display:block; margin-top:6px; text-align:left; }
@media(max-width:600px) {
  .service-line { grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) auto; gap:4px; }
  .service-line-actions button { width:28px; min-width:28px; padding:3px; }
  .workflow-payment-row input { min-width:0; width:100%; padding:6px 3px; font-size:11px; }
  .workflow-item .mini-metrics span { padding:6px; }
  .workflow-item .mini-metrics b { font-size:14px; overflow-wrap:anywhere; }
}
.usage-account>summary { grid-template-columns:minmax(0,1.6fr) minmax(95px,1fr) auto auto; gap:10px; }
.usage-account>summary .usage-account-plan b { color:#137357; font-size:12px; }
.usage-account>summary .usage-account-plan small { font-size:10px; }
@media(max-width:680px) { .insight-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .usage-account>summary { grid-template-columns:minmax(0,1fr) auto; } .usage-account-plan { grid-column:1; } .usage-detail-cue { grid-column:2; grid-row:2; } }
.simple-account-list { width:100%; overflow-x:auto; }
.simple-account-row { min-width:720px; padding:0; border-bottom:1px solid var(--line); }
.simple-account-row>summary { display:grid; grid-template-columns:minmax(210px,1.7fr) minmax(120px,1fr) minmax(90px,.7fr) minmax(90px,.7fr) 34px!important; align-items:center; gap:9px; min-height:54px; padding:7px 8px; list-style:none; cursor:pointer; }
.simple-account-row>summary::-webkit-details-marker { display:none; }
.simple-account-row>summary>span { min-width:0; }
.simple-account-row>summary b,.simple-account-row>summary small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-more-icon { display:grid!important; place-items:center; width:28px; height:28px; border:1px solid var(--line); border-radius:50%; background:#fffaf1; color:#76551d; font-weight:900; }
.simple-account-row[open] .account-more-icon { color:#fff; background:#176d55; }
.account-more-details { display:grid; grid-template-columns:repeat(5,minmax(110px,1fr)); gap:6px; padding:8px 10px 10px; border-top:1px dashed var(--line); background:#fbf8ef; }
.account-more-details span { min-width:0; }
.account-more-details small,.account-more-details b { display:block; overflow-wrap:anywhere; }
.account-more-details small { color:var(--muted); font-size:9px; text-transform:uppercase; }
.account-more-details b { margin-top:2px; font-size:11px; }
@media (hover:none), (pointer:coarse) {
  .metric,.panel,.item,.pricing-card { will-change:auto; transform-style:flat; }
  .metric:hover,.panel:hover,.item:hover,.pricing-card:hover { transform:none; box-shadow:0 10px 28px rgba(34,45,39,.08); }
  button,.nav-btn { touch-action:manipulation; }
}

@media (max-width:680px) {
  .gallery-screen-head { grid-template-columns:44px minmax(0,1fr) auto; padding-left:54px; }
  .gallery-back { display:grid; place-items:center; width:44px; min-width:44px; height:44px; min-height:44px; border-radius:10px; background:#f1f7f3; touch-action:manipulation; }
  #clientAccessForm { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  #clientAccessForm > label { min-width:0; overflow-wrap:anywhere; }
  #clientAccessForm input { min-width:0; }
  #clientAccessForm .permission-grid,#clientAccessForm .row-actions { grid-column:1/-1; }
  #clientAccessForm .permission-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.usage-info,.plan-details { margin-top:8px; }
.gallery-client-selector { display:grid; gap:8px; margin-bottom:12px; padding:12px; border:1px solid var(--line); border-radius:14px; background:rgba(255,253,248,.94); }
.gallery-client-selector>div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.gallery-client-selector small { color:var(--muted); }
.gallery-client-tabs { display:flex; gap:7px; overflow-x:auto; padding-bottom:3px; scrollbar-width:thin; }
.gallery-client-tab { flex:0 0 auto; display:grid; gap:1px; min-width:118px; min-height:48px; padding:7px 10px; text-align:left; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }
.gallery-client-tab small { font-size:9px; }
.gallery-client-tab.active { border-color:#17735a; color:#fff; background:linear-gradient(135deg,#075b49,#3d8655); }
.gallery-client-tab.active small { color:#e5fff4; }
.gallery-client-empty { text-align:center; padding:26px 14px; }
.gallery-home-head>div { display:grid; gap:1px; }
.gallery-home-head>div small { color:var(--muted); font-size:10px; }
.usage-info summary,.plan-details summary { width:max-content; max-width:100%; cursor:pointer; color:#315e4f; font-size:12px; font-weight:700; }
.usage-info p { margin:6px 0 0; }
.plan-details .plan-benefits { margin:8px 0 0; }