:root {
  color-scheme: dark;
  --ink: #f2f8ff;
  --muted: #b0c5d9;
  --paper: #050d19;
  --panel: #0b1c2e;
  --panel-soft: #112941;
  --line: rgba(145, 192, 224, .2);
  --cyan: #35e5ff;
  --blue: #5b83ff;
  --gold: #ffd166;
  --ok: #42e2a4;
  --warn: #ffc35c;
  --bad: #ff647c;
  --card: rgba(11, 28, 46, .94);
  --shadow: 0 28px 90px rgba(0, 0, 0, .42);
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 88px }
body { margin: 0; color: var(--ink); background: radial-gradient(ellipse at 75% 4%, rgba(16,115,176,.21), transparent 34%), radial-gradient(ellipse at 6% 85%, rgba(33,69,166,.18), transparent 35%), var(--paper); font: 15px/1.6 "Segoe UI", system-ui, sans-serif }
a { color: inherit }
h1, h2, h3 { font-family: "Bahnschrift", "Arial Narrow", "Segoe UI", sans-serif; font-weight: 780; line-height: 1.16; letter-spacing: -.035em }
code { color: #c7f7ff; background: rgba(39, 195, 234, .14); padding: 2px 6px; border-radius: 6px; font-size: .9em }
::selection { color: #03111b; background: var(--cyan) }
.brand { display: inline-flex; align-items: center; text-decoration: none }
.brand img { display: block; width: 184px; max-width: 100%; height: auto; filter: drop-shadow(0 8px 20px rgba(40, 193, 231, .16)) }
.brand-text { color: #eaf5ff; font-size: 1.16rem; font-weight: 850; letter-spacing: -.045em }
.brand-text:after { color: var(--cyan); content: "." }
.muted, small { color: var(--muted) }
.eyebrow { color: #62eeff; font-size: .75rem; font-weight: 850; letter-spacing: .17em; text-shadow: 0 0 20px rgba(53,229,255,.25); text-transform: uppercase }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: 1px solid rgba(168,252,255,.56); border-radius: 10px; padding: 10px 18px; color: #03111d; background: linear-gradient(110deg, #35e5ff, #8af4ff 58%, #7cc5ff); box-shadow: 0 9px 30px rgba(35,203,255,.24); font: inherit; font-weight: 800; cursor: pointer; text-decoration: none; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(35,203,255,.36) }
.btn:active { transform: translateY(0) scale(.98) }
.btn.sm { min-height: 34px; padding: 6px 12px; font-size: .84rem }
.btn.full { width: 100%; margin-top: 8px }
.btn.ghost { color: #e5f6ff; background: rgba(65,128,184,.1); border-color: rgba(113,200,234,.3); box-shadow: none }
.btn.ghost:hover { background: rgba(53,229,255,.09); border-color: rgba(53,229,255,.62) }
.btn.warn { color: #291b04; background: var(--warn); box-shadow: none }
.btn.danger { color: #fff; background: #d84f61; box-shadow: none }
.btn.export { color: #052016; background: var(--ok); box-shadow: none }
.alert { padding: 12px 15px; border: 1px solid transparent; border-radius: 10px; margin: 12px 0; animation: rise-in .35s ease both }
.alert.ok { color: #a7f0d1; background: rgba(54,201,149,.12); border-color: rgba(54,201,149,.2) }
.alert.err { color: #ffc0c4; background: rgba(255,109,121,.12); border-color: rgba(255,109,121,.24) }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid transparent; border-radius: 99px; font-size: .76rem; font-weight: 700; text-transform: capitalize; white-space: nowrap }
.pill:before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: "" }
.pill.pending { color: #ffd58a; background: rgba(239,185,91,.12); border-color: rgba(239,185,91,.18) }
.pill.verified { color: #83e8bc; background: rgba(54,201,149,.12); border-color: rgba(54,201,149,.18) }
.pill.rejected { color: #ff9ca5; background: rgba(255,109,121,.12); border-color: rgba(255,109,121,.2) }

/* Sign in */
.auth { position: relative; display: grid; min-height: 100vh; place-items: center; overflow-x: hidden; padding: 24px clamp(18px,4vw,64px); background: radial-gradient(ellipse at 24% 40%, rgba(28,108,191,.22), transparent 39%), radial-gradient(ellipse at 85% 12%, rgba(22,183,223,.22), transparent 43%), #050d19 }
.auth:after { position: fixed; top: -25vw; left: 48%; width: 70vw; height: 70vw; border: 1px solid rgba(57,217,237,.07); border-radius: 50%; content: ""; transform: translateX(-50%); box-shadow: 0 0 0 55px rgba(57,217,237,.02), 0 0 0 110px rgba(57,217,237,.015); pointer-events: none }
.auth-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(390px,.92fr); align-items: center; gap: clamp(32px,6vw,84px); width: min(1220px,100%); margin: auto }
.auth-showcase { min-width: 0; animation: rise-in .65s ease both }
.auth-brand { display: inline-flex; margin: 0 0 18px }
.auth-brand img { display: block; width: 150px; height: auto }
.auth-brand .brand-text { font-size: 1.55rem }
.auth-copy h1 { margin: 10px 0 14px; color: #f4fbff; font-size: clamp(2.15rem,4vw,3.8rem); font-weight: 850; letter-spacing: -.055em; line-height: 1.04; text-shadow: 0 8px 32px rgba(44,196,255,.15) }
.auth-copy h1 span { color: var(--cyan); background: linear-gradient(100deg,#ffffff 3%,#69efff 45%,#718dff 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }
.auth-copy p { max-width: 48ch; margin: 0; color: #c0d5e8 }
.auth-visual { display: block; width: min(100%,500px); height: auto; margin: 2px 0 -24px -24px; overflow: visible; animation: float-in .9s .08s cubic-bezier(.2,.8,.2,1) both }
.auth-card { position: relative; z-index: 1; width: 100%; padding: clamp(22px,3vw,34px); border: 1px solid rgba(111,207,244,.32); border-radius: 20px; background: linear-gradient(145deg, rgba(15,38,61,.98), rgba(6,19,34,.99)); box-shadow: 0 0 0 1px rgba(53,229,255,.035), 0 30px 90px rgba(0,0,0,.5), 0 0 65px rgba(34,150,219,.1); animation: rise-in .65s .08s cubic-bezier(.2,.8,.2,1) both }
.auth-card:before { position: absolute; top: 0; left: 12%; width: 76%; height: 1px; background: linear-gradient(90deg, transparent, #48eaff, #759bff, transparent); content: "" }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px }
.auth-top .eyebrow { font-size: .68rem }
.auth-home { flex: none; color: #c2e8fa; font-size: .78rem; font-weight: 700; text-decoration: none; transition: color .2s ease }
.auth-home:hover { color: var(--cyan) }
.auth-card h2 { margin: 0 0 5px; color: #f5fbff; font-size: 1.75rem; font-weight: 820 }
.auth-card .intro { margin: 0 0 12px; font-size: .9rem }
.auth-card label { margin-top: 9px; font-size: .82rem }
.auth-card input { min-height: 38px; margin-top: 4px; padding: 7px 11px; font-size: .9rem }
.auth-card .cap { margin-top: 4px }
.auth-card .cap b { padding: 7px 10px; font-size: .93rem }
.auth-card .icon-btn.round { width: 34px; height: 34px }
.auth-card .btn.full { min-height: 40px; margin-top: 8px }
.auth-card .alert { margin: 8px 0; padding: 8px 11px }
.auth-switch { margin: 16px 0 0; color: var(--muted); font-size: .86rem; text-align: center }
.auth-switch a,.auth-link { color: #72edff; font-weight: 800; text-decoration: none }
.auth-switch a:hover,.auth-link:hover { color: #fff }
.field-help { display: block; margin-top: 4px; font-size: .72rem }
.demo-otp { display: grid; gap: 4px; margin: 12px 0; padding: 12px 15px; border: 1px solid rgba(255,209,102,.3); border-radius: 10px; color: #ffe3a2; background: rgba(255,209,102,.09); text-align: center }
.demo-otp span { font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase }
.demo-otp strong { color: #fff2ca; font-size: 1.65rem; letter-spacing: .24em; line-height: 1.3 }
.demo-otp small { font-size: .72rem }
.otp-resend-row { margin-top: 12px; text-align: center }
.otp-resend-row small { display: block; margin-top: 6px; font-size: .72rem }
.btn:disabled { opacity: .56; cursor: not-allowed; transform: none; box-shadow: none }
.cancel-form { margin-top: 10px; text-align: center }
.auth-link { padding: 4px; border: 0; background: none; font: inherit; font-size: .84rem; cursor: pointer }
label { display: block; margin-top: 14px; color: #e8f4ff; font-size: .88rem; font-weight: 700 }
input, select { width: 100%; min-height: 42px; margin-top: 5px; padding: 9px 12px; border: 1px solid rgba(151,198,229,.27); border-radius: 9px; outline: none; color: #f2f9ff; background: #07182a; font: inherit; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease }
input::placeholder { color: #9ab2c8 }
input:focus, select:focus { border-color: rgba(53,229,255,.9); background: #0b2035; box-shadow: 0 0 0 3px rgba(53,229,255,.15), 0 0 22px rgba(53,229,255,.08) }
input[type="file"] { padding: 6px }
select option { color: var(--ink); background: var(--panel) }
.pw { position: relative; display: block }
.pw input { padding-right: 44px }
.pw input::-ms-reveal,
.pw input::-ms-clear { display: none }
.pw .eye-toggle svg[hidden] { display: none !important }
.icon-btn { display: grid; padding: 6px; border: 0; color: var(--muted); background: none; cursor: pointer; place-items: center }
.pw .icon-btn { position: absolute; top: 50%; right: 4px; transform: translateY(-50%) }
.icon-btn:hover { color: var(--cyan) }
.cap { display: flex; align-items: center; gap: 8px; margin-top: 5px }
.cap b { flex: 0 0 auto; padding: 9px 12px; border: 1px dashed rgba(57,217,237,.35); border-radius: 9px; color: #c9f8ff; background: rgba(57,217,237,.08); font-size: 1.05rem; white-space: nowrap }
.cap input { min-width: 0; margin: 0 }
.icon-btn.round { flex: none; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.04) }
.icon-btn.round.spin svg { animation: spin .4s linear }
.demo { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line) }
.demo-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px }
.demo-heading h3 { margin: 0; font-size: .86rem; letter-spacing: 0 }
.demo-heading>span { color: var(--muted); font-size: .68rem }
.demo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px }
.demo-account { display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 0 8px; min-width: 0; padding: 9px; border: 1px solid rgba(135,194,225,.2); border-radius: 11px; color: var(--ink); background: linear-gradient(140deg,rgba(50,101,142,.15),rgba(255,255,255,.018)); font: inherit; text-align: left; cursor: pointer; transition: transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease }
.demo-account:hover { transform: translateY(-2px); border-color: rgba(53,229,255,.63); background: rgba(53,229,255,.08); box-shadow: 0 8px 26px rgba(0,0,0,.16),0 0 22px rgba(53,229,255,.08) }
.demo-avatar { display: grid; grid-row: span 2; width: 30px; height: 30px; border: 1px solid rgba(66,139,255,.35); border-radius: 9px; color: #a9caff; background: rgba(66,139,255,.13); font-size: .85rem; font-weight: 800; place-items: center }
.staff-avatar { border-color: rgba(54,201,149,.35); color: #9aebc8; background: rgba(54,201,149,.12) }
.demo-info { display: grid; min-width: 0; gap: 1px }
.demo-info b { font-size: .79rem }
.demo-info small { overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap }
.demo-info code { overflow: hidden; padding: 1px 3px; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap }
.demo-action { grid-column: 2; justify-self: end; color: #70efff; font-size: .66rem; font-weight: 800 }

/* Public landing page */
.land { overflow-x: hidden }
.land { background: radial-gradient(ellipse at 78% 12%, rgba(16,155,214,.25), transparent 34%), radial-gradient(ellipse at 10% 47%, rgba(54,75,196,.19), transparent 32%), var(--paper) }
.top { position: sticky; z-index: 5; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px max(5vw, calc((100vw - 1260px)/2)); border-bottom: 1px solid rgba(125,203,235,.16); background: rgba(5,13,25,.86); backdrop-filter: blur(18px) }
.top nav { display: flex; align-items: center; gap: 28px }
.top nav a:not(.btn) { color: #b5c9d9; text-decoration: none; transition: color .2s ease }
.top nav a:not(.btn):hover { color: var(--cyan) }
.top .brand img { width: 128px }
.hero { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(36px, 6vw, 82px); max-width: 1380px; min-height: 620px; margin: auto; padding: 80px 6vw 90px }
.hero:before { position: absolute; top: 12%; right: 2%; width: min(45vw,540px); aspect-ratio: 1; border: 1px solid rgba(53,229,255,.16); border-radius: 50%; content: ""; pointer-events: none; box-shadow: 0 0 0 50px rgba(53,229,255,.035), 0 0 0 100px rgba(91,131,255,.025),inset 0 0 55px rgba(53,229,255,.045) }
.hero-text { position: relative; z-index: 1; animation: rise-in .7s ease both }
.hero-text>.eyebrow { display: inline-flex; align-items: center; min-height: 31px; padding: 6px 11px; border: 1px solid rgba(53,229,255,.24); border-radius: 6px; background: rgba(53,229,255,.075); box-shadow: inset 0 0 18px rgba(53,229,255,.04) }
.hero h1 { max-width: 700px; margin: 15px 0 20px; color: #f7fbff; font-size: clamp(2.85rem, 5.35vw, 5.15rem); font-weight: 880; letter-spacing: -.065em; line-height: .99; text-shadow: 0 8px 38px rgba(39,162,255,.15) }
.hero h1 span { color: var(--cyan); background: linear-gradient(100deg,#ffffff 1%,#5af0ff 35%,#51b8ff 68%,#9293ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }
.hero p { max-width: 57ch; color: #bfd0e1; font-size: 1.08rem }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px }
.hero-art { position: relative; z-index: 1; animation: float-in 1s .1s cubic-bezier(.2,.8,.2,1) both }
.hero-art:before { position: absolute; z-index: -1; inset: 14% 10%; border-radius: 50%; background: rgba(29,173,221,.3); content: ""; filter: blur(65px) }
.hero-art img { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 26px 36px rgba(0,0,0,.34)) drop-shadow(0 0 22px rgba(55,195,255,.09)); transition: transform .5s ease, filter .5s ease }
.hero-art:hover img { transform: translateY(-6px) scale(1.012); filter: drop-shadow(0 34px 46px rgba(0,0,0,.4)) drop-shadow(0 0 32px rgba(55,195,255,.18)) }
.band { padding: 78px max(6vw, calc((100vw - 1260px)/2)) }
.band.alt { border-top: 1px solid rgba(160,194,220,.09); border-bottom: 1px solid rgba(160,194,220,.09); background: linear-gradient(120deg, rgba(15,35,54,.9), rgba(8,24,39,.8)) }
.band h2 { margin: 0 0 12px; color: #f0f7ff; font-size: clamp(1.7rem,3vw,2.4rem); font-weight: 820 }
.band-lead { max-width: 60ch; margin: 0 0 28px; color: #b7cadd }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin: 30px 0 0; padding: 0; list-style: none }
.steps li { position: relative; min-height: 185px; padding: 24px; overflow: hidden; border: 1px solid rgba(112,177,217,.2); border-radius: 15px; background: linear-gradient(145deg, rgba(18,42,63,.9), rgba(10,26,42,.8)); transition: transform .25s ease, border-color .25s ease,box-shadow .25s ease }
.steps li:hover { transform: translateY(-5px); border-color: rgba(53,229,255,.55); box-shadow: 0 16px 38px rgba(0,0,0,.2),0 0 28px rgba(53,229,255,.06) }
.steps li:before { position: absolute; top: -25px; right: -8px; color: rgba(53,229,255,.15); font-size: 6rem; font-weight: 900; line-height: 1; content: counter(list-item, decimal-leading-zero) }
.steps b, .feat b { position: relative; display: block; margin-bottom: 8px; font-size: 1.03rem }
.steps span, .feat span { position: relative; color: #b4c7da }
.feat { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 30px }
.feat>div { padding: 4px 0 4px 16px; border-left: 2px solid #45e7ff }
.sec { columns: 2; padding-left: 20px; color: #c1d2e3 }
.sec li { margin-bottom: 10px; padding-left: 5px }
.land footer { padding: 28px; border-top: 1px solid var(--line); color: var(--muted); text-align: center }

/* Authenticated application */
.app { display: flex; min-height: 100vh }
.side { position: sticky; top: 0; display: flex; flex: 0 0 248px; flex-direction: column; width: 248px; height: 100vh; padding: 22px 15px 16px; border-right: 1px solid rgba(71,192,231,.2); background: radial-gradient(ellipse at 0 0,rgba(20,115,168,.17),transparent 42%),linear-gradient(180deg, #0a1a2c, #060f1c 78%); box-shadow: 14px 0 40px rgba(0,0,0,.18) }
.side .brand { justify-content: center; padding: 3px 4px 14px; border-bottom: 1px solid var(--line) }
.side .brand img { width: 190px }
.side-caption { padding: 12px 10px 0; color: #88a6bf; font-size: .67rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase }
.side nav { display: flex; flex: 1; flex-direction: column; gap: 5px; margin-top: 10px }
.side nav a { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid transparent; border-radius: 9px; color: #c1d2e3; font-weight: 600; text-decoration: none; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease }
.side nav a:before { width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 2px; content: ""; transform: rotate(45deg); transition: background .2s ease, box-shadow .2s ease }
.side nav a.on, .side nav a:hover { transform: translateX(2px); border-color: rgba(53,229,255,.25); color: #f0fdff; background: linear-gradient(90deg, rgba(53,229,255,.18), rgba(81,131,255,.055)); box-shadow: inset 2px 0 #42e7ff }
.side nav a.on:before { border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 12px rgba(57,217,237,.55) }
.me { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 0 10px; padding: 14px 5px 0; border-top: 1px solid var(--line) }
.me .avatar { display: grid; grid-row: span 2; width: 38px; height: 38px; border: 1px solid rgba(53,229,255,.45); border-radius: 12px; color: #68efff; background: linear-gradient(145deg,rgba(53,229,255,.19),rgba(91,131,255,.16)); font-weight: 800; place-items: center }
.me b { overflow: hidden; color: #e8f4fc; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap }
.me small { font-size: .75rem; text-transform: capitalize }
.me a { grid-column: 2; margin-top: 7px; color: #ff9ca5; font-size: .82rem; text-decoration: none }
.me a:hover { color: #ffd1d5 }
.help-menu { flex: none; margin: 8px 0 12px; border: 1px solid rgba(126,182,218,.15); border-radius: 10px; background: rgba(57,128,175,.06) }
.help-menu summary { position: relative; padding: 9px 12px 9px 31px; color: #c1d2e3; font-size: .86rem; font-weight: 700; cursor: pointer; list-style: none }
.help-menu summary::-webkit-details-marker { display: none }
.help-menu summary:before { position: absolute; top: 50%; left: 13px; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 2px; content: ""; transform: translateY(-60%) rotate(45deg); transition: transform .2s ease,border-color .2s ease }
.help-menu[open] summary:before { border-color: var(--cyan); transform: translateY(-30%) rotate(225deg) }
.help-menu summary:hover, .help-menu[open] summary { color: #e8fbff }
.help-submenu { padding: 0 7px 7px }
.help-submenu a { display: block; padding: 8px 9px 8px 17px; border-left: 1px solid rgba(53,229,255,.28); border-radius: 0 7px 7px 0; color: #afc8dc; font-size: .8rem; text-decoration: none; transition: background .2s ease,color .2s ease }
.help-submenu a.on, .help-submenu a:hover { border-left-color: var(--cyan); color: #f0fdff; background: rgba(53,229,255,.09) }
.main { flex: 1; min-width: 0; max-width: 1800px; margin: 0 auto; padding: 28px clamp(18px,3vw,42px) 48px; background: radial-gradient(ellipse at 90% 0,rgba(29,102,171,.09),transparent 35%); animation: rise-in .42s ease both }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px }
.pt { margin: 4px 0 0; color: #f4f9ff; font-size: clamp(1.6rem,2.4vw,2rem); font-weight: 850; letter-spacing: -.045em }
.home-link { flex: none }
.panel { margin-bottom: 18px; padding: 20px; border: 1px solid rgba(126,182,218,.2); border-radius: 14px; background: linear-gradient(145deg, rgba(13,31,51,.97), rgba(8,21,36,.95)); box-shadow: 0 12px 34px rgba(0,0,0,.2); transition: border-color .25s ease, transform .25s ease }
.panel h2 { margin: 0 0 14px; color: #eaf5ff; font-size: 1.06rem; font-weight: 780 }
.cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 18px }
.card { position: relative; min-width: 0; padding: 18px; overflow: hidden; border: 1px solid rgba(116,187,224,.22); border-radius: 13px; background: linear-gradient(145deg, rgba(16,39,62,.97), rgba(8,22,39,.95)); box-shadow: 0 12px 30px rgba(0,0,0,.2); transition: transform .25s ease, border-color .25s ease,box-shadow .25s ease }
.card:hover { transform: translateY(-4px); border-color: rgba(53,229,255,.48); box-shadow: 0 18px 38px rgba(0,0,0,.24),0 0 28px rgba(53,229,255,.06) }
.card:after { position: absolute; top: -34px; right: -22px; width: 95px; height: 95px; border: 1px solid rgba(53,229,255,.18); border-radius: 50%; content: ""; box-shadow: 0 0 0 14px rgba(53,229,255,.035) }
.card small { display: block; color: #b6cbde; font-size: .82rem; font-weight: 650 }
.card b { display: block; margin-top: 7px; color: #f6fbff; font-size: clamp(1.3rem,2vw,1.75rem); font-weight: 820; letter-spacing: -.035em; overflow-wrap: anywhere }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px }
.grid2 .panel { min-width: 0; margin-bottom: 0 }
.grid2 canvas { max-width: 100% }
table { width: 100%; border-collapse: collapse; font-size: .88rem }
th, td { padding: 11px 10px; border-bottom: 1px solid rgba(160,194,220,.1); text-align: left; vertical-align: middle }
th { color: #b2c7dc; font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap }
td { color: #e1edf7 }
tbody tr { transition: background .18s ease }
tbody tr:hover { background: rgba(53,229,255,.055) }
tr:last-child td { border-bottom: 0 }
.scroll { overflow-x: auto; scrollbar-color: #28475f transparent; scrollbar-width: thin }
.form { display: grid; grid-template-columns: repeat(4,1fr); gap: 0 14px }
.row-end { display: flex; grid-column: 1/-1; gap: 10px; margin-top: 16px }
.filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px }
.filters input, .filters select { width: auto; min-width: 145px; margin: 0 }
.act { display: flex; flex-wrap: wrap; gap: 6px }
.act form { margin: 0 }
.ph { margin-bottom: 20px }
.ph h2 { margin-bottom: 6px }
.preview .side { display: none }
.preview .main { max-width: none }

/* Product requirements document */
.prd-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; min-height: 150px; padding: 26px 30px; border-color: rgba(53,229,255,.28); background: radial-gradient(ellipse at 88% 2%,rgba(53,229,255,.16),transparent 40%),linear-gradient(125deg,#102b44,#0a192b 75%); box-shadow: inset 0 1px rgba(255,255,255,.04),0 18px 48px rgba(0,0,0,.22) }
.prd-hero:after { position: absolute; top: -90px; right: 23%; width: 220px; height: 220px; border: 1px solid rgba(53,229,255,.14); border-radius: 50%; content: ""; box-shadow: 0 0 0 25px rgba(53,229,255,.025),0 0 0 55px rgba(91,131,255,.025); pointer-events: none }
.prd-hero h2 { margin: 8px 0; color: #f4fbff; font-size: clamp(1.7rem,3vw,2.4rem); font-weight: 850 }
.prd-hero p { max-width: 64ch; margin: 0; color: #bdd1e3 }
.prd-hero-actions { position: relative; z-index: 1; display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 12px }
.prd-status { display: inline-flex; align-items: center; gap: 7px; color: #b6d2e5; font-size: .76rem; font-weight: 700; white-space: nowrap }
.prd-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px rgba(66,226,164,.75) }
.prd-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); align-items: start; gap: 18px }
.prd-toc { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 4px; padding: 17px 12px }
.prd-toc .eyebrow { margin: 1px 9px 8px; font-size: .64rem }
.prd-toc a { padding: 7px 9px; border-left: 2px solid transparent; border-radius: 0 7px 7px 0; color: #bed0e0; font-size: .77rem; line-height: 1.4; text-decoration: none; transition: color .18s ease,background .18s ease,border-color .18s ease }
.prd-toc a:hover { border-left-color: var(--cyan); color: #f2fbff; background: rgba(53,229,255,.08) }
.prd-content { min-width: 0 }
.prd-section { padding: clamp(17px,2.5vw,25px); scroll-margin-top: 18px }
.prd-section-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 15px }
.prd-section-heading h2 { margin: 2px 0 0; color: #edf7ff; font-size: 1.22rem; font-weight: 820 }
.prd-section-heading .eyebrow { font-size: .62rem }
.prd-number { display: grid; flex: none; width: 39px; height: 39px; border: 1px solid rgba(53,229,255,.27); border-radius: 11px; color: #73efff; background: linear-gradient(145deg,rgba(53,229,255,.14),rgba(91,131,255,.1)); font-size: .76rem; font-weight: 850; place-items: center }
.prd-section>p { color: #c1d1e0 }
.prd-section strong { color: #f1f8ff }
.prd-section h3 { margin: 19px 0 8px; color: #e6f4ff; font-size: .96rem }
.prd-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-top: 19px }
.prd-facts>div { min-width: 0; padding: 11px; border: 1px solid rgba(126,182,218,.16); border-radius: 9px; background: rgba(64,130,174,.07) }
.prd-facts small { display: block; margin-bottom: 4px; color: #a7bfd3; font-size: .69rem }
.prd-facts b { display: block; color: #eff8ff; font-size: .8rem; overflow-wrap: anywhere }
.prd-list { margin: 9px 0 0; padding-left: 19px; color: #c4d4e2 }
.prd-list li { margin: 6px 0; padding-left: 2px }
.prd-list li::marker { color: #55e8ff }
.prd-callout { display: grid; gap: 3px; margin-top: 17px; padding: 13px 15px; border: 1px solid rgba(53,229,255,.2); border-left: 3px solid var(--cyan); border-radius: 0 9px 9px 0; background: rgba(53,229,255,.055) }
.prd-callout b { color: #e8faff; font-size: .84rem }
.prd-callout span { color: #b9cee0; font-size: .82rem }
.prd-table { min-width: 580px; font-size: .8rem }
.prd-table th { color: #9fbad1; font-size: .67rem }
.prd-table td { color: #c8d8e6; line-height: 1.5 }
.prd-role,.priority { display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid transparent; border-radius: 99px; font-size: .68rem; font-weight: 800; white-space: nowrap }
.prd-role.staff { border-color: rgba(53,229,255,.2); color: #7defff; background: rgba(53,229,255,.09) }
.prd-role.admin { border-color: rgba(255,209,102,.24); color: #ffdb86; background: rgba(255,209,102,.09) }
.priority.required { border-color: rgba(66,226,164,.22); color: #7cebbc; background: rgba(66,226,164,.08) }
.priority.admin { border-color: rgba(255,209,102,.24); color: #ffdb86; background: rgba(255,209,102,.09) }
.prd-note { margin: 12px 0 0; color: #9fb5c9!important; font-size: .79rem }
.prd-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.prd-scope { padding: 14px; border: 1px solid rgba(126,182,218,.16); border-radius: 10px; background: rgba(64,130,174,.045) }
.prd-scope h3 { margin: 0 0 8px; font-size: .88rem }
.prd-scope.included h3 { color: #7cebbc }
.prd-scope.excluded h3 { color: #ffca7b }
.prd-scope .prd-list { margin-top: 0; font-size: .79rem }
.prd-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; counter-reset: flow }
.prd-flow li { position: relative; padding: 14px 12px; border: 1px solid rgba(126,182,218,.17); border-radius: 10px; background: linear-gradient(145deg,rgba(64,130,174,.08),rgba(64,130,174,.025)); counter-increment: flow }
.prd-flow li:before { display: block; margin-bottom: 8px; color: #54eaff; content: "0" counter(flow) " /"; font-size: .68rem; font-weight: 850; letter-spacing: .08em }
.prd-flow b,.prd-entity-grid b,.prd-quality-grid b { display: block; margin-bottom: 5px; color: #f1f8ff; font-size: .84rem }
.prd-flow span,.prd-entity-grid span,.prd-quality-grid span { display: block; color: #b7c9da; font-size: .77rem; line-height: 1.55 }
.prd-entity-grid,.prd-quality-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 12px 0 16px }
.prd-entity-grid>div,.prd-quality-grid>div { padding: 12px; border: 1px solid rgba(126,182,218,.15); border-radius: 9px; background: rgba(64,130,174,.05) }
.prd-entity-grid b,.prd-quality-grid b { color: #7deeff }
.prd-checklist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.prd-checklist li { position: relative; padding: 10px 12px 10px 35px; border: 1px solid rgba(126,182,218,.14); border-radius: 9px; color: #c6d6e5; background: rgba(64,130,174,.045); font-size: .83rem }
.prd-checklist li:before { position: absolute; top: 10px; left: 13px; color: #61e9b0; content: "✓"; font-weight: 900 }
.prd-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 13px; border-top: 1px solid var(--line); color: #9fb6ca; font-size: .75rem }
.prd-footer a { color: #67eaff; text-decoration: none }
.prd-footer a:hover { color: #fff }

@keyframes rise-in { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: translateY(0) } }
@keyframes float-in { from { opacity: 0; transform: translateY(20px) scale(.98) } to { opacity: 1; transform: translateY(0) scale(1) } }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes spin { to { transform: rotate(360deg) } }

@media(max-width:1050px) {
  .side { flex-basis: 210px; width: 210px }
  .hero { gap: 35px; min-height: 560px }
  .feat { grid-template-columns: repeat(2,1fr) }
  .cards { grid-template-columns: repeat(2,1fr) }
  .form { grid-template-columns: repeat(2,1fr) }
}
@media(max-width:760px) {
  .top { padding: 9px 18px }
  .top nav { gap: 14px }
  .top nav a:not(.btn) { display: none }
  .top .brand img { width: 112px }
  .hero { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding: 62px 22px 70px }
  .hero-art { width: min(100%, 560px); margin: auto }
  .hero:before { top: 48%; right: 0; width: min(85vw, 390px) }
  .band { padding: 58px 22px }
  .steps { grid-template-columns: 1fr }
  .steps li { min-height: 0 }
  .auth { place-items: start center; padding: 20px 14px }
  .auth-layout { grid-template-columns: minmax(0,1fr); gap: 0; max-width: 500px }
  .auth-showcase { display: grid; grid-template-columns: minmax(0,1fr) clamp(105px,32vw,155px); align-items: center; gap: 0 12px; margin-bottom: 12px }
  .auth-brand { grid-column: 1/-1; margin: 0 0 8px }
  .auth-brand img { width: 112px }
  .auth-brand .brand-text { font-size: 1.25rem }
  .auth-copy h1 { margin: 6px 0 0; font-size: clamp(1.45rem,4.5vw,1.8rem) }
  .auth-copy .eyebrow { font-size: .61rem }
  .auth-copy p { display: none }
  .auth-visual { grid-column: 2; grid-row: 2; width: clamp(105px,32vw,155px); margin: 0 -7px 0 0 }
  .auth-card { padding: 21px }
  .app { display: block }
  .side { position: relative; width: 100%; height: auto; padding: 8px 12px 10px; border-right: 0; border-bottom: 1px solid var(--line) }
  .side .brand { justify-content: flex-start; padding: 0 5px 7px; border: 0 }
  .side .brand img { width: 132px }
  .side-caption, .me { display: none }
  .side nav { flex-direction: row; flex-wrap: nowrap; gap: 5px; margin-top: 3px; overflow-x: auto }
  .side nav a { flex: none; padding: 8px 10px; font-size: .82rem }
  .side nav a:before { display: none }
  .side nav a:hover, .side nav a.on { transform: none }
  .help-menu { width: 100%; margin: 6px 0 0 }
  .help-menu summary { padding-top: 7px; padding-bottom: 7px }
  .help-submenu a { padding-top: 6px; padding-bottom: 6px }
  .main { padding: 20px 14px 35px }
  .page-heading { align-items: center; margin-bottom: 16px }
  .home-link { min-height: 36px; padding: 7px 10px; font-size: .78rem }
  .grid2 { grid-template-columns: 1fr; gap: 14px }
  .grid2 .panel { margin-bottom: 0 }
  .prd-layout { grid-template-columns: minmax(0,1fr); gap: 10px }
  .prd-toc { position: static; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 8px; padding: 12px }
  .prd-toc .eyebrow { grid-column: 1/-1 }
  .prd-facts { grid-template-columns: repeat(2,minmax(0,1fr)) }
  .prd-flow { grid-template-columns: repeat(2,minmax(0,1fr)) }
}
@media(max-width:520px) {
  .auth-card { padding: 18px 15px; border-radius: 16px }
  .auth-top { gap: 6px }
  .auth-top .eyebrow { font-size: .59rem }
  .auth-home { font-size: .7rem }
  .demo-grid { gap: 6px }
  .demo-account { grid-template-columns: 25px minmax(0,1fr); gap: 0 6px; padding: 7px 6px }
  .demo-avatar { width: 25px; height: 25px; border-radius: 8px; font-size: .75rem }
  .demo-info b { font-size: .73rem }
  .demo-info small { font-size: .59rem }
  .demo-info code { font-size: .53rem }
  .prd-hero { align-items: flex-start; flex-direction: column; padding: 19px }
  .prd-hero-actions { width: 100%; flex-direction: row; align-items: center; justify-content: space-between }
  .prd-hero p { font-size: .86rem }
  .prd-section { padding: 15px 12px }
  .prd-section-heading { gap: 9px }
  .prd-number { width: 34px; height: 34px }
  .prd-columns,.prd-entity-grid,.prd-quality-grid { grid-template-columns: minmax(0,1fr) }
  .prd-flow { grid-template-columns: minmax(0,1fr) }
  .prd-toc { grid-template-columns: minmax(0,1fr) }
  .cap { flex-wrap: wrap }
  .cap b { flex: 1; text-align: center }
  .hero h1 { font-size: clamp(2.45rem,12vw,3.55rem) }
  .cards { gap: 9px }
  .card { padding: 14px 12px }
  .card b { font-size: 1.2rem }
  .panel { padding: 15px 12px; border-radius: 12px }
  .form { grid-template-columns: 1fr }
  .row-end { flex-wrap: wrap }
  .filters { align-items: stretch }
  .filters input, .filters select { flex: 1 1 135px; min-width: 0 }
  .sec { columns: 1 }
  th, td { padding: 9px 8px }
}
@media(max-height:780px) and (min-width:761px) {
  .auth { padding-top: 12px; padding-bottom: 12px }
  .auth-layout { gap: clamp(24px,4vw,54px) }
  .auth-brand { margin-bottom: 10px }
  .auth-brand img { width: 132px }
  .auth-copy h1 { margin: 6px 0 9px; font-size: clamp(2rem,3.4vw,3.2rem) }
  .auth-visual { width: min(100%,440px); margin-top: -8px; margin-bottom: -38px }
  .auth-card { padding: 21px }
  .auth-top { margin-bottom: 11px }
  .auth-card h2 { font-size: 1.55rem }
  .auth-card .intro { margin-bottom: 8px }
  .auth-card label { margin-top: 7px }
  .auth-card input { min-height: 36px }
  .auth-card .demo { margin-top: 11px; padding-top: 9px }
  .demo-account { padding: 7px }
}
@media(prefers-reduced-motion:reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
}
@media print {
  :root { color-scheme: light }
  body, .panel, .card { color: #111; background: #fff; box-shadow: none }
  .side, .noprint, .pt, .alert, .prd-toc, .prd-hero-actions { display: none !important }
  .main { padding: 0 }
  .panel { border: 0; break-inside: avoid }
  .prd-layout { display: block }
  .prd-section { padding: 10px 0; break-inside: auto }
  .prd-section-heading h2,.prd-hero h2,.prd-section h3,.prd-flow b,.prd-entity-grid b,.prd-quality-grid b,.prd-facts b,.prd-callout b { color: #111 }
  .prd-section p,.prd-list,.prd-flow span,.prd-entity-grid span,.prd-quality-grid span,.prd-callout span,.prd-note,.prd-footer,.prd-table td { color: #333!important }
  .prd-number { color: #111; border-color: #aaa; background: #eee }
  .prd-table { min-width: 0; font-size: 8pt }
  th, td { color: #111; border-color: #ddd }
  .ph { margin-bottom: 10px }
}