/* OcuTrace — Future layer v3: OS chrome, holographic components, modules */
:root{--holo:linear-gradient(135deg,#58d9e9,#367cf0 55%,#9b6bff);--amber:#f5b45a;--red:#ff6b81;--glass:#0a1d33b3}
.oc-stars{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:.75}
.app-layout,.landing,main,.footer{position:relative;z-index:1}
.app-layout{background:radial-gradient(ellipse at 70% 0%,#102b40cc 0%,#071522e6 45%,#050d18f2)}
body{background:#030a14}
/* sidebar extras */
.who{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;margin:16px 4px 0;padding:10px 12px;border:1px solid #1f4a72;border-radius:14px;background:linear-gradient(120deg,#0e2c48,#081a2e);font-size:12px}
.who:hover{border-color:var(--cyan)}.who small{display:block;color:#6f93a8;font-size:9px}.who b{font-size:12px}.who i{margin-inline-start:auto;color:var(--cyan);font-style:normal}
.who-av,.member-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;flex:none;box-shadow:0 0 16px #58d9e944}
.c0{background:linear-gradient(135deg,#0aa6d4,#2f5fff)}.c1{background:linear-gradient(135deg,#19b38a,#0e7f9e)}.c2{background:linear-gradient(135deg,#8a5cff,#3c5bff)}.c3{background:linear-gradient(135deg,#ff8a5c,#d9466f)}
.who-list{display:grid;gap:8px;margin-top:12px}.who-list .member-card{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#0d2638}.who-list .member-card:hover{border-color:var(--cyan)}.who-list small{display:block;color:var(--muted);font-size:10px}
.kbd-hint{all:unset;cursor:pointer;font-size:10px;color:#6f93a8;margin:0 6px 10px}.kbd-hint:hover{color:var(--cyan)}
kbd{font:700 9px Manrope,monospace;border:1px solid #2a5577;border-bottom-width:2px;border-radius:5px;padding:1px 5px;margin-inline-end:3px;color:#a9d8e8;background:#0b2238}
.sys{font:600 8.5px/1.6 Manrope,monospace;letter-spacing:1px;color:#4f7890;margin-top:10px;direction:ltr;text-align:left}.sys i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#62d8ba;box-shadow:0 0 8px #62d8ba;margin-right:6px;animation:blink 1.6s infinite}.sys span{color:#62d8ba}
.side-link .i{width:16px;height:16px;opacity:.8}
.side-link.new::after{content:'NEW';margin-inline-start:auto;font:800 8px Manrope;letter-spacing:1px;padding:2px 6px;border-radius:20px;background:var(--holo);color:#02070f}
/* toasts */
.toasts{position:fixed;bottom:22px;inset-inline-start:50%;transform:translateX(-50%);z-index:400;display:grid;gap:8px;pointer-events:none}
html[dir=rtl] .toasts{transform:translateX(50%)}
.toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;background:#0b2238f2;border:1px solid #2e6b8a;color:#e6fbff;font-size:12px;box-shadow:0 20px 50px #000a,0 0 30px #58d9e933;backdrop-filter:blur(12px);opacity:0;translate:0 12px;transition:.35s}
.toast.in{opacity:1;translate:0 0}.toast i{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.toast.w i{background:var(--amber);box-shadow:0 0 10px var(--amber)}.toast.ok i{background:var(--green);box-shadow:0 0 10px var(--green)}
/* modal */
.oc-modal{position:fixed;inset:0;z-index:350;display:grid;place-items:center;padding:20px;background:#01050bcc;backdrop-filter:blur(8px);opacity:0;transition:opacity .25s}
.oc-modal.in{opacity:1}.oc-modal-card{position:relative;width:min(520px,100%);max-height:88vh;overflow:auto;padding:26px;border-radius:22px;border:1px solid #2a6a8c;background:radial-gradient(circle at 90% 0,#14406a88,transparent 55%),#071a2df5;box-shadow:0 30px 90px #000c,0 0 60px #2fa8ff22;scale:.96;transition:scale .25s}
.oc-modal.in .oc-modal-card{scale:1}.oc-modal-card h3{margin:0 0 6px}.oc-x{position:absolute;top:12px;inset-inline-end:14px;background:none;border:0;color:#8fb6c9;font-size:22px;cursor:pointer}
.pal-q{width:100%;background:#041222;border:1px solid #2a6a8c;border-radius:12px;padding:14px;color:#fff;font-size:14px}
.pal-list{display:grid;gap:4px;margin-top:10px;max-height:50vh;overflow:auto}.pal-i{all:unset;cursor:pointer;display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;font-size:13px;color:#cfe8f2}.pal-i b{width:22px;text-align:center;color:var(--cyan)}.pal-i.on,.pal-i:hover{background:#12385a}.pal-h{display:block;margin-top:10px;color:#4f7890;font-size:10px}
/* generic holo components */
.holo{position:relative;border:1px solid #1f4a72;border-radius:22px;padding:22px;background:radial-gradient(circle at 85% 0,#12407055,transparent 60%),linear-gradient(150deg,#0b2444dd,#061222ee);box-shadow:0 20px 50px #0006,inset 0 1px 0 #ffffff14}
.holo::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,#58d9e966,transparent 35%,transparent 65%,#367cf066);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.kpi small{display:block;color:#7fa6bb;font-size:10px;letter-spacing:.6px}.kpi strong{display:block;font:800 30px/1.2 Manrope;margin:6px 0 2px}.kpi span{font-size:10px;color:var(--muted)}
.mono{font-family:Manrope,monospace;letter-spacing:.5px}
.badge{display:inline-flex;align-items:center;gap:6px;font:700 10px Manrope,Cairo;padding:4px 10px;border-radius:30px;border:1px solid #2e6b8a;color:#8fe9ff;background:#0b2238}
.badge.ok{border-color:#2f7d66;color:#79e0bd}.badge.w{border-color:#8a6b2e;color:#f5d99b}.badge.r{border-color:#8a2e45;color:#ff9fb0}
.seg{display:inline-flex;padding:3px;border-radius:12px;background:#061527;border:1px solid var(--line);gap:2px;flex-wrap:wrap}.seg button{border:0;background:none;color:#9ab2c1;font-size:11px;font-weight:700;padding:7px 12px;border-radius:9px;cursor:pointer}.seg button.on{background:linear-gradient(110deg,#0aa6d4,#2f5fff);color:#fff;box-shadow:0 0 18px #1d8fff55}
.inp,.oc-modal-card input,.oc-modal-card select,.oc-modal-card textarea,.form-row input,.form-row select,.form-row textarea{width:100%;background:#041222;border:1px solid var(--line);border-radius:11px;padding:11px 12px;color:#e9f8ff;font-size:13px}
.inp:focus,.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--cyan);outline:0;box-shadow:0 0 0 3px #58d9e922}
.form-row{display:grid;gap:6px;margin:12px 0;font-size:11px;color:#9ab2c1}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sp{flex:1}
.btn-danger{border-color:#8a2e45;color:#ffb3c0;background:#2a0f1a}.btn-danger:hover{border-color:var(--red)}
.empty{padding:30px;text-align:center;color:var(--muted);font-size:12px;border:1px dashed #24506e;border-radius:16px}
.tl{display:grid;gap:10px;margin-top:12px}.tl-i{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#0a1d33cc}
.tl-i .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#58d9e914;border:1px solid #58d9e944;color:var(--cyan);font-size:16px}.tl-i b{font-size:13px}.tl-i small{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.icon-btn{border:1px solid var(--line);background:#0b2238;color:#9ab2c1;border-radius:9px;padding:6px 9px;cursor:pointer;font-size:11px}.icon-btn:hover{border-color:var(--red);color:#ffb3c0}
table.dt{width:100%;border-collapse:collapse;font-size:12px}.dt th,.dt td{padding:10px;border-bottom:1px solid #1c3b52;text-align:start}.dt th{color:#7fa6bb;font-weight:700;font-size:10px;letter-spacing:.5px}.dt td.n{font:700 14px Manrope;direction:ltr;text-align:center}
.scan-bar{position:relative;height:3px;border-radius:3px;background:#12324d;overflow:hidden}.scan-bar span{position:absolute;inset:0 auto 0 0;background:var(--holo);box-shadow:0 0 14px #58d9e9;transition:width .4s}
html[dir=rtl] .scan-bar span{inset:0 0 0 auto}
.glitch{position:relative}.page-head h1{background:linear-gradient(120deg,#fff 30%,#8fe9ff 70%,#7aa2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hud-corners{position:relative}.hud-corners::after{content:'';position:absolute;inset:8px;pointer-events:none;opacity:.7;background:linear-gradient(#58d9e9,#58d9e9) 0 0/14px 1px no-repeat,linear-gradient(#58d9e9,#58d9e9) 0 0/1px 14px no-repeat,linear-gradient(#58d9e9,#58d9e9) 100% 0/14px 1px no-repeat,linear-gradient(#58d9e9,#58d9e9) 100% 0/1px 14px no-repeat,linear-gradient(#58d9e9,#58d9e9) 0 100%/14px 1px no-repeat,linear-gradient(#58d9e9,#58d9e9) 0 100%/1px 14px no-repeat,linear-gradient(#58d9e9,#58d9e9) 100% 100%/14px 1px no-repeat,linear-gradient(#58d9e9,#58d9e9) 100% 100%/1px 14px no-repeat}
/* mobile nav fix: horizontal scroll strip of links */
@media(max-width:700px){.sidebar .side-link{display:flex!important}.sidebar .who,.sidebar .kbd-hint,.sidebar .sys{display:none}.sidebar{position:sticky!important;top:0;z-index:20}}
.brand{direction:ltr;unicode-bidi:isolate}html[dir=rtl] .brand>span:last-child{margin-right:0;margin-left:-7px}
@media(min-width:900px){.page-head{padding-inline-end:150px}}
/* landing: future showcase */
.fut-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}@media(max-width:900px){.fut-grid{grid-template-columns:1fr}}
.fut-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:26px;border-radius:24px;border:1px solid #1f4a72;background:radial-gradient(circle at 80% 0,#14407088,transparent 60%),linear-gradient(150deg,#0b2444,#061222);transition:.35s;min-height:400px}
.fut-card:hover{transform:translateY(-6px);border-color:var(--cyan);box-shadow:0 30px 60px #0008,0 0 50px #58d9e933}.fut-card small{font:800 10px Manrope;letter-spacing:1.6px;color:var(--cyan)}.fut-card h3{font-size:22px;margin:2px 0}.fut-card p{color:#9fbccb;font-size:12.5px;line-height:2;margin:0}.fut-card .text-link{margin-top:auto}
.fut-vis{position:relative;height:150px;margin:-6px -6px 10px;border-radius:16px;background:radial-gradient(circle at 50% 50%,#0d3a66,#040c18 70%);overflow:hidden;border:1px solid #1c3b52}
.fv-scan i{position:absolute;left:50%;top:50%;width:90px;height:90px;margin:-45px;border-radius:50%;border:1px solid #58d9e9;box-shadow:0 0 30px #58d9e955,inset 0 0 20px #58d9e933}.fv-scan i+i{width:30px;height:30px;margin:-15px;background:radial-gradient(circle,#02070f 40%,#2f6bff 42%,#58d9e9 70%)}
.fv-scan b{position:absolute;left:10%;right:10%;height:2px;top:50%;background:linear-gradient(90deg,transparent,#8fe9ff,transparent);box-shadow:0 0 14px #58d9e9;animation:fvs 2.6s ease-in-out infinite}@keyframes fvs{0%,100%{translate:0 -60px}50%{translate:0 60px}}
.fv-layers i{position:absolute;top:50%;left:50%;width:84px;height:84px;margin:-42px;border-radius:50%;border:2px solid;animation:fvl 4s ease-in-out infinite}.fv-layers i:nth-child(1){border-color:#8fe9ff;--x:-90px}.fv-layers i:nth-child(2){border-color:#367cf0;--x:-45px;animation-delay:.1s}.fv-layers i:nth-child(3){border-color:#ff7a59;--x:0px;animation-delay:.2s}.fv-layers i:nth-child(4){border-color:#c23b5a;--x:45px;animation-delay:.3s}.fv-layers i:nth-child(5){border-color:#e8eef2;--x:90px;animation-delay:.4s}
@keyframes fvl{0%,15%,100%{translate:0 0;scale:1}45%,70%{translate:var(--x) 0;scale:.8}}
.fv-lock b{position:absolute;inset:0;display:grid;place-items:center;font:800 26px Manrope;letter-spacing:4px;background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}.fv-lock i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#58d9e914 0 1px,transparent 1px 14px);animation:fvk 6s linear infinite}@keyframes fvk{to{background-position:140px 0}}
.fut-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}.fut-stats div{padding:18px;border:1px solid var(--line);border-radius:16px;background:#071a2dcc;text-align:center}.fut-stats b{display:block;font:800 30px Manrope;background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}.fut-stats span{font-size:11px;color:#9ab2c1}@media(max-width:700px){.fut-stats{grid-template-columns:1fr 1fr}}
a.feature-card{display:block;color:inherit}
@media(max-width:700px){.page-head::after{display:none}.page-head{padding-inline-end:0}}
/* ===== mobile app shell: top bar + drawer ===== */
.m-top,.m-scrim,.m-menu,.m-only{display:none}
.m-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid #2a5577;background:#0b2238;color:#8fe9ff;font-size:18px;cursor:pointer;flex:none}
.m-menu{gap:4px;align-content:center}.m-menu i{display:block;width:18px;height:2px;border-radius:2px;background:#8fe9ff;transition:.25s}
.nav-open .m-menu i:nth-child(1),.m-menu.x i:nth-child(1){transform:translateY(6px) rotate(45deg)}.nav-open .m-menu i:nth-child(2),.m-menu.x i:nth-child(2){opacity:0}.nav-open .m-menu i:nth-child(3),.m-menu.x i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:700px){
.m-top{display:flex;position:sticky;top:0;z-index:40;align-items:center;gap:8px;padding:10px 14px;background:#030a14eb;backdrop-filter:blur(14px);border-bottom:1px solid #ffffff14}.m-top .brand{font-size:20px;gap:6px}.m-top .brand-symbol{width:30px;height:30px}.m-menu{display:grid}
.app-layout{display:block!important}.app-main{margin:0!important}
html body .sidebar{position:fixed!important;top:0!important;bottom:0!important;height:100%!important;width:min(84vw,320px)!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding:18px 14px 30px!important;z-index:95!important;transition:transform .32s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 60px #000c;background:linear-gradient(180deg,#071a2e,#030b16)!important}
html[dir=rtl] body .sidebar{right:0!important;left:auto!important;transform:translateX(105%)}html[dir=ltr] body .sidebar{left:0!important;right:auto!important;transform:translateX(-105%)}
html.nav-open body .sidebar{transform:none!important}
.sidebar .sidebrand{display:flex!important;padding:4px 8px 16px!important;border-bottom:1px solid #ffffff13!important}.sidebar .side-caption{display:block!important}.sidebar .who{display:flex!important}
.sidebar .side-link{display:flex!important;white-space:normal!important;padding:13px 12px!important;font-size:13.5px!important}.sidebar .lang{margin:14px 0 0!important;align-self:flex-start}.sidebar .kbd-hint,.sidebar .sys,.sidebar .side-note{display:none!important}
html.nav-open .m-scrim{display:block;position:fixed;inset:0;z-index:90;background:#000a;backdrop-filter:blur(3px)}
html.nav-open{overflow:hidden}
.content-wrap{padding:14px 14px 50px!important}.page-head{margin:12px 0 18px!important}.page-head h1{font-size:26px!important;line-height:1.35}.page-head p{font-size:12.5px}
.g4{grid-template-columns:repeat(2,minmax(0,1fr))!important}.metric strong,.kpi strong{font-size:24px}
.bento{gap:10px}.tile{padding:16px;border-radius:18px}.t-iris{min-height:300px!important}.quick-grid{gap:10px}.quick-card{min-height:110px;padding:14px}
.tl-i{grid-template-columns:auto 1fr;padding:12px}.tl-i>:last-child{grid-column:1/-1;justify-self:end}
.oc-modal{padding:10px;align-items:end}.oc-modal-card{border-radius:22px 22px 14px 14px;max-height:92vh;padding:20px 16px}
.toasts{bottom:14px;width:calc(100% - 28px)}
.passport-summary{gap:12px}.passport-summary .status-pill{width:100%;margin:0}
.search-panel{flex-direction:column}.search-panel select{width:100%}
.clinic-card .btn{width:100%}
.a-bar{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}.a-bar::-webkit-scrollbar{display:none}.a-bar>*{flex:none}.a-sl{min-width:170px!important;flex:none!important}.a-sl-s{min-width:140px!important}
.doctor-hero{flex-direction:column;align-items:flex-start}
/* landing */
.landing .topbar{position:relative;height:70px}.landing .topbar .btn-small{display:none}.l-menu{display:grid}
.landing .toplinks.open{display:flex!important;position:absolute;top:66px;inset-inline:0;z-index:60;flex-direction:column;gap:0;padding:8px;border-radius:18px;border:1px solid #2a5577;background:#05121fef;backdrop-filter:blur(14px);box-shadow:0 30px 60px #000c}
.landing .toplinks.open a{padding:14px;border-radius:12px;font-size:15px;color:#e6fbff}.landing .toplinks.open a:hover{background:#0f3a5c}.toplinks.open .m-only{display:block}
.hero h1{font-size:40px!important;letter-spacing:-1px}.hero-actions .btn{width:100%}.fut-card{min-height:0}.clinic-cta{padding:24px}
}
@media(max-width:700px){.landing .topbar{z-index:60}.app-layout{z-index:auto!important}}