/* Base (remplace le squelette de l'artifact) */
html{-webkit-text-size-adjust:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;min-height:100vh;-webkit-tap-highlight-color:transparent}
img{max-width:100%}
[hidden]{display:none!important}
.print-sheet{display:none}
@media print{
  @page{size:A4 landscape;margin:0}
  body{background:#fff!important;background-image:none!important}
  body>*{display:none!important}
  body>.print-sheet{display:block!important;width:100%;height:auto;max-width:none}
}
@media (display-mode:standalone){.wrap{padding-block-start:20px}}

:root{
  --ground:#EEF2F1; --paper:#FBFCFC; --ink:#18263F; --muted:#5B6B7F; --line:#D5DEE3;
  --margin:#D5484B; --rule:#E7B7C3; --soft:#E3EAEC; --shadow:0 1px 2px rgba(24,38,63,.06),0 8px 24px -12px rgba(24,38,63,.18);
  --math:#2F6FDE; --ar:#1E9A6A; --fr:#D2455F; --en:#7A52D1; --soc:#D98A12; --isl:#0F7B72;
  --sci:#5E9E1C; --sport:#E4632B; --art:#C2439C;
  --tint:14%;
  --fd:"Noto Kufi Arabic","Segoe UI",Tahoma,sans-serif;
  --fb:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --fm:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;--ground:#0E1520;--paper:#152030;--ink:#E6EDF5;--muted:#93A3B8;--line:#26364A;
  --margin:#F06A6C;--rule:#4A2F3B;--soft:#1C2A3D;--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);
  --math:#6C9BFF;--ar:#3FC08E;--fr:#FF7089;--en:#A58BFF;--soc:#F2AC3C;--isl:#34B5A9;--sci:#8CCB45;--sport:#FF8A56;--art:#EE6CC6;--tint:22%;
}}
:root[data-theme="dark"]{
  color-scheme:dark;--ground:#0E1520;--paper:#152030;--ink:#E6EDF5;--muted:#93A3B8;--line:#26364A;
  --margin:#F06A6C;--rule:#4A2F3B;--soft:#1C2A3D;--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);
  --math:#6C9BFF;--ar:#3FC08E;--fr:#FF7089;--en:#A58BFF;--soc:#F2AC3C;--isl:#34B5A9;--sci:#8CCB45;--sport:#FF8A56;--art:#EE6CC6;--tint:22%;
}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:var(--fb);font-size:15px;line-height:1.55;
  background-image:linear-gradient(var(--soft) 1px,transparent 1px);background-size:100% 30px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:28px 48px;display:flex;flex-direction:column;gap:22px}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--math);outline-offset:2px;border-radius:6px}

/* Header */
header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.eyebrow{font-size:12px;letter-spacing:.08em;color:var(--margin);font-weight:600;font-family:var(--fm);direction:ltr;text-align:right}
h1{font-family:var(--fd);font-weight:800;font-size:clamp(26px,4.4vw,40px);line-height:1.2;margin:4px 0 2px;text-wrap:balance}
h1 .u{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--margin) 28%,transparent) 62%);padding-inline:4px}
.sub{color:var(--muted);margin:0}
.clock{font-family:var(--fm);font-size:13px;color:var(--muted);direction:ltr;display:flex;gap:10px;align-items:center}
.clock b{font-size:22px;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--paper);padding:7px 14px;border-radius:999px;font-size:13px;transition:transform .15s,border-color .15s}
.btn:hover{transform:translateY(-1px);border-color:var(--muted)}
.btn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Now card */
.now{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nc{background:var(--paper);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden;
  animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.nc:nth-child(2){animation-delay:.08s}
.nc .k{font-size:12px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:8px}
.nc .v{font-family:var(--fd);font-weight:700;font-size:22px;margin-top:4px}
.nc .t{font-family:var(--fm);font-size:13px;color:var(--muted);direction:ltr;text-align:right}
.nc::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;background:var(--c,var(--line))}
.bar{height:6px;border-radius:6px;background:var(--soft);margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--c);border-radius:6px;transition:width 1s ease}
.dot{width:8px;height:8px;border-radius:50%;background:var(--margin);box-shadow:0 0 0 0 var(--margin);animation:ping 1.8s infinite}

/* Grid */
.board{background:var(--paper);border-radius:18px;box-shadow:var(--shadow);padding:14px;position:relative;overflow:hidden}
.board::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:86px;width:2px;background:var(--rule);opacity:.8;pointer-events:none}
.grid{display:grid;grid-template-columns:78px repeat(4,minmax(0,1fr)) 30px repeat(4,minmax(0,1fr));gap:7px;position:relative}
.hd{font-family:var(--fm);font-size:12.5px;color:var(--muted);text-align:center;padding:6px 0 8px;direction:ltr;font-variant-numeric:tabular-nums}
.hd.cur{color:var(--margin);font-weight:500}
.day{font-family:var(--fd);font-weight:700;font-size:15px;display:flex;flex-direction:column;justify-content:center;padding-inline-start:4px;border-radius:10px;transition:background .2s}
.day small{font-family:var(--fb);font-weight:500;font-size:11px;color:var(--muted)}
.day.today{color:var(--margin)}
.day.today small{color:var(--margin)}
.lunch{grid-row:span 5;display:flex;align-items:center;justify-content:center;border-radius:10px;
  background:repeating-linear-gradient(135deg,var(--soft) 0 6px,transparent 6px 12px);writing-mode:vertical-rl;font-size:12px;color:var(--muted);letter-spacing:.05em}
.cell{min-height:66px;border-radius:12px;padding:8px 10px;text-align:right;border:1px solid transparent;position:relative;
  background:color-mix(in srgb,var(--c) var(--tint),var(--paper));
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  animation:pop .5s cubic-bezier(.2,.9,.25,1.2) both;animation-delay:calc(var(--i) * 28ms);
  transition:transform .18s,box-shadow .18s,opacity .25s,filter .25s}
.cell::before{content:"";position:absolute;inset-inline-start:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--c)}
.cell:hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px color-mix(in srgb,var(--c) 70%,transparent)}
.cell .s{font-family:var(--fd);font-weight:700;font-size:14px;color:color-mix(in srgb,var(--c) 70%,var(--ink));line-height:1.35}
.cell .d{font-size:11.5px;color:var(--muted)}
.cell.split{background:linear-gradient(135deg,color-mix(in srgb,var(--c) var(--tint),var(--paper)) 50%,color-mix(in srgb,var(--c2) var(--tint),var(--paper)) 50%)}
.cell.split::before{background:linear-gradient(var(--c),var(--c2))}
.cell.free{background:transparent;border:1px dashed var(--line);--c:transparent}
.cell.free::before{display:none}
.cell.free .s{color:var(--muted);font-weight:500;font-family:var(--fb);font-size:12px;opacity:.7}
.cell.live{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)}
.cell.live::after{content:"الآن";position:absolute;top:-8px;inset-inline-end:8px;background:var(--margin);color:#fff;font-size:10px;padding:1px 7px;border-radius:999px;animation:bob 2s ease-in-out infinite}
.cell.dim{opacity:.18;filter:saturate(.3)}
.edit .cell{cursor:pointer;border-style:dashed;border-color:color-mix(in srgb,var(--muted) 40%,transparent)}
.edit .cell:hover{border-color:var(--ink)}
.cell .ok{position:absolute;bottom:6px;inset-inline-end:8px;font-size:11px}

/* Legend */
.legend{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:5px 12px 5px 10px;font-size:13px;transition:transform .15s,border-color .15s,background .15s}
.chip i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.chip em{font-style:normal;font-family:var(--fm);font-size:11px;color:var(--muted)}
.chip:hover{transform:translateY(-1px)}
.chip[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) var(--tint),var(--paper))}
.row2{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.note{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.note .pin{background:color-mix(in srgb,var(--margin) 14%,var(--paper));color:var(--margin);border-radius:8px;padding:3px 10px;font-weight:600}

/* Mobile list */
.mobile{display:none;flex-direction:column;gap:12px}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.tab{flex:1 0 auto;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:8px 12px;font-family:var(--fd);font-weight:700;font-size:13px}
.tab small{display:block;font-family:var(--fb);font-weight:400;font-size:10.5px;color:var(--muted)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.tab[aria-selected="true"] small{color:inherit;opacity:.7}
.tab.today:not([aria-selected="true"]){border-color:var(--margin);color:var(--margin)}
.list{display:flex;flex-direction:column;gap:8px}
.li{display:grid;grid-template-columns:74px 1fr;gap:10px;align-items:stretch}
.li .tm{font-family:var(--fm);font-size:12px;color:var(--muted);direction:ltr;text-align:left;padding-top:10px;font-variant-numeric:tabular-nums}
.li .cell{min-height:54px}
.brk{font-size:12px;color:var(--muted);text-align:center;padding:6px;border-radius:10px;background:repeating-linear-gradient(135deg,var(--soft) 0 6px,transparent 6px 12px)}

/* Sheet */
.sheet{position:fixed;inset:0;background:rgba(10,18,30,.45);display:flex;align-items:flex-end;justify-content:center;z-index:10;animation:fade .2s both}
.panel{background:var(--paper);width:min(560px,100%);border-radius:20px 20px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;animation:up .3s cubic-bezier(.2,.8,.2,1) both}
.panel h3{margin:0;font-family:var(--fd);font-size:17px}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.panel input{width:100%;border:1px solid var(--line);background:var(--ground);border-radius:10px;padding:9px 12px;font:inherit;color:inherit}
.panel .actions{justify-content:space-between}
.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:8px 16px;border-radius:999px;font-size:13px;z-index:11;animation:up .3s both}

@keyframes pop{from{opacity:.001;transform:translateY(10px) scale(.96)}}
@keyframes rise{from{opacity:.001;transform:translateY(12px)}}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translate(var(--tx,0),30px);opacity:0}}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--margin) 60%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
@keyframes bob{50%{transform:translateY(-2px)}}
.toast{--tx:-50%}

.btn.primary{background:var(--margin);border-color:var(--margin);color:#fff}
/* Studio */
.studio{position:fixed;inset:0;z-index:9;background:var(--ground);overflow-y:auto;animation:fade .25s both}
.studio .in{max-width:1280px;margin:0 auto;padding-inline:16px;padding-block:calc(18px + env(safe-area-inset-top,0px)) 40px;display:flex;flex-direction:column;gap:16px}
.studio .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.studio h2{margin:0;font-family:var(--fd);font-size:22px}
.studio h2 small{display:block;font-family:var(--fb);font-weight:400;font-size:13px;color:var(--muted)}
.sgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.stage{background:var(--paper);border-radius:16px;padding:14px;box-shadow:var(--shadow);position:relative}
.stage canvas{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 10px 30px -12px rgba(0,0,0,.35);animation:rise .4s both}
.stage .busy{position:absolute;top:24px;left:24px;font-size:12px;background:var(--ink);color:var(--paper);padding:3px 10px;border-radius:999px}
.ctrl{display:flex;flex-direction:column;gap:16px;background:var(--paper);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.ctrl h4{margin:0 0 8px;font-size:13px;color:var(--muted);font-weight:600}
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.th{border:2px solid transparent;border-radius:12px;padding:0;overflow:hidden;background:var(--soft);display:flex;flex-direction:column;transition:transform .15s}
.th:hover{transform:translateY(-2px)}
.th span:first-child{height:44px;display:block}
.th span:last-child{font-size:11.5px;padding:4px 2px}
.th[aria-pressed="true"]{border-color:var(--margin)}
.ctrl input[type=text]{width:100%;border:1px solid var(--line);background:var(--ground);border-radius:10px;padding:8px 12px;font:inherit;color:inherit}
.fields{display:flex;flex-direction:column;gap:8px}
.drop{border:2px dashed var(--line);border-radius:12px;padding:14px;text-align:center;font-size:13px;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .15s}
.drop:hover,.drop.over{border-color:var(--margin)}
.drop img{width:72px;height:72px;object-fit:cover;border-radius:50%}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.dl{display:flex;flex-direction:column;gap:8px}
.dl .btn{padding:10px 14px;font-size:14px}
.hint{font-size:12px;color:var(--muted);margin:0}
@media (max-width:900px){.sgrid{grid-template-columns:1fr}}

@media (max-width:860px){.board{display:none}.mobile{display:flex}.now{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}