/* عدسة — أنماط الواجهة. الأساس منقول حرفياً من النموذج التفاعلي المعتمد، والإضافات في آخر الملف. */
/* التخطيط: تطبيق بشاشة واحدة — قائمة يمنى، مساحة عمل في الوسط، ومساعد يسار قابل للطي؛ هوية غرفة تحكم بث: كهرماني الإشارة، فيروزي البيانات، أحمر التسجيل */
:root{
  --bg:#0D1016; --side:#11151C; --surface:#161B23; --surface-2:#1D232D; --surface-3:#272E3A; --line:#262D39; --line-2:#323A48;
  --fg:#ECEEF3; --muted:#9AA3B5; --faint:#6A7386;
  --amber:#F3A73B; --amber-2:#FFC46B; --amber-soft:rgba(243,167,59,.13); --on-amber:#1A1206;
  --teal:#4CC4BF; --teal-soft:rgba(76,196,191,.13);
  --rec:#F0544B; --rec-soft:rgba(240,84,75,.14);
  --good:#5CC98B; --good-soft:rgba(92,201,139,.13);
  --violet:#9A8CF0; --violet-soft:rgba(154,140,240,.14);
  --shadow:0 20px 50px -24px rgba(0,0,0,.7); --scrim:rgba(4,6,9,.62);
  --f-display:"Baloo Bhaijaan 2","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --f-body:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#F3F4F7; --side:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3F5F9; --surface-3:#E6EAF1; --line:#E2E6ED; --line-2:#D3D9E3;
  --fg:#151922; --muted:#566074; --faint:#8790A2;
  --amber:#B76A00; --amber-2:#D98A1E; --amber-soft:rgba(183,106,0,.09); --on-amber:#FFFFFF;
  --teal:#0C8A86; --teal-soft:rgba(12,138,134,.09);
  --rec:#D13A31; --rec-soft:rgba(209,58,49,.09);
  --good:#21844D; --good-soft:rgba(33,132,77,.09);
  --violet:#5B4BC4; --violet-soft:rgba(91,75,196,.09);
  --shadow:0 20px 44px -26px rgba(22,26,34,.38); --scrim:rgba(20,24,32,.38);
  color-scheme:light;
}}
:root[data-theme="light"]{
  --bg:#F3F4F7; --side:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3F5F9; --surface-3:#E6EAF1; --line:#E2E6ED; --line-2:#D3D9E3;
  --fg:#151922; --muted:#566074; --faint:#8790A2;
  --amber:#B76A00; --amber-2:#D98A1E; --amber-soft:rgba(183,106,0,.09); --on-amber:#FFFFFF;
  --teal:#0C8A86; --teal-soft:rgba(12,138,134,.09);
  --rec:#D13A31; --rec-soft:rgba(209,58,49,.09);
  --good:#21844D; --good-soft:rgba(33,132,77,.09);
  --violet:#5B4BC4; --violet-soft:rgba(91,75,196,.09);
  --shadow:0 20px 44px -26px rgba(22,26,34,.38); --scrim:rgba(20,24,32,.38);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0D1016; --side:#11151C; --surface:#161B23; --surface-2:#1D232D; --surface-3:#272E3A; --line:#262D39; --line-2:#323A48;
  --fg:#ECEEF3; --muted:#9AA3B5; --faint:#6A7386;
  --amber:#F3A73B; --amber-2:#FFC46B; --amber-soft:rgba(243,167,59,.13); --on-amber:#1A1206;
  --teal:#4CC4BF; --teal-soft:rgba(76,196,191,.13);
  --rec:#F0544B; --rec-soft:rgba(240,84,75,.14);
  --good:#5CC98B; --good-soft:rgba(92,201,139,.13);
  --violet:#9A8CF0; --violet-soft:rgba(154,140,240,.14);
  --shadow:0 20px 50px -24px rgba(0,0,0,.7); --scrim:rgba(4,6,9,.62);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14.5px;line-height:1.7;margin:0;overflow:hidden}
h1,h2,h3,h4{margin:0;line-height:1.3;text-wrap:balance}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:6px}
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .faint{color:var(--faint)}

/* ===== الهيكل ===== */
.app{display:grid;grid-template-columns:236px minmax(0,1fr) auto;height:100%}
.side{background:var(--side);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.brand{display:flex;align-items:center;gap:10px;padding:16px 18px 12px;font-family:var(--f-display);font-weight:800;font-size:23px}
.tally{width:10px;height:10px;border-radius:50%;background:var(--rec);box-shadow:0 0 0 4px var(--rec-soft);animation:tally 2s infinite;flex:none}
@keyframes tally{50%{box-shadow:0 0 0 7px transparent}}
.newbtn{margin:4px 14px 10px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--amber);color:var(--on-amber);border:0;border-radius:10px;padding:9px;font-weight:700}
.newbtn:hover{filter:brightness(1.07)}
.nav{flex:1;overflow-y:auto;padding:4px 10px 10px}
.nav h6{font-size:11px;color:var(--faint);margin:14px 10px 5px;font-weight:600;letter-spacing:.02em}
.nav a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;color:var(--muted);text-decoration:none;font-size:14px;position:relative}
.nav a:hover{background:var(--surface-2);color:var(--fg)}
.nav a.on{background:var(--amber-soft);color:var(--amber);font-weight:600}
.nav a .badge{margin-inline-start:auto;font-size:11px;background:var(--rec);color:#fff;border-radius:99px;padding:0 7px;line-height:18px}
.nav a .badge.soft{background:var(--surface-3);color:var(--muted)}
.usage{margin:10px 14px 14px;background:var(--surface-2);border-radius:11px;padding:11px 12px;font-size:12px}
.usage .row{display:flex;justify-content:space-between;margin-bottom:6px}
.bar{height:6px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--amber);border-radius:99px;transition:width .5s}
.bar.teal i{background:var(--teal)} .bar.good i{background:var(--good)}

.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.top{height:58px;display:flex;align-items:center;gap:10px;padding-inline:18px;border-bottom:1px solid var(--line);flex:none}
.menu-btn{display:none}
.crumb{font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.crumb b{color:var(--fg)}
.search{margin-inline-start:auto;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:6px 10px;color:var(--faint);font-size:13px;min-width:230px}
.search kbd{margin-inline-start:auto;font-family:var(--f-mono);font-size:11px;background:var(--surface-3);border-radius:5px;padding:0 6px;color:var(--muted)}
.ib{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:none;color:var(--muted);position:relative;flex:none}
.ib:hover{color:var(--fg);background:var(--surface-2)}
.ib .dot{position:absolute;top:6px;left:7px;width:8px;height:8px;border-radius:50%;background:var(--rec);border:2px solid var(--bg)}
.ib.on{color:var(--amber);border-color:var(--amber)}
.me{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--amber),#C9741A);color:var(--on-amber);display:grid;place-items:center;font-weight:700;font-family:var(--f-display);flex:none}
.view{flex:1;overflow-y:auto;padding:22px 24px 40px;min-height:0}
.view-in{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:16px;animation:fadein .25s ease}
@keyframes fadein{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}

/* المساعد */
.assist{width:310px;border-inline-start:1px solid var(--line);background:var(--side);display:flex;flex-direction:column;min-height:0}
.assist[hidden]{display:none}
.as-h{display:flex;align-items:center;gap:9px;padding:14px 14px 10px;font-weight:700}
.as-av{width:28px;height:28px;border-radius:50%;background:var(--amber);color:var(--on-amber);display:grid;place-items:center}
.as-av svg.i{width:15px;height:15px}
.as-h small{display:block;font-weight:400;color:var(--faint);font-size:11.5px;line-height:1.2}
.as-h button{margin-inline-start:auto}
.as-body{flex:1;overflow-y:auto;padding:4px 14px 10px;display:flex;flex-direction:column;gap:10px}
.msg{background:var(--surface-2);border-radius:12px;padding:10px 12px;font-size:13.5px;line-height:1.7}
.msg.me{background:var(--amber-soft);align-self:flex-start;max-width:88%}
.msg .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.as-in{display:flex;gap:8px;padding:10px 14px 14px;border-top:1px solid var(--line)}
.as-in input{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:13.5px}
.typing{display:inline-flex;gap:3px}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:ty 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{50%{opacity:.2}}

/* ===== مكونات ===== */
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.page-h h1{font-family:var(--f-display);font-size:28px;font-weight:800}
.page-h p{color:var(--muted);font-size:14px;max-width:70ch}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:7px;border-radius:10px;padding:8px 14px;font-weight:600;font-size:13.5px;border:1px solid var(--line);background:var(--surface);color:var(--fg);text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn.pri{background:var(--amber);color:var(--on-amber);border-color:transparent}
.btn.pri:hover{filter:brightness(1.07)}
.btn.ghost{background:none}
.btn.sm{padding:5px 10px;font-size:12.5px;border-radius:8px}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;min-width:0}
.card-h{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.card-h h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:7px}
.card-h .r{margin-inline-start:auto;display:flex;gap:6px;align-items:center}
.sub{background:var(--surface-2);border-radius:10px;padding:12px;min-width:0}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:2px 9px;border-radius:99px;background:var(--surface-3);color:var(--muted);white-space:nowrap;border:0;line-height:1.7}
.chip.amber{background:var(--amber-soft);color:var(--amber)}
.chip.teal{background:var(--teal-soft);color:var(--teal)}
.chip.rec{background:var(--rec-soft);color:var(--rec)}
.chip.good{background:var(--good-soft);color:var(--good)}
button.chip{cursor:pointer}
button.chip.sel{background:var(--amber);color:var(--on-amber)}
.seg{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:3px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:5px 12px;border-radius:8px;font-size:13px;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--fg);box-shadow:0 2px 8px -4px rgba(0,0,0,.4)}
.q{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;font-size:10.5px;font-style:normal;font-weight:700;background:var(--teal-soft);color:var(--teal);cursor:help;font-family:var(--f-body);flex:none}
body:not(.beginner) .q{display:none}
body.beginner [data-tip]:not(.q):hover{outline:1px dashed color-mix(in srgb,var(--teal) 70%,transparent);outline-offset:3px;border-radius:6px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.kpi span{font-size:12px;color:var(--muted);display:block}
.kpi b{font-family:var(--f-display);font-size:26px;line-height:1.25;display:block}
.kpi small{font-size:11.5px;color:var(--good)}
.kpi svg{display:block;width:100%;height:26px;margin-top:4px}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty svg.i{width:36px;height:36px;color:var(--faint);margin-bottom:8px}
.list-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.list-row:last-child{border-bottom:0}
.list-row .t{flex:1;min-width:0}
.list-row small{display:block;color:var(--faint);font-size:11.5px}
.toggle{width:34px;height:20px;border-radius:99px;background:var(--surface-3);position:relative;border:0;flex:none;transition:.2s}
.toggle::after{content:"";position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:.2s}
.toggle.on{background:var(--amber)}
.toggle.on::after{right:17px;background:var(--on-amber)}
input.field,select.field,textarea.field{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:13.5px}
textarea.field{resize:vertical;min-height:80px;line-height:1.7}
label.lbl{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-weight:600}
input[type=range]{accent-color:var(--amber);width:100%}

/* شريط المشروع */
.pbar{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.pbar-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pbar-top select{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:5px 10px;font-weight:700;font-size:14px;max-width:100%;min-width:0}
.stepper{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.stepper::-webkit-scrollbar{display:none}
.stp{display:flex;align-items:center;gap:6px;border:0;background:var(--surface-2);color:var(--faint);border-radius:9px;padding:5px 11px;font-size:12.5px;white-space:nowrap}
.stp .n{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;background:var(--surface-3);font-weight:700}
.stp.done{color:var(--good)} .stp.done .n{background:var(--good-soft)}
.stp.cur{background:var(--amber-soft);color:var(--amber);font-weight:700} .stp.cur .n{background:var(--amber);color:var(--on-amber)}
.stp.here{outline:1.5px solid var(--amber)}
.stp[disabled]{cursor:not-allowed;opacity:.6}

/* لوحة المشاريع */
.board{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:10px;overflow-x:auto;padding-bottom:4px}
.col{background:var(--surface-2);border-radius:12px;padding:10px;min-height:180px}
.col h5{margin:0 0 8px;font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;font-weight:600}
.pcard{display:block;width:100%;text-align:start;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:9px 10px;font-size:12.5px;line-height:1.55;margin-bottom:8px}
.pcard:hover{border-color:var(--faint)}
.pcard .k{font-size:11px;font-weight:700}
.pcard.yt .k{color:var(--rec)} .pcard.tool .k{color:var(--teal)}
.pcard .meta{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.qa{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:14px;text-align:start}
.qa:hover{border-color:var(--amber)}
.qa .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none}
.qa b{display:block;font-size:14.5px}
.qa small{color:var(--muted);font-size:12.5px;line-height:1.5;display:block}

/* الرادار */
.topic{display:grid;grid-template-columns:minmax(0,1fr) 84px 56px;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px 12px;cursor:pointer;text-align:start;width:100%}
.topic:hover{border-color:var(--faint)}
.topic.sel{border-color:var(--amber);background:var(--amber-soft)}
.topic .tt{font-weight:600;font-size:14px;line-height:1.5}
.topic .ts{font-size:11.5px;color:var(--faint);display:flex;gap:8px;flex-wrap:wrap;margin-top:3px;align-items:center}
.topic svg{width:84px;height:28px}
.score{text-align:center}
.score b{font-family:var(--f-display);font-size:22px;display:block;line-height:1}
.score small{font-size:10.5px;color:var(--muted)}
svg.chart{width:100%;height:auto;display:block;direction:ltr}

/* البحث */
.loader{display:flex;flex-direction:column;gap:9px;max-width:560px;margin:10px auto;width:100%}
.ld{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--faint);transition:.3s}
.ld .c{width:22px;height:22px;border-radius:50%;border:2px solid var(--surface-3);display:grid;place-items:center;flex:none}
.ld.run{color:var(--fg)} .ld.run .c{border-color:var(--amber);border-top-color:transparent;animation:spin .8s linear infinite}
.ld.ok{color:var(--muted)} .ld.ok .c{border-color:var(--good);background:var(--good-soft);color:var(--good)}
@keyframes spin{to{transform:rotate(360deg)}}
.comp{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.comp:last-child{border-bottom:0}
.thumb{aspect-ratio:16/9;border-radius:7px;background:linear-gradient(135deg,var(--surface-3),var(--surface-2));position:relative;overflow:hidden;max-width:100%}
.thumb::after{content:attr(data-d);position:absolute;bottom:4px;left:4px;font-size:10px;background:rgba(0,0,0,.7);color:#fff;padding:0 5px;border-radius:4px;font-family:var(--f-mono)}
.thumb i{position:absolute;right:8px;bottom:10px;width:50%;height:5px;border-radius:3px;background:var(--amber)}
.comp b{font-size:13.5px;display:block;line-height:1.5}
.comp small{color:var(--faint);font-size:11.5px}
.fact{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.fact:last-child{border-bottom:0}
.lock{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--good-soft);color:var(--good);flex:none}
.lock.w{background:var(--amber-soft);color:var(--amber)}
.fact small{display:block;color:var(--faint);font-size:11.5px}
.matrix{width:100%;border-collapse:collapse;font-size:12.5px;min-width:520px}
.matrix th,.matrix td{padding:7px 8px;text-align:center;border-bottom:1px solid var(--line)}
.matrix th:first-child,.matrix td:first-child{text-align:start}
.matrix th{color:var(--muted);font-weight:600;font-size:11.5px}
.matrix td.y{color:var(--good)} .matrix td.n{color:var(--faint)}
.matrix .us{background:var(--amber-soft);color:var(--amber);font-weight:700}
.sx{overflow-x:auto}
.angle{display:flex;gap:10px;align-items:flex-start;background:var(--surface-2);border:1.5px solid transparent;border-radius:11px;padding:11px 12px;cursor:pointer;text-align:start;width:100%}
.angle.on{border-color:var(--amber);background:var(--amber-soft)}
.angle .rd{width:16px;height:16px;border-radius:50%;border:2px solid var(--faint);margin-top:4px;flex:none}
.angle.on .rd{border:5px solid var(--amber)}
.angle b{display:block;font-size:14px}
.angle small{color:var(--muted);font-size:12.5px}

/* السكربت */
.scene{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.scene:last-child{border-bottom:0}
.scene .tc{font-family:var(--f-mono);font-size:12px;color:var(--amber);direction:ltr;text-align:right;padding-top:2px}
.scene .lb{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.scene .lb b{font-size:13.5px}
.scene p{font-size:14.5px;line-height:1.9;outline:none;border-radius:6px;padding:2px 5px;margin-inline:-5px;min-height:1.9em}
.scene p:focus{background:var(--surface-2)}
.scene .acts{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.mini{border:0;background:var(--surface-2);color:var(--muted);font-size:11.5px;padding:3px 9px;border-radius:7px;display:inline-flex;gap:5px;align-items:center}
.mini:hover{color:var(--fg)}
.mini svg.i{width:12px;height:12px}
.caret::after{content:"";display:inline-block;width:2px;height:1em;background:var(--amber);margin-inline-start:2px;vertical-align:middle;animation:ty .8s infinite}
.topt{display:flex;gap:10px;align-items:center;background:var(--surface-2);border:1.5px solid transparent;border-radius:10px;padding:8px 10px;font-size:13.5px;cursor:pointer;width:100%;text-align:start;margin-bottom:6px}
.topt.on{border-color:var(--amber)}
.topt .t{flex:1;min-width:0}
.ctr{font-family:var(--f-mono);font-size:12px;color:var(--good);direction:ltr}
.thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tn{aspect-ratio:16/9;border-radius:9px;position:relative;overflow:hidden;padding:8px;display:flex;align-items:flex-end;font-family:var(--f-display);font-weight:800;line-height:1.15;font-size:13px;border:2px solid transparent;cursor:pointer;max-width:100%}
.tn.on{border-color:var(--amber)}
.tn.a{background:linear-gradient(140deg,#2A1B0A,#5B3410);color:#FFD18A}
.tn.b{background:linear-gradient(140deg,#0D2C2B,#14504D);color:#fff}
.tn.c{background:linear-gradient(140deg,#2B0F10,#5A1C1C);color:#fff}
.tn .face{position:absolute;top:10%;left:6%;width:40%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 38%,#E9C9A7 0 22%,transparent 23%),radial-gradient(circle at 50% 100%,#3B4A63 0 45%,transparent 46%)}
.tn span{position:relative;max-width:58%}
.tn .pct{position:absolute;top:6px;right:6px;font-family:var(--f-mono);font-size:10.5px;background:rgba(0,0,0,.55);color:#fff;padding:0 6px;border-radius:5px;font-weight:500}

/* الإخراج */
.story{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.shot{background:var(--surface-2);border-radius:12px;overflow:hidden;min-width:0}
.shot .vis{aspect-ratio:16/9;position:relative;display:grid;place-items:center;max-width:100%}
.vis.cam{background:radial-gradient(circle at 50% 45%,#3A3226,#1A1712)}
.vis.scr{background:linear-gradient(#232A36,#1A1F28)}
.vis.twin{background:radial-gradient(circle at 50% 45%,#1F3433,#121B1B)}
.vis.broll{background:linear-gradient(135deg,#2C2334,#1A1620)}
.vis svg.i{width:30px;height:30px;color:#E9E3D6;opacity:.85}
.vis .tcs{position:absolute;top:6px;right:7px;font-family:var(--f-mono);font-size:10px;color:#ddd;direction:ltr}
.shot .bd{padding:9px 10px;font-size:12.5px;line-height:1.55}
.shot .bd b{display:block;font-size:13px}
.who{display:flex;gap:4px;margin-top:7px;flex-wrap:wrap}
.who button{border:1px solid var(--line);background:none;font-size:11px;padding:2px 7px;border-radius:6px;color:var(--muted)}
.who button.on{background:var(--teal-soft);color:var(--teal);border-color:transparent}
.meter{display:flex;flex-direction:column;gap:9px;font-size:13px}
.meter>div{display:grid;grid-template-columns:96px minmax(0,1fr) 40px;gap:10px;align-items:center}
.qr{width:110px;height:110px;background:#fff;padding:8px;border-radius:10px;flex:none}
.qr div{width:100%;height:100%;background-image:radial-gradient(#111 45%,transparent 46%);background-size:9px 9px;position:relative}
.qr div::before,.qr div::after{content:"";position:absolute;width:28px;height:28px;border:6px solid #111;background:#fff;top:0;right:0}
.qr div::after{top:auto;bottom:0}

/* الاستوديو */
.task{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:0}
.task .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2)}
.task b{font-size:13.5px;display:block}
.task .bar{margin-top:6px}
.wpframe{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#F0F0F1;aspect-ratio:16/10;max-width:100%;color:#1d2327;font-family:var(--f-body)}
.wpstage{position:absolute;inset:0;transition:transform 1s cubic-bezier(.5,0,.2,1)}
.wp-top{height:7%;background:#1d2327;color:#c3c4c7;display:flex;align-items:center;gap:10px;padding-inline:10px;font-size:clamp(8px,1vw,11px)}
.wp-top b{color:#fff}
.wp-side{position:absolute;top:7%;bottom:0;right:0;width:20%;background:#1d2327;padding-top:6px}
.wp-side div{color:#f0f0f1;font-size:clamp(8px,.95vw,12px);padding:5px 10px;display:flex;align-items:center;gap:6px}
.wp-side div.cur{background:#2271b1}
.wp-side div i{width:9px;height:9px;border-radius:2px;background:#8c8f94;display:inline-block}
.wp-main{position:absolute;top:7%;bottom:0;left:0;right:20%;padding:3% 4%;font-size:clamp(8px,1vw,13px)}
.wp-main h6{font-size:1.6em;margin:0 0 3%;font-weight:600}
.wp-box{background:#fff;border:1px solid #dcdcde;padding:3%;margin-bottom:3%;border-radius:2px}
.wp-dash .wp-box{height:24%}
.wp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2.2% 0;border-bottom:1px solid #f0f0f1}
.wp-row:last-child{border-bottom:0}
.wp-row small{display:block;color:#646970;font-size:.85em}
.tog{width:2.6em;height:1.4em;border-radius:99px;background:#8c8f94;position:relative;transition:.3s;flex:none}
.tog::after{content:"";position:absolute;top:.2em;right:.2em;width:1em;height:1em;border-radius:50%;background:#fff;transition:.3s}
.tog.on{background:#2271b1}.tog.on::after{right:1.4em}
.wp-in{width:5em;height:1.9em;border:1px solid #8c8f94;border-radius:3px;background:#fff;display:flex;align-items:center;padding-inline:.5em;font-family:var(--f-mono);direction:ltr}
.wp-in.focus{border-color:#2271b1;box-shadow:0 0 0 1px #2271b1}
.wp-btn{display:inline-block;background:#2271b1;color:#fff;padding:.5em 1.2em;border-radius:3px;font-size:.95em}
.wp-toast{position:absolute;top:10%;left:4%;background:#00a32a;color:#fff;padding:.6em 1em;border-radius:3px;font-size:clamp(8px,1vw,12px);opacity:0;transition:.35s}
.wp-toast.on{opacity:1}
.cursor{position:absolute;top:0;left:0;width:22px;height:22px;z-index:5;transition:transform .95s cubic-bezier(.45,.05,.2,1);pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.ripple{position:absolute;width:34px;height:34px;border-radius:50%;border:2px solid #F3A73B;z-index:4;transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none}
.ripple.go{animation:rip .6s ease-out}
@keyframes rip{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
.subline{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);background:rgba(10,12,16,.82);color:#fff;font-size:clamp(9px,1.2vw,14px);padding:.45em 1em;border-radius:7px;z-index:6;max-width:86%;text-align:center;line-height:1.6}
.recbadge{position:absolute;top:9%;right:22%;z-index:6;display:flex;gap:5px;align-items:center;background:rgba(10,12,16,.75);color:#fff;font-size:10.5px;padding:2px 8px;border-radius:5px;font-family:var(--f-mono)}
.recbadge i{width:7px;height:7px;border-radius:50%;background:#F0544B;animation:tally 1.2s infinite}

/* التوأم */
.avatar-box{position:relative;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#2A3A44,#141B21);aspect-ratio:4/3;display:grid;place-items:center;max-width:100%}
.avatar-box svg{width:60%;height:auto}
.mouth{transform-origin:150px 168px}
.talking .mouth{animation:talk .3s infinite alternate ease-in-out}
@keyframes talk{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.brow{animation:brow 4.5s infinite}
@keyframes brow{0%,80%,100%{transform:none}86%{transform:translateY(-5px)}}
.blink{animation:blink 5s infinite;transform-origin:center 128px}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.hand{transform-origin:240px 270px}
.talking .hand{animation:hand 3.2s infinite ease-in-out}
@keyframes hand{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-14deg)}80%{transform:rotate(4deg)}}
.ai-label{position:absolute;top:10px;right:10px;font-size:11px;background:rgba(0,0,0,.6);color:#fff;padding:2px 8px;border-radius:5px}
.av-sub{position:absolute;bottom:12px;inset-inline:12%;text-align:center;color:#fff;background:rgba(0,0,0,.6);border-radius:8px;padding:5px 10px;font-size:14px;min-height:1.6em}
.wave{display:flex;align-items:center;gap:3px;height:48px;direction:ltr}
.wave i{flex:1;background:var(--teal);border-radius:3px;height:20%;transition:height .15s}
.wave.live i{animation:wv 1s infinite ease-in-out alternate}
@keyframes wv{to{height:var(--h,80%)}}

/* المونتاج */
.player{aspect-ratio:16/9;border-radius:12px;background:radial-gradient(circle at 30% 40%,#2B3A44,#12171D);position:relative;overflow:hidden;max-width:100%}
.player .pv-face{position:absolute;bottom:0;left:6%;width:30%}
.player .pv-card{position:absolute;top:14%;right:6%;width:52%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:4%;color:#fff;font-family:var(--f-display);font-weight:700;font-size:clamp(12px,1.7vw,21px);line-height:1.3}
.player .pv-card small{display:block;font-family:var(--f-body);font-weight:400;font-size:.55em;color:#cfd6de;margin-top:6px}
.player .pv-sub{position:absolute;bottom:7%;right:6%;left:40%;text-align:center;color:#fff;font-size:clamp(10px,1.3vw,15px);background:rgba(0,0,0,.55);border-radius:6px;padding:4px 8px}
.player .pv-sub em{font-style:normal;color:#FFD18A}
.player .pv-sub.s2{background:none;font-family:var(--f-display);font-weight:800;font-size:clamp(12px,1.7vw,20px);text-shadow:0 2px 6px #000}
.player .pv-sub.s3{background:#FFD18A;color:#1A1206}
.player .pv-sub.s3 em{color:#9A2A20}
.ctrls{display:flex;align-items:center;gap:10px;margin-top:10px}
.ctrls .tc{font-family:var(--f-mono);font-size:12px;color:var(--muted);direction:ltr}
.tl{position:relative;font-size:11.5px;margin-top:6px}
.ruler{display:flex;justify-content:space-between;color:var(--faint);font-family:var(--f-mono);font-size:10.5px;margin-inline-start:96px;margin-bottom:5px;cursor:pointer;padding-block:3px;background:var(--surface-2);border-radius:5px;padding-inline:4px}
.track{display:grid;grid-template-columns:90px minmax(0,1fr);gap:6px;align-items:center;margin-bottom:5px}
.track .tl-l{color:var(--muted);display:flex;gap:5px;align-items:center;font-size:11.5px;white-space:nowrap}
.track .tl-l svg.i{width:13px;height:13px}
.lane{position:relative;height:28px;background:var(--surface-2);border-radius:6px}
.clip{position:absolute;top:3px;bottom:3px;border-radius:5px;font-size:10.5px;padding-inline:6px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;color:#10141a;font-weight:600;border:0;cursor:pointer}
.clip.sel{outline:2px solid var(--fg);outline-offset:1px}
.c-twin{background:#7BD3CF}.c-cam{background:#F6C27A}.c-scr{background:#A9B8F0}.c-broll{background:#D3A9E8}.c-aud{background:repeating-linear-gradient(90deg,#5CC98B 0 2px,#3E9E68 2px 4px)}.c-sub{background:#E3E6EC}.c-mus{background:#F29B94}
.playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--rec);z-index:2;pointer-events:none}
.playhead::before{content:"";position:absolute;top:-2px;right:-5px;width:12px;height:10px;background:var(--rec);clip-path:polygon(0 0,100% 0,50% 100%)}
.rrow{display:grid;grid-template-columns:130px minmax(0,1fr) 44px;gap:10px;align-items:center;font-size:12.5px;padding:5px 0}

/* اللغات والشورتس */
.langs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lang{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:13px;cursor:pointer;text-align:start;min-width:0}
.lang.on{border-color:var(--teal);background:var(--teal-soft)}
.lang-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.lang-h b{font-size:14px}
.lang .code{font-family:var(--f-mono);font-size:11px;color:var(--faint)}
.lang .tr{font-size:13px;line-height:1.6;min-height:3.2em}
.lang .bar{margin-top:9px}
.shorts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.phone{aspect-ratio:9/16;border-radius:16px;background:linear-gradient(180deg,#1B2430,#0E1217);position:relative;overflow:hidden;border:3px solid var(--surface-3);max-width:100%}
.short.off .phone{opacity:.4}
.phone .ph-face{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80%}
.phone .cap{position:absolute;top:42%;inset-inline:8%;text-align:center;font-family:var(--f-display);font-weight:800;color:#fff;font-size:clamp(13px,1.4vw,18px);line-height:1.3;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.phone .cap em{font-style:normal;color:#FFD18A}
.phone .hook{position:absolute;top:7%;inset-inline:8%;font-size:11px;color:#fff;background:rgba(240,84,75,.85);border-radius:6px;padding:2px 7px;text-align:center}
.phone .prog{position:absolute;bottom:0;right:0;height:3px;background:#FFD18A;animation:prog 6s linear infinite}
@keyframes prog{from{width:0}to{width:100%}}
.sm-meta{display:flex;justify-content:space-between;align-items:flex-start;margin-top:8px;gap:8px}
.sm-meta b{font-size:13px;display:block;line-height:1.45}
.sm-meta small{font-size:11px;color:var(--faint);font-family:var(--f-mono)}
.ring{width:42px;height:42px;flex:none}

/* النشر */
.week{display:grid;grid-template-columns:repeat(7,minmax(108px,1fr));gap:8px;overflow-x:auto}
.day{background:var(--surface-2);border-radius:10px;padding:8px;min-height:150px}
.day h6{margin:0 0 7px;font-size:12px;color:var(--muted);font-weight:600;display:flex;justify-content:space-between}
.day.today{background:var(--amber-soft)}
.post{background:var(--surface);border-radius:7px;padding:6px 7px;font-size:11.5px;margin-bottom:6px;line-height:1.45;border:1px solid var(--line)}
.post.new{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber-soft)}
.post .pl{display:flex;gap:4px;margin-bottom:2px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.p-yt{background:#F0544B}.p-tt{background:#4CC4BF}.p-ig{background:#D98AD9}.p-x{background:#9BA4B6}.p-tg{background:#4B9BE8}.p-wa{background:#5CC98B}.p-help{background:#F3A73B}
.heat{display:grid;grid-template-columns:44px repeat(12,minmax(0,1fr));gap:3px;font-size:10.5px;color:var(--faint);min-width:420px}
.heat button{height:18px;border-radius:3px;background:var(--teal);border:0;padding:0}
.heat button.pick{outline:2px solid var(--amber);outline-offset:1px}
.heat span{align-self:center}
.plat{display:flex;align-items:center;gap:9px;font-size:13px;padding:8px 0;border-bottom:1px solid var(--line)}
.plat:last-child{border-bottom:0}
.plat .t{flex:1}

/* الأدوات */
.plugins{display:flex;flex-direction:column;gap:8px}
.plug{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;text-align:start;width:100%}
.plug.on{border-color:var(--amber)}
.plug .lg{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:17px;color:#10141a;flex:none}
.plug b{display:block;font-size:14.5px;line-height:1.3}
.plug small{font-family:var(--f-mono);font-size:11px;color:var(--faint)}
.mock{background:#F0F0F1;border-radius:8px;padding:8px;aspect-ratio:16/10;display:flex;flex-direction:column;gap:5px;max-width:100%}
.mock i{display:block;height:9%;background:#dcdcde;border-radius:2px}
.mock i.new{background:#FFD18A;outline:2px solid #B76A00}
.mock i.gone{background:#F3B1AC}
.helpprev{background:#F0F0F1;border-radius:10px;padding:14px;color:#1d2327;font-size:13px}
.helpprev .wp-row{padding:8px 0}
.watch{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #2271b1;color:#2271b1;border-radius:4px;padding:2px 9px;font-size:12px;cursor:pointer}

/* الإعدادات */
.conn{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.conn:last-child{border-bottom:0}
.conn .lg{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);font-weight:700;font-size:13px;flex:none;font-family:var(--f-mono)}
.conn .t{flex:1;min-width:0}
.conn small{display:block;color:var(--faint);font-size:12px}

/* نوافذ */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:80;display:grid;place-items:center;padding:16px;backdrop-filter:blur(3px)}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);width:min(640px,100%);max-height:calc(100% - 20px);overflow-y:auto;animation:pop .2s ease}
@keyframes pop{from{transform:scale(.97);opacity:.5}}
.modal-h{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-h h3{font-family:var(--f-display);font-size:20px}
.modal-h button{margin-inline-start:auto}
.modal-b{padding:18px;display:flex;flex-direction:column;gap:14px}
.modal-f{display:flex;gap:8px;justify-content:flex-start;padding:14px 18px;border-top:1px solid var(--line)}
.wsteps{display:flex;gap:6px;font-size:12px}
.wsteps span{flex:1;height:4px;border-radius:99px;background:var(--surface-3)}
.wsteps span.on{background:var(--amber)}
.choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.opt{background:var(--surface-2);border:1.5px solid transparent;border-radius:12px;padding:13px;text-align:start}
.opt.on{border-color:var(--amber);background:var(--amber-soft)}
.opt svg.i{width:22px;height:22px;margin-bottom:6px}
.opt b{display:block;font-size:14px}
.opt small{color:var(--muted);font-size:12px;line-height:1.5;display:block}
.pal{position:fixed;inset:0;z-index:85;background:var(--scrim);display:flex;justify-content:center;padding:12vh 16px 16px}
.pal-box{width:min(560px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;align-self:flex-start}
.pal-box input{width:100%;border:0;border-bottom:1px solid var(--line);background:none;padding:14px 16px;font-size:15px;outline:none}
.pal-list{max-height:50vh;overflow-y:auto;padding:6px}
.pal-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;width:100%;border:0;background:none;text-align:start;font-size:14px}
.pal-item.on,.pal-item:hover{background:var(--surface-2)}
.pal-item small{margin-inline-start:auto;color:var(--faint);font-size:11.5px}
.drop{position:fixed;z-index:70;width:340px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px}
.drop h4{font-size:13px;color:var(--muted);padding:6px 8px;font-weight:600}
.nt{display:flex;gap:10px;padding:9px 8px;border-radius:9px;font-size:13px;line-height:1.55;width:100%;border:0;background:none;text-align:start}
.nt:hover{background:var(--surface-2)}
.nt .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.nt small{display:block;color:var(--faint);font-size:11.5px}
.nt.unread b::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rec);margin-inline-start:6px}

.tip{position:fixed;z-index:100;max-width:290px;background:var(--fg);color:var(--bg);font-size:13px;line-height:1.65;padding:8px 12px;border-radius:10px;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;box-shadow:var(--shadow)}
.tip.on{opacity:1;transform:none}
.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,14px);background:var(--fg);color:var(--bg);padding:9px 16px;border-radius:11px;font-size:13.5px;z-index:95;opacity:0;transition:.3s;pointer-events:none;box-shadow:var(--shadow);display:flex;gap:8px;align-items:center;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1180px){.assist{position:fixed;left:0;top:0;bottom:0;z-index:60;box-shadow:var(--shadow)}}
@media (max-width:1020px){.split{grid-template-columns:minmax(0,1fr)}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.shorts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;top:0;bottom:0;right:0;width:260px;z-index:65;transform:translateX(105%);transition:transform .25s;box-shadow:var(--shadow)}
  .side.open{transform:none}
  .menu-btn{display:grid}
  .search{min-width:0;flex:0 1 auto} .search span,.search kbd{display:none}
  .g2,.g3,.quick,.choice{grid-template-columns:minmax(0,1fr)}
  .langs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .view{padding:16px 16px 40px}
}
@media (max-width:520px){
  .langs{grid-template-columns:minmax(0,1fr)}
  .topic{grid-template-columns:minmax(0,1fr) 52px}.topic svg{display:none}
  .crumb{display:none}
  .assist{width:100%}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== إضافات المنصة الحقيقية (ليست في النموذج) ===== */
[hidden]{display:none!important}
.tally.idle{animation:none;background:var(--faint);box-shadow:none}
.ib.sm{width:30px;height:30px}
.btn.busy,.mini.busy{opacity:.6;cursor:progress}
.wbanner{display:flex;align-items:center;gap:10px;padding:8px 18px;background:var(--amber-soft);color:var(--fg);font-size:13px;border-bottom:1px solid var(--line)}
.wbanner .btn{margin-inline-start:auto}
.jobline{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--muted)}
.jobline .bar{flex:0 0 120px}
.jobline svg.i{animation:spin 1.6s linear infinite;color:var(--amber)}
.jobline.err{background:var(--rec-soft);color:var(--rec)}
.jobline.err svg.i{animation:none;color:var(--rec)}
.jobline.err .btn{margin-inline-start:auto}
.vwrap{border-radius:10px;overflow:hidden;background:#000;aspect-ratio:16/9;max-width:100%}
.vwrap video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.cliprow{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.wpframe.idle-rec{display:grid;place-items:center;background:var(--surface-2);color:var(--fg)}
.rec-wait{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:16px;max-width:420px}
.rec-wait svg.i{color:var(--faint)}
.rec-wait small{color:var(--muted);font-size:12.5px}
.warnline{display:flex;gap:6px;align-items:flex-start;font-size:12.5px;color:var(--amber);margin-top:8px}
.acts-list{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:11.5px;color:var(--faint);margin-top:4px}
.acts-list span{background:var(--surface-2);border-radius:6px;padding:1px 7px}
.acts-list i{font-style:normal;opacity:.6}
.srcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.srcs a{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--teal);text-decoration:none;background:var(--teal-soft);border-radius:99px;padding:1px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.comp{color:inherit;text-decoration:none}
a.comp:hover b{color:var(--amber)}
.fact small a{color:var(--teal)}
.qr.real{display:grid;place-items:center}
.qr.real svg{width:100%;height:100%;display:block}
.tn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shotimg{display:block;width:100%;border-radius:8px;border:1px solid var(--line);margin-bottom:4px;max-width:100%}
.player.has-v{background:#000}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;cursor:pointer}
.pv-tag{position:absolute;top:10px;right:10px;font-size:11px;background:rgba(0,0,0,.6);color:#fff;padding:2px 8px;border-radius:5px;z-index:3}
img.face-photo{object-fit:cover;border-radius:50% 50% 0 0;aspect-ratio:1}
.player img.pv-face{width:26%;bottom:0}
.phone img.ph-face{width:62%;bottom:6%;border-radius:50%}
.avatar-box.photo img{width:100%;height:100%;object-fit:cover;border-radius:0;aspect-ratio:auto}
.avatar-box.photo.talking img{animation:breathe 1.2s infinite alternate ease-in-out}
@keyframes breathe{to{transform:scale(1.015)}}
.phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.plan{background:var(--surface-2);border:1.5px solid transparent;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px}
.plan.feat{border-color:var(--amber)}
.plan.cur{background:var(--amber-soft)}
.plan b{font-size:16px}
.plan .price{font-family:var(--f-display);font-size:26px;line-height:1.2}
.plan .price small{font-family:var(--f-body);font-size:12px;color:var(--muted)}
.plan ul{margin:4px 0 8px;padding-inline-start:18px;color:var(--muted);font-size:12.5px;line-height:1.8;flex:1}
.plan .btn{align-self:flex-start}
pre.code{background:var(--surface-2);border-radius:10px;padding:12px;font-family:var(--f-mono);font-size:11.5px;line-height:1.6;direction:ltr;text-align:left;overflow:auto;max-height:340px;white-space:pre;margin:6px 0 0}
.rrow a{color:var(--good);display:grid;place-items:center}
.drop h4 small{font-size:11.5px}
/* شاشة الدخول */
.auth{min-height:100%;display:grid;place-items:center;padding:16px;overflow:auto;height:100%}
.auth-box{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:12px}
.auth-box .brand{padding:0;font-size:30px}
.auth-lead{font-size:13.5px}
.auth-tabs{align-self:flex-start}
.auth-form{display:flex;flex-direction:column;gap:8px}
.auth-form .btn.pri{justify-content:center;margin-top:6px;padding:10px}
.auth-form .btn.ghost{align-self:flex-start;border:0;color:var(--muted)}
.auth-foot{font-size:11.5px}
@media (max-width:860px){.plans{grid-template-columns:minmax(0,1fr)}}
.prompter{font-size:22px;line-height:2;max-height:46vh;overflow:auto}
.recbar{display:flex;align-items:center;gap:10px}
.recdot{width:12px;height:12px;border-radius:50%;background:var(--surface-3)}
.recdot.on{background:var(--rec);animation:tally 1.2s infinite}
.mini-wave{flex:1;height:34px}
.mini-wave i{height:8%;transition:height .08s}

.view-in.quiet{animation:none}
.player video::-webkit-media-controls-panel{direction:ltr}
.prompter .dim{opacity:.35}
.prompter .cur{color:var(--ink,inherit);font-weight:700}

/* =====================================================================
   طبقة التصور المعتمد (2026-10-14): الهيكل الجديد ومكوّناته، فوق ما سبق
   ===================================================================== */
body{line-height:1.65}
.app{grid-template-columns:244px minmax(0,1fr) auto}
.side{border-inline-end:0;border-inline-start:1px solid var(--line)}
.side-in{padding:16px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;min-height:0}
.side .brand{display:flex;align-items:center;gap:10px;padding:2px 8px 12px;font-weight:600;font-size:inherit}
.lens{width:34px;height:34px;border-radius:50%;flex:none;position:relative;background:radial-gradient(circle at 36% 36%,var(--amber-2) 0 16%,var(--amber) 17% 24%,var(--surface-3) 25% 50%,var(--amber) 51% 56%,var(--surface-2) 57%);box-shadow:0 0 0 1px var(--line-2)}
.lens .live{position:absolute;top:-1px;inset-inline-end:-1px;width:10px;height:10px;border-radius:50%;background:var(--rec);box-shadow:0 0 0 3px var(--side);animation:tally 2s infinite}
.lens.idle .live{display:none}
.side .brand b{font-family:var(--f-display);font-size:21px;display:block;line-height:1.1;font-weight:700}
.side .brand small{color:var(--faint);font-size:11.5px;font-weight:400;font-family:var(--f-body)}
.viewas{display:flex;gap:2px;background:var(--surface-2);border-radius:10px;padding:3px;margin:0 4px 6px}
.viewas button{flex:1;border:0;background:none;border-radius:8px;padding:5px 4px;font-size:11.5px;color:var(--muted)}
.viewas button[aria-pressed="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.nav{flex:none;overflow:visible;padding:0;display:flex;flex-direction:column;gap:2px}
.grp{font-size:11px;letter-spacing:.04em;color:var(--faint);padding:14px 10px 4px;display:flex;align-items:center;gap:6px}
.grp .who{margin-inline-start:auto;font-size:10px;border-radius:99px;padding:0 7px;line-height:16px;background:var(--surface-3);color:var(--muted)}
.ownbox{margin-top:10px;border:1px dashed var(--amber);border-radius:12px;padding:2px 4px 6px;background:var(--amber-soft)}
.ownbox .grp{color:var(--amber)}
.ownbox .grp .who{background:var(--amber);color:var(--on-amber)}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:14px}
.nav a:hover{background:var(--surface-2);color:var(--fg)}
.nav a.on{background:var(--amber-soft);color:var(--fg);font-weight:500}
.nav a.on svg.i{color:var(--amber)}
.nav a .badge,.nav a .cnt{margin-inline-start:auto;font-size:11px;background:var(--surface-3);color:var(--muted);border-radius:99px;padding:0 7px;font-family:var(--f-mono);line-height:18px}
.nav a .badge.hot,.nav a .cnt.hot{background:var(--rec-soft);color:var(--rec)}
.credit{margin:10px 12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:7px;cursor:pointer;font-size:12.5px}
.credit:hover{border-color:var(--amber)}
.credit .row{display:flex;justify-content:space-between;gap:8px}
.credit small{color:var(--faint);font-size:11.5px}
.prog{height:6px;border-radius:9px;background:var(--surface-3);overflow:hidden}
.prog i{display:block;height:100%;border-radius:9px;background:var(--amber);transition:width .5s}

.top{position:sticky;top:0;z-index:5;height:auto;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:10px 28px;gap:10px}
.top .search{flex:1;min-width:0;max-width:520px;margin-inline-start:0;background:var(--surface);border:1px solid var(--line);padding:7px 12px;font-size:13.5px;white-space:nowrap;overflow:hidden;cursor:pointer}
.top .search kbd{border:1px solid var(--line-2);background:none}
.top .grow{flex:1}
.wstat{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.wstat i{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px var(--good-soft)}
.wstat.off i{background:var(--rec);box-shadow:0 0 0 4px var(--rec-soft)}
.ib{background:var(--surface);color:var(--fg)}
.ib:hover{border-color:var(--amber);background:var(--surface)}
.ib .dot{top:7px;left:auto;inset-inline-end:8px;width:7px;height:7px;border:0}
.me{width:auto;height:auto;border-radius:99px;background:var(--surface);border:1px solid var(--line);color:var(--fg);display:flex;align-items:center;gap:8px;padding:3px 12px 3px 3px;font-family:var(--f-body);font-weight:400;font-size:13px}
.me:hover{border-color:var(--amber)}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;color:var(--on-amber);background:var(--amber);flex:none;font-size:14px;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.view{padding:22px 28px 60px}
.view-in{max-width:none;gap:14px}

.page-h{align-items:flex-end;gap:10px}
.page-h h1{font-size:27px;font-weight:600}
.page-h p{font-size:13.5px;margin-top:2px}
.btn{border-color:var(--line-2);font-weight:500;gap:7px}
.btn:hover{border-color:var(--amber);background:var(--surface)}
.btn.pri{font-weight:600}
.btn.pri:hover{background:var(--amber-2);filter:none}
.btn.ghost{border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface-2);color:var(--fg)}
.btn.danger{color:var(--rec)}
.card{border-radius:16px;padding:18px}
.card.flat{background:var(--surface-2);border-color:transparent}
.card-h{gap:10px;margin-bottom:14px;flex-wrap:wrap}
.card-h h3{font-family:var(--f-display);font-size:16.5px;font-weight:600;gap:10px}
.card-h h3>svg.i:first-child{width:38px;height:38px;padding:10px;border-radius:11px;background:var(--amber-soft);color:var(--amber);box-sizing:border-box}
.card-h .r{color:var(--faint);font-size:12px}
.tile{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}
.tile svg.i{width:18px;height:18px}
.t-amber{background:var(--amber-soft);color:var(--amber)}.t-teal{background:var(--teal-soft);color:var(--teal)}.t-rec{background:var(--rec-soft);color:var(--rec)}.t-good{background:var(--good-soft);color:var(--good)}.t-violet{background:var(--violet-soft);color:var(--violet)}
.ch{display:flex;align-items:center;gap:10px;margin-bottom:14px;min-width:0;flex-wrap:wrap}
.ch h3{font-family:var(--f-display);font-size:16.5px;font-weight:600;min-width:0}
.ch .x{margin-inline-start:auto;color:var(--faint);font-size:12px}
.kpi{border-radius:16px;padding:18px;display:grid;gap:10px}
.kpi .h{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;min-width:0}
.kpi span{display:inline;font-size:inherit}
.kpi .vrow{display:flex;align-items:flex-end;gap:10px}
.kpi b{font-size:30px;font-weight:600;line-height:1}
.kpi b small{font-size:13px;color:var(--muted);font-weight:500;margin-inline-start:4px;font-family:var(--f-body)}
.kpi .d{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.kpi .spark{display:flex;align-items:flex-end;gap:3px;height:30px;margin-inline-start:auto;flex:none;width:auto}
.kpi .spark i{width:5px;border-radius:2px;opacity:.35;display:block}
.kpi .spark i:last-child{opacity:1}
.chip{font-weight:600;padding:1px 10px}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:1px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.pill.ok{background:var(--good-soft);color:var(--good)}.pill.warn{background:var(--amber-soft);color:var(--amber)}.pill.bad{background:var(--rec-soft);color:var(--rec)}.pill.info{background:var(--teal-soft);color:var(--teal)}.pill.mute{background:var(--surface-3);color:var(--muted)}.pill.vio{background:var(--violet-soft);color:var(--violet)}
.toggle{width:40px;height:22px}
.toggle::after{top:3px;right:3px;width:16px;height:16px;background:#fff}
.toggle.on::after{right:21px;background:#fff}
input.field,select.field,textarea.field{padding:9px 12px}
input.field:focus,select.field:focus,textarea.field:focus{outline:none;border-color:var(--amber)}
.list-row{padding:11px 0;gap:12px}
.list-row .t b{display:block;font-weight:600;line-height:1.45}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:4px;overflow-x:auto}
.tabs button{border:0;background:none;padding:9px 14px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--fg);border-bottom-color:var(--amber)}
.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.g21{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px}
.g2,.g3{gap:14px}.g4{gap:14px}
.split{gap:14px}
.leg-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)}
.leg-row i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px}

/* رسوم HTML */
.bars-h{display:grid;gap:12px}
.bh{display:grid;gap:5px}
.bh .lab{display:flex;justify-content:space-between;gap:10px;font-size:13px;min-width:0}
.bh .lab span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bh .bt{height:9px;border-radius:9px;background:var(--surface-2);overflow:hidden;position:relative;display:block}
.bh .bt i{display:block;height:100%;border-radius:9px}
.cols{display:flex;align-items:flex-end;gap:10px;height:170px;padding-top:24px;border-bottom:1px solid var(--line)}
.cols .c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0;gap:5px}
.cols .c i{width:100%;max-width:46px;border-radius:8px 8px 3px 3px;display:block}
.cols .c span{font-family:var(--f-mono);font-size:12px}
.cols-lab{display:flex;gap:10px;margin-top:6px}
.cols-lab span{flex:1;text-align:center;font-size:12px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pair{display:flex;width:100%;justify-content:center;align-items:flex-end;gap:3px}
.pair i{flex:1;max-width:22px!important}
.donut{width:150px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;flex:none;max-width:100%}
.donut>div{width:68%;aspect-ratio:1;border-radius:50%;background:var(--surface);display:grid;place-items:center;text-align:center;line-height:1.25}
.card.flat .donut>div{background:var(--surface-2)}
.donut b{font-family:var(--f-display);font-size:21px;display:block}
.leg{list-style:none;margin:0;padding:0;display:grid;gap:9px;flex:1;min-width:150px}
.leg li{display:flex;align-items:center;gap:9px;font-size:13px}
.leg li i{width:10px;height:10px;border-radius:3px;flex:none}
.leg li span{flex:1}
.gauge{width:220px;max-width:100%;aspect-ratio:2/1;border-radius:220px 220px 0 0;position:relative;overflow:hidden;margin:6px auto 0}
.gauge::after{content:"";position:absolute;inset:auto 16% 0 16%;height:68%;border-radius:200px 200px 0 0;background:var(--surface)}
.gauge .v{position:absolute;inset:auto 0 0 0;text-align:center;z-index:1;line-height:1.15;padding-bottom:2px}
.gauge .v b{font-family:var(--f-display);font-size:25px;display:block}
.area{position:relative;height:170px}
.area svg{position:absolute;inset:0;width:100%;height:100%}
.ax{display:flex;justify-content:space-between;font-size:11.5px;color:var(--faint);margin-top:6px}

/* خط الإنتاج ولوحة المشاريع */
.chain{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.st{background:var(--surface-2);border-radius:12px;padding:12px 8px 10px;text-align:center;position:relative;cursor:pointer;border:1px solid transparent;display:grid;gap:4px;justify-items:center}
.st:hover{border-color:var(--amber)}
.st b{font-family:var(--f-display);font-size:24px;line-height:1}
.st small{font-size:11.5px;color:var(--muted)}
.st .dot{position:absolute;top:9px;inset-inline-start:9px;width:7px;height:7px;border-radius:50%;background:var(--surface-3)}
.st.live .dot{background:var(--rec);box-shadow:0 0 0 4px var(--rec-soft);animation:pulse 1.6s infinite}
.st.wait .dot{background:var(--amber)}
.st.zero b{color:var(--faint)}
@keyframes pulse{50%{box-shadow:0 0 0 7px transparent}}
.board{grid-template-columns:repeat(5,minmax(220px,1fr));gap:12px;padding-bottom:8px}
.col{border-radius:14px;padding:10px;display:grid;gap:8px;align-content:start;min-height:200px}
.col h5,.col h4{margin:0;font-size:14px;display:flex;gap:8px;align-items:center;padding:4px 4px 2px;color:var(--fg);font-family:var(--f-display);font-weight:600}
.col h4 .cnt,.col h5 .cnt{margin-inline-start:auto;font-size:11px;background:var(--surface-3);color:var(--muted);border-radius:99px;padding:0 7px;font-family:var(--f-mono);line-height:18px;font-weight:400}
.pc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:8px;cursor:pointer;text-align:start;width:100%}
.pc:hover{border-color:var(--amber)}
.pc b{font-size:13.5px;line-height:1.5}
.pc .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--faint)}

/* المشروع */
.pbar{background:none;border:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pbar-top{gap:10px}
.ptitle{font-family:var(--f-display);font-size:26px;font-weight:600;line-height:1.3}
.stepper{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px;flex-wrap:wrap;overflow:visible}
.stp{background:none;border-radius:10px;padding:7px 14px;font-size:13px;color:var(--muted);gap:7px}
.stp .n{width:20px;height:20px;font-size:11px;font-family:var(--f-mono);font-weight:500}
.stp.done{color:var(--good)}.stp.done .n{background:var(--good-soft);color:var(--good)}
.stp.cur{background:none;color:var(--fg);font-weight:500}.stp.cur .n{background:var(--amber);color:var(--on-amber)}
.stp.here{outline:0;background:var(--amber-soft);color:var(--fg)}
.stp[disabled]{opacity:.45}
.stage-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stage-h p{color:var(--muted);font-size:13.5px;flex:1;min-width:220px}

@media (max-width:1180px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}.g21{grid-template-columns:minmax(0,1fr)}.chain{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:860px){
  body{overflow:auto}
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:auto;min-height:100%}
  .side{position:static;transform:none;width:auto;box-shadow:none;border-inline-start:0;border-bottom:1px solid var(--line)}
  .side-in{flex-direction:row;overflow-x:auto;padding:8px 12px;gap:2px}
  .side .brand,.grp,.credit,.viewas,.nav a .cnt,.nav a .badge,.wstat{display:none}
  .nav{flex-direction:row}
  .ownbox{display:flex;margin:0;padding:0;border:0;background:none}
  .nav a{white-space:nowrap;padding:7px 10px}
  .menu-btn{display:none}
  .main{min-height:0}
  .view{overflow:visible;padding:16px 16px 50px}
  .top{padding:8px 16px}
  .top .search span,.top .search kbd,.me>#meName{display:none}.me{padding:3px}
  .top .search{flex:0 0 auto}
  .g5,.g4{grid-template-columns:minmax(0,1fr)}
}
/* داخل المشروع: العنوان في الشريط، فعنوان المرحلة يُكتفى بوصفه وأوامره */
.pbar + .page-h h1{display:none}
.pbar + .page-h{align-items:center}
.pbar + .page-h p{margin:0}
.topic-row{cursor:pointer;border-radius:10px;padding-inline:8px;margin-inline:-8px}
.topic-row:hover{background:var(--surface-2)}
.topic-row.sel{background:var(--amber-soft)}
.ch .x .seg button{padding:3px 9px;font-size:12px}
.grid{display:grid;gap:14px}
button.chip{border:1px solid var(--line-2);background:var(--surface);color:var(--fg);border-radius:99px;padding:4px 12px;font-size:12.5px;font-weight:500}
button.chip:hover{border-color:var(--amber)}
button.chip.sel{background:var(--amber-soft);border-color:var(--amber);color:var(--fg)}
button.chip.amber{background:var(--amber-soft);color:var(--amber);border-color:transparent}
button.card{font:inherit;color:inherit;text-align:start;cursor:pointer;width:100%}
button.card:hover{border-color:var(--amber)}
.plugc.on{border-color:var(--amber);background:var(--amber-soft)}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{color:var(--faint);font-weight:500;text-align:right;padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:12.5px}
table.tbl td{text-align:right;padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tr.click{cursor:pointer}
table.tbl tr.click:hover td{background:var(--surface-2)}
.wave i{height:var(--h0,20%)}
.wave i{background:var(--amber)}
.fld{display:grid;gap:6px}
.fld .lbl{margin:0}
.aion{border:1px solid var(--amber)!important;background:var(--amber-soft)!important}
button.card:disabled{opacity:.55;cursor:not-allowed}

span.lbl{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-weight:600}
.plan-c{display:grid;gap:10px;align-content:start}
.plan-c.feat{border-color:var(--amber)}
.plan-c.cur{background:var(--amber-soft)}
.plan-c .btn{justify-self:stretch;justify-content:center}
.pfeat{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:12.5px;color:var(--muted)}
.pfeat li{display:flex;gap:6px;align-items:flex-start}
.pfeat svg.i{width:14px;height:14px;color:var(--good);margin-top:3px}
.acc-cover{height:110px;background:radial-gradient(120% 140% at 85% 0%,var(--amber) 0,transparent 55%),radial-gradient(90% 120% at 10% 100%,var(--teal) 0,transparent 55%),var(--surface-2);opacity:.9}
.acc-head{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;padding:0 22px 20px;margin-top:-44px}
.acc-av{width:92px;height:92px;font-size:38px;border:4px solid var(--surface);cursor:pointer;position:relative;overflow:visible}
.acc-av img{border-radius:50%}
.acc-cam{position:absolute;bottom:2px;inset-inline-start:2px;width:28px;height:28px;border-radius:50%;background:var(--surface);color:var(--fg);display:grid;place-items:center;box-shadow:var(--shadow)}
.small{font-size:12.5px}
@media (max-width:600px){.acc-head{flex-direction:column;align-items:flex-start;gap:10px}.acc-head h1{font-size:21px!important}}
/* شاشة الدخول */
.lg{position:fixed;inset:0;z-index:50;background:var(--bg);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);overflow:auto}
.lg[hidden]{display:none}
.lg-form{display:grid;place-items:center;padding:32px 20px}
.lg-in{width:min(400px,100%);display:grid;gap:16px}
.lg-in h1{font-size:30px;font-family:var(--f-display)}
.lg-in .lbl{margin:0}
.lg-in .fld{display:grid;gap:6px;font-size:13.5px}
.lg-brand{display:flex;align-items:center;gap:10px}
.lg-brand b{font-family:var(--f-display);font-size:24px}
.lg-sso{display:grid;gap:8px}
.lg-sso button{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--fg);border-radius:12px;padding:11px;cursor:pointer;font:inherit;font-weight:500}
.lg-sso button:hover{border-color:var(--amber)}
.lg-sso button.off{opacity:.6}
.lg-sso b{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-family:var(--f-display);font-size:13px;color:#fff}
.lg-or{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:12px}
.lg-or::before,.lg-or::after{content:"";flex:1;height:1px;background:var(--line)}
.lg-in .btn.pri,.lg-in .btn.wide{justify-content:center;padding:11px}
.lg-link{border:0;background:none;color:var(--amber);cursor:pointer;font:inherit;padding:0 4px}
.lg-link.mute{color:var(--muted)}
.lg-rem{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.lg-rem input{accent-color:var(--amber);width:16px;height:16px}
.lg-quick{display:flex;align-items:center;gap:12px;text-align:start;width:100%;cursor:pointer;font:inherit;color:var(--fg)}
.lg-quick .av{width:44px;height:44px;font-size:19px}
.lg-code{font-family:var(--f-mono);font-size:26px;letter-spacing:.4em;text-align:center}
.lg-show{position:relative;overflow:hidden;background:#0B0E14;color:#ECEEF3;display:grid;place-items:center;padding:40px 28px;min-height:100%}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.b1{width:420px;height:420px;background:#F3A73B;top:-120px;right:-80px}
.b2{width:360px;height:360px;background:#4CC4BF;bottom:-140px;left:-60px}
.b3{width:260px;height:260px;background:#9A8CF0;top:40%;left:30%}
.lg-stage{position:relative;z-index:1;width:min(520px,100%);display:grid;gap:22px}
.lg-logo{position:relative;width:110px;height:110px;margin:0 auto}
.lg-lens{width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 36% 36%,#FFC46B 0 16%,#F3A73B 17% 24%,#2A3140 25% 50%,#F3A73B 51% 56%,#1B212C 57%);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 80px -20px rgba(243,167,59,.6)}
.lg-ring{position:absolute;inset:-14px;border-radius:50%;border:1px dashed rgba(243,167,59,.5)}
.lg-t{font-family:var(--f-display);font-size:26px}
.lg-s{color:#9AA3B5;margin-top:4px}
.lg-pipe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;position:relative}
.lg-pipe span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 4px;text-align:center;font-size:12px;display:grid;gap:6px;justify-items:center;transition:border-color .3s,background .3s}
.lg-pipe span i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(243,167,59,.16);color:#F3A73B}
.lg-pipe span i svg{width:16px;height:16px}
.lg-pipe span.on{border-color:#F3A73B;background:rgba(243,167,59,.14)}
.lg-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lg-stats div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;display:grid;gap:2px}
.lg-stats b{font-family:var(--f-mono);font-size:22px}
.lg-stats small{color:#9AA3B5;font-size:12px}
.lg-wave{display:flex;align-items:center;gap:3px;height:40px}
.lg-wave i{flex:1;border-radius:2px;background:#F3A73B;opacity:.8}
@media (prefers-reduced-motion:no-preference){
 .b1{animation:fl1 14s ease-in-out infinite}.b2{animation:fl2 17s ease-in-out infinite}.b3{animation:fl1 20s ease-in-out infinite reverse}
 @keyframes fl1{50%{transform:translate(-90px,70px) scale(1.15)}}@keyframes fl2{50%{transform:translate(110px,-60px) scale(.9)}}
 .lg-ring{animation:lgspin 18s linear infinite}@keyframes lgspin{to{transform:rotate(360deg)}}
 .lg-wave i{animation:lgwv 1.2s ease-in-out infinite}@keyframes lgwv{50%{transform:scaleY(.35)}}
}
@media (max-width:900px){.lg{grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content}.lg-stage{gap:16px}.lg-logo,.lg-lens{width:84px;height:84px}.lg-show{min-height:auto;order:-1;padding:28px 16px}.lg-stats b{font-size:18px}.lg-pipe span{font-size:11px;padding:8px 2px}.lg-pipe span i{width:24px;height:24px}}
/* لوحة المالك */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fbox{border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:6px;background:var(--surface-2);align-content:start}
.fbox b{font-family:var(--f-display);font-size:15.5px}
.fbox.me{border-color:var(--amber);background:var(--amber-soft)}
.up{color:var(--good)}.down{color:var(--rec)}
.cols .c span.up,.cols .c span.down{font-size:11.5px}
.drawer{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(560px,100%);background:var(--surface);z-index:85;overflow:auto;box-shadow:var(--shadow);border-inline-end:1px solid var(--line);animation:drIn .2s ease-out}
@keyframes drIn{from{transform:translateX(-24px);opacity:0}}
.drawer .dr-h{position:sticky;top:0;background:var(--surface);display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);z-index:1}
.drawer .dr-h h3{font-size:17px}
.drawer .dr-b{padding:18px;display:grid;gap:16px}
.card.flat{background:var(--surface-2);box-shadow:none}
@media (max-width:760px){.flow{grid-template-columns:minmax(0,1fr)}}

.tw{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.tw table.tbl td,.tw table.tbl th{white-space:nowrap}
.tw table.tbl td:nth-child(2){white-space:normal;min-width:160px}
.cols-lab.lab-n span{overflow:visible;text-overflow:clip;font-family:var(--f-mono)}
@media (max-width:600px){.cols-lab.lab-n span{font-size:10px}.cols-lab span{font-size:10.5px}}
.ins-sc{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;border:1px dashed transparent;background:none;color:var(--faint);font:inherit;font-size:12.5px;padding:4px;border-radius:10px;cursor:pointer;opacity:.35;transition:opacity .15s,border-color .15s,color .15s}
.ins-sc:hover,.ins-sc:focus-visible{opacity:1;border-color:var(--amber);color:var(--amber)}
.scene.added .tc{color:var(--amber)}
.learned{background:var(--surface-2);border-radius:12px;padding:12px}
button.jobline.done{width:100%;border:1px solid var(--good);background:var(--good-soft,var(--surface-2));color:var(--fg);cursor:pointer;font:inherit;text-align:start}
button.jobline.done svg{color:var(--good)}
.scrnote{font-size:11.5px;color:var(--amber);margin-top:4px}
.verbar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--amber);box-shadow:var(--shadow);border-radius:14px;padding:10px 14px;font-size:13.5px;max-width:calc(100% - 32px)}
.verbar svg{color:var(--amber);flex:none}
/* خطة الشاشة */
.plan{margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface-2)}
.plan-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.plan-h svg.i{width:16px;height:16px;color:var(--teal)}
.plan-l{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.plan-l li{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.plan-l li .n{flex:none;width:20px;height:20px;border-radius:6px;background:var(--surface-3);display:grid;place-items:center;font-size:11px}
.plan-l li .t{flex:1;min-width:0;display:grid;gap:2px}
.plan-l li small{color:var(--faint);font-size:11.5px}
.plan-l li small.err{color:var(--rec)}
.plan-l li.ok>svg{color:var(--good);flex:none}
.plan-l li.bad>svg{color:var(--rec);flex:none}
.plan-l li.bad .n{background:var(--rec-soft);color:var(--rec)}
.pe-list{display:grid;gap:8px;max-height:52vh;overflow:auto}
.pe-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:8px}
.pe-row .n{width:20px;text-align:center;font-size:12px;color:var(--faint)}
.pe-row .field{flex:1;min-width:140px;padding:7px 9px}
.pe-row select.field[data-f=do]{flex:0 0 auto;min-width:130px}
.pe-chk{display:flex;align-items:center;gap:4px;font-size:12.5px;white-space:nowrap}

.pe-row .field{width:auto}
.pe-row select.field[data-f=do]{flex:0 0 150px;min-width:0}
.pe-row input.field[data-f=target]{flex:1 1 220px}
.pe-row input.field[data-f=value]{flex:0 1 150px;min-width:90px}
.pe-row select.field[data-f=b]{flex:1 1 180px;max-width:240px}
@media (max-width:600px){.pe-row select.field[data-f=do],.pe-row input.field[data-f=target],.pe-row select.field[data-f=b]{flex:1 1 100%;max-width:none}}