/* uniApprove — Enterprise Glass UI (offline, no external deps) */
:root{
  --bg:#070b18; --bg2:#0a1024;
  --glass:rgba(22,30,58,.55); --glass2:rgba(30,40,75,.45); --glassbright:rgba(40,54,100,.5);
  --line:rgba(120,140,200,.18); --line2:rgba(120,140,200,.30);
  --txt:#eef2ff; --muted:#97a4cf; --faint:#6b78a3;
  --brand:#5b8cff; --brand2:#8ab0ff; --accent:#1fe0d4; --violet:#a17bff;
  --green:#34e0a1; --amber:#ffc24b; --red:#ff6b8a; --teal:#22d3d9; --pink:#ff7ac8;
  --radius:18px;
  --grad:linear-gradient(135deg,#5b8cff 0%,#1fe0d4 100%);
  --grad2:linear-gradient(135deg,#a17bff,#5b8cff);
  --grad3:linear-gradient(135deg,#ff7ac8,#a17bff);
  --shadow:0 20px 60px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(120,140,200,.14), 0 18px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI",Tahoma,system-ui,"Helvetica Neue",sans-serif;color:var(--txt);line-height:1.6;background:var(--bg);-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:-20%;z-index:-2;background:
  radial-gradient(50% 45% at 18% 12%,rgba(91,140,255,.30),transparent 60%),
  radial-gradient(45% 40% at 85% 8%,rgba(31,224,212,.22),transparent 60%),
  radial-gradient(50% 50% at 75% 85%,rgba(161,123,255,.22),transparent 60%),
  radial-gradient(40% 40% at 10% 90%,rgba(255,122,200,.16),transparent 60%);
  animation:drift 18s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(7,11,24,.4),rgba(7,11,24,.86));backdrop-filter:blur(2px)}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-3%,2%) scale(1.08)}}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 22px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--grad);color:#06122b;border:none;padding:12px 22px;border-radius:12px;font-family:inherit;font-weight:800;font-size:14.5px;cursor:pointer;transition:.18s;box-shadow:0 10px 26px rgba(91,140,255,.35)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(91,140,255,.5)}
.btn.ghost{background:var(--glass2);border:1px solid var(--line2);color:var(--txt);box-shadow:none;backdrop-filter:blur(12px)}
.btn.ghost:hover{border-color:var(--brand);background:var(--glassbright)}
.btn.wa{background:linear-gradient(135deg,#25d366,#0fbf73);color:#04200f}
.btn.sm{padding:8px 14px;font-size:13px}
.glass,.card,.svc,.about-card,.step,.cta-band,.pcol,.match,.docrow,.role-box,.chart-card{
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}

/* ===== LANDING ===== */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(8,12,26,.55);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.site-nav .inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px}
.brand .logo{width:42px;height:42px;border-radius:13px;background:var(--grad);display:grid;place-items:center;box-shadow:0 8px 22px rgba(91,140,255,.45)}
.brand .logo svg{width:22px;height:22px}
.brand u{text-decoration:none;color:var(--accent)}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{padding:9px 14px;border-radius:10px;color:var(--muted);font-size:14.5px;font-weight:700;transition:.15s}
.nav-links a:hover{color:var(--txt);background:var(--glass2)}
.menu-btn{display:none;background:none;border:none;color:var(--txt);font-size:26px;cursor:pointer}
.hero{position:relative;overflow:hidden;padding:96px 0 84px}
.hero .inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--glass2);border:1px solid var(--line2);color:var(--brand2);padding:7px 14px;border-radius:30px;font-size:13px;font-weight:800;margin-bottom:22px;backdrop-filter:blur(12px)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(52,224,161,.2)}
.hero h1{font-size:50px;line-height:1.16;font-weight:800;letter-spacing:-.5px}
.hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p.lead{font-size:18px;color:var(--muted);margin:20px 0 30px;max-width:560px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:32px;margin-top:42px}
.hero-stats .s b{font-size:30px;font-weight:800;display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-stats .s span{font-size:13px;color:var(--muted)}
.hero-visual{position:relative}
.hero-visual .glass{position:relative;z-index:1}
.glass{border-radius:22px;box-shadow:var(--shadow);padding:20px}
.glass .gh{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.glass .gh i{width:11px;height:11px;border-radius:50%;display:inline-block}
.mini-row{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;background:var(--glass2);border:1px solid var(--line);border-radius:13px;margin-bottom:9px}
.mini-row .nm{font-weight:800;font-size:13.5px}
.mini-row .mt{font-size:11.5px;color:var(--muted)}
.ringlet{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:12.5px}
.float-badge{position:absolute;z-index:5;background:var(--glassbright);border:1px solid var(--line2);border-radius:15px;padding:11px 14px;box-shadow:var(--shadow);font-size:13px;font-weight:800;display:flex;align-items:center;gap:9px;backdrop-filter:blur(16px)}
.float-badge .ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center}
.fb1{top:-18px;left:-26px;animation:floaty 4s ease-in-out infinite}
.fb2{bottom:-20px;right:-22px;animation:floaty 4s ease-in-out infinite 1.5s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.section{padding:74px 0}
.section-head{text-align:center;max-width:640px;margin:0 auto 50px}
.section-head .kk{color:var(--accent);font-weight:800;font-size:13.5px;letter-spacing:1px;text-transform:uppercase}
.section-head h2{font-size:36px;font-weight:800;margin:10px 0 12px;letter-spacing:-.4px}
.section-head p{color:var(--muted);font-size:16.5px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc{border-radius:var(--radius);padding:26px;transition:.2s;position:relative;overflow:hidden}
.svc:hover{transform:translateY(-6px);border-color:var(--brand);box-shadow:var(--shadow)}
.svc .ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:24px;margin-bottom:16px;background:var(--glass2);border:1px solid var(--line)}
.svc h3{font-size:18px;margin-bottom:8px}.svc p{color:var(--muted);font-size:14px}
.about .inner{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.about h2{font-size:33px;font-weight:800;margin-bottom:16px}
.about p{color:var(--muted);font-size:16px;margin-bottom:14px}
.about .points{margin-top:18px;display:grid;gap:12px}
.about .points .p{display:flex;gap:12px;align-items:flex-start}
.about .points .ck{width:26px;height:26px;border-radius:9px;background:rgba(52,224,161,.16);color:var(--green);display:grid;place-items:center;flex-shrink:0;font-weight:800}
.about-card{border-radius:22px;padding:30px;box-shadow:var(--shadow)}
.about-card .stat-line{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line)}
.about-card .stat-line:last-child{border:none}
.about-card .stat-line b{font-size:27px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{text-align:center;padding:24px 16px;border-radius:var(--radius);position:relative}
.step .num{width:48px;height:48px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:800;font-size:18px;margin:0 auto 14px;color:#06122b}
.step h4{font-size:15.5px;margin-bottom:6px}.step p{font-size:13px;color:var(--muted)}
.cta-band{background:var(--grad);border-radius:26px;padding:52px;text-align:center;position:relative;overflow:hidden;border:none}
.cta-band h2{font-size:32px;color:#06122b;font-weight:800;margin-bottom:10px}
.cta-band p{color:rgba(6,18,43,.8);font-size:17px;margin-bottom:24px}
.cta-band .btn{background:#06122b;color:#fff}
.cta-band .btn.ghost{background:transparent;border:1px solid rgba(6,18,43,.45);color:#06122b}
.site-foot{border-top:1px solid var(--line);padding:40px 0 30px;margin-top:30px}
.site-foot .inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.site-foot .muted{color:var(--muted);font-size:13.5px}

/* ===== APP ===== */
.app-body{display:flex;min-height:100vh}
.sidebar{width:258px;background:rgba(10,15,32,.55);backdrop-filter:blur(22px);border-left:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .brand{font-size:17px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:12px}
.sidebar .brand .logo{width:36px;height:36px}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:var(--muted);font-size:13.8px;margin-bottom:2px;cursor:pointer;transition:.15s}
.nav a:hover{background:var(--glass2);color:var(--txt)}
.nav a.active{background:linear-gradient(135deg,rgba(91,140,255,.3),rgba(31,224,212,.16));color:#fff;font-weight:800;box-shadow:inset 0 0 0 1px var(--line2)}
.nav a .ic{width:20px;text-align:center}
.nav .grp{font-size:10.5px;color:var(--faint);letter-spacing:1px;padding:12px 12px 6px;text-transform:uppercase}
.role-box{margin-top:14px;border-radius:13px;padding:12px}
.role-box label{font-size:11px;color:var(--muted);display:block;margin-bottom:6px}
.role-box select,.field select,.field input{width:100%;background:rgba(7,11,24,.6);color:var(--txt);border:1px solid var(--line2);border-radius:10px;padding:10px 11px;font-family:inherit;font-size:13.5px}
.role-box a.back{display:block;text-align:center;margin-top:10px;font-size:12.5px;color:var(--muted)}
.role-box a.back:hover{color:var(--brand2)}
.main{flex:1;padding:24px 28px;max-width:calc(100% - 258px)}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.topbar h1{font-size:23px;letter-spacing:-.3px}
.topbar .sub{font-size:13px;color:var(--muted);margin-top:3px}
.user{display:flex;align-items:center;gap:10px;background:var(--glass2);border:1px solid var(--line);padding:7px 12px;border-radius:30px;backdrop-filter:blur(12px)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-size:13px;font-weight:800;color:#06122b}
.view{display:none;animation:fade .35s}.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.card{border-radius:var(--radius);padding:18px;box-shadow:var(--glow)}
.stat .lbl{font-size:12px;color:var(--muted)}
.stat .num{font-size:27px;font-weight:800;margin:6px 0 2px}
.stat .delta{font-size:12px}.up{color:var(--green)}.down{color:var(--red)}
.stat .ic{float:left;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:18px;border:1px solid var(--line)}
h2.sec{font-size:15px;margin:24px 0 14px;display:flex;align-items:center;gap:8px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:right;color:var(--muted);font-weight:700;padding:11px 12px;border-bottom:1px solid var(--line);font-size:12px}
td{padding:12px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
tbody tr{cursor:pointer;transition:.12s}tbody tr:hover{background:var(--glass2)}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:800}
.p-green{background:rgba(52,224,161,.16);color:var(--green)}
.p-amber{background:rgba(255,194,75,.16);color:var(--amber)}
.p-red{background:rgba(255,107,138,.16);color:var(--red)}
.p-blue{background:rgba(91,140,255,.16);color:var(--brand2)}
.p-teal{background:rgba(34,211,217,.16);color:var(--teal)}
.p-violet{background:rgba(161,123,255,.16);color:var(--violet)}
.p-grey{background:rgba(151,164,207,.16);color:var(--muted)}
.pipe{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px}
.pcol{min-width:216px;flex:1;border-radius:14px;padding:12px}
.pcol h4{font-size:12.5px;display:flex;justify-content:space-between;margin-bottom:10px;color:var(--muted)}
.pcol h4 b{background:var(--glassbright);padding:1px 8px;border-radius:10px;color:var(--txt)}
.pcard{background:var(--glass2);border:1px solid var(--line);border-radius:11px;padding:11px;margin-bottom:8px;font-size:12.5px;cursor:grab;transition:.15s}
.pcard:hover{border-color:var(--brand);transform:translateY(-2px)}
.pcard .nm{font-weight:800}.pcard .mt{color:var(--muted);font-size:11px;margin-top:3px}
.field{margin-bottom:14px}.field label{font-size:12.5px;color:var(--muted);display:block;margin-bottom:6px}
.match{display:flex;align-items:center;gap:14px;border-radius:14px;padding:14px;margin-bottom:8px}
.ring{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;flex-shrink:0}
.match .info{flex:1}.match .info b{font-size:14.5px}.match .info .d{color:var(--muted);font-size:12px;margin-top:3px}
.bar{height:7px;background:var(--glass2);border-radius:6px;overflow:hidden;margin-top:8px}.bar i{display:block;height:100%;border-radius:6px}
.docrow{display:flex;align-items:center;gap:12px;padding:11px;border-radius:11px;margin-bottom:8px}
.docrow .fic{width:34px;height:34px;border-radius:9px;background:var(--glass2);display:grid;place-items:center}
.tag{font-size:11px;color:var(--muted)}
.split{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.split-rev{display:grid;grid-template-columns:1fr 1.4fr;gap:16px}
.perm{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}.perm:last-child{border:none}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-left:6px}
.miniprog{display:flex;gap:4px;align-items:center}.miniprog .seg{height:5px;flex:1;border-radius:4px;background:var(--glass2)}
.note{font-size:12px;color:var(--muted);background:var(--glass2);border:1px dashed var(--line2);border-radius:11px;padding:11px 13px;margin-top:14px;line-height:1.6}
.toolbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}.search{flex:1;min-width:200px}
.phone{max-width:380px;margin:0 auto;background:#0b141a;border-radius:30px;overflow:hidden;border:9px solid #000;box-shadow:var(--shadow)}
.wahead{background:#202c33;padding:14px 16px;display:flex;align-items:center;gap:12px}
.wahead .av{width:38px;height:38px;border-radius:50%;background:#25d366;display:grid;place-items:center;font-weight:800;color:#04200f}
.wabody{padding:16px;min-height:430px;max-height:430px;overflow-y:auto;background:#0b141a}
.msg{max-width:80%;padding:8px 12px;border-radius:11px;margin-bottom:9px;font-size:13px;line-height:1.5;clear:both}
.msg.them{background:#202c33;float:right;border-top-right-radius:2px}
.msg.me{background:#005c4b;float:left;border-top-left-radius:2px}
.msg .tm{font-size:9.5px;color:rgba(255,255,255,.5);margin-top:3px;text-align:left}
.waquick{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.waquick button{background:transparent;border:1px solid #25d366;color:#25d366;border-radius:16px;padding:5px 12px;font-size:11.5px;cursor:pointer;font-family:inherit}
.wafoot{padding:10px;background:#202c33;display:flex;gap:8px}
.wafoot input{flex:1;background:#0b141a;border:none;border-radius:18px;padding:9px 14px;color:var(--txt);font-family:inherit}
/* AI assistant */
.ai-wrap{display:flex;flex-direction:column;height:560px}
.ai-body{flex:1;overflow-y:auto;padding:6px 4px}
.ai-msg{display:flex;gap:10px;margin-bottom:14px;align-items:flex-start}
.ai-msg .ava{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:14px;flex-shrink:0;font-weight:800}
.ai-msg.bot .ava{background:var(--grad);color:#06122b}
.ai-msg.usr{flex-direction:row-reverse}
.ai-msg.usr .ava{background:var(--glassbright);border:1px solid var(--line2)}
.ai-bubble{background:var(--glass2);border:1px solid var(--line);border-radius:14px;padding:11px 14px;font-size:13.5px;line-height:1.8;max-width:80%;white-space:pre-wrap}
.ai-msg.usr .ai-bubble{background:linear-gradient(135deg,rgba(91,140,255,.22),rgba(31,224,212,.12))}
.ai-foot{display:flex;gap:8px;margin-top:12px}
.ai-foot input{flex:1;background:rgba(7,11,24,.6);border:1px solid var(--line2);border-radius:12px;padding:11px 14px;color:var(--txt);font-family:inherit;font-size:13.5px}
.ai-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.ai-chips button{background:var(--glass2);border:1px solid var(--line2);color:var(--brand2);border-radius:18px;padding:6px 13px;font-size:12px;cursor:pointer;font-family:inherit;font-weight:700}
.ai-chips button:hover{border-color:var(--brand);color:var(--txt)}
.ai-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--accent);background:rgba(31,224,212,.1);border:1px solid rgba(31,224,212,.3);padding:3px 10px;border-radius:20px;font-weight:800}
/* Flow tree */
.flow-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.flow-canvas{overflow:auto;padding:24px;border-radius:var(--radius);background:radial-gradient(rgba(120,140,200,.10) 1px,transparent 1px);background-size:22px 22px;border:1px solid var(--line);min-height:440px}
.tree ul{list-style:none;padding-top:26px;position:relative;display:flex;justify-content:center;gap:18px}
.tree li{list-style:none;position:relative;padding:26px 10px 0;text-align:center}
.tree li::before,.tree li::after{content:"";position:absolute;top:0;height:26px;border-top:2px solid var(--line2)}
.tree li::before{right:50%;width:50%}
.tree li::after{left:50%;width:50%;border-right:2px solid var(--line2)}
.tree li:only-child::after,.tree li:only-child::before{display:none}
.tree li:first-child::before,.tree li:last-child::after{border:0 none}
.tree li:last-child::before{border-right:2px solid var(--line2)}
.tree ul ul::before{content:"";position:absolute;top:0;right:50%;height:26px;border-right:2px solid var(--line2)}
.tree>ul{padding-top:0}.tree>ul>li:only-child::before,.tree>ul>li:only-child::after{display:none}
.node{display:inline-block;min-width:140px;max-width:220px;background:var(--glass);border:1px solid var(--line2);border-radius:13px;padding:10px 12px;cursor:pointer;transition:.15s;text-align:right;backdrop-filter:blur(14px)}
.node:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow)}
.node.sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(31,224,212,.4)}
.node .nt{font-size:10px;font-weight:800;letter-spacing:.5px;margin-bottom:4px}
.node .nx{font-size:12.5px;line-height:1.5}
.node.start .nt{color:var(--accent)}.node.ask .nt{color:var(--brand2)}
.node.msg-n .nt{color:var(--violet)}.node.end .nt{color:var(--green)}.node.ai-n .nt{color:var(--pink)}
/* charts */
.chart-card{border-radius:var(--radius);padding:18px;box-shadow:var(--glow)}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-left:5px}
/* ===== MODAL ===== */
.modal-bg{position:fixed;inset:0;z-index:200;background:rgba(4,7,18,.72);backdrop-filter:blur(8px);display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.modal-bg.open{display:flex;animation:fade .25s}
.modal{width:100%;max-width:820px;background:rgba(16,22,44,.96);border:1px solid var(--line2);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;animation:pop .28s}
.modal.sm{max-width:520px}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,rgba(91,140,255,.14),rgba(31,224,212,.06))}
.modal-head h3{font-size:18px}
.modal-head .x{background:var(--glass2);border:1px solid var(--line2);color:var(--txt);width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:16px}
.modal-body{padding:22px;max-height:72vh;overflow-y:auto}
/* student profile */
.prof-top{display:flex;gap:18px;align-items:center;margin-bottom:20px}
.prof-av{width:74px;height:74px;border-radius:20px;background:var(--grad);display:grid;place-items:center;font-size:30px;font-weight:800;color:#06122b;flex-shrink:0}
.prof-meta h2{font-size:21px}.prof-meta .tags{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.kv .k{background:var(--glass2);border:1px solid var(--line);border-radius:12px;padding:12px}
.kv .k .l{font-size:11px;color:var(--muted)}.kv .k .v{font-size:16px;font-weight:800;margin-top:4px}
.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.doc-card{background:var(--glass2);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center;cursor:pointer;transition:.15s}
.doc-card:hover{border-color:var(--brand);transform:translateY(-2px)}
.doc-card .thumb{height:64px;border-radius:9px;background:linear-gradient(135deg,rgba(91,140,255,.18),rgba(31,224,212,.1));display:grid;place-items:center;font-size:26px;margin-bottom:9px}
.doc-card .dn{font-size:12.5px;font-weight:700}
.timeline{position:relative;padding-right:18px;margin-top:6px}
.timeline::before{content:"";position:absolute;right:5px;top:4px;bottom:4px;width:2px;background:var(--line2)}
.tl-item{position:relative;padding:0 18px 16px 0;font-size:13px}
.tl-item::before{content:"";position:absolute;right:-1px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px rgba(91,140,255,.2)}
.tl-item.done::before{background:var(--green);box-shadow:0 0 0 3px rgba(52,224,161,.2)}
.tl-item .tt{font-weight:700}.tl-item .td{color:var(--muted);font-size:11.5px}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
/* sub-tabs */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;background:var(--glass2);border:1px solid var(--line);border-radius:14px;padding:6px}
.tabs button{background:transparent;border:none;color:var(--muted);padding:9px 16px;border-radius:10px;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s}
.tabs button.active{background:var(--grad);color:#06122b}
.tabs button:hover:not(.active){color:var(--txt)}
.subview{display:none}.subview.active{display:block;animation:fade .3s}
/* PDF doc preview */
.pdf-doc{background:#fff;color:#1a2238;border-radius:12px;padding:34px;font-family:"Segoe UI",Tahoma,sans-serif;box-shadow:var(--shadow);max-width:600px;margin:0 auto}
.pdf-doc .ph{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid #5b8cff;padding-bottom:16px;margin-bottom:20px}
.pdf-doc .ph .lg{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;color:#0c1838}
.pdf-doc .ph .lg .m{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#5b8cff,#1fe0d4);display:grid;place-items:center;color:#fff}
.pdf-doc h2{font-size:19px;color:#0c1838;margin-bottom:14px}
.pdf-doc p{font-size:13.5px;line-height:1.9;color:#33405e;margin-bottom:10px}
.pdf-doc .seal{margin-top:24px;display:flex;justify-content:space-between;align-items:flex-end}
.pdf-doc .stamp{border:2px dashed #5b8cff;color:#5b8cff;border-radius:10px;padding:8px 14px;font-weight:800;font-size:12px;transform:rotate(-6deg)}
.pdf-doc table{width:100%;font-size:12.5px;margin:8px 0}
.pdf-doc th,.pdf-doc td{border-bottom:1px solid #e3e8f4;padding:7px;color:#33405e;text-align:right}
.pdf-doc th{color:#0c1838}
/* edit form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chip-edit{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip-edit .ce{background:var(--glass2);border:1px solid var(--line2);border-radius:16px;padding:5px 11px;font-size:12px;display:flex;align-items:center;gap:6px}
.chip-edit .ce b{cursor:pointer;color:var(--red)}
/* document checklist */
.chk-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.chk{display:flex;align-items:center;gap:9px;background:var(--glass2);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;font-size:13px;cursor:pointer;transition:.12s}
.chk:hover{border-color:var(--brand)}
.chk input{width:17px;height:17px;accent-color:var(--brand);cursor:pointer}
.chk input:checked + span{color:var(--green);font-weight:700}
/* clickable cards */
.card.clickable{cursor:pointer;transition:.18s}.card.clickable:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:var(--shadow)}
.editmark{position:absolute;top:12px;left:12px;font-size:11px;color:var(--brand2);background:var(--glass2);border:1px solid var(--line2);padding:3px 9px;border-radius:14px;opacity:0;transition:.15s}
.card.clickable{position:relative}.card.clickable:hover .editmark{opacity:1}
/* premium pipeline */
.pcol{position:relative}
.pcol .ph-bar{height:4px;border-radius:4px;margin:-4px -2px 10px;width:calc(100% + 4px)}
.pcard{display:flex;align-items:center;gap:10px}
.pcard .pav{width:30px;height:30px;border-radius:9px;background:var(--grad2);display:grid;place-items:center;font-size:12px;font-weight:800;color:#06122b;flex-shrink:0}
.print-btn{margin-right:auto}
.rowclick{cursor:pointer;border-radius:9px;transition:.12s;padding:4px;margin:0 -4px}
.rowclick:hover{background:var(--glass2)}
@media print{
  body::before,body::after,.sidebar,.topbar,.tabs,.modal-actions,.no-print{display:none!important}
  .main{max-width:100%!important;padding:0!important}
  body{background:#fff}.card,.chart-card{break-inside:avoid}
  .pdf-doc{box-shadow:none}
  /* print modal content only when a modal is open */
  body.modal-open .main{display:none!important}
  body.modal-open .modal-bg{position:static!important;background:#fff!important;display:block!important;padding:0!important;backdrop-filter:none!important}
  body.modal-open .modal{max-width:100%!important;border:none!important;box-shadow:none!important;background:#fff!important;color:#111}
  body.modal-open .modal-head{background:#fff!important;color:#111}
  body.modal-open .modal-head .x{display:none!important}
  body.modal-open .modal table{color:#111}
  body.modal-open .modal th{color:#333}
  /* اطبع كامل محتوى النافذة بدون قص أو تمرير */
  body.modal-open .modal-bg{align-items:flex-start!important;overflow:visible!important;height:auto!important}
  body.modal-open .modal-body{max-height:none!important;overflow:visible!important}
  body.modal-open .modal{max-height:none!important;overflow:visible!important}
  body.modal-open .pdf-doc{max-width:100%!important}
  body.modal-open .pdf-doc table tr{break-inside:avoid}
  body.modal-open .pdf-doc thead{display:table-header-group}
}
@media(max-width:1000px){
  .hero .inner,.about .inner{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}
  .hero h1{font-size:38px}.g4{grid-template-columns:repeat(2,1fr)}.split,.split-rev{grid-template-columns:1fr}
  .kv,.doc-grid,.form-grid{grid-template-columns:1fr 1fr}
}
/* conversation builder */
.step-card{background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px;position:relative;backdrop-filter:blur(14px)}
.step-card .shead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.step-card .sidx{width:28px;height:28px;border-radius:9px;background:var(--grad);color:#06122b;display:grid;place-items:center;font-weight:800;font-size:13px;flex-shrink:0}
.step-card .sctl{margin-right:auto;display:flex;gap:5px}
.step-card .sctl button{background:var(--glass2);border:1px solid var(--line2);color:var(--muted);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:13px}
.step-card .sctl button:hover{color:var(--txt);border-color:var(--brand)}
.step-card .botline{display:flex;gap:9px;align-items:flex-start;margin-bottom:9px}
.step-card .botline .bi{width:26px;height:26px;border-radius:8px;background:var(--grad);display:grid;place-items:center;color:#06122b;font-size:13px;flex-shrink:0}
.step-card .botbubble{background:var(--glass2);border:1px solid var(--line);border-radius:12px;padding:9px 13px;font-size:13.5px;flex:1}
.step-card .replyline{font-size:12.5px;color:var(--muted);padding-right:35px}
.step-card .replyline .rb{display:inline-block;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.4);color:#25d366;border-radius:14px;padding:3px 11px;font-size:11.5px;margin:3px 3px 0 0;font-weight:700}
.step-card .replyline .free{display:inline-block;background:var(--glass2);border:1px dashed var(--line2);border-radius:12px;padding:3px 11px;font-size:11.5px}
/* button editor rows */
.btnrow{display:flex;gap:7px;align-items:center;margin-bottom:7px}
.btnrow .bk{width:24px;height:24px;border-radius:7px;background:var(--glass2);border:1px solid var(--line2);display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--brand2);flex-shrink:0}
.btnrow input{flex:1;background:rgba(7,11,24,.6);color:var(--txt);border:1px solid var(--line2);border-radius:9px;padding:8px 10px;font-family:inherit;font-size:12.5px;min-width:0}
.btnrow input:first-of-type{max-width:130px}
.btnrow button{background:var(--glass2);border:1px solid var(--line2);color:var(--red);width:28px;height:28px;border-radius:8px;cursor:pointer;flex-shrink:0}
/* export doc for MediaDo */
.flow-doc{background:#fff;color:#1a2238;border-radius:12px;padding:32px;max-width:640px;margin:0 auto;box-shadow:var(--shadow)}
.flow-doc .fh{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid #25d366;padding-bottom:14px;margin-bottom:18px}
.flow-doc .fh .lg{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;color:#0c1838}
.flow-doc .fh .lg .m{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#5b8cff,#1fe0d4);display:grid;place-items:center;color:#fff}
.flow-doc .fstep{border:1px solid #e3e8f4;border-radius:10px;padding:13px 15px;margin-bottom:11px;background:#f7f9ff}
.flow-doc .fstep .sn{font-size:11px;font-weight:800;color:#5b8cff;margin-bottom:5px}
.flow-doc .fstep .bm{font-size:13.5px;color:#0c1838;font-weight:600;margin-bottom:6px}
.flow-doc .fstep .rr{font-size:12px;color:#5a6party}
.flow-doc .fstep .rr{font-size:12px;color:#54608a}
.flow-doc .fstep .b{display:inline-block;border:1px solid #25d366;color:#1a8c4a;border-radius:12px;padding:2px 10px;font-size:11px;margin:3px 3px 0 0}
@media(max-width:680px){
  .nav-links{display:none}.menu-btn{display:block}
  .svc-grid,.steps{grid-template-columns:1fr}.hero-stats{flex-wrap:wrap;gap:18px}
  .sidebar{display:none}.main{max-width:100%}.g4,.g3,.g2{grid-template-columns:1fr}
}