:root{
  color-scheme: light;
  --bg:#f5f5f7; --surface:#ffffff; --fill:#f2f2f7; --fill-2:#e8e8ed; --glass:rgba(250,250,252,.78);
  --sep:rgba(60,60,67,.13); --sep-strong:rgba(60,60,67,.22);
  --ink:#1d1d1f; --ink-2:#6e6e73; --ink-3:#a1a1a6;
  --accent:#0071e3; --accent-ink:#ffffff; --accent-soft:rgba(0,113,227,.10); --accent-text:#0066cc;
  --red:#ff3b30; --red-text:#d70015; --red-soft:rgba(255,59,48,.10);
  --green:#34c759; --green-text:#248a3d; --green-soft:rgba(52,199,89,.12);
  --orange:#ff9500; --orange-text:#c93400; --orange-soft:rgba(255,149,0,.12);
  --s1:#007aff; --s2:#ff9500; --s3:#34c759; --s4:#ffcc00; --s5:#ff2d55; --s6:#30b0c7; --s7:#af52de; --s8:#5856d6; --s9:#8e8e93;
  --s10:#e74694; --s11:#00856f; --s12:#6366f1; --s13:#ea580c; --s14:#0891b2; --s15:#84cc16; --s16:#dc2626;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);
  --shadow-lg:0 10px 40px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.06);
  --claude:#c8623c; --claude-ic:#d97757; --claude-soft:rgba(217,119,87,.12);
  --r-xl:22px; --r-lg:16px; --r-md:12px; --r-sm:9px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",Arial,sans-serif;
  --font-mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --side-w:248px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#000000; --surface:#1c1c1e; --fill:#2c2c2e; --fill-2:#3a3a3c; --glass:rgba(28,28,30,.78);
    --sep:rgba(84,84,88,.42); --sep-strong:rgba(84,84,88,.7);
    --ink:#f5f5f7; --ink-2:#98989d; --ink-3:#636366;
    --accent:#0a84ff; --accent-ink:#ffffff; --accent-soft:rgba(10,132,255,.18); --accent-text:#409cff;
    --red:#ff453a; --red-text:#ff6961; --red-soft:rgba(255,69,58,.18);
    --green:#30d158; --green-text:#30d158; --green-soft:rgba(48,209,88,.16);
    --orange:#ff9f0a; --orange-text:#ffb340; --orange-soft:rgba(255,159,10,.16);
    --s1:#0a84ff; --s2:#ff9f0a; --s3:#30d158; --s4:#ffd60a; --s5:#ff375f; --s6:#40c8e0; --s7:#bf5af2; --s8:#5e5ce6; --s9:#98989d;
    --s10:#f472b6; --s11:#2dd4bf; --s12:#818cf8; --s13:#fb923c; --s14:#22d3ee; --s15:#a3e635; --s16:#f87171;
    --claude:#e2886a; --claude-ic:#e2886a; --claude-soft:rgba(217,119,87,.2);
    --shadow:0 0 0 1px rgba(255,255,255,.04);
    --shadow-lg:0 20px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#000000; --surface:#1c1c1e; --fill:#2c2c2e; --fill-2:#3a3a3c; --glass:rgba(28,28,30,.78);
  --sep:rgba(84,84,88,.42); --sep-strong:rgba(84,84,88,.7);
  --ink:#f5f5f7; --ink-2:#98989d; --ink-3:#636366;
  --accent:#0a84ff; --accent-ink:#ffffff; --accent-soft:rgba(10,132,255,.18); --accent-text:#409cff;
  --red:#ff453a; --red-text:#ff6961; --red-soft:rgba(255,69,58,.18);
  --green:#30d158; --green-text:#30d158; --green-soft:rgba(48,209,88,.16);
  --orange:#ff9f0a; --orange-text:#ffb340; --orange-soft:rgba(255,159,10,.16);
  --s1:#0a84ff; --s2:#ff9f0a; --s3:#30d158; --s4:#ffd60a; --s5:#ff375f; --s6:#40c8e0; --s7:#bf5af2; --s8:#5e5ce6; --s9:#98989d;
  --s10:#f472b6; --s11:#2dd4bf; --s12:#818cf8; --s13:#fb923c; --s14:#22d3ee; --s15:#a3e635; --s16:#f87171;
  --claude:#e2886a; --claude-ic:#e2886a; --claude-soft:rgba(217,119,87,.2);
  --shadow:0 0 0 1px rgba(255,255,255,.04);
  --shadow-lg:0 20px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
}
*{box-sizing:border-box}
:where(svg){width:16px;height:16px;flex:none}
html,body{height:100%;overscroll-behavior:none}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.45;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--accent-text);text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.15;text-wrap:balance}
h1{font-size:34px;font-weight:700;letter-spacing:-.022em}
h2{font-size:20px;font-weight:700;letter-spacing:-.018em}
h3{font-size:17px;font-weight:600;letter-spacing:-.012em}
p{margin:0}
.num,.mono{font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono);font-size:.92em}
.muted{color:var(--ink-2)} .faint{color:var(--ink-3)}
.small{font-size:13px} .xs{font-size:12px}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px;border-radius:10px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- structure ---------- */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100%}
.side{position:sticky;top:0;align-self:start;height:100dvh;display:flex;flex-direction:column;gap:2px;padding:18px 12px 14px;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-right:1px solid var(--sep);z-index:10}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 18px;color:inherit;text-decoration:none}
.brand:hover{text-decoration:none}
.brand .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(145deg,#2b8cff,#0057d9);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.brand .t{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1.1}
.brand .s{font-size:12px;color:var(--ink-2)}
.brand .logo.img{background:var(--surface);box-shadow:inset 0 0 0 1px var(--sep);padding:3px}
.brand .logo.img img{width:100%;height:100%;object-fit:contain;display:block}
.nav-label{font-size:11px;font-weight:600;color:var(--ink-3);padding:14px 12px 4px}
.nav a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;color:var(--ink);font-size:14px;font-weight:500;text-decoration:none;transition:background .15s}
.nav a svg{width:18px;height:18px;color:var(--accent)}
.nav a:hover{background:var(--fill)}
.nav a.active{background:var(--fill-2)}
.nav a .badge{margin-left:auto}
.nav a.claude svg{color:var(--claude-ic)}
.side .spacer{flex:1}
.side .foot{font-size:11.5px;color:var(--ink-3);padding:8px 12px 0;display:flex;align-items:center;gap:6px}
.side .foot i{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block}
.ask-btn{display:flex;align-items:center;gap:9px;width:100%;padding:10px 12px;border:0;border-radius:12px;background:var(--surface);box-shadow:var(--shadow);cursor:pointer;font-weight:600;font-size:14px;text-align:left}
.ask-btn:hover{background:var(--fill)}
.ask-btn svg{width:17px;height:17px;color:var(--claude-ic)}
.main{padding:34px 40px 90px;max-width:1260px;width:100%;min-width:0;margin:0 auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:26px;flex-wrap:wrap}
.page-head .eyebrow{font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:4px}
.page-head .eyebrow.red{color:var(--red-text)}
.page-head .sub{color:var(--ink-2);margin-top:6px;font-size:15px;max-width:62ch}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tabbar{display:none}

/* ---------- boutons & contrôles ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 15px;border-radius:999px;border:0;background:var(--fill);color:var(--ink);cursor:pointer;font-weight:500;font-size:14px;line-height:1.2;white-space:nowrap;transition:background .15s,transform .1s;text-decoration:none}
.btn:hover{background:var(--fill-2);text-decoration:none}
.btn:active{transform:scale(.97)}
.btn svg{width:15px;height:15px}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.tinted{background:var(--accent-soft);color:var(--accent-text)}
.btn.tinted:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.btn.plain{background:transparent;color:var(--accent-text);padding-inline:8px}
.btn.plain:hover{background:var(--accent-soft)}
.btn.danger{color:var(--red-text)}
.btn.sm{padding:5px 11px;font-size:13px}
.btn[disabled]{opacity:.45;cursor:default;transform:none}
.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:0;background:transparent;cursor:pointer;color:var(--ink-2);flex:none}
.icon-btn:hover{background:var(--fill);color:var(--ink)}
.icon-btn svg{width:17px;height:17px}
.segmented{display:inline-flex;background:var(--fill);border-radius:10px;padding:2px;gap:2px;flex-wrap:wrap}
.segmented button{border:0;background:transparent;padding:6px 14px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;color:var(--ink)}
.segmented button.active{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
input,select,textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--fill);border:0;border-radius:10px;padding:9px 12px;width:100%;outline:none;transition:box-shadow .15s}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}
textarea{resize:vertical;min-height:84px;line-height:1.45}
input[type=checkbox]{width:auto;accent-color:var(--accent)}
label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2);font-weight:500}
.form{display:grid;gap:14px}
.form .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form .cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px;flex-wrap:wrap}
.switch{position:relative;width:51px;height:31px;flex:none}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:999px;background:var(--fill-2);transition:background .2s}
.switch span::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .2s}
.switch input:checked+span{background:var(--green)}
.switch input:checked+span::after{transform:translateX(20px)}

/* ---------- surfaces ---------- */
.widget{background:var(--surface);border-radius:var(--r-xl);padding:20px 22px;box-shadow:var(--shadow);min-width:0}
.widget-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.widget-head h2{font-size:17px;font-weight:600;letter-spacing:-.012em}
.widget-head .link{font-size:14px;color:var(--accent-text);font-weight:500}
.grid{display:grid;gap:18px;align-items:start}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g32{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.stretch{align-items:stretch}
.section{margin-top:30px}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 4px 10px}
.section-title h2{font-size:22px}
.section-title .link{font-size:15px;color:var(--accent-text)}
.group{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;min-width:0}
.group-label{font-size:13px;color:var(--ink-2);margin:0 16px 7px;font-weight:500}
.group-foot{font-size:12.5px;color:var(--ink-2);margin:7px 16px 0}
.cell{position:relative;display:flex;align-items:center;gap:12px;padding:11px 16px;min-height:46px;color:inherit;text-decoration:none}
.cell+.cell::before{content:"";position:absolute;top:0;right:0;left:var(--inset,16px);height:1px;background:var(--sep)}
.cell.has-icon{--inset:58px}
.cell.has-tile{--inset:72px}
a.cell:hover,button.cell:hover,.cell.tap:hover{background:var(--fill);text-decoration:none;cursor:pointer}
.cell.tap{touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
button.cell{width:100%;border:0;background:transparent;text-align:left;font:inherit}
.cell .grow{flex:1;min-width:0}
.cell .t{font-size:15px;font-weight:400;color:var(--ink)}
.cell .t.b{font-weight:600}
.cell .d{font-size:13px;color:var(--ink-2);margin-top:1px}
.cell .v{color:var(--ink-2);font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cell .chev{color:var(--ink-3);width:14px;height:14px}
.list-empty{padding:22px 16px;color:var(--ink-3);text-align:center;font-size:14px}
.sq{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:none}
.sq svg{width:17px;height:17px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;background:var(--ink-3)}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font-size:12px;font-weight:600}
.status{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);white-space:nowrap}
.hint{display:flex;gap:12px;align-items:center;padding:14px 18px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);font-size:14px}
.hint .sq{width:34px;height:34px;border-radius:10px}
.hint .grow{flex:1;min-width:0}
.hint.warn .sq{background:var(--orange)}
.hint.info .sq{background:var(--accent)}
.note-line{font-size:13px;color:var(--ink-2);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kind-exam{--k:var(--red)} .kind-holiday{--k:var(--green)} .kind-info{--k:var(--accent)} .kind-todo{--k:var(--orange)}
/* tuile date façon Calendrier */
.dtile{width:44px;border-radius:10px;background:var(--fill);overflow:hidden;text-align:center;flex:none;line-height:1}
.dtile .m{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:5px 0 2px;color:var(--k,var(--red))}
.dtile .d{display:block;font-size:20px;font-weight:500;padding:0 0 6px;font-variant-numeric:tabular-nums;color:var(--ink)}
/* icônes d'app */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:18px 10px}
.app-ic{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:var(--ink);text-align:center;min-width:0}
.app-ic:hover{text-decoration:none}
.app-ic .ic{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:700;font-size:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 10px rgba(0,0,0,.12);transition:transform .15s}
@media (hover: hover) and (pointer: fine){.app-ic:hover .ic{transform:scale(1.05)}}
.app-ic:active .ic{transform:scale(.95)}
.app-ic .ic svg{width:28px;height:28px}
.app-ic .ic.logo{background:var(--surface)!important;box-shadow:inset 0 0 0 1px var(--sep),0 4px 14px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.9);padding:10px}
.app-ic .ic.logo img{width:100%;height:100%;object-fit:contain;display:block;border-radius:3px}
/* letra de fallback centrada */
.app-ic .ic-letter{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.015em;color:#fff;line-height:1;pointer-events:none}
.logo-slot{width:40px;height:40px;border-radius:10px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--sep);display:grid;place-items:center;overflow:hidden;flex:none}
.logo-slot img{width:100%;height:100%;object-fit:contain}
.app-ic .l{font-size:12px;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-ic .x{font-size:11px;color:var(--ink-3);line-height:1.2;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- accueil ---------- */
.widgets{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:18px}
.upnext{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:22px 24px;min-height:206px;display:flex;flex-direction:column;gap:6px;color:#fff;background:linear-gradient(150deg,color-mix(in srgb,var(--c,var(--accent)) 92%,#fff 8%),color-mix(in srgb,var(--c,var(--accent)) 70%,#000 30%));box-shadow:var(--shadow)}
.upnext .lbl{font-size:13px;font-weight:600;opacity:.85}
.upnext h2{font-size:26px;line-height:1.12;color:#fff;letter-spacing:-.02em;margin-top:2px}
.upnext .meta{display:flex;gap:16px;flex-wrap:wrap;font-size:15px;opacity:.92;margin-top:4px}
.upnext .meta span{display:inline-flex;align-items:center;gap:6px}
.upnext .meta svg{width:15px;height:15px}
.upnext .cd{margin-top:auto;display:flex;align-items:baseline;gap:8px}
.upnext .cd b{font-family:var(--font-display);font-size:40px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.upnext .cd span{font-size:15px;opacity:.85}
.upnext .flag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.2);font-size:12.5px;font-weight:500}
.upnext.empty{background:var(--surface);color:var(--ink)}
.upnext.empty h2{color:var(--ink)}
.agenda-item{display:flex;gap:12px;padding:9px 0;align-items:stretch}
.agenda-item+.agenda-item{border-top:1px solid var(--sep)}
.agenda-item .bar{width:4px;border-radius:4px;flex:none;background:var(--c,var(--ink-3))}
.agenda-item.past{opacity:.45}
.agenda-item .time{width:48px;flex:none;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;line-height:1.35}
.agenda-item .time b{display:block;color:var(--ink);font-weight:500;font-size:14px}
.agenda-item .t{font-size:15px;font-weight:500;line-height:1.3}
.agenda-item .d{font-size:13px;color:var(--ink-2)}
.todo{display:flex;align-items:flex-start;gap:12px;padding:9px 0}
.todo+.todo{border-top:1px solid var(--sep)}
.circle{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink-3);background:transparent;display:grid;place-items:center;cursor:pointer;flex:none;margin-top:1px;padding:0;color:#fff;transition:background .15s,border-color .15s}
.circle:hover{border-color:var(--accent)}
.circle.on{background:var(--accent);border-color:var(--accent)}
.circle svg{width:12px;height:12px}
.todo .grow{flex:1;min-width:0}
.todo .t{font-size:15px;line-height:1.3}
.todo .d{font-size:13px;color:var(--ink-2)}
.todo.done .t{color:var(--ink-3)}
.todo .k{font-size:12px;font-weight:500;color:var(--k,var(--ink-2))}
.weekstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.ws-day{display:flex;flex-direction:column;gap:5px;min-width:0}
.ws-day .h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-2);padding:0 2px 4px;text-transform:uppercase;letter-spacing:.02em}
.ws-day .h .n{font-size:15px;font-weight:500;color:var(--ink);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;letter-spacing:0}
.ws-day.today .h .n{background:var(--red);color:#fff}
.ev{border-radius:7px;padding:5px 7px 5px 9px;background:color-mix(in srgb,var(--c,var(--ink-3)) 14%,transparent);position:relative;font-size:12px;line-height:1.25;overflow:hidden}
.ev::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--ink-3))}
.ev .et{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ev .em{color:var(--ink-2);font-variant-numeric:tabular-nums;font-size:11px}
.ev.skip{opacity:.4}.ev.skip .et{text-decoration:line-through}
.ev.exam{--c:var(--red)}
.ev.perso{background:transparent;box-shadow:inset 0 0 0 1px var(--sep-strong)}
.ev.perso::before{background:var(--ink-3)}
.ws-note{font-size:11.5px;color:var(--ink-3);padding:2px}
.rings{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.ring{display:flex;align-items:center;gap:10px}
.ring svg{width:56px;height:56px}
.ring .rv{font-family:var(--font-display);font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.ring .rv small{font-size:13px;color:var(--ink-3);font-weight:500}
.ring .rl{font-size:12.5px;color:var(--ink-2)}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{font-family:var(--font);font-size:11px;fill:var(--ink-3)}
.chart .gl{stroke:var(--sep);stroke-width:1}
.chart .lbl{fill:var(--ink-2);font-weight:500;font-size:10.5px}
.chart .b:hover{opacity:.8}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.tip{position:fixed;z-index:80;background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--ink);padding:6px 10px;border-radius:9px;font-size:12.5px;pointer-events:none;display:none;white-space:nowrap;box-shadow:var(--shadow-lg)}

/* ---------- emploi du temps ---------- */
.cal-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.cal-toolbar .wl{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.015em;margin-right:auto}
.cal-toolbar .wl span{color:var(--ink-2);font-weight:400}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden}
.wday{padding:12px 10px 14px;min-height:230px;display:flex;flex-direction:column;gap:6px;min-width:0}
.wday+.wday{border-left:1px solid var(--sep)}
.wday .h{display:flex;align-items:center;justify-content:space-between;padding:0 2px 8px}
.wday .h span{font-size:12px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.03em}
.wday .h b{font-size:17px;font-weight:500;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.wday.today .h b{background:var(--red);color:#fff}
.wday .ev{font-size:12.5px;padding:7px 8px 7px 10px}
.wday .ev .em{font-size:11.5px}
.wday .ev .en{color:var(--ink-2);font-size:11.5px;margin-top:2px}
a.ev{display:block;color:inherit;text-decoration:none}
a.ev:hover{filter:brightness(.97);text-decoration:none}
.wday .dn{font-size:12px;color:var(--orange-text);font-weight:500;line-height:1.3}
.wday .none{font-size:12.5px;color:var(--ink-3);padding:4px 2px}

/* ---------- matières ---------- */
.subjects{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.subj{display:flex;flex-direction:column;gap:12px;padding:18px 20px;border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.subj:hover{text-decoration:none}
@media (hover: hover) and (pointer: fine){.subj:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}}
.subj .top{display:flex;align-items:center;gap:12px}
.subj .sq{width:42px;height:42px;border-radius:12px;background:var(--c)}
.subj .sq svg{width:22px;height:22px}
.subj h3{font-size:17px}
.subj .m{font-size:13px;color:var(--ink-2);line-height:1.35}
.subj .stats{display:flex;gap:14px;font-size:13px;color:var(--ink-2);margin-top:auto;padding-top:10px;border-top:1px solid var(--sep)}
.subj .stats b{color:var(--ink);font-weight:600}
.subj.off{opacity:.55}
.subject-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);gap:22px;align-items:start}
.drop{border:1.5px dashed var(--sep-strong);border-radius:var(--r-md);padding:18px;text-align:center;color:var(--ink-2);font-size:14px;cursor:pointer;background:transparent;transition:border-color .15s,background .15s,color .15s}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)}
.drop b{color:var(--accent-text);font-weight:600}
.file-ic{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex:none;color:#fff}
.file-ic svg{width:18px;height:18px}
.file-ic.pdf{background:#ff3b30}.file-ic.image{background:#34c759}.file-ic.texte{background:#8e8e93}.file-ic.lien{background:#007aff}.file-ic.claude{background:var(--claude-soft);color:var(--claude-ic)}
.ctx-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);white-space:nowrap}

/* ---------- chat (assistant de matière & tiroir) ---------- */
.chat{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden;min-height:0}
.chat.embedded{height:min(740px,calc(100dvh - 120px));position:sticky;top:20px}
.chat-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--sep)}
.chat-head .grow{flex:1;min-width:0}
.chat-head .t{font-weight:600;font-size:15px}
.chat-head .s{font-size:12px;color:var(--ink-2)}
.chat-head .sq{width:32px;height:32px;border-radius:50%;background:var(--claude-soft)!important;color:var(--claude-ic)}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.msg{max-width:92%;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}
.msg.u{align-self:flex-end;background:var(--accent);color:#fff;padding:9px 14px;border-radius:19px;border-bottom-right-radius:6px;white-space:pre-wrap}
.msg.a{align-self:flex-start;background:var(--fill);padding:10px 14px;border-radius:19px;border-bottom-left-radius:6px}
.msg.a.err{background:var(--red-soft);color:var(--red-text)}
.msg.a.thinking{color:var(--ink-2)}
/* bouton « garder comme document » sous une réponse — discret, visible au survol */
.msg-tools{margin:4px -4px -4px 0;display:flex;justify-content:flex-end}
.msg-tools .icon-btn{width:26px;height:26px;opacity:0;transition:opacity .15s}
.msg-tools .icon-btn svg{width:14px;height:14px}
.msg.a:hover .msg-tools .icon-btn,.msg-tools .icon-btn:focus-visible{opacity:1}
.chat-sugg{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 10px}
.chat-sugg button{font-size:13px;padding:6px 12px;border-radius:999px;border:0;background:var(--fill);cursor:pointer;color:var(--ink)}
.chat-sugg button:hover{background:var(--fill-2)}
.chat-in{display:flex;gap:6px;align-items:flex-end;padding:8px 14px 14px;border-top:1px solid var(--sep)}
.chat-in textarea{min-height:38px;max-height:180px;resize:none;border-radius:0;padding:9px 2px;line-height:1.4;background:transparent;box-shadow:none!important}
.chat-in textarea::placeholder{color:var(--ink-3)}
.send{width:34px;height:34px;border-radius:50%;border:0;background:var(--claude);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;margin-bottom:2px;transition:background .15s,opacity .15s}
.send svg{width:18px;height:18px}
.send.stop{background:var(--ink)}
.send.stop svg{color:var(--bg)}
.send[disabled]{background:transparent;color:var(--ink-3);cursor:default}
.chat-note{font-size:12px;color:var(--ink-2);padding:0 16px 8px;text-align:center}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);z-index:50;transform:translateX(105%);transition:transform .32s cubic-bezier(.32,.72,0,1);padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px));pointer-events:none}
.drawer.open{transform:none;pointer-events:auto}
.drawer .chat{height:100%;box-shadow:var(--shadow-lg)}
.drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.18);z-index:49;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer-bg.open{opacity:1;pointer-events:auto}

/* ---------- prose (réponses de Claude) ---------- */
.prose{font-size:15.5px;line-height:1.65;color:var(--ink);overflow-wrap:anywhere}
.prose>*+*{margin-top:.75em}
.prose p{margin:0}
.prose h2,.prose h3,.prose h4,.prose h5{margin-top:1.3em;letter-spacing:-.01em}
.prose h2{font-size:21px}.prose h3{font-size:18px}.prose h4,.prose h5{font-size:16px}
.prose ul,.prose ol{padding-left:1.4em;margin-bottom:0}
.prose li+li{margin-top:.3em}
.prose li>ul,.prose li>ol{margin-top:.3em}
.prose hr{border:0;height:1px;background:var(--sep);margin:1.4em 0}
.prose blockquote{margin-left:0;padding:2px 0 2px 14px;border-left:3px solid var(--sep-strong);color:var(--ink-2)}
.prose code{font-family:var(--font-mono);font-size:.86em;background:var(--fill);padding:.12em .4em;border-radius:6px}
.prose pre{position:relative;background:var(--fill);padding:14px 16px;border-radius:12px;overflow-x:auto;font-size:13px;line-height:1.5}
.prose pre code{background:transparent;padding:0;font-size:inherit}
.prose .copy-code{position:absolute;top:8px;right:8px;opacity:0;transition:opacity .15s}
.prose pre:hover .copy-code{opacity:1}
.prose a{text-decoration:underline;text-underline-offset:2px}
.msg.a.prose{font-size:14.5px;line-height:1.55}
.table-wrap{overflow-x:auto;border-radius:12px;box-shadow:inset 0 0 0 1px var(--sep)}
.prose table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.4}
.prose th{text-align:left;font-weight:600;background:var(--fill);padding:9px 12px;white-space:nowrap}
.prose td{padding:9px 12px;border-top:1px solid var(--sep);vertical-align:top}
.table-tools{display:flex;justify-content:flex-end;gap:4px;margin-top:4px}

/* ---------- mise en forme riche : uniquement les réponses de l'assistant
   (le chat rapide, celui d'une matière/d'un document, et la page complète),
   jamais les documents ni les notes de l'élève ---------- */
.msg.prose h2,.cl-bot .prose h2{color:var(--ink);padding-bottom:.28em;border-bottom:1px solid var(--sep)}
.msg.prose strong,.msg.prose b,.cl-bot .prose strong,.cl-bot .prose b{font-weight:700;color:var(--ink)}
.msg.prose table,.cl-bot .prose table{box-shadow:inset 0 0 0 1px var(--sep);border-radius:10px;overflow:hidden}
.msg.prose tbody tr:nth-child(even),.cl-bot .prose tbody tr:nth-child(even){background:var(--fill)}
.msg.prose mark,.cl-bot .prose mark{background:var(--claude-soft);color:var(--claude-ic);padding:.05em .3em;border-radius:5px;font-weight:600}
.msg.prose .callout,.cl-bot .prose .callout{border-radius:12px;padding:11px 14px;border:1px solid transparent}
.msg.prose .callout-t,.cl-bot .prose .callout-t{font-weight:700;display:flex;align-items:center;gap:7px}
.msg.prose .callout-t::before,.cl-bot .prose .callout-t::before{font-size:15px;line-height:1}
.msg.prose .callout-b,.cl-bot .prose .callout-b{margin-top:4px;color:var(--ink-2);font-size:.95em}
.msg.prose .callout-note,.cl-bot .prose .callout-note{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 25%,transparent)}
.msg.prose .callout-note .callout-t,.cl-bot .prose .callout-note .callout-t{color:var(--accent-text)}
.msg.prose .callout-note .callout-t::before,.cl-bot .prose .callout-note .callout-t::before{content:'ℹ'}
.msg.prose .callout-tip,.cl-bot .prose .callout-tip{background:var(--green-soft);border-color:color-mix(in srgb,var(--green) 25%,transparent)}
.msg.prose .callout-tip .callout-t,.cl-bot .prose .callout-tip .callout-t{color:var(--green-text)}
.msg.prose .callout-tip .callout-t::before,.cl-bot .prose .callout-tip .callout-t::before{content:'💡'}
.msg.prose .callout-warning,.cl-bot .prose .callout-warning{background:var(--orange-soft);border-color:color-mix(in srgb,var(--orange) 25%,transparent)}
.msg.prose .callout-warning .callout-t,.cl-bot .prose .callout-warning .callout-t{color:var(--orange-text)}
.msg.prose .callout-warning .callout-t::before,.cl-bot .prose .callout-warning .callout-t::before{content:'⚠'}
.msg.prose .callout-danger,.cl-bot .prose .callout-danger{background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 25%,transparent)}
.msg.prose .callout-danger .callout-t,.cl-bot .prose .callout-danger .callout-t{color:var(--red-text)}
.msg.prose .callout-danger .callout-t::before,.cl-bot .prose .callout-danger .callout-t::before{content:'❗'}
.msg.a .table-tools{display:none}

/* ---------- page Claude ---------- */
.main.full{max-width:none;padding:0}
.claude-page{display:grid;grid-template-columns:260px minmax(0,1fr);gap:0;height:100dvh}
.convos{border-right:1px solid var(--sep);padding:20px 12px;display:flex;flex-direction:column;gap:6px;min-height:0;overflow:hidden}
.convos .new{justify-content:flex-start;padding:10px 14px;border-radius:12px;width:100%;background:var(--claude-soft);color:var(--claude)}
.convos .new:hover{background:color-mix(in srgb,var(--claude-ic) 22%,transparent)}
.convos .new svg{color:var(--claude-ic)}
.convos .list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:1px;margin-top:10px}
.convos .grp{font-size:12px;font-weight:600;color:var(--ink-3);padding:12px 10px 4px}
.convo{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:9px;cursor:pointer;font-size:14px;color:var(--ink);border:0;background:transparent;text-align:left;width:100%}
.convo:hover{background:var(--fill)}
.convo.active{background:var(--fill-2)}
.convo .ct{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.convo .icon-btn{width:24px;height:24px;opacity:0}
.convo:hover .icon-btn,.convo.active .icon-btn{opacity:1}
.convo .icon-btn svg{width:14px;height:14px}
.cl-main{display:flex;flex-direction:column;min-height:0;min-width:0;position:relative}
.cl-top{display:flex;align-items:center;gap:10px;padding:14px 24px;min-height:58px}
.cl-top .title{font-weight:600;font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-scroll{flex:1;overflow-y:auto;padding:8px 24px 24px;overscroll-behavior:contain}
.cl-thread{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.cl-user{align-self:flex-end;max-width:85%;background:var(--fill);padding:11px 16px;border-radius:20px;font-size:15.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.cl-files{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-bottom:6px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--sep);font-size:13px;max-width:260px}
.chip .file-ic{width:28px;height:28px;border-radius:7px}
.chip .file-ic svg{width:15px;height:15px}
.chip .cn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.chip .cs{font-size:11.5px;color:var(--ink-2)}
.chip .icon-btn{width:22px;height:22px}
.cl-bot{display:flex;gap:14px;align-items:flex-start}
.cl-bot .av{width:28px;height:28px;border-radius:50%;background:var(--claude-soft);color:var(--claude-ic);display:grid;place-items:center;flex:none;margin-top:2px}
.cl-bot .av svg{width:16px;height:16px}
.cl-bot .body{flex:1;min-width:0}
.cl-tools{display:flex;gap:2px;margin-top:10px;flex-wrap:wrap;opacity:.85}
.cl-tools .btn{background:transparent;color:var(--ink-2);padding:5px 9px;font-size:13px}
.cl-tools .btn:hover{background:var(--fill);color:var(--ink)}
.cl-status{font-size:14px;color:var(--ink-2);display:flex;align-items:center;gap:10px}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--claude-ic);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1);opacity:1}}
.cl-error{color:var(--red-text);font-size:14px;margin-top:8px}
.cl-compose-wrap{padding:0 24px calc(18px + env(safe-area-inset-bottom,0px))}
.cl-compose{max-width:760px;margin:0 auto;background:var(--surface);border-radius:24px;box-shadow:var(--shadow-lg);padding:10px 12px 10px 16px}
.cl-compose .send{background:var(--claude);color:#fff}
.cl-compose .send.stop{background:var(--ink)}
.cl-compose .send[disabled]{background:var(--fill-2);color:var(--ink-3)}
.cl-compose.over{box-shadow:0 0 0 2px var(--accent),var(--shadow-lg)}
.cl-compose textarea{background:transparent;box-shadow:none!important;padding:8px 0;min-height:28px;max-height:240px;resize:none;font-size:16px;border-radius:0}
.cl-compose .row{display:flex;align-items:center;gap:6px;margin-top:4px}
.cl-compose .row .grow{flex:1}
.cl-compose select{width:auto;background:transparent;font-size:13px;color:var(--ink-2);padding:6px 8px;cursor:pointer}
.cl-compose .send{width:34px;height:34px;margin:0}
.cl-compose .chips{display:flex;gap:6px;flex-wrap:wrap;padding:4px 0 6px}
.cl-foot{text-align:center;font-size:12px;color:var(--ink-3);margin-top:8px}
.cl-empty{max-width:760px;margin:6vh auto 0;text-align:center}
.cl-empty .av{width:54px;height:54px;border-radius:50%;background:var(--claude-soft);color:var(--claude-ic);display:grid;place-items:center;margin:0 auto 18px}
.cl-empty .av svg{width:30px;height:30px}
.cl-empty h1{font-size:32px}
.cl-empty p{color:var(--ink-2);margin-top:8px;font-size:16px}
.starters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px;text-align:left}
.starter{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);border:0;cursor:pointer;text-align:left;font:inherit;color:var(--ink);transition:transform .15s,box-shadow .15s}
@media (hover: hover) and (pointer: fine){.starter:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}}
.starter .ic{width:34px;height:34px;border-radius:50%;background:var(--claude-soft);color:var(--claude-ic);display:grid;place-items:center;flex:none}
.starter .ic svg{width:17px;height:17px}
.starter .t{font-weight:600;font-size:14.5px}
.starter .d{font-size:13px;color:var(--ink-2);margin-top:2px}
.convos-toggle{display:none}
.convos-header{display:none}
.convos-backdrop{display:none}
.convos-close{display:none}
.mail-back{display:none}

/* ---------- notes ---------- */
.score{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.score small{color:var(--ink-3);font-weight:400}
.big-num{font-family:var(--font-display);font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.big-num small{font-size:18px;color:var(--ink-3);font-weight:500;letter-spacing:0}

/* ---------- mail ---------- */
.mail-layout{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden;min-height:620px}
.mail-list{border-right:1px solid var(--sep);overflow-y:auto;max-height:calc(100dvh - 210px);min-height:620px}
.mail-item{position:relative;display:flex;gap:10px;padding:12px 16px 12px 26px;cursor:pointer;border:0;background:transparent;width:100%;text-align:left;font:inherit;color:inherit}
.mail-item+.mail-item::after{content:"";position:absolute;top:0;left:26px;right:0;height:1px;background:var(--sep)}
.mail-item:hover{background:var(--fill)}
.mail-item.active{background:var(--accent);color:#fff}
.mail-item.active .fr .dt,.mail-item.active .sn,.mail-item.active .cat{color:rgba(255,255,255,.8)}
.mail-item.active::after,.mail-item.active+.mail-item::after{display:none}
.mail-item .ud{position:absolute;left:10px;top:18px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.mail-item.active .ud{background:#fff}
.mail-item .grow{flex:1;min-width:0}
.mail-item .fr{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.mail-item .fr b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-item .fr .dt{font-size:13px;color:var(--ink-2);flex:none;font-variant-numeric:tabular-nums}
.mail-item .sj{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.mail-item .sn{font-size:13.5px;color:var(--ink-2);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
.mail-item .cat{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.mail-read{padding:26px 32px;overflow-y:auto;max-height:calc(100dvh - 210px);min-width:0}
.mail-read .subject{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.02em;margin-bottom:18px}
.mail-msg+.mail-msg{margin-top:26px;padding-top:22px;border-top:1px solid var(--sep)}
.mail-from{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;font-size:15px;flex:none;background:linear-gradient(160deg,#a1a1a6,#6e6e73)}
.mail-from .n{font-weight:600;font-size:15px}
.mail-from .e{font-size:13px;color:var(--ink-2)}
.mail-from .dt{margin-left:auto;font-size:13px;color:var(--ink-2);white-space:nowrap}
.mail-body{white-space:pre-wrap;font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.mail-body a{word-break:break-all}
.attach{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.mail-empty{height:100%;display:grid;place-items:center;color:var(--ink-3);text-align:center;padding:40px}
.mail-empty svg{width:48px;height:48px;margin:0 auto 10px;display:block}

/* ---------- scolarité / réglages ---------- */
.avatar.sm{width:36px;height:36px;font-size:13px}
.rule-t{font-size:15px;font-weight:500}
.rule-d{font-size:13.5px;color:var(--ink-2);margin-top:2px;line-height:1.45}
.cell.top{align-items:flex-start}
.cell.top .sq{margin-top:1px}
.kvs .cell .t{color:var(--ink)}
.kvs .cell .t{flex:none}
.kvs .cell .v{flex:1;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis}

.path{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.path b{background:var(--fill);color:var(--ink);padding:4px 9px;border-radius:7px;font-weight:500}
.path b.target{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.path svg{width:13px;height:13px;color:var(--ink-3)}
.steps{counter-reset:st;display:grid;gap:10px}
.step{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.step .n{width:22px;height:22px;border-radius:50%;background:var(--fill);display:grid;place-items:center;font-size:12px;font-weight:600;flex:none;color:var(--ink-2)}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:70;padding:16px;animation:fade .2s}
.modal{background:var(--surface);border-radius:20px;width:100%;max-width:620px;max-height:min(90dvh,900px);overflow:auto;padding:22px 24px 24px;box-shadow:var(--shadow-lg);animation:pop .28s cubic-bezier(.32,.72,0,1)}
.modal.wide{max-width:900px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.modal-head h2{font-size:20px}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(8px)}}
.slot-row{display:grid;grid-template-columns:86px 86px minmax(0,1fr) 90px 120px 32px;gap:6px;align-items:center}
.slot-row input,.slot-row select{padding:7px 9px;font-size:14px}
.day-block{background:var(--fill);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.day-block input,.day-block select,.day-block textarea{background:var(--surface)}
.day-block .dl{font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:8px}
.toast-wrap{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:90;pointer-events:none}
.toast{background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:var(--ink);padding:10px 18px;border-radius:999px;font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);max-width:min(520px,90vw);animation:pop .3s cubic-bezier(.32,.72,0,1)}
.toast.bad{color:var(--red-text)}

/* ---------- frappe en direct ---------- */
.prose.typing > :last-child::after{content:'';display:inline-block;width:2px;height:1.05em;background:var(--claude-ic);border-radius:1px;margin-left:3px;vertical-align:-2px;animation:caret 1.05s steps(1) infinite}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

.chat .msg.a pre{background:var(--surface);white-space:pre-wrap;word-break:break-word}
.chat .msg.a code{background:var(--surface)}
.chat .msg.a .table-wrap{box-shadow:inset 0 0 0 1px var(--sep-strong)}

/* ---------- sections repliables de la liste des conversations ---------- */
.convos .sec-head{display:flex;align-items:center;gap:6px;width:100%;border:0;background:transparent;cursor:pointer;text-align:left;
  padding:12px 8px 4px;font-size:12px;font-weight:600;color:var(--ink-3);border-radius:8px}
.convos .sec-head:hover{color:var(--ink-2);background:var(--fill)}
.convos .sec-head .chev{width:12px;height:12px;flex:none;transition:transform .18s ease}
.convos .sec-head.folded .chev{transform:rotate(-90deg)}
.convos .sec-head .ic{width:13px;height:13px;flex:none}
.convos .sec-head .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.convos .sec-head .n{flex:none;font-weight:500;font-variant-numeric:tabular-nums;opacity:.75;
  background:var(--fill-2);border-radius:999px;padding:1px 7px;font-size:11px}
.convos .sec-head.folded .n{background:var(--accent-soft);color:var(--accent-text)}
.convos .fold-all{display:flex;justify-content:flex-end;padding:4px 2px 0}
.convos .fold-all .btn{font-size:12px;padding:3px 8px}

/* ---------- document + assistant côte à côte ---------- */
.viewer{display:grid;gap:16px;align-items:start}
.viewer.with-chat{grid-template-columns:minmax(0,1.32fr) minmax(320px,.88fr)}
.modal.xwide.duo{max-width:1340px}
.chat.in-viewer{height:min(70dvh,780px);min-height:340px;box-shadow:inset 0 0 0 1px var(--sep)}
.viewer .doc-side{min-width:0}
@media (max-width: 1000px){
  .viewer.with-chat{grid-template-columns:1fr}
  .chat.in-viewer{height:56dvh;min-height:300px}
}

/* ---------- assiduité ---------- */
.gauge{position:relative;height:10px;border-radius:999px;background:var(--fill-2);margin:12px 0 8px}
.gauge i{display:block;height:100%;border-radius:999px;transition:width .35s ease}
.gauge .mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--red);border-radius:2px}
.gauge-scale{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.assidu-num{font-family:var(--font-display);font-size:38px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.assidu-num small{font-size:15px;color:var(--ink-3);font-weight:500;letter-spacing:0}
.deadline{font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:5px}
.deadline.soon{color:var(--orange-text)} .deadline.late{color:var(--red-text)} .deadline.ok{color:var(--ink-2)}
.deadline svg{width:13px;height:13px}

/* ---------- type d'un document (cours / exercices / contrôles) ---------- */
select.cat-pick{width:auto;flex:none;padding:5px 26px 5px 11px;font-size:12.5px;font-weight:500;border-radius:999px;background:var(--fill-2);color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 14px) calc(50% + 1px),calc(100% - 9px) calc(50% + 1px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select.cat-pick:hover{filter:brightness(.96)}
select.cat-pick:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
select.cat-pick.big{font-size:13.5px;padding:7px 30px 7px 13px;background-position:calc(100% - 15px) calc(50% + 1px),calc(100% - 10px) calc(50% + 1px)}
select.cat-pick.c-cours{background-color:color-mix(in srgb,var(--s1) 16%,transparent)}
select.cat-pick.c-exercices{background-color:color-mix(in srgb,var(--s3) 18%,transparent)}
select.cat-pick.c-controles{background-color:color-mix(in srgb,var(--red) 15%,transparent)}
.drop .dropcat{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font-size:12.5px;color:var(--ink-2)}
@media (max-width: 700px){ .doc-cell .ctx-toggle span{display:none} }

/* ---------- documents : lignes plus grandes ---------- */
.doc-cell{padding:14px 16px;min-height:62px;gap:14px}
.doc-cell .file-ic{width:44px;height:44px;border-radius:11px}
.doc-cell .file-ic svg{width:22px;height:22px}
.doc-cell .t{font-size:16px;font-weight:500}
.doc-cell .d{font-size:13.5px;margin-top:3px}
.doc-cell.has-icon{--inset:74px}
.doc-cats{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-2);margin:0 2px 10px}
.doc-cats b{color:var(--ink);font-weight:600}
.cal-toolbar input[type=date]{width:auto;min-width:148px;padding:6px 10px;font-size:13.5px}

/* ---------- visionneuse de documents ---------- */
.modal.xwide{max-width:1120px}
.pdfbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.pdfbar .pg{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.pdfbar .zl{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:48px;text-align:center}
.pdfbar .sp{flex:1}
.pdfview{background:var(--fill);border-radius:14px;padding:14px;max-height:min(70dvh,760px);overflow:auto;display:flex;flex-direction:column;align-items:center;gap:14px;scroll-behavior:smooth}
.pdfpage{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.22);border-radius:3px;display:block;max-width:100%}
.pdfview .imgview{max-width:100%;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.22);display:block}
.pdfview .loading{color:var(--ink-3);font-size:14px;padding:40px 0}
@media (max-width: 900px){ .pdfview{padding:8px;max-height:68dvh} }

/* ---------- recherche ---------- */
.convos .search{margin-top:10px}
.convos .search input{font-size:13.5px;padding:8px 12px;background:var(--fill)}
.convos .search input:focus,.convos .search input:focus-visible{box-shadow:none!important;outline:none!important;border-color:transparent}
.searchbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.searchbar .f1{flex:1;min-width:230px}
.kb-body{max-height:min(62dvh,620px);overflow:auto;padding-right:6px}
.kb-body mark{background:color-mix(in srgb,var(--orange) 45%,transparent);color:inherit;border-radius:3px;padding:0 1px}

/* ---------- assistant agrandi & conversations ---------- */
.chat-overlay{position:fixed;inset:0;z-index:66;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;padding:clamp(10px,3vh,34px);animation:fade .2s}
.chat.expanded{position:static;width:min(1060px,100%);height:100%;max-height:100%;margin:auto;box-shadow:var(--shadow-lg);animation:pop .3s cubic-bezier(.32,.72,0,1)}
.chat.expanded .chat-msgs{padding:24px clamp(16px,7%,64px);gap:16px}
.chat.expanded .msg{max-width:78%;font-size:15.5px;line-height:1.6}
.chat.expanded .chat-sugg,.chat.expanded .chat-in{padding-inline:clamp(16px,7%,64px)}
.chat.expanded .chat-head{padding:16px clamp(16px,7%,64px)}
.chat-ph{display:none}
.convo .tagdot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--c,var(--ink-3))}
.grp-head{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-3);padding:12px 10px 4px}
.grp-head svg{width:13px;height:13px;color:var(--ink-3)}
.convo-meta{font-size:11.5px;color:var(--ink-3);margin-left:auto;flex:none}

/* ---------- responsive ---------- */
@media (max-width: 1180px){
  .widgets{grid-template-columns:1fr 1fr}
  .widgets .upnext{grid-column:1/-1}
  .g3{grid-template-columns:1fr 1fr}
  .subject-layout{grid-template-columns:1fr}
  .chat.embedded{position:static;height:min(640px,80dvh)}
  .claude-page{grid-template-columns:220px minmax(0,1fr)}
}
@media (max-width: 900px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .main{padding:18px 16px calc(96px + env(safe-area-inset-bottom,0px))}
  h1{font-size:30px}
  .page-head{margin-bottom:18px}
  .widgets,.g2,.g3,.g32{grid-template-columns:1fr}
  .weekstrip{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px}
  .week{grid-template-columns:1fr 1fr}
  .wday{min-height:0;border-top:1px solid var(--sep)}
  .wday+.wday{border-left:0}
  .wday:nth-child(2n){border-left:1px solid var(--sep)}
  .wday:nth-child(-n+2){border-top:0}
  .mail-layout{grid-template-columns:1fr;min-height:0}
  .mail-list{border-right:0;max-height:none;min-height:0}
  .mail-layout.reading .mail-list{display:none}
  .mail-layout:not(.reading) .mail-read{display:none}
  .mail-read{max-height:none;padding:18px}
  .form .cols,.form .cols3{grid-template-columns:1fr}
  .slot-row{grid-template-columns:1fr 1fr}
  .slot-row .wide{grid-column:1/-1}
  .tabbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--sep);padding-bottom:env(safe-area-inset-bottom,0px)}
  .tab-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px 12px;gap:6px;position:relative}
  .tab-strip::-webkit-scrollbar{display:none}
  .tab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:500;color:var(--ink-3);text-decoration:none;border:0;background:transparent;padding:7px 14px;cursor:pointer;scroll-snap-align:start;min-width:fit-content;min-height:48px;flex-shrink:0;border-radius:10px;transition:color .15s,background .15s}
  .tab-item span{white-space:nowrap}
  .tab-item svg{width:22px;height:22px}
  .tab-item.active{color:var(--accent);background:var(--fill)}
  .tab-item.claude.active{color:var(--claude-ic)}
  /* gradient edge hints */
  .tabbar::before,.tabbar::after{content:'';position:absolute;top:0;bottom:env(safe-area-inset-bottom,0px);width:24px;pointer-events:none;z-index:1;transition:opacity .2s}
  .tabbar::before{left:0;background:linear-gradient(to right,var(--glass),transparent);opacity:0}
  .tabbar::after{right:0;background:linear-gradient(to left,var(--glass),transparent);opacity:1}
  .tabbar{position:fixed;overflow:visible}
  .tab-strip.scrolled-left ~ *,.tabbar:has(.scrolled-left)::before{opacity:1}
  .tab-strip.scrolled-end ~ *,.tabbar:has(.scrolled-end)::after{opacity:0}
  .main.full{padding:0 0 calc(64px + env(safe-area-inset-bottom,0px))}
  .claude-page{grid-template-columns:1fr;height:calc(100dvh - 64px - env(safe-area-inset-bottom,0px))}
  .convos{position:fixed;inset:0 20% 0 0;z-index:60;background:var(--surface);transform:translateX(-102%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:var(--shadow-lg);padding-top:calc(12px + env(safe-area-inset-top,0px))}
  .convos.open{transform:none}
  .convos-header{display:flex;align-items:center;justify-content:space-between;padding:0 4px 8px}
  .convos-title{font-size:15px;font-weight:600}
  .convos-close{display:inline-grid;width:32px;height:32px;place-items:center;border:0;background:var(--fill);border-radius:50%;cursor:pointer}
  .convos-close svg{width:14px;height:14px}
  .convos-backdrop{display:block;position:fixed;inset:0;z-index:59;background:rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:opacity .3s}
  .convos-backdrop.open{opacity:1;pointer-events:auto}
  .convos-toggle{display:inline-grid}
  .mail-back{display:inline-flex}
  .cl-top{padding:10px 12px}
  .cl-scroll{padding:6px 14px 18px}
  .cl-compose-wrap{padding:0 10px 10px}
  .starters{grid-template-columns:1fr}
  .cl-empty{margin-top:3vh}
  .cl-empty h1{font-size:26px}
  .chat-overlay{padding:0}
  .chat.expanded{border-radius:0}
}
@media (pointer: coarse){input,select,textarea{font-size:16px}}
@media (max-width: 480px){
  h1{font-size:28px}
  .week{grid-template-columns:1fr}
  .wday:nth-child(2n){border-left:0}
  .wday:nth-child(2){border-top:1px solid var(--sep)}
  .weekstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apps{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 6px}
  .app-ic .ic{width:54px;height:54px}
  .upnext h2{font-size:23px}
}

/* =====================================================================
   Classmait — écrans d'accueil, connexion, questionnaire, paiement
   ===================================================================== */
.brand .logo{background:linear-gradient(145deg,#2b8cff,#0057d9)}
.nav a.claude svg{color:var(--claude-ic)}
.auth{min-height:100dvh;display:grid;place-items:center;padding:24px;background:
  radial-gradient(1200px 600px at 10% -10%,color-mix(in srgb,var(--claude-ic) 14%,transparent),transparent 60%),
  radial-gradient(900px 500px at 110% 110%,color-mix(in srgb,var(--s6) 12%,transparent),transparent 60%),var(--bg)}
.auth-card{width:100%;max-width:440px;background:var(--surface);border-radius:26px;box-shadow:var(--shadow-lg);padding:34px 32px 28px;text-align:center}
.auth-card .mark{width:64px;height:64px;border-radius:18px;margin:0 auto 18px;background:linear-gradient(145deg,#2b8cff,#0057d9);display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:700;font-size:30px;box-shadow:0 12px 34px rgba(0,87,217,.28)}
.auth-card h1{font-size:28px;margin-bottom:6px}
.auth-card .lead{color:var(--ink-2);font-size:15px;margin-bottom:24px}
.btn.google{width:100%;justify-content:center;padding:12px 16px;font-size:15px;background:var(--ink);color:var(--bg);border-radius:14px}
.btn.google:hover{filter:brightness(1.1)}
.btn.google .g{width:20px;height:20px;background:#fff;border-radius:50%;display:grid;place-items:center}
.auth-card .legal{font-size:12px;color:var(--ink-3);margin-top:18px;line-height:1.5}
.auth-card .legal a{color:var(--ink-2)}
.auth-sep{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--ink-3);font-size:13px}
.auth-sep::before,.auth-sep::after{content:'';flex:1;height:1px;background:var(--sep)}
.auth-email-form{display:flex;flex-direction:column;gap:8px;text-align:left}
.auth-email-form .inp{width:100%;box-sizing:border-box}
.auth-err{font-size:13px;color:var(--red);margin:0;text-align:center}
/* import summary */
.imp-summary{display:flex;flex-direction:column;gap:12px}
.imp-counts{font-size:14px;color:var(--ink-2);padding:8px 12px;background:var(--fill);border-radius:10px;font-weight:500}
.imp-section{border:1px solid var(--sep);border-radius:10px;overflow:hidden}
.imp-sec-head{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--fill);font-size:13px;font-weight:600;color:var(--ink-2)}
.imp-sec-head svg{width:16px;height:16px;flex-shrink:0}
.imp-sec-head .badge{background:var(--accent);color:white;border-radius:99px;padding:1px 7px;font-size:11px;font-weight:600;margin-left:auto}
.imp-item{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid var(--sep)}
.imp-item:first-child{border-top:0}
.imp-label{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-label.faint{color:var(--ink-3)}
.auth-toggle{font-size:13px;color:var(--ink-3);text-align:center;margin:6px 0 0}
.auth-toggle a{color:var(--accent);text-decoration:none;font-weight:500}
.auth-toggle a:hover{text-decoration:underline}
.price-tag{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--font-display);font-size:38px;font-weight:700;letter-spacing:-.03em}
.price-tag small{font-size:15px;color:var(--ink-2);font-weight:500;letter-spacing:0}
.features{display:grid;gap:10px;text-align:left;margin:22px 0}
.features div{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink)}
.features svg{width:18px;height:18px;color:var(--green);flex:none;margin-top:1px}

/* --- questionnaire --- */
.wiz{min-height:100dvh;display:grid;grid-template-rows:auto auto auto;background:var(--bg)}
.wiz-top{display:flex;align-items:center;gap:14px;padding:16px clamp(16px,4vw,40px);position:sticky;top:0;background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:5;border-bottom:1px solid var(--sep)}
.wiz-top .brand{padding:0}
.wiz-top .prog{flex:1;display:flex;gap:4px;max-width:520px;margin:0 auto}
.wiz-top .prog i{height:4px;flex:1;border-radius:4px;background:var(--fill-2)}
.wiz-top .prog i.done{background:var(--claude-ic)}
.wiz-top .prog i.cur{background:var(--claude-ic);opacity:.5}
.wiz-top .step-n{font-size:13px;color:var(--ink-2);white-space:nowrap}
.wiz-body{width:100%;max-width:760px;margin:0 auto;padding:clamp(20px,4vh,44px) clamp(16px,4vw,32px) 40px}
.wiz-body h1{font-size:30px;margin-bottom:8px}
.wiz-body .lead{font-size:16px;color:var(--ink-2);margin-bottom:26px;max-width:60ch}
.wiz-foot{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px clamp(16px,4vw,40px) calc(14px + env(safe-area-inset-bottom,0px));background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--sep)}
.wiz-foot .hint-skip{font-size:13px;color:var(--ink-3)}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.choice{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);cursor:pointer;border:2px solid transparent;text-align:left;font:inherit;color:var(--ink);transition:transform .12s,border-color .12s}
@media (hover: hover) and (pointer: fine){.choice:hover{transform:translateY(-1px)}}
.choice.on{border-color:var(--claude-ic);background:var(--claude-soft)}
.choice .ci{width:36px;height:36px;border-radius:10px;background:var(--fill);display:grid;place-items:center;color:var(--claude-ic)}
.choice .ci svg{width:19px;height:19px}
.choice b{font-size:14.5px}
.choice span{font-size:12.5px;color:var(--ink-2)}
.card{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:20px 22px}
.card+.card{margin-top:14px}
.card h3{margin-bottom:12px}
.howto{background:var(--fill);border-radius:14px;padding:14px 16px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.howto b{color:var(--ink)}
.howto ol{margin:8px 0 0 18px;padding:0}
.howto li+li{margin-top:4px}
.rowlist{display:grid;gap:10px}
.rowlist .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;background:var(--fill);border-radius:14px;padding:12px 14px}
.rowlist .row .fields{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.rowlist .row input,.rowlist .row select,.rowlist .row textarea{background:var(--surface)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:0;background:var(--fill);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;color:var(--ink)}
.chips button:hover{background:var(--fill-2)}
.chips button.on{background:var(--ink);color:var(--bg)}
.conn-row{display:flex;align-items:center;gap:12px;padding:12px 0}
.conn-row+.conn-row{border-top:1px solid var(--sep)}
.conn-row .st{font-size:12.5px;padding:3px 9px;border-radius:999px;background:var(--fill);color:var(--ink-2)}
.conn-row .st.ok{background:var(--green-soft);color:var(--green-text)}
.paywall{max-width:520px;margin:0 auto;text-align:center}
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--accent-soft);color:var(--accent-text);font-size:13.5px}
.notice svg{flex:none;margin-top:2px}
.usage-bar{height:8px;border-radius:999px;background:var(--fill-2);overflow:hidden}
.usage-bar i{display:block;height:100%;background:var(--claude-ic);border-radius:999px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px clamp(16px,4vw,40px);max-width:1180px;margin:0 auto}
@media (max-width:700px){ .choice-grid{grid-template-columns:repeat(2,1fr)} .wiz-body h1{font-size:26px} .rowlist .row{grid-template-columns:1fr} }

/* ---------- aide contextuelle « ? » ---------- */
.help-wrap{position:relative;display:inline-flex;vertical-align:middle;margin-left:6px}
.helpdot{width:17px;height:17px;border-radius:50%;border:0;background:var(--fill-2);color:var(--ink-2);
  font-size:11px;font-weight:700;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0;flex:none}
.helpdot:hover{background:var(--claude-soft);color:var(--claude-ic)}
.help-pop{position:absolute;z-index:75;top:22px;left:50%;transform:translateX(-50%);width:min(280px,72vw);
  background:var(--surface);color:var(--ink);border-radius:12px;box-shadow:var(--shadow-lg);padding:11px 13px;
  font-size:13px;line-height:1.45;font-weight:400;text-align:left;animation:pop .18s cubic-bezier(.32,.72,0,1)}
.help-pop b{display:block;margin-bottom:3px}
.help-pop span{color:var(--ink-2)}
.f-label{display:inline-flex;align-items:center}
h3 .help-wrap,.f-label .help-wrap{margin-left:5px}

/* ---------- liste déroulante avec recherche ---------- */
.combo{position:relative}
.combo-list{position:absolute;z-index:60;top:calc(100% + 4px);left:0;right:0;max-height:260px;overflow-y:auto;
  background:var(--surface);border-radius:12px;box-shadow:var(--shadow-lg);padding:5px;display:flex;flex-direction:column;gap:1px}
.combo-item{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;text-align:left;
  padding:8px 10px;border-radius:8px;cursor:pointer;font:inherit;color:var(--ink);font-size:14.5px}
.combo-item:hover,.combo-item.on{background:var(--fill)}
.combo-item .ch{flex:none;font-size:15px}
.combo-item .cl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo-empty{padding:12px;color:var(--ink-3);font-size:13.5px;text-align:center}

/* ---------- propositions (notes détectées dans le courrier) ---------- */
.prop{display:flex;align-items:center;gap:12px;padding:11px 0}
.prop+.prop{border-top:1px solid var(--sep)}
.prop .grow{flex:1;min-width:0}
.prop .t{font-size:15px;font-weight:500}
.prop .d{font-size:13px;color:var(--ink-2);margin-top:1px}
.prop .sc{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.prop .ok{background:var(--green);color:#fff}
.prop .ok:hover{filter:brightness(1.05)}
.file-ic.word{background:#2b579a}.file-ic.slides{background:#d24726}.file-ic.sheet{background:#217346}
.file-ic.file{background:#8e8e93}.file-ic.ai{background:var(--claude-soft);color:var(--claude-ic)}

/* =====================================================================
   Inscription — traitement plus calme : une colonne étroite, des
   intitulés discrets au-dessus de chaque surface, beaucoup d'air.
   ===================================================================== */
.wiz-top{border-bottom:1px solid var(--sep)}
.wiz-top .prog{gap:5px;max-width:420px}
.wiz-top .prog i{height:3px;border-radius:3px;background:var(--fill-2);transition:background .25s}
.wiz-top .prog i.done{background:var(--ink)}
.wiz-top .prog i.cur{background:var(--ink);opacity:.35}
.wiz-top .step-n{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.wiz-body{max-width:620px;padding:clamp(30px,7vh,68px) clamp(16px,5vw,28px) 56px}
.wiz-body h1{font-size:clamp(28px,4.4vw,38px);letter-spacing:-.035em;line-height:1.08;text-wrap:balance;margin-bottom:10px}
.wiz-body .lead{font-size:16.5px;line-height:1.5;color:var(--ink-2);margin-bottom:32px;max-width:52ch}
.ob-sec{margin-bottom:26px}
.ob-label{display:flex;align-items:center;font-size:12.5px;font-weight:600;color:var(--ink-3);
  letter-spacing:.015em;margin:0 4px 8px;text-transform:uppercase}
.wiz .card{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:18px 18px 20px;display:grid;gap:14px}
.wiz .card:empty{display:none}
.wiz .card h3{font-size:15px;font-weight:600;margin-bottom:2px}
.wiz .form{gap:16px}
.wiz label.f{font-size:12.5px;color:var(--ink-2);font-weight:500}
.wiz input,.wiz select,.wiz textarea{background:var(--fill);box-shadow:none;border-radius:12px;padding:11px 13px;font-size:16px}
.wiz input:focus,.wiz select:focus,.wiz textarea:focus{background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.wiz .choice{padding:15px 16px;border-radius:16px;border:0;box-shadow:inset 0 0 0 1px var(--sep-strong);background:var(--surface);gap:10px}
.wiz .choice:hover{transform:none;box-shadow:inset 0 0 0 1px var(--ink-3)}
.wiz .choice.on{background:var(--surface);box-shadow:inset 0 0 0 2px var(--claude-ic)}
.wiz .choice .ctop{display:flex;align-items:center;justify-content:space-between}
.wiz .choice .ci{background:var(--fill);color:var(--ink-2)}
.wiz .choice.on .ci{background:var(--claude-soft);color:var(--claude-ic)}
.wiz .choice .ctick{width:20px;height:20px;border-radius:50%;background:var(--claude-ic);color:#fff;display:grid;place-items:center}
.wiz .choice .ctick svg{width:12px;height:12px;stroke-width:2.6}
.wiz .choice b{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.wiz .choice-grid{gap:12px}
.wiz .chips{gap:8px}
.wiz .chips button{padding:8px 14px;font-size:13.5px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--sep-strong);color:var(--ink)}
.wiz .chips button:hover{box-shadow:inset 0 0 0 1px var(--ink-3);background:var(--surface)}
.wiz .chips button.on{background:var(--ink);color:var(--bg);box-shadow:none}
.wiz .howto{background:var(--fill);border-radius:16px;padding:16px 18px;font-size:14px;line-height:1.55}
.wiz .group{box-shadow:none;background:var(--fill);border-radius:14px}
.wiz .day-block{background:var(--fill);border-radius:14px}
.wiz-foot{border-top:1px solid var(--sep);padding-block:13px}
.wiz-foot .btn{border-radius:13px;padding:10px 18px;font-size:15px}
.wiz-foot .btn.primary{padding:10px 22px}
.wiz .rowlist .row{gap:8px}
.wiz .notice{border-radius:14px;padding:13px 15px}

/* connexion, un cran plus sobre */
.auth-card{border-radius:28px;padding:38px 34px 30px;box-shadow:0 20px 60px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.04)}
.auth-card h1{font-size:27px;letter-spacing:-.03em}
.auth-card .lead{font-size:14.5px;line-height:1.5;max-width:34ch;margin-inline:auto;margin-bottom:26px}
.auth-card .mark{width:58px;height:58px;border-radius:17px;font-size:27px}
.btn.google{border-radius:14px;font-weight:600}
.wiz .choice-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}

/* ---------- documents affichés dans leur forme d'origine ---------- */
.docpaper{background:#fff;color:#1d1d1f;width:min(820px,100%);border-radius:6px;padding:44px 52px;
  box-shadow:0 1px 4px rgba(0,0,0,.22);font-size:15px;line-height:1.7}
:root[data-theme="dark"] .docpaper,:root:not([data-theme="light"]) .docpaper{background:#fbfbfd}
.docpaper h2{font-size:22px;margin-top:1.2em}.docpaper h3{font-size:18px}.docpaper h4{font-size:16px}
.docpaper p{margin:.55em 0}.docpaper ul{margin:.5em 0;padding-left:1.3em}
.docpaper table{border-collapse:collapse;width:100%;font-size:14px}
.docpaper th,.docpaper td{border:1px solid #d8d8dc;padding:7px 10px;text-align:left;vertical-align:top}
.docpaper th{background:#f2f2f7;font-weight:600}
.docpaper.plain{white-space:pre-wrap;font-family:var(--font-mono);font-size:13px;line-height:1.55;padding:28px 32px}
.slides-view{display:grid;gap:18px;width:min(880px,100%)}
.slide{background:#fff;color:#1d1d1f;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.2);
  padding:34px 40px;aspect-ratio:16/9;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
:root[data-theme="dark"] .slide,:root:not([data-theme="light"]) .slide{background:#fbfbfd}
.slide .sl-n{position:absolute;top:12px;right:16px;font-size:12px;color:#a1a1a6;font-variant-numeric:tabular-nums}
.slide h3{font-size:clamp(18px,2.2vw,26px);letter-spacing:-.02em;line-height:1.15;margin-right:30px}
.slide ul{margin:0;padding-left:1.1em;display:grid;gap:7px;font-size:clamp(13px,1.4vw,16px);line-height:1.4;overflow:hidden}
.slide .sl-note{margin-top:auto;display:flex;gap:7px;align-items:flex-start;font-size:12px;color:#6e6e73;
  border-top:1px solid #e8e8ed;padding-top:9px}
.slide .sl-note svg{width:13px;height:13px;flex:none;margin-top:2px}
.sheet-view{width:100%}
table.sheet{border-collapse:collapse;font-size:13px;background:var(--surface);width:max-content;min-width:100%}
table.sheet th,table.sheet td{border:1px solid var(--sep);padding:6px 10px;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
table.sheet th{background:var(--fill);font-weight:600;position:sticky;top:0}
table.sheet td.rn{background:var(--fill);color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right;width:38px;position:sticky;left:0}
@media (max-width:700px){ .docpaper{padding:26px 22px} .slide{padding:22px 24px;aspect-ratio:auto;min-height:220px} }
.docpaper .docimg{margin:18px 0;text-align:center}
.docpaper .docimg img{max-width:100%;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.slide .sl-body{display:flex;gap:22px;flex:1;min-height:0}
.slide.with-img .sl-text{flex:1;min-width:0}
.slide .sl-imgs{flex:0 0 42%;display:grid;gap:8px;align-content:center;min-width:0}
.slide .sl-imgs img{width:100%;max-height:100%;object-fit:contain;border-radius:4px}
.slide .sl-text{display:flex;flex-direction:column;gap:10px;min-width:0}
@media (max-width:700px){ .slide .sl-body{flex-direction:column} .slide .sl-imgs{flex:none} }

/* =====================================================================
   Classmait — premium visual layer
   grain, entry animations, surface depth, typography refinements
   ===================================================================== */

/* Subtle noise grain — fixed layer, invisible to pointer, breaks digital flatness */
body::after{content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.019;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px 300px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::after{opacity:.031}}
:root[data-theme="dark"] body::after{opacity:.031}

/* Entry animation — spring-like curve, hardware-accelerated */
@keyframes fadeUp{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}

/* Dashboard widgets — staggered cascade */
.widget{animation:fadeUp .52s cubic-bezier(.16,1,.3,1) both}
.widget:nth-child(2){animation-delay:58ms}
.widget:nth-child(3){animation-delay:116ms}
.widget:nth-child(n+4){animation-delay:174ms}

/* Subject cards — tighter stagger for grid */
.subj{animation:fadeUp .44s cubic-bezier(.16,1,.3,1) both}
.subj:nth-child(2){animation-delay:42ms}.subj:nth-child(3){animation-delay:84ms}
.subj:nth-child(4){animation-delay:126ms}.subj:nth-child(5){animation-delay:168ms}
.subj:nth-child(6){animation-delay:210ms}.subj:nth-child(n+7){animation-delay:252ms}

/* Page header */
.page-head{animation:fadeUp .38s cubic-bezier(.16,1,.3,1) both}

/* Auth card entrance */
.auth-card{
  animation:fadeUp .58s cubic-bezier(.16,1,.3,1) both;
  box-shadow:0 24px 64px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.88)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .auth-card{
    box-shadow:0 28px 70px rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.04)}}
:root[data-theme="dark"] .auth-card{
  box-shadow:0 28px 70px rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.04)}

/* Onboarding body */
.wiz-body{animation:fadeUp .42s cubic-bezier(.16,1,.3,1) both}

/* AI starter suggestion cards */
.starter{animation:fadeUp .42s cubic-bezier(.16,1,.3,1) both}
.starter:nth-child(2){animation-delay:42ms}.starter:nth-child(3){animation-delay:84ms}
.starter:nth-child(4){animation-delay:126ms}

/* Hint banners */
.hint{animation:fadeUp .38s cubic-bezier(.16,1,.3,1) both}

/* Inner highlight on primary button — simulates glass edge */
.btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}

/* Google sign-in button — inner top edge */
.btn.google{box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}

/* Widget inner top edge for light mode depth */
.widget{box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.7)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .widget{box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.04)}}
:root[data-theme="dark"] .widget{box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.04)}

/* Nav active — slightly bolder for presence */
.nav a.active{font-weight:600}

/* Upnext countdown number — tighter and more monumental */
.upnext .cd b{letter-spacing:-.045em;line-height:.95}

/* Section titles — tighter optical tracking */
.section-title h2{letter-spacing:-.022em}

/* Segmented control active tab — inner highlight */
.segmented button.active{box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.6)}

/* Modal backdrop — slightly deeper */
.modal-bg{background:rgba(0,0,0,.34)}

/* Prose typing cursor — matches brand */
.prose.typing > :last-child::after{background:var(--claude-ic)}

/* =====================================================================
   Classmait — comprehensive premium redesign
   Auth · Sidebar · Dashboard · AI · Onboarding · Modals · Typography
   Applies: high-end-visual-design · redesign-existing-projects ·
            minimalist-ui · apple-design · animate · gpt-taste
   ===================================================================== */

/* --- AUTH: stronger atmosphere + glass card --- */
.auth{background:
  radial-gradient(900px 700px at 8% -5%,color-mix(in srgb,var(--claude-ic) 22%,transparent),transparent 55%),
  radial-gradient(700px 500px at 105% 108%,color-mix(in srgb,var(--s6) 18%,transparent),transparent 55%),
  radial-gradient(600px 400px at 55% 90%,color-mix(in srgb,var(--s7) 9%,transparent),transparent 60%),
  var(--bg)}

/* Glass card: translucent surface with backdrop blur for depth */
.auth-card{
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  -webkit-backdrop-filter:saturate(160%) blur(28px);
  backdrop-filter:saturate(160%) blur(28px);
  border:1px solid color-mix(in srgb,var(--sep) 70%,transparent)}
:root[data-theme="dark"] .auth-card{
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  border:1px solid rgba(255,255,255,.07);
  -webkit-backdrop-filter:saturate(160%) blur(28px);
  backdrop-filter:saturate(160%) blur(28px)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .auth-card{
    background:color-mix(in srgb,var(--surface) 82%,transparent);
    border:1px solid rgba(255,255,255,.07);
    -webkit-backdrop-filter:saturate(160%) blur(28px);
    backdrop-filter:saturate(160%) blur(28px)}}

/* Mark (logo) — warmer glow, better radius */
.auth-card .mark{
  border-radius:20px;
  box-shadow:0 14px 42px rgba(0,87,217,.34),0 2px 6px rgba(0,87,217,.18),inset 0 1px 0 rgba(255,255,255,.28)}

/* Auth headline — tighter, heavier */
.auth-card h1{letter-spacing:-.038em;font-weight:700}

/* Google button — rounder, more elevated */
.btn.google{
  border-radius:18px;
  letter-spacing:-.01em;
  box-shadow:0 1px 3px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.1)}
.btn.google:active{transform:scale(.985)}

/* Lang switcher — minimal */

/* --- SIDEBAR: elevated ask-btn, cleaner active state --- */
.ask-btn{
  border-radius:13px;
  background:color-mix(in srgb,var(--claude-soft) 80%,var(--surface));
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.5);
  font-weight:600;
  letter-spacing:-.01em;
  transition:background .15s,box-shadow .15s,transform .1s}
.ask-btn:hover{
  background:color-mix(in srgb,var(--claude-ic) 16%,var(--surface));
  box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.5)}
.ask-btn:active{transform:scale(.98)}
:root[data-theme="dark"] .ask-btn{
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.04)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ask-btn{
    box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.04)}}

/* Nav active — left accent bar + bolder text */
.nav a{border-radius:10px}
.nav a.active{
  background:var(--fill-2);
  font-weight:600;
  box-shadow:inset 2px 0 0 var(--claude-ic)}

/* Brand logo — better glow */
.brand .logo{
  box-shadow:0 4px 14px rgba(0,87,217,.26),inset 0 1px 0 rgba(255,255,255,.28)}

/* --- DASHBOARD: widget polish --- */
.upnext.empty{
  background:var(--surface);
  border:1px dashed var(--sep-strong)}
.upnext.empty h2{font-size:18px;color:var(--ink-2);font-weight:500;letter-spacing:-.01em}
.upnext:not(.empty){
  box-shadow:0 8px 32px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.15)}
.upnext .cd b{font-size:44px;letter-spacing:-.05em;line-height:.9}
.week{border-radius:20px}
.section-title h2{font-size:19px;letter-spacing:-.028em;font-weight:700}
.main .page-head h1{letter-spacing:-.032em}
.main .page-head .sub{line-height:1.5;max-width:58ch}

/* --- AI PAGE: starters redesign + compose elevation --- */
.cl-empty .av{
  width:60px;height:60px;
  background:color-mix(in srgb,var(--claude-soft) 90%,var(--surface));
  box-shadow:0 8px 24px color-mix(in srgb,var(--claude-ic) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.cl-empty h1{letter-spacing:-.035em;font-weight:700}
.cl-empty p{font-size:15.5px;max-width:44ch;margin-inline:auto;line-height:1.55}

/* Starters: border-first, accent ring on hover */
.starter{
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--sep);
  border-radius:18px;
  padding:15px 16px;
  gap:13px;
  transition:background .15s,box-shadow .15s,transform .1s}
@media (hover: hover) and (pointer: fine){
  .starter:hover{
    background:color-mix(in srgb,var(--claude-soft) 40%,var(--surface));
    box-shadow:inset 0 0 0 1.5px var(--claude-ic);
    transform:translateY(-1px)}}
.starter:active{transform:scale(.98)}
.starter .ic{border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.starter .t{font-size:14px;letter-spacing:-.01em}
.starter .d{font-size:12.5px;line-height:1.4}
:root[data-theme="dark"] .starter{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .starter{
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}}

/* Compose box — more elevated */
.cl-compose{
  border-radius:22px;
  box-shadow:0 8px 32px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.7);
  transition:box-shadow .2s}
.cl-compose:focus-within{
  box-shadow:0 12px 40px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.7)}
:root[data-theme="dark"] .cl-compose{
  box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cl-compose{
    box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05)}}
.convo{border-radius:10px;font-size:13.5px}
.cl-compose .send{box-shadow:0 2px 8px color-mix(in srgb,var(--claude) 35%,transparent)}

/* --- ONBOARDING: typography + choice refinements --- */
.wiz-body h1{letter-spacing:-.04em;line-height:1.06}
.wiz-body .lead{font-size:16px;letter-spacing:-.01em;line-height:1.55}
.wiz .choice.on{
  box-shadow:inset 0 0 0 2px var(--claude-ic),0 2px 12px color-mix(in srgb,var(--claude-ic) 15%,transparent)}
.wiz .chips button.on{
  background:var(--ink);
  color:var(--bg);
  box-shadow:0 2px 8px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.12)}
.wiz-top .prog i.done{background:var(--claude-ic)}
.wiz-top .prog i.cur{background:var(--claude-ic);opacity:.4}
.wiz .card{box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.65)}
:root[data-theme="dark"] .wiz .card{
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.03)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wiz .card{
    box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.03)}}

/* --- MODALS: deeper, more cinematic --- */
.modal{
  border-radius:24px;
  box-shadow:0 32px 80px rgba(0,0,0,.18),0 4px 16px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.6)}
:root[data-theme="dark"] .modal{
  box-shadow:0 32px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.04)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .modal{
    box-shadow:0 32px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.04)}}
.modal-bg{
  background:rgba(0,0,0,.38);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px)}
.modal-head h2{letter-spacing:-.022em}

/* --- FORMS: better focus rings --- */
.wiz input:focus,.wiz select:focus,.wiz textarea:focus{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--claude-ic) 28%,transparent),inset 0 1px 3px rgba(0,0,0,.04)}
input:focus,select:focus,textarea:focus{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.cl-compose textarea:focus,.chat-in textarea:focus{box-shadow:none;outline:none}

/* --- BUTTONS: tactile depth --- */
.btn.primary{
  box-shadow:0 1px 3px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.18);
  letter-spacing:-.01em}
.btn.primary:active{transform:scale(.97);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.segmented button.active{
  box-shadow:0 1px 4px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.65)}

/* --- SUBJECTS GRID: icon inner glow --- */
.subj .sq{box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.subj h3{letter-spacing:-.016em}

/* --- CHAT: embedded refinements --- */
.chat.embedded{border-radius:22px}
.chat-head{gap:12px}

/* --- ENTRY ANIMATIONS: AI conversation --- */
.cl-bot{animation:fadeUp .38s cubic-bezier(.16,1,.3,1) both}
.cl-user{animation:fadeUp .3s cubic-bezier(.16,1,.3,1) both}

/* Onboarding sections */
.ob-sec{animation:fadeUp .4s cubic-bezier(.16,1,.3,1) both}
.ob-sec:nth-child(2){animation-delay:50ms}
.ob-sec:nth-child(3){animation-delay:100ms}
.ob-sec:nth-child(4){animation-delay:150ms}


/* Drawer */
.drawer .chat{border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.22)}

/* =====================================================================
   Classmait — UI/UX Pro Max quality pass
   192 ui-reasoning + 119 ux-guidelines applied to SaaS / EdTech context
   ===================================================================== */

/* Smooth scroll — guideline #1 (Navigation/Smooth Scroll, High)
   Already killed by reduced-motion rule; the base must exist first. */
html{scroll-behavior:smooth}

/* Body line-height — guideline #72 (Typography/Line Height, Medium)
   1.45 is below the 1.5–1.75 range for comfortable body reading. */
body{line-height:1.5}

/* Circle checkbox — WCAG 2.2 AA guideline #104 (Target Size Minimum, High)
   WCAG requires 24×24 CSS px minimum for pointer targets on the web.
   Current: 22×22px. Fix: 24×24px. */
.circle{width:24px;height:24px}

/* Scroll padding — guideline #100 (Focus Not Obscured, High)
   Sticky wiz-top (~64px) can cover a focused element when tabbing.
   scroll-padding-top reserves space so the browser scrolls far enough. */
.wiz{scroll-padding-top:68px}

/* Also for the main app layout on mobile with tabbar (~64px) */
@media (max-width:900px){
  .main{scroll-padding-bottom:80px}}

/* Active states on icon buttons — guideline #30 (Interaction/Active States, Medium)
   Every pressable element needs instant feedback. */
.icon-btn:active{transform:scale(.88);transition:transform .1s cubic-bezier(.16,1,.3,1)}

/* Input minimum height — guideline #22 (Touch/Touch Target Size)
   Web: WCAG 2.2 AA requires 24px; 44px is recommended for comfort.
   Our inputs already have padding that clears 44px; enforce the floor. */
input,select{min-height:44px}
.chat-in textarea,.cl-compose textarea{min-height:unset}  /* chat textareas exempt */
select.cat-pick{min-height:36px}  /* compact pill selects exempt */

/* Disabled states — guideline #31 (Interaction/Disabled States, Medium)
   Only .btn[disabled] was handled. Extend to native inputs. */
input[disabled],select[disabled],textarea[disabled]{
  opacity:.45;cursor:not-allowed}

/* Overflow-wrap on dynamic content — guidelines #111 #112 (Layout, High)
   URLs, file names, and user content must not force horizontal overflow. */
.t,.d,.rule-t,.rule-d,.mail-body,.prose{overflow-wrap:anywhere}
.chip .cn,.convo .ct{overflow-wrap:anywhere}

/* Text reflow — guideline #112 (Accessibility, Critical)
   Content must remain available at narrow widths and user zoom levels.
   Ensure no fixed-height boxes clip text. */
.msg{height:auto!important}
.msg.u{max-width:88%}

/* Line length enforcement — guideline #73 (Typography/Line Length, Medium)
   Limit prose / body paragraphs to ~70ch for readability. */
.prose p,.prose li,.mail-body{max-width:72ch}

/* Empty state guidance — guideline #79 (Feedback/Empty States, Medium)
   Empty states must show a helpful message. Enforce min-height so they
   feel intentional, not broken. */
.upnext.empty{min-height:110px;display:flex;flex-direction:column;justify-content:center}
.mail-empty{min-height:220px}

/* Heading clarity — guideline #77 (Typography/Heading Clarity, Medium)
   Headings must clearly stand out from body weight and size.
   Enforce 700 weight on all major headings. */
h1,h2,h3{font-weight:700}

/* Toast auto-dismiss visual — guideline #82 (Feedback/Toast Notifications, Medium)
   Toasts should communicate transience. Subtle fade-out after settle
   is handled by JS (views.js); CSS ensures no toast is frozen on-screen
   by capping display. Already handled via JS dismissal logic. */

/* Hover state on mail items — ensure pointer cursor (guideline #29) */
.mail-item{cursor:pointer}

/* Accessible focus appearance — guideline #102 (Focus Appearance, Medium)
   WCAG 2.2 AAA: indicator ≥ 2px perimeter, 3:1 contrast against adjacent.
   Our :focus-visible already has 3px ring; ensure outline-offset is clear. */
:focus-visible{outline-offset:3px}

/* ARIA live region visual — guideline #118 (Contextual Live Badge Updates)
   Badge count changes should be smoothly updated, not jarring. */
.badge{transition:opacity .15s ease-out,transform .15s cubic-bezier(.16,1,.3,1)}

/* Compact label semantics — guideline #114 (Content/Compact Label Semantics)
   Status badges must not rely on color alone (guideline #37). Our badges
   already use text labels (.flag, .badge). Enforce overflow containment. */
.badge,.flag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}

/* Chip collection reflow — guideline #115 (Layout/Chip Collection Reflow)
   Filter chips must wrap gracefully. */
.chips{flex-wrap:wrap}

/* Reduce motion override for smooth-scroll (ensure reduced-motion kills it) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}}

/* =====================================================================
   Classmait — animation craft pass
   Emil Kowalski / find-animation-opportunities / review-animations
   ===================================================================== */

/* --- TOAST: keyframe → @starting-style + transition (interruptible) ---
   Keyframes restart from zero on rapid addition. Transitions retarget mid-flight.
   Using CSS nesting (@starting-style inside .toast) — supported Chrome 117+, Safari 17.4+ */
.toast{
  animation:none;
  transition:opacity .3s cubic-bezier(.32,.72,0,1),transform .3s cubic-bezier(.32,.72,0,1)}
@starting-style{
  .toast{opacity:0;transform:scale(.96) translateY(8px)}}

/* --- CIRCLE CHECKBOX: spring bounce on check ---
   Buttons that confirm a state change should feel physical.
   Brief overshoot (cubic-bezier bounce) signals the check landed. */
.circle{transition:background .15s ease-out,border-color .15s ease-out,transform .18s cubic-bezier(.34,1.56,.64,1)}
.circle:active{transform:scale(.88)}
.circle.on{transform:scale(1.08)}
/* Settle back to 1 via transition — the spring-like overshoot does it automatically */
/* Guard hover against coarse pointers */
@media (hover: hover) and (pointer: fine){
  .circle:hover{border-color:var(--accent);transform:scale(1.06)}}

/* --- CHOICE CARDS: explicit ease-out ---
   Default CSS `ease` on transform feels sluggish. ease-out gives instant response. */
.choice{transition:transform .14s cubic-bezier(.16,1,.3,1),border-color .14s ease-out,box-shadow .14s ease-out}

/* --- NAV ACTIVE: smooth box-shadow transition ---
   The left accent bar (inset 2px) was appearing instantly. */
.nav a{transition:background .15s ease-out,box-shadow .18s ease-out}

/* --- MAIL ITEMS: missing hover transition ---
   State changes without transition feel broken. */
.mail-item{transition:background .12s ease-out}

/* --- PROGRESS BAR SEGMENTS: color should flow, not jump ---
   Each step completion now animates the fill color. */
.wiz-top .prog i{transition:background .3s ease-out,opacity .3s ease-out}

/* --- CALENDAR EVENTS: hover brightness should transition ---
   Current: instant filter change. Fix: add transition. */
a.ev{transition:filter .12s ease-out}

/* --- SEGMENTED CONTROL: active pill transition ---
   The active background slides in instead of appearing. */
.segmented button{transition:background .15s ease-out,box-shadow .15s ease-out,color .15s ease-out}

/* --- ONBOARDING CHOICE SELECTION: add warm shadow ---
   Selected state needs more than just a border change to feel decisive. */
.wiz .choice{transition:transform .14s cubic-bezier(.16,1,.3,1),box-shadow .16s ease-out}
.wiz .choice:active{transform:scale(.98)}

/* --- HINT BANNER: stagger on multiple hints ---
   Multiple hints in one view should cascade. */
.hint:nth-child(2){animation-delay:60ms}
.hint:nth-child(3){animation-delay:120ms}

/* --- CONVO LIST ITEMS: entry when list populates ---
   Items in the conversations sidebar should stagger in. */
.convos .list .convo{animation:fadeUp .3s cubic-bezier(.16,1,.3,1) both}
.convos .list .convo:nth-child(2){animation-delay:30ms}
.convos .list .convo:nth-child(3){animation-delay:60ms}
.convos .list .convo:nth-child(4){animation-delay:90ms}
.convos .list .convo:nth-child(n+5){animation-delay:120ms}

/* --- TODO ITEMS: stagger on dashboard ---
   Task lists benefit from a brief cascade on entry. */
.todo{animation:fadeUp .32s cubic-bezier(.16,1,.3,1) both}
.todo:nth-child(2){animation-delay:35ms}
.todo:nth-child(3){animation-delay:70ms}
.todo:nth-child(n+4){animation-delay:105ms}

/* --- AGENDA ITEMS: same treatment ---
   Schedule items in the upcoming section. */
.agenda-item{animation:fadeUp .3s cubic-bezier(.16,1,.3,1) both}
.agenda-item:nth-child(2){animation-delay:30ms}
.agenda-item:nth-child(3){animation-delay:60ms}
.agenda-item:nth-child(n+4){animation-delay:90ms}

/* --- BTN: explicit ease-out on transform for press feedback ---
   The :active scale should use ease-out for instant response feeling. */
.btn{transition:background .15s ease-out,transform .1s cubic-bezier(.16,1,.3,1),filter .15s ease-out}

/* --- PROP (grade proposals): entry cascade ---
   When grade proposals appear, they should cascade in. */
.prop{animation:fadeUp .32s cubic-bezier(.16,1,.3,1) both}
.prop:nth-child(2){animation-delay:40ms}
.prop:nth-child(3){animation-delay:80ms}
.prop:nth-child(n+4){animation-delay:120ms}

/* --- REDUCED MOTION: keep opacity, drop movement ---
   Per Emil: reduced motion means gentler, not zero.
   Preserve end states; strip position-based motion. */
@media (prefers-reduced-motion: reduce){
  .circle,.choice,.nav a,.mail-item,.wiz-top .prog i,a.ev,.segmented button,.btn{
    transition-duration:.01ms!important}
  .toast,.convo,.todo,.agenda-item,.prop{
    animation-duration:.01ms!important;
    animation-delay:0ms!important}}

/* =====================================================================
   Classmait — Apple + Claude premium pass
   Iconos de plataforma iOS-style, nav sidebar con carácter,
   auth mark con profundidad real.
   ===================================================================== */

/* --- PLATFORM ICONS: iOS app icon depth ---
   hashColor devuelve los 8 colores del sistema Apple (#007aff, #34c759…).
   Le añadimos la capas de luz interna y la sombra multicapa correctas. */
.app-ic .ic{
  width:60px;height:60px;border-radius:16px;
  position:relative;overflow:hidden;
  /* Luz superior + borde inferior oscuro + sombra ambiental */
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 1px 3px rgba(0,0,0,.08),
    0 4px 14px rgba(0,0,0,.12);
  transition:
    transform .24s cubic-bezier(.34,1.56,.64,1),
    box-shadow .2s ease-out;
  font-size:26px;font-weight:700;
  letter-spacing:-.015em
}
/* Capa de brillo diagonal — el mismo efecto que los iconos iOS */
.app-ic .ic::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(145deg,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,.07) 40%,
    rgba(255,255,255,0) 65%);
  pointer-events:none
}
@media (hover:hover) and (pointer:fine){
  .app-ic:hover .ic{
    transform:scale(1.11) translateY(-3px);
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,.32),
      inset 0 -1px 0 rgba(0,0,0,.18),
      0 8px 26px rgba(0,0,0,.2),
      0 22px 48px rgba(0,0,0,.1)
  }
}
.app-ic:active .ic{
  transform:scale(.93)!important;
  transition:transform .1s cubic-bezier(.16,1,.3,1)!important
}
/* Etiqueta más discreta y tipografía Apple */
.app-ic .l{
  font-size:11.5px;font-weight:500;
  color:var(--ink-2);letter-spacing:-.01em;
  margin-top:1px
}

/* --- SIDEBAR NAV: macOS sidebar quality ---
   Eliminamos la sensación genérica con una transición de color
   más deliberada y un active state con warm tint. */
.nav a{
  padding:8px 10px;gap:9px;border-radius:10px;
  font-size:14px;font-weight:450;
  color:var(--ink-2);
  transition:background .14s ease-out,color .14s ease-out,box-shadow .14s ease-out
}
.nav a svg{
  width:18px;height:18px;flex:none;
  stroke-width:1.55;
  transition:stroke-width .14s ease-out,color .14s ease-out
}
@media (hover:hover) and (pointer:fine){
  .nav a:not(.active):hover{
    background:var(--fill);color:var(--ink)
  }
}
.nav a.active{
  background:color-mix(in srgb,var(--fill-2) 100%,transparent);
  color:var(--ink);font-weight:580;
  box-shadow:inset 2.5px 0 0 var(--claude-ic),0 1px 3px rgba(0,0,0,.04)
}
.nav a.active svg{stroke-width:1.9}
.nav a.active.claude,.nav a.claude.active{color:var(--claude-ic)}

/* --- SQ SECTION ICONS: inner highlight + shadow ---
   Usados en "Mon école", more sheet, etc. */
.sq{
  border-radius:11px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 1px 4px rgba(0,0,0,.08)
}

/* --- AUTH MARK: icono de app de alta gama ---
   La "C" era demasiado plana. Ahora tiene la misma
   profundidad que los iconos de plataformas. */
.auth-card .mark{
  width:72px;height:72px;border-radius:20px;
  background:linear-gradient(160deg,#3d9bff 0%,#0050d0 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 4px 14px rgba(0,80,208,.28),
    0 16px 40px rgba(0,80,208,.18);
  font-size:32px;font-weight:700;
  position:relative;overflow:hidden
}
.auth-card .mark::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(145deg,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,.06) 40%,
    rgba(255,255,255,0) 65%);
  pointer-events:none
}

/* --- GOOGLE BUTTON: Apple Sign in quality ---
   Más peso, transición spring, sin filter brusco. */
.btn.google{
  background:var(--ink);color:var(--bg);
  border-radius:14px;padding:13px 18px;
  font-weight:600;font-size:15px;letter-spacing:-.01em;
  box-shadow:
    0 2px 8px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition:
    transform .2s cubic-bezier(.34,1.56,.64,1),
    box-shadow .18s ease-out,
    filter .15s ease-out
}
@media (hover:hover) and (pointer:fine){
  .btn.google:hover{
    transform:translateY(-1px);
    box-shadow:
      0 6px 20px rgba(0,0,0,.2),
      inset 0 1px 0 rgba(255,255,255,.08);
    filter:brightness(1.06)
  }
}
.btn.google:active{
  transform:scale(.97) translateY(0)!important;
  transition-duration:.1s!important
}

/* Restablece reduced-motion para el nuevo bloque */
@media (prefers-reduced-motion:reduce){
  .app-ic .ic,.btn.google{
    transition-duration:.01ms!important}}

/* =====================================================================
   Classmait — Settings cells: tipografía y spacing más premium
   ===================================================================== */

/* Celdas de settings más altas y con mejor respiración */
.cell.has-icon{padding:11px 16px;gap:14px;align-items:center}
.cell.has-icon .t{font-size:15px;font-weight:500;letter-spacing:-.01em}
.cell.has-icon .d{font-size:13px;color:var(--ink-2);margin-top:2px}
.cell.has-icon svg.chev-r,
.cell.has-icon > svg:last-child{color:var(--ink-3);width:15px;height:15px;opacity:.7}

/* Group labels más limpios */
.group-label{
  font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);
  padding:0 6px 6px;margin-top:2px
}

/* Separador entre celdas — sutil, no agresivo */
.group .cell+.cell{border-top:1px solid var(--sep)}

/* =====================================================================
   Classmait — Iconos iOS-style para TODOS los .sq con color de fondo
   (ajustes, escuela, notas, onboarding, AI…)
   Selector: .sq[style*="background"] captura los que tienen color inline
   sin afectar a los .sq neutros (fill / sin style).
   ===================================================================== */

/* Tamaño base más generoso en celdas */
.cell.has-icon .sq{width:36px;height:36px;border-radius:10px}
.cell.has-icon .sq svg{width:18px;height:18px}

/* Profundidad iOS para cualquier .sq con background de color */
.sq[style*="background"]{
  position:relative;overflow:hidden;
  /* Luz superior + borde inferior oscuro + sombra ambiental */
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 1px 2px rgba(0,0,0,.08),
    0 3px 10px rgba(0,0,0,.1)
}
/* Capa de brillo diagonal — la firma visual de iOS */
.sq[style*="background"]::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(148deg,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,.06) 40%,
    rgba(255,255,255,0) 62%);
  pointer-events:none
}

/* Los .sq en hints ya tienen color definido por clase (.hint.warn etc.)
   — aplícales el mismo tratamiento */
.hint .sq{
  position:relative;overflow:hidden;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 1px 3px rgba(0,0,0,.08),
    0 2px 8px rgba(0,0,0,.07)
}
.hint .sq::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(148deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 58%);
  pointer-events:none
}

/* El .sq de asignaturas usa CSS var (--c) como background —
   no tiene inline style, así que lo tratamos por clase */
.subj .sq{
  position:relative;overflow:hidden;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 2px 8px rgba(0,0,0,.1)
}
.subj .sq::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(148deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 60%);
  pointer-events:none
}

/* =====================================================================
   Classmait — onboarding Apple minimalista + calendar events
   ===================================================================== */

/* --- ONBOARDING: choice cards estilo Apple ---
   Más grandes, más aire, sin sombra genérica.
   Borde fino como estado base; acento strong en seleccionado. */
.choice-grid{
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:10px
}
.choice{
  padding:18px 16px 16px;border-radius:16px;
  background:var(--surface);
  border:1.5px solid var(--sep);
  box-shadow:none;gap:10px;
  transition:border-color .15s ease-out,background .15s ease-out,
    transform .12s cubic-bezier(.16,1,.3,1),box-shadow .15s ease-out
}
@media (hover:hover) and (pointer:fine){
  .choice:hover{
    border-color:var(--ink-3);transform:translateY(-1px);
    box-shadow:0 4px 14px rgba(0,0,0,.06)
  }
}
.choice:active{transform:scale(.97)}
.choice.on{
  border-color:var(--claude-ic);border-width:2px;
  background:var(--surface);
  box-shadow:0 0 0 1px var(--claude-ic),0 4px 14px rgba(0,0,0,.06)
}
.choice .ci{
  width:40px;height:40px;border-radius:12px;
  background:var(--fill);color:var(--ink-3)
}
.choice.on .ci{background:var(--claude-soft);color:var(--claude-ic)}
.choice b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.choice span{font-size:13px;color:var(--ink-2);line-height:1.35}
/* Tick más pequeño y limpio */
.choice .ctick{
  width:18px;height:18px;border-radius:50%;
  background:var(--claude-ic);color:#fff
}
.choice .ctick svg{width:11px;height:11px;stroke-width:2.8}

/* Language step: cards un poco más anchas */
.wiz .choice-grid.langs{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}

/* Chips estilo Apple: más redondeados, hover más suave */
.wiz .chips button{
  border-radius:20px;padding:7px 14px;font-size:13.5px;font-weight:500;
  background:var(--fill);border:1.5px solid transparent;
  transition:background .12s ease-out,border-color .12s ease-out,transform .1s ease-out
}
.wiz .chips button:active{transform:scale(.96)}
.wiz .chips button.on{
  background:var(--claude-soft);border-color:var(--claude-ic);
  color:var(--ink)
}

/* --- CALENDAR: botón + en cabecera de día ---  */
.wday .h{display:flex;align-items:center;gap:5px;padding:8px 10px 6px}
.day-add-btn{
  border:0;background:transparent;cursor:pointer;
  width:20px;height:20px;border-radius:6px;
  display:grid;place-items:center;
  color:var(--ink-3);margin-left:auto;padding:0;flex:none;
  transition:background .12s ease-out,color .12s ease-out;opacity:0
}
.day-add-btn svg{width:13px;height:13px;stroke-width:2}
.wday:hover .day-add-btn,.wday.today .day-add-btn{opacity:1}
@media (hover:hover) and (pointer:fine){
  .day-add-btn:hover{background:var(--fill);color:var(--ink)}
}
/* En móvil siempre visible */
@media (max-width:900px){.day-add-btn{opacity:1}}

/* --- CALENDAR: keydate events en el grid --- */
button.ev.kd-ev{
  width:100%;text-align:left;border:0;cursor:pointer;font:inherit;
  background:color-mix(in srgb,var(--c,var(--accent)) 11%,var(--surface));
  border-left:3px solid var(--c,var(--accent));
  border-radius:8px;padding:5px 8px
}
button.ev.kd-ev .et{font-weight:600;font-size:13px}
button.ev.kd-ev .em{font-size:11px;opacity:.7;text-transform:capitalize}
@media (hover:hover) and (pointer:fine){
  button.ev.kd-ev:hover{
    background:color-mix(in srgb,var(--c,var(--accent)) 18%,var(--surface));
    transform:translateY(-1px)
  }
}
@media (prefers-reduced-motion:reduce){
  .choice,.wiz .chips button,.day-add-btn,button.ev.kd-ev{
    transition-duration:.01ms!important}
}

/* =====================================================================
   GRADES — anillos coloreados por asignatura
   ===================================================================== */
.sq.sm{width:20px;height:20px;border-radius:5px;flex:none}
.sq.sm svg{width:11px;height:11px}
.gr-rings{display:flex;flex-wrap:wrap;gap:16px;padding:4px 0 8px}
.gr-rings .ring{flex:0 0 auto;min-width:80px}
.gr-rings .ring svg{width:72px;height:72px}
.gr-rings .ring .rv{font-size:16px;font-weight:700;letter-spacing:-.02em}
.gr-rings .ring .rl{font-size:11px;color:var(--ink-2);text-align:center;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* =====================================================================
   PLATFORM LINKS — accesos directos en cabecera de sección
   ===================================================================== */
.plat-links{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.plat-link{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:20px;
  background:var(--fill);color:var(--ink-2);
  font-size:12px;font-weight:500;text-decoration:none;
  border:1px solid var(--sep);
  transition:background .12s,color .12s
}
.plat-link svg{width:12px;height:12px;flex:none}
@media (hover:hover) and (pointer:fine){
  .plat-link:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
}

/* =====================================================================
   Logo classmait (image) — remplace le monogramme "C".
   Deux fichiers (encre sombre pour fond clair, encre claire pour fond
   sombre) : .logo-pic bascule entre les deux selon le thème.
   ===================================================================== */
.logo-pic{display:inline-block;line-height:0}
.logo-pic img{display:block}
.logo-pic .logo-d{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-pic .logo-l{display:none}
  :root:not([data-theme="light"]) .logo-pic .logo-d{display:block}
}
:root[data-theme="dark"] .logo-pic .logo-l{display:none}
:root[data-theme="dark"] .logo-pic .logo-d{display:block}

/* barre latérale et haut du questionnaire : hauteur fixe, largeur libre */
.brand .logo{width:auto;height:40px;background:none;box-shadow:none;border-radius:0;display:flex;align-items:center;padding:0}
.brand .logo .logo-pic{height:100%}
.brand .logo .logo-pic img{height:100%;width:auto}

/* connexion, paiement, écran de chargement : largeur fixe, hauteur libre */
.auth-card .mark{width:300px;height:auto;background:none;box-shadow:none;border-radius:0;position:static;overflow:visible}
.auth-card .mark::after{display:none}
.auth-card .mark .logo-pic{display:block;width:100%}
.auth-card .mark .logo-pic img{width:100%;height:auto}
@media (max-width:480px){
  .auth-card .mark{width:240px}
}


/* ---------- calendrier : l'agenda de l'année scolaire ---------- */
.agd-list > .agd + .agd{box-shadow:inset 0 1px 0 var(--sep)}
.agd > .cell{padding-top:9px;padding-bottom:9px}
.agd-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;border:0;background:transparent;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.agd-main:hover .t{color:var(--accent-text)}
.agd .t{font-weight:500}
.agd.k-exam .t{font-weight:600}
.agd-when{font-size:13px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.agd-when.soon{color:var(--red-text);font-weight:600;background:var(--red-soft);padding:3px 9px;border-radius:999px}
.agd-go{flex:none}
@media (max-width:560px){ .agd-go{display:none} }
/* périodes : examens en rouge, vacances en vert, bien visibles */
.agd.range{border-left:3px solid transparent}
.agd.range > .cell{padding-left:13px}
.agd.range.k-exam{background:color-mix(in srgb,var(--red) 7%,transparent);border-left-color:var(--red)}
.agd.range.k-holiday{background:color-mix(in srgb,var(--green) 9%,transparent);border-left-color:var(--green)}
.agd.range .t{font-weight:650}
/* examens contenus dans une période */
.agd-inner{display:grid;gap:1px;padding:0 16px 10px 69px}
.agd-sub{display:flex;align-items:baseline;gap:10px;border:0;background:transparent;padding:4px 8px;margin-left:-8px;border-radius:8px;font:inherit;color:inherit;text-align:left;cursor:pointer;min-width:0}
.agd-sub:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.agd-sub-d{font-size:12.5px;font-weight:600;color:var(--red-text);white-space:nowrap;min-width:84px}
.agd-sub-t{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agd-sub-m{font-size:12.5px;color:var(--ink-2);margin-left:auto;white-space:nowrap;padding-left:8px}
@media (max-width:560px){ .agd-inner{padding-left:16px} .agd-sub-m{display:none} }
/* jours d'avant la mémoire du flux : semaine type, en retrait */
.wday.est .ev{opacity:.55}
.wday.est .dn{font-style:italic}

/* ---------- Mon école : contacts (nom, fonction, e-mail · téléphone, note) ---------- */
.contact .t{font-weight:600}
.contact .avatar{margin-top:1px}
.contact-links a{color:var(--accent-text)}
.contact-note{margin-top:5px;font-size:13px;line-height:1.45;color:var(--ink-2)}

/* ---------- Mon école : centre d'aide ---------- */
.help-center .help-url{display:inline-block;margin:-8px 4px 4px;font-size:13.5px}
.help-meta{margin:0 4px 4px;font-size:13px;color:var(--ink-2)}
.help-cat{margin-top:14px}
.help-art{text-align:left;width:100%;border:0;background:transparent;font:inherit;cursor:pointer}
.help-art .t{font-weight:600}
.help-ex{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;margin-top:2px}
.help-foot{margin:12px 4px 0}

/* barre latérale : le logo prend toute la largeur, le nom de l'école passe dessous */
.side .brand{flex-direction:column;align-items:flex-start;gap:6px}
.side .brand .t{font-size:13.5px}
/* ce qui est déjà passé reste dans la liste, en retrait */
.agd.past{opacity:.55}
.agd.past .agd-when{color:var(--ink-3)}
.agd-today{display:flex;align-items:center;gap:10px;padding:6px 16px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--red-text);background:var(--red-soft)}
.agd-list > .agd-today + .agd{box-shadow:none}
/* période d'examens : une ligne, ses examens se déplient */
.agd-toggle{padding:0 16px 8px 69px;margin-top:-4px}
.agd-more{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;padding:2px 0;font:inherit;font-size:12.5px;font-weight:600;color:var(--red-text);cursor:pointer}
.agd-more svg{width:12px;height:12px}
.agd.range.k-holiday .agd-more{color:var(--green-text)}
@media (max-width:560px){ .agd-toggle{padding-left:16px} }
/* accueil : « Prochainement » cliquable, périodes mises en avant */
button.agenda-item{width:100%;border:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer}
button.agenda-item:hover .t{color:var(--accent-text)}
.home-agd.range .t{font-weight:600 !important}
.home-agd.range.k-exam .d{color:var(--red-text)}
.home-agd.range.k-holiday .d{color:var(--green-text)}

/* marque de l'assistant (la « c » au point orange) : elle a son propre fond,
   donc les pastilles qui l'entourent deviennent transparentes */
.cm-mark{flex:none;border-radius:23.5%}
.sq:has(> .cm-mark),.av:has(> .cm-mark){background:transparent!important;border-radius:23.5%}
.sq > .cm-mark,.av > .cm-mark{width:100%!important;height:100%!important;margin:0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cm-mark{box-shadow:0 0 0 1px rgba(255,255,255,.16)}}
:root[data-theme="dark"] .cm-mark{box-shadow:0 0 0 1px rgba(255,255,255,.16)}

/* ruleta de ideas del chat (aiview.js · ideaWheel) : cylindre en perspective,
   l'idée du centre prend les couleurs de classmait (encre + point orange) */
.wheel-wrap{max-width:470px;margin:22px auto 0}
.wheel{position:relative;height:340px;perspective:900px;perspective-origin:50% 50%;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;outline:none;border-radius:22px;
  -webkit-mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}
.wheel.grabbing{cursor:grabbing}
.wheel:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,#d44e31 45%,transparent)}
.wheel-drum{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.wheel-item{position:absolute;left:0;right:0;top:50%;height:62px;margin-top:-31px;pointer-events:auto;display:flex;align-items:center;gap:12px;padding:0 12px 0 14px;
  border:0;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--sep);color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity;transition:background .18s,color .18s,box-shadow .18s}
.wheel-item .ic{width:36px;height:36px;border-radius:11px;background:var(--claude-soft);color:#d44e31;display:grid;place-items:center;flex:none;transition:background .18s,color .18s}
.wheel-item .ic svg{width:18px;height:18px}
.wheel-item .tx{display:flex;flex-direction:column;min-width:0;flex:1}
.wheel-item .t{font-weight:620;font-size:14.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wheel-item .d{font-size:12.5px;color:var(--ink-2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .18s}
.wheel-item .go{width:32px;height:32px;border-radius:50%;background:#d44e31;color:#fff;display:grid;place-items:center;flex:none;opacity:0;transform:rotate(90deg) scale(.5);transition:opacity .2s,transform .25s cubic-bezier(.16,1,.3,1)}
.wheel-item .go svg{width:16px;height:16px}
.wheel-item.on{background:#14141b;color:#fff;box-shadow:0 14px 34px rgba(20,20,27,.28),inset 0 0 0 1px rgba(255,255,255,.06)}
.wheel-item.on .ic{background:#d44e31;color:#fff}
.wheel-item.on .d{color:rgba(255,255,255,.66)}
.wheel-item.on .go{opacity:1;transform:rotate(90deg) scale(1)}
.wheel-hint{text-align:center;font-size:12px;color:var(--ink-3);margin-top:2px}
:root[data-theme="dark"] .wheel-item{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
:root[data-theme="dark"] .wheel-item.on{background:#f5f5f7;color:#14141b;box-shadow:0 14px 34px rgba(212,78,49,.22)}
:root[data-theme="dark"] .wheel-item.on .d{color:rgba(20,20,27,.6)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wheel-item{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  :root:not([data-theme="light"]) .wheel-item.on{background:#f5f5f7;color:#14141b;box-shadow:0 14px 34px rgba(212,78,49,.22)}
  :root:not([data-theme="light"]) .wheel-item.on .d{color:rgba(20,20,27,.6)}}
@media (max-width:700px){.wheel{height:310px}.wheel-wrap{margin-top:14px}}
.doc-retry{padding:2px 8px;font-size:12px;margin-left:4px;vertical-align:middle}.doc-retry svg{width:12px;height:12px}
/* correo : dirección classmait y guía de reenvío (school.js · mailSetupCard) */
.fw-card{background:var(--surface);box-shadow:var(--shadow);border-radius:var(--r-lg);padding:14px 18px;margin-bottom:14px}
.fw-head{display:flex;gap:12px;align-items:flex-start}
.fw-t{font-weight:620;font-size:15px}
.fw-lead{color:var(--ink-2);font-size:13.5px;margin-top:3px;line-height:1.45}
.fw-addr{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.fw-addr code{flex:1;min-width:0;overflow-wrap:anywhere;background:var(--fill);border-radius:10px;padding:8px 12px;font-size:13.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
.fw-tabs{margin-top:14px}
.fw-steps{margin:12px 0 0;padding-left:20px;display:grid;gap:8px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.fw-alt{margin-top:12px;font-size:13px;color:var(--ink-2);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fw-confirm{margin-bottom:12px;flex-wrap:wrap}
.fw-confirm .grow div{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:2px}
.fw-warn{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--orange-text)}.fw-warn svg{width:15px;height:15px}
.mail-more{display:block;margin:10px auto 14px}
.fw-old{margin-top:16px;padding-top:14px;border-top:1px solid var(--sep)}
.fw-old-t{display:flex;gap:7px;align-items:center;font-weight:620;font-size:14px}
.fw-old-t svg{width:16px;height:16px;color:var(--claude-ic)}
/* correo : análisis automático (school.js · mailAutoBar, mailFound) */
.mail-auto{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);margin-bottom:14px;font-size:13.5px}
.mail-auto .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none;margin-top:6px}
.mail-auto.on .dot{background:var(--green)}
.mail-auto .err{color:var(--orange-text)}
.mail-auto .small{margin-top:2px;line-height:1.45}
.mi-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mail-item .cat.added{display:inline-flex;align-items:center;gap:3px;color:var(--green-text);background:var(--green-soft);padding:1px 7px;border-radius:999px}
.mail-item .cat.added svg{width:11px;height:11px}
.mail-found{margin:10px 0 14px;padding:12px 14px;border-radius:14px;background:var(--claude-soft)}
.mail-found .mf-t{display:flex;gap:7px;align-items:center;font-weight:620;font-size:13.5px}
.mail-found .mf-t svg{width:18px;height:18px}
.mail-found p{margin:6px 0 0;font-size:13.5px;line-height:1.5}
.mf-list{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.mf-item{display:flex;gap:8px;align-items:baseline;text-align:left;border:0;background:var(--surface);border-radius:9px;padding:6px 10px;font:inherit;font-size:13px;color:var(--ink);text-decoration:none;cursor:pointer}
.mf-item .k{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);flex:none}
.mail-item.active .cat.added{background:rgba(255,255,255,.22);color:#fff}
/* correo : adjuntos que se abren (school.js · mailAttChip) */
.attach .chip.att{cursor:pointer;border:0;font:inherit;color:var(--ink);display:inline-flex;align-items:center;gap:8px;text-align:left}
.attach .chip.att:hover{background:var(--fill-2)}
.attach .chip.att .cs{font-size:11.5px;color:var(--ink-3)}
.attach .chip.att .go{font-size:12px;font-weight:600;color:var(--accent-text);margin-left:2px}
.attach .chip.att.busy{opacity:.7;cursor:progress}
/* menu « ⋯ » (ui.js · dotsMenu) */
.dots-btn{flex:none}
.dots-menu{position:fixed;z-index:1000;min-width:170px;padding:6px;border-radius:14px;background:var(--surface);box-shadow:0 12px 36px rgba(0,0,0,.18),0 0 0 1px var(--sep);display:flex;flex-direction:column;gap:2px;animation:fadeUp .16s cubic-bezier(.16,1,.3,1) both}
.dots-menu button{display:flex;align-items:center;gap:9px;border:0;background:transparent;font:inherit;font-size:14px;color:var(--ink);padding:8px 10px;border-radius:9px;cursor:pointer;text-align:left}
.dots-menu button:hover{background:var(--fill)}
.dots-menu button svg{width:16px;height:16px;color:var(--ink-2)}
.dots-menu button.danger,.dots-menu button.danger svg{color:var(--red-text)}
.arch-link{color:var(--ink-3)}
.arch-link svg{width:14px;height:14px}
.subj{position:relative}
.subj .dots-btn{position:absolute;top:10px;right:10px;background:var(--surface)}
.agd .dots-btn{margin-left:2px}
.arch-row{display:flex;gap:8px;flex-wrap:wrap;margin:-8px 0 10px}
/* calendrier : menu « ⋯ » sur chaque séance / date clé */
.ev .ev-dots{position:absolute;top:2px;right:2px;width:22px;height:22px;padding:0;border-radius:6px;background:color-mix(in srgb,var(--surface) 85%,transparent);opacity:0;transition:opacity .15s;z-index:1}
.ev .ev-dots svg{width:14px;height:14px}
.ev:hover .ev-dots,.ev:focus-within .ev-dots{opacity:1}
@media (hover:none){.ev .ev-dots{opacity:.85}}
.ev .et{padding-right:14px}
.kd-ev{cursor:pointer}
/* accueil : le calendrier de la semaine descend aussi bas que « Prochainement » */
.week-w{display:flex;flex-direction:column}
.week-w .weekstrip{flex:1;align-items:stretch}
.week-w .ws-day{background:color-mix(in srgb,var(--fill) 55%,transparent);border-radius:12px;padding:8px 6px;min-height:100%}
.week-w .ws-day.today{background:color-mix(in srgb,var(--red) 7%,var(--fill))}
.grid > .week-w{align-self:stretch}
.short-list .more-btn{margin:6px 2px 0;color:var(--accent-text)}.short-list .more-btn svg{width:14px;height:14px}
/* accueil : notes · plateformes · courrier, les trois cartes à la même hauteur */
.home-row3{align-items:stretch}
.home-row3 > .widget{display:flex;flex-direction:column}
/* la carte « Correo escolar » prend la hauteur de ses voisines (Notas, Plataformas)
   au lieu d'imposer la sienne : autant de courriels qu'il en tient, le reste est coupé */
@media (min-width: 1181px){
  .home-row3 > .mail-w{contain:size;min-height:320px;overflow:hidden;position:relative}
  .home-row3 > .mail-w::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(transparent,var(--surface));pointer-events:none;border-radius:0 0 var(--r-lg) var(--r-lg)}
}
@media (max-width: 1180px){
  .mail-w .agenda-item:nth-of-type(n+6){display:none}
}
/* barres de recherche (Correo escolar…) : pas de cadre bleu au focus */
.searchbar input:focus,.searchbar input:focus-visible,#mail-q:focus,#mail-q:focus-visible{box-shadow:none!important;outline:none!important;border-color:transparent}
.home-clock{font-variant-numeric:tabular-nums}
/* réglages : clé d'IA personnelle */
.key-guide{background:var(--fill);border-radius:12px;padding:10px 14px}
.key-guide .fw-steps{margin-top:0}
.key-guide a{color:var(--accent-text);word-break:break-all}
.key-adv summary{cursor:pointer;font-size:13px;color:var(--ink-2);margin:4px 0}
/* écran de connexion : réglages (langue, thème) et connexion par logos */
.auth-card{position:relative}
.auth-prefs{position:absolute;top:14px;right:14px}
.social-row{display:flex;justify-content:center;gap:14px;margin:6px 0 2px}
.social-btn{width:56px;height:56px;border-radius:16px;border:0;background:var(--surface);box-shadow:inset 0 0 0 1px var(--sep-strong);display:grid;place-items:center;cursor:pointer;transition:transform .12s,box-shadow .15s,background .15s}
.social-btn:hover{background:var(--fill);box-shadow:inset 0 0 0 1px var(--ink-3)}
.social-btn:active{transform:scale(.95)}
.social-btn .prov-ic{display:grid;place-items:center}
.social-btn.apple{color:var(--ink)}
/* une liste déroulante ouverte (pays, filière…) passe au-dessus des blocs suivants :
   sinon le bloc d'après la recouvrait et on ne voyait pas le bas de la liste */
.ob-sec:focus-within,.card:focus-within,.form:focus-within{position:relative;z-index:40}
.combo:focus-within{z-index:41}
.dots-sec{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);padding:8px 10px 3px}
.social-btn > span{transform:scale(1.25)}
.social-btn .prov-ic{transform:none}
/* « Tu clave de IA » : logo de chaque fournisseur */
.prov-chip{display:inline-flex;align-items:center;gap:7px}
.prov-logo{display:grid;place-items:center;width:18px;height:18px}
.chips button.on .prov-logo svg path[fill="currentColor"]{fill:currentColor}

/* =====================================================================
   Página de presentación (visitantes sin sesión)
   ===================================================================== */
.lp{min-height:100dvh;background:
  radial-gradient(1100px 700px at 5% -8%,color-mix(in srgb,var(--claude-ic) 18%,transparent),transparent 58%),
  radial-gradient(900px 600px at 100% 12%,color-mix(in srgb,var(--s6) 14%,transparent),transparent 60%),var(--bg);
  overflow-x:clip}
.lp-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;max-width:1120px;margin:0 auto;padding:12px 24px;
  background:var(--glass);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-radius:0 0 18px 18px}
.lp-brand{display:flex;align-items:center;line-height:0}
.lp-brand .logo-pic img{height:34px;width:auto}
.lp-brand:hover{text-decoration:none}
.lp-nav{display:flex;gap:2px;margin-left:8px}
.lp-nav button{border:0;background:none;padding:7px 12px;border-radius:999px;font-size:14px;color:var(--ink-2);cursor:pointer}
.lp-nav button:hover{background:var(--fill);color:var(--ink)}
.lp-top-r{display:flex;align-items:center;gap:8px;margin-left:auto}
.btn.lg{padding:13px 24px;font-size:16px;font-weight:600}

.lp-hero{max-width:1120px;margin:0 auto;padding:clamp(40px,8vh,90px) 24px 40px;text-align:center}
.lp-hero h1{font-size:clamp(36px,6.4vw,68px);letter-spacing:-.045em;line-height:1.02;max-width:15ch;margin:0 auto 20px}
.lp-lead{font-size:clamp(16px,2vw,20px);color:var(--ink-2);max-width:58ch;margin:0 auto 30px;line-height:1.5}
.lp-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.lp-note{font-size:13px;color:var(--ink-3);margin:14px 0 0}


/* secciones */
.lp-sec{max-width:1120px;margin:0 auto;padding:clamp(56px,10vh,100px) 24px 0;text-align:center;scroll-margin-top:70px}
.lp-sec h2,.lp-final h2{font-size:clamp(28px,4.2vw,44px);letter-spacing:-.035em;max-width:22ch;margin:0 auto 12px}
.lp-sub{font-size:17px;color:var(--ink-2);max-width:56ch;margin:0 auto 34px}


.lp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lp-stats div{background:var(--surface);border-radius:22px;padding:24px 18px;box-shadow:var(--shadow)}
.lp-stats strong{display:block;font-family:var(--font-display);font-size:40px;letter-spacing:-.03em;line-height:1.1;
  background:linear-gradient(135deg,var(--claude),#2b8cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-stats span{font-size:14px;color:var(--ink-2)}


.lp-faq{max-width:760px;margin:30px auto 0;text-align:left;display:grid;gap:10px}
.lp-faq details{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:0 20px}
.lp-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 0;font-weight:600;font-size:15.5px;cursor:pointer}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq details p{margin:0 0 18px;color:var(--ink-2);line-height:1.55}

.lp-final{max-width:1120px;margin:clamp(56px,10vh,100px) auto 0;padding:0 24px;text-align:center}
.lp-final h2{margin-bottom:8px}
.lp-final p{color:var(--ink-2);font-size:17px;margin:0 0 24px}

.lp-foot{max-width:1120px;margin:80px auto 0;padding:28px 24px 40px;border-top:1px solid var(--sep);display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}
.lp-foot .lp-brand .logo-pic img{height:26px}
.lp-foot .links a{color:var(--ink-2)}
.lp-foot .copy{margin-left:auto}

/* vuelta a la presentación desde el acceso */
.auth{position:relative}
.auth-back{position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;gap:4px;padding:7px 12px 7px 8px;border-radius:999px;
  background:var(--surface);box-shadow:var(--shadow);color:var(--ink-2);font-size:14px;font-weight:500}
.auth-back:hover{text-decoration:none;color:var(--ink)}

@media (max-width:900px){
  .lp-nav{display:none}
  .lp-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .lp-top{padding:10px 16px;gap:10px}
  .lp-brand .logo-pic img{height:28px}
  .lp-hide-sm{display:none}
  .lp-hero,.lp-sec,.lp-final{padding-left:16px;padding-right:16px}
  .lp-foot{padding-left:16px;padding-right:16px}
  .lp-foot .copy{margin-left:0}
  .auth-back{top:12px;left:12px}
}

/* ---------- presentación: recorrido por la app ---------- */
.lp-tabs{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow);margin:0 auto 26px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.lp-tabs::-webkit-scrollbar{display:none}
.lp-tabs button{display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.lp-tabs button.on{background:var(--ink);color:var(--bg)}
.lp-tour-panel{display:none;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:36px;align-items:center;text-align:left}
.lp-tour-panel.on{display:grid;animation:lpFade .35s ease-out}
@keyframes lpFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lp-tour-text h3{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.025em;margin-bottom:10px}
.lp-tour-text p{color:var(--ink-2);font-size:16px;margin:0 0 18px}
.lp-tour-text ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lp-tour-text li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.lp-tour-text li svg{color:var(--green);margin-top:2px}


/* ---------- presentación: conexiones ---------- */
.lp-connect{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:36px;align-items:center;text-align:left}
.cn-hub{position:relative;aspect-ratio:1;max-width:420px;width:100%;margin:0 auto}
.cn-lines{position:absolute;inset:0;width:100%;height:100%}
.cn-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26%;aspect-ratio:1;border-radius:28%;background:var(--surface);box-shadow:var(--shadow-lg);display:grid;place-items:center}
.cn-center img{width:62%;height:62%}
.cn-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.cn-node .sq{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-lg)}
.cn-node .sq svg{width:24px;height:24px}
.cn-node small{font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;background:var(--glass);padding:1px 7px;border-radius:999px}
.cn-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cn-card{display:flex;gap:12px;background:var(--surface);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.cn-card .sq{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none}
.cn-card b{display:block;font-size:15px;margin-bottom:4px}
.cn-card p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5}

/* ---------- presentación: IA ---------- */
.ai-note{display:flex;gap:8px;align-items:flex-start;justify-content:center;max-width:680px;margin:18px auto 0;font-size:13.5px;color:var(--ink-3);text-align:left}
.ai-note svg{flex:none;margin-top:2px}

/* ---------- presentación: opiniones ---------- */
.lp-stars{display:inline-flex;gap:1px;color:var(--fill-2)}
.lp-stars .on{color:#ffb800}
.lp-stars span{display:inline-flex}
.rv-avg{display:inline-flex;align-items:center;gap:10px;font-weight:600;margin-bottom:22px}
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left}
.rv-card{margin:0;background:var(--surface);border-radius:22px;padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.rv-card.skel{min-height:170px;background:linear-gradient(90deg,var(--surface),var(--fill),var(--surface));background-size:200% 100%;animation:rvSk 1.4s linear infinite}
@keyframes rvSk{to{background-position:-200% 0}}
.rv-card blockquote{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}
.rv-card figcaption{display:flex;align-items:center;gap:10px;margin-top:auto}
.rv-card .av{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,var(--claude-ic),#2b8cff);color:#fff;font-weight:700;flex:none}
.rv-card figcaption b{display:block;font-size:14px}
.rv-card figcaption small{color:var(--ink-3);font-size:12.5px}
.rv-empty{max-width:520px;margin:0 auto;background:var(--surface);border-radius:22px;padding:30px 26px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:8px}
.rv-empty .sq{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--claude-soft);color:var(--claude);margin-bottom:4px}
.rv-empty b{font-size:17px}
.rv-empty p{margin:0 0 10px;color:var(--ink-2)}

/* ---------- presentación: asistente de ayuda ---------- */
.lpc{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.lpc-fab{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;background:var(--surface);color:var(--ink);border-radius:999px;padding:8px 16px 8px 8px;
  box-shadow:var(--shadow-lg);font-weight:600;font-size:14px;transition:transform .15s}
.lpc-fab:hover{transform:translateY(-2px)}
.lpc-fab img{width:32px;height:32px}
.lpc.open .lpc-fab span{display:none}
.lpc.open .lpc-fab{padding:8px}
.lpc-panel{display:none;flex-direction:column;width:min(380px,calc(100vw - 32px));height:min(540px,calc(100dvh - 120px));background:var(--surface);border-radius:22px;box-shadow:var(--shadow-lg);overflow:hidden}
.lpc.open .lpc-panel{display:flex;animation:lpFade .2s ease-out}
.lpc-head{display:flex;align-items:center;gap:10px;padding:14px 14px 12px 16px;border-bottom:1px solid var(--sep)}
.lpc-head img{width:34px;height:34px}
.lpc-head .grow{flex:1;min-width:0}
.lpc-head b{display:block;font-size:15px}
.lpc-head small{color:var(--ink-3);font-size:12.5px}
.lpc-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.lpc-msg{max-width:86%;padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.lpc-msg.a{align-self:flex-start;background:var(--surface);border-bottom-left-radius:4px;box-shadow:var(--shadow)}
.lpc-msg.u{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.lpc-msg.err{background:var(--orange-soft);color:var(--orange-text);box-shadow:none}
.lpc-msg.typing{display:flex;gap:4px;padding:12px 14px}
.lpc-msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:lpcDot 1s infinite ease-in-out}
.lpc-msg.typing i:nth-child(2){animation-delay:.15s}.lpc-msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes lpcDot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.lpc-sugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.lpc-sugg button{border:1px solid var(--sep-strong);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}
.lpc-sugg button:hover{background:var(--fill)}
.lpc-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--sep)}
.lpc-form .inp{flex:1;min-width:0}
.lpc-form .btn{width:40px;height:40px;padding:0;flex:none}
.lpc-note{font-size:11px;color:var(--ink-3);text-align:center;padding:0 12px 10px}

@media (max-width:1000px){
  .lp-tour-panel,.lp-connect{grid-template-columns:1fr}
  .lp-tour-text{max-width:560px}
  .rv-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .cn-cards,.rv-grid{grid-template-columns:1fr}
  .cn-node .sq{width:42px;height:42px;border-radius:13px}
  .cn-node small{font-size:11px}
  .lpc{right:12px;bottom:12px}
  .lpc-fab span{display:none}
  .lpc-fab{padding:8px}
}

/* estrellas del formulario de opinión */
.rv-stars-in{display:flex;gap:4px;margin-top:6px}
.rv-star{border:0;background:none;padding:2px;cursor:pointer;color:var(--fill-2);display:inline-flex}
.rv-star svg{width:28px;height:28px}
.rv-star.on{color:#ffb800}
.lpc-form .inp:focus{box-shadow:none;outline:none}

.rv-card .av{position:relative;overflow:hidden}
.rv-card .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* foto en el formulario de opinión */
.rv-photo{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.rv-photo img{width:32px;height:32px;border-radius:50%;object-fit:cover}

/* ---------- presentación: acabado ---------- */
/* aparición al bajar */
.lp-rise{opacity:0;transform:translateY(18px)}
.lp-rise.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.22,.8,.3,1),transform .6s cubic-bezier(.22,.8,.3,1)}
.lp-rise.in :is(.pr-group,.cn-card,.ai2-card,.st-item,.lp-stats > div){animation:lpUp .55s cubic-bezier(.22,.8,.3,1) both}
.lp-rise.in :is(.pr-group,.cn-card,.ai2-card,.st-item,.lp-stats > div):nth-child(2){animation-delay:.05s}
.lp-rise.in :is(.pr-group,.cn-card,.ai2-card,.st-item,.lp-stats > div):nth-child(3){animation-delay:.1s}
.lp-rise.in :is(.pr-group,.cn-card,.ai2-card,.st-item,.lp-stats > div):nth-child(4){animation-delay:.15s}
.lp-rise.in :is(.pr-group,.cn-card,.ai2-card,.st-item,.lp-stats > div):nth-child(n+5){animation-delay:.2s}
@keyframes lpUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* respuesta al pulsar y al pasar el ratón */
.lp-tabs button,.rv-arrow,.lpc-fab,.lpc-sugg button,.lp-nav button{transition:background .15s ease-out,color .15s ease-out,transform .12s ease-out}
.lp-tabs button:active,.rv-arrow:active,.lpc-fab:active,.lpc-sugg button:active,.lp-nav button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .lp-tabs button:not(.on):hover{background:var(--fill);color:var(--ink)}
  .cn-card{transition:transform .15s ease-out,box-shadow .15s ease-out}
  .cn-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
  .lp-faq summary:hover{color:var(--accent-text)}
}
/* foco visible con teclado */
.lp :is(button,a,summary,input):focus-visible,.lpc :is(button,input):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lp-faq details{transition:box-shadow .15s ease-out}
.lp-faq details[open]{box-shadow:var(--shadow-lg)}
.lp-faq details[open] p{animation:lpFade .25s ease-out}
.lp-stats strong,.pr-main .amt{font-variant-numeric:tabular-nums}
/* panel del chat: nace desde su botón */
.lpc-panel{transform-origin:bottom right}
.lpc.open .lpc-panel{animation:lpcIn .22s cubic-bezier(.22,.8,.3,1)}
@keyframes lpcIn{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:560px){
  .cn-node small{max-width:92px;white-space:normal;text-align:center;line-height:1.2}
  .lp-tabs{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .lp-rise,.lp-rise.in{opacity:1;transform:none;transition:none}
  .lp-rise.in *{animation:none!important}
  .lpc.open .lpc-panel,.lp-tour-panel.on{animation:none}
}
@media (max-width:560px){
}


/* ---------- presentación: capturas reales ---------- */
.bf{background:var(--surface);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;min-width:0}
.bf-top{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--sep)}
.bf-top .dots{display:flex;gap:6px}
.bf-top .dots i{width:10px;height:10px;border-radius:50%}
.bf-top .dots i:nth-child(1){background:#ff5f57}.bf-top .dots i:nth-child(2){background:#febc2e}.bf-top .dots i:nth-child(3){background:#28c840}
.bf-top .url{flex:1;text-align:center;font-size:12px;color:var(--ink-3);background:var(--fill);border-radius:8px;padding:3px 10px;max-width:280px;margin:0 auto}
.bf-img{background:var(--fill);aspect-ratio:16/10}
.bf-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.lp-shots{position:relative;max-width:1000px;margin:52px auto 0;padding-right:70px}
.lp-shots .phone{position:absolute;right:0;bottom:-40px;width:22%;min-width:150px;padding:7px;border-radius:34px;background:#111;box-shadow:0 30px 60px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.08) inset}
.lp-shots .phone-in{border-radius:28px;overflow:hidden;aspect-ratio:585/1266;background:var(--fill)}
.lp-shots .phone img{display:block;width:100%;height:100%;object-fit:cover}
.lp-tour-panel .bf{align-self:start}
@media (max-width:560px){
  .lp-shots{padding-right:0;margin-top:40px}
  .lp-shots .phone{display:none}
  .bf{border-radius:12px}
  .bf-top{padding:7px 10px}
}

/* ---------- presentación: precio ---------- */

/* ---------- presentación: banner de funciones ---------- */
.ft{--dur:5.5s;position:relative;background:var(--surface);border-radius:28px;box-shadow:var(--shadow-lg);padding:14px 14px 18px;text-align:left;overflow:hidden}
.ft-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 12px;scroll-snap-type:x proximity}
.ft-chips::-webkit-scrollbar{display:none}
.ft-chip{position:relative;display:inline-flex;align-items:center;gap:7px;flex:none;border:0;cursor:pointer;background:var(--fill);color:var(--ink-2);
  padding:9px 14px;border-radius:999px;font:inherit;font-size:13.5px;font-weight:600;overflow:hidden;scroll-snap-align:center;
  transition:background .25s ease-out,color .25s ease-out,transform .12s ease-out}
.ft-chip svg{width:15px;height:15px}
.ft-chip:active{transform:scale(.97)}
.ft-chip.on{background:var(--ink);color:var(--bg)}
.ft-chip .bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--claude-ic);transform:scaleX(0);transform-origin:left}
.ft-chip.on .bar{animation:ftFill var(--dur) linear forwards}
.ft.hold .ft-chip.on .bar,.ft.stopped .ft-chip.on .bar{animation-play-state:paused}
.ft.still .ft-chip .bar{display:none}
@keyframes ftFill{to{transform:scaleX(1)}}
@media (hover:hover) and (pointer:fine){ .ft-chip:not(.on):hover{background:var(--fill-2);color:var(--ink)} }
.ft-stage{display:grid;padding:14px 18px 6px}
.ft-slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:40px;align-items:center;
  opacity:0;visibility:hidden;transform:translateX(26px);transition:opacity .5s cubic-bezier(.22,.8,.3,1),transform .6s cubic-bezier(.22,.8,.3,1),visibility 0s linear .6s}
.ft-slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s cubic-bezier(.22,.8,.3,1),transform .6s cubic-bezier(.22,.8,.3,1),visibility 0s}
.ft-slide .ft-visual{transform:translateY(10px) scale(.985);transition:transform .7s cubic-bezier(.22,.8,.3,1) .05s}
.ft-slide.on .ft-visual{transform:none}
.ft-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.ft-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;color:#fff;box-shadow:var(--shadow)}
.ft-ic svg{width:24px;height:24px}
.ft-count{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.ft-count small{color:var(--ink-3);font-weight:500}
.ft-text h3{font-size:clamp(22px,2.8vw,32px);letter-spacing:-.03em;line-height:1.1;margin-bottom:12px}
.ft-text p{margin:0;font-size:16px;color:var(--ink-2);line-height:1.55;max-width:44ch}
.ft-visual .bf{box-shadow:0 18px 50px rgba(0,0,0,.14),0 0 0 1px var(--sep)}
.ft-glyph{position:relative;aspect-ratio:16/10;border-radius:18px;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--c) 16%,transparent),transparent 65%),var(--fill)}
.ft-glyph .ring{position:absolute;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--c) 30%,transparent)}
.ft-glyph .r1{width:44%;aspect-ratio:1;animation:ftPulse 3.2s ease-out infinite}
.ft-glyph .r2{width:44%;aspect-ratio:1;animation:ftPulse 3.2s ease-out 1.6s infinite}
@keyframes ftPulse{from{transform:scale(.55);opacity:.9}to{transform:scale(1.35);opacity:0}}
.ft-glyph .core{position:relative;display:grid;place-items:center;width:96px;height:96px;border-radius:28px;color:#fff;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.ft-glyph .core svg{width:46px;height:46px}
.ft-nav{display:flex;justify-content:flex-end;gap:6px;padding:4px 18px 0}
.ft-ctl{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;background:var(--fill);color:var(--ink);transition:background .15s,transform .12s}
.ft-ctl:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){ .ft-ctl:hover{background:var(--fill-2)} }
@media (max-width:900px){
  .ft-slide{grid-template-columns:1fr;gap:20px}
  .ft-stage{padding:10px 8px 4px}
}
@media (max-width:560px){
  .ft{border-radius:22px;padding:10px 10px 14px}
  .ft-text h3{font-size:22px}
  .ft-text p{font-size:15px}
  .ft-nav{justify-content:center}
}

/* ---------- presentación: precio ---------- */
.pr-card{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);background:var(--surface);border-radius:28px;box-shadow:var(--shadow-lg);overflow:hidden;text-align:left;margin-top:8px}
.pr-main{position:relative;padding:32px 30px;display:flex;flex-direction:column;align-items:flex-start;
  background:radial-gradient(120% 80% at 0% 0%,color-mix(in srgb,var(--claude-ic) 14%,transparent),transparent 60%),var(--surface);border-right:1px solid var(--sep)}
.pr-tag{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--claude-soft);color:var(--claude);margin-bottom:16px}
.pr-main .amt{font-family:var(--font-display);font-size:60px;font-weight:700;letter-spacing:-.045em;line-height:1}
.pr-main .amt small{font-size:18px;font-weight:500;color:var(--ink-3);letter-spacing:0;margin-left:6px}
.pr-day{margin:8px 0 24px;color:var(--ink-2);font-size:15px}
.pr-cta{width:100%;gap:8px}
.pr-cta svg{transition:transform .2s ease-out}
@media (hover:hover) and (pointer:fine){ .pr-cta:hover svg{transform:translateX(3px)} }
.pr-chips{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.pr-chips li{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:500}
.pr-chips svg{display:grid;place-items:center;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--green-soft);color:var(--green-text)}
.pr-groups{padding:28px 30px}
.pr-incl-h{display:block;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:16px}
.pr-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}
.pr-gh{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pr-gh .sq{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#fff;flex:none}
.pr-gh .sq svg{width:16px;height:16px}
.pr-gh b{font-size:15px}
.pr-group ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pr-group li{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--ink-2);line-height:1.4}
.pr-group li svg{flex:none;width:15px;height:15px;margin-top:2px;color:var(--green)}
.pr-steps{margin-top:18px;background:var(--surface);border-radius:22px;box-shadow:var(--shadow);padding:22px 26px;text-align:left}
.pr-steps-h{display:block;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:16px}
.pr-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
.pr-steps ol::before{content:'';position:absolute;top:15px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,var(--sep-strong) 50%,transparent 0) 0 0/10px 2px repeat-x}
.pr-steps li{position:relative;display:flex;flex-direction:column;gap:10px}
.pr-steps .n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--bg);font-weight:700;font-size:14px;box-shadow:0 0 0 6px var(--surface)}
.pr-steps li b{display:block;font-size:15px;margin-bottom:3px}
.pr-steps li p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.45}
.pr-note{display:flex;gap:8px;align-items:center;justify-content:center;margin:16px 0 0;font-size:13px;color:var(--ink-3)}
.pr-note svg{color:var(--green)}
@media (max-width:900px){ .pr-card{grid-template-columns:1fr} .pr-main{border-right:0;border-bottom:1px solid var(--sep)} }
@media (max-width:560px){
  .pr-grid,.pr-steps ol{grid-template-columns:1fr}
  .pr-steps ol::before{display:none}
  .pr-steps li{flex-direction:row;align-items:flex-start}
  .pr-steps .n{flex:none}
  .pr-main,.pr-groups{padding:24px 20px}
}

/* ---------- presentación: preguntas (apertura suave) y pregunta libre ---------- */
:root{interpolate-size:allow-keywords}
.lp-faq summary .pm{position:relative;flex:none;width:22px;height:22px;border-radius:50%;background:var(--fill);transition:background .2s,transform .3s cubic-bezier(.22,.8,.3,1)}
.lp-faq summary .pm::before,.lp-faq summary .pm::after{content:'';position:absolute;left:6px;right:6px;top:10px;height:2px;border-radius:2px;background:var(--ink-2)}
.lp-faq summary .pm::after{transform:rotate(90deg);transition:transform .3s cubic-bezier(.22,.8,.3,1)}
.lp-faq details[open] summary .pm{background:var(--ink);transform:rotate(180deg)}
.lp-faq details[open] summary .pm::before,.lp-faq details[open] summary .pm::after{background:var(--bg)}
.lp-faq details[open] summary .pm::after{transform:rotate(0)}
.lp-faq details::details-content{height:0;overflow:clip;transition:height .35s cubic-bezier(.22,.8,.3,1),content-visibility .35s allow-discrete}
.lp-faq details[open]::details-content{height:auto}
.lp-faq details p{line-height:1.65;font-size:15px}
.ask{max-width:760px;margin:26px auto 0;background:var(--surface);border-radius:24px;box-shadow:var(--shadow-lg);padding:24px 24px 16px;text-align:left;
  background-image:radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--claude-ic) 10%,transparent),transparent 55%)}
.ask > b{display:block;font-size:18px;letter-spacing:-.01em}
.ask > p{margin:4px 0 14px;color:var(--ink-2)}
.ask > small{display:block;margin-top:10px;font-size:11.5px;color:var(--ink-3)}
.ask-form{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:16px;padding:6px 6px 6px 10px;box-shadow:inset 0 0 0 1px var(--sep);transition:box-shadow .2s}
.ask-form:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}
.ask-ic img{width:26px;height:26px;display:block}
.ask-form .inp{flex:1;min-width:0;background:transparent;border:0;box-shadow:none;padding:8px 4px}
.ask-form .inp:focus{outline:none;box-shadow:none}
.ask-form .btn{gap:6px;flex:none}
.ask-out{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.ask-out:empty{display:none}
.ask-q{align-self:flex-end;max-width:85%;background:var(--accent);color:#fff;padding:9px 14px;border-radius:16px 16px 4px 16px;font-size:14.5px;animation:lpFade .25s ease-out}
.ask-a{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border-radius:16px 16px 16px 4px;padding:12px 14px;font-size:14.5px;line-height:1.55;animation:lpFade .25s ease-out}
.ask-a img{width:26px;height:26px;flex:none}
.ask-a .txt{white-space:pre-wrap}
.ask-a.err{background:var(--orange-soft);color:var(--orange-text)}
.ask-a.typing{align-self:flex-start;gap:4px;padding:14px 16px}
.ask-a.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:lpcDot 1s infinite ease-in-out}
.ask-a.typing i:nth-child(2){animation-delay:.15s}.ask-a.typing i:nth-child(3){animation-delay:.3s}
.ask-more{display:inline-flex;align-items:center;gap:4px;margin-top:8px;border:0;background:none;padding:0;color:var(--accent-text);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.ask-more svg{width:14px;height:14px;transition:transform .2s}
@media (hover:hover) and (pointer:fine){ .ask-more:hover svg{transform:translateX(3px)} }
@media (max-width:560px){ .ask{padding:18px 16px 12px} .ask-form .btn span{display:none} }
@media (prefers-reduced-motion:reduce){
  .ft-slide,.ft-slide .ft-visual,.ft-glyph .ring{transition:none;animation:none}
  .lp-faq details::details-content{transition:none}
}
.ft-chips{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}

/* ---------- planes ---------- */
.plan-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 18px;text-align:left}
.plan-pick button{display:flex;flex-direction:column;gap:3px;padding:12px 12px 11px;border-radius:16px;border:0;cursor:pointer;background:var(--fill);color:var(--ink);font:inherit;
  box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s ease-out,background .2s ease-out,transform .12s ease-out}
.plan-pick button:active{transform:scale(.98)}
.plan-pick button.on{background:var(--surface);box-shadow:inset 0 0 0 2px var(--accent),0 6px 18px rgba(0,113,227,.12)}
.pp-top{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.pp-top b{font-size:13.5px}
.pp-save{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--green-soft);color:var(--green-text);white-space:nowrap}
.pp-price{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.02em}
.pp-price small{font-size:12px;font-weight:500;color:var(--ink-3);margin-left:3px;letter-spacing:0}
.pp-sub{font-size:11.5px;color:var(--ink-3)}
.pay-card{max-width:520px}
@media (max-width:480px){ .plan-pick{grid-template-columns:1fr} }

.pr-toggle{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:4px;border-radius:16px;background:var(--fill);margin-bottom:20px;width:100%}
.pr-toggle button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;border:0;cursor:pointer;background:none;color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:600;
  padding:6px 4px;border-radius:12px;white-space:nowrap;transition:background .2s ease-out,color .2s ease-out,box-shadow .2s ease-out}
.pr-toggle button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.pr-toggle .pp-save{font-size:10px;padding:1px 6px}
.pr-main .pr-day{margin:8px 0 2px}
.pr-billed{margin:0 0 22px;font-size:13px;color:var(--ink-3)}
.swap{animation:prSwap .35s cubic-bezier(.22,.8,.3,1)}
@keyframes prSwap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.plan-pick button{text-align:left;align-items:stretch}

/* ---------- presentación: barra superior fija ---------- */
.lp-top{transition:box-shadow .25s ease-out,background .25s ease-out}
.lp-top.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.08),0 0 0 1px var(--sep);background:color-mix(in srgb,var(--surface) 82%,transparent)}

/* ---------- presentación: IA incluida o tu propia IA ---------- */
.ai2{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:stretch;text-align:left}
.ai2-card{position:relative;background:var(--surface);border-radius:26px;padding:28px 28px 24px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:18px}
.ai2-card.incl{box-shadow:0 0 0 2px var(--claude-ic),var(--shadow-lg);background-image:radial-gradient(90% 70% at 0% 0%,color-mix(in srgb,var(--claude-ic) 12%,transparent),transparent 60%)}
.ai2-tag{align-self:flex-start;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;background:var(--claude-soft);color:var(--claude)}
.ai2-tag.soft{background:var(--fill);color:var(--ink-2)}
.ai2-head{display:flex;flex-direction:column;gap:14px}
.ai2-head > b{font-family:var(--font-display);font-size:26px;letter-spacing:-.025em}
.ai2-logo{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--sep)}
.ai2-logo svg,.ai2-logo img{width:28px;height:28px}
.ai2-logo .prov-ic{display:grid;place-items:center}
.ai2-logo.big{width:60px;height:60px;border-radius:18px;background:var(--surface)}
.ai2-logo.big img{width:36px;height:36px}
.ai2-logos{display:flex;gap:14px}
.ai2-prov{display:flex;flex-direction:column;align-items:center;gap:6px}
.ai2-prov small{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.ai2-card ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ai2-card li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.45}
.ai2-card li svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--green-soft);color:var(--green-text);margin-top:1px}
.ai2-or{display:grid;place-items:center;position:relative}
.ai2-or::before{content:'';position:absolute;top:10%;bottom:10%;left:50%;width:1px;background:var(--sep-strong)}
.ai2-or span{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 1px var(--sep-strong);font-size:13px;font-weight:600;color:var(--ink-3);text-transform:uppercase}
.ai2-steps{margin-top:22px;background:var(--surface);border-radius:22px;box-shadow:var(--shadow);padding:22px 26px;text-align:left}
.ai2-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ai2-steps li{display:flex;gap:12px;align-items:flex-start}
.ai2-steps .n{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bg);font-weight:700;font-size:14px}
.ai2-steps p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.5}
@media (max-width:900px){
  .ai2{grid-template-columns:1fr}
  .ai2-or{height:40px}
  .ai2-or::before{top:50%;bottom:auto;left:10%;right:10%;width:auto;height:1px}
  .ai2-steps ol{grid-template-columns:1fr}
}

/* ---------- presentación: empieza en tres pasos (animado) ---------- */
.st{--dur:4.8s;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;align-items:stretch;text-align:left}
.st-list{display:flex;flex-direction:column;gap:10px}
.st-item{position:relative;display:flex;gap:16px;align-items:flex-start;text-align:left;border:0;cursor:pointer;font:inherit;color:var(--ink);
  background:var(--surface);border-radius:20px;padding:20px 22px;box-shadow:var(--shadow);overflow:hidden;
  transition:box-shadow .3s ease-out,transform .3s cubic-bezier(.22,.8,.3,1),opacity .3s ease-out}
.st-item:not(.on){opacity:.72}
.st-item.on{box-shadow:var(--shadow-lg);transform:translateX(6px)}
.st-item .n{position:relative;flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--fill);color:var(--ink-2);font-weight:700;font-size:16px;
  transition:background .3s ease-out,color .3s ease-out}
.st-item .n svg{position:absolute;width:18px;height:18px;opacity:0;transform:scale(.6);transition:opacity .25s,transform .3s cubic-bezier(.22,.8,.3,1)}
.st-item .n .num{transition:opacity .2s}
.st-item.on .n{background:var(--ink);color:var(--bg)}
.st-item.done .n{background:var(--green);color:#fff}
.st-item.done .n .num{opacity:0}
.st-item.done .n svg{opacity:1;transform:none}
.st-txt b{display:block;font-size:18px;margin-bottom:4px;letter-spacing:-.01em}
.st-txt span{display:block;font-size:15.5px;color:var(--ink-2);line-height:1.5}
.st-item .bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--claude-ic);transform:scaleX(0);transform-origin:left}
.st-item.on .bar{animation:ftFill var(--dur) linear forwards}
.st.hold .st-item.on .bar{animation-play-state:paused}
.st.still .st-item .bar{display:none}
.st-stage{position:relative;border-radius:26px;overflow:hidden;min-height:340px;display:grid;place-items:center;
  background:radial-gradient(80% 70% at 30% 20%,color-mix(in srgb,var(--claude-ic) 14%,transparent),transparent 60%),radial-gradient(70% 60% at 90% 90%,color-mix(in srgb,var(--s1) 12%,transparent),transparent 60%),var(--surface);
  box-shadow:var(--shadow-lg)}
.sc{width:100%;height:100%;display:grid;place-items:center;padding:26px;animation:scIn .5s cubic-bezier(.22,.8,.3,1)}
@keyframes scIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.sc-card{width:min(300px,100%);background:var(--surface);border-radius:22px;padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.14),0 0 0 1px var(--sep);display:flex;flex-direction:column;gap:12px;align-items:center}
.sc-card.wide{width:min(380px,100%);align-items:stretch}
.sc-mark{width:40px;height:40px}
.sc-social{display:flex;gap:10px}
.sc-social > span{display:grid;place-items:center;width:52px;height:40px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--sep-strong)}
.sc-social .apple{color:var(--ink)}
.sc-social svg{width:20px;height:20px}
.sc-field{width:100%;display:flex;align-items:center;background:var(--fill);border-radius:11px;padding:10px 12px;font-size:14px}
.sc-field .typed{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:scType 1.4s steps(13) .5s forwards}
.sc-field .caret{width:2px;height:16px;background:var(--accent);margin-left:1px;animation:scBlink .9s step-end infinite}
@keyframes scType{to{width:13ch}}
@keyframes scBlink{50%{opacity:0}}
.sc-btn{width:100%;text-align:center;background:var(--accent);color:#fff;border-radius:11px;padding:10px;font-weight:600;font-size:14px;animation:scPress .4s ease-out 2.2s both}
@keyframes scPress{0%{transform:none}50%{transform:scale(.95)}100%{transform:none}}
.sc-prog{display:flex;flex-direction:column;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.sc-prog i{display:block;height:6px;border-radius:6px;background:var(--fill);overflow:hidden}
.sc-prog b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--claude-ic));border-radius:6px;animation:scGrow 2.6s cubic-bezier(.22,.8,.3,1) .3s forwards}
@keyframes scGrow{to{width:100%}}
.sc-q{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.02em}
.sc-chips{display:flex;flex-wrap:wrap;gap:8px}
.sc-chips span{padding:8px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-weight:600;font-size:14px;opacity:0;transform:translateY(8px) scale(.95);
  animation:scPop .45s cubic-bezier(.22,.8,.3,1) var(--d) forwards}
@keyframes scPop{to{opacity:1;transform:none}}
.sc3{grid-template-columns:auto auto 1fr;gap:18px;align-items:center}
.sc-fly{display:flex;flex-direction:column;gap:12px}
.sc-fly span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--surface);box-shadow:var(--shadow-lg);color:var(--ink-2);
  animation:scFly 2.2s cubic-bezier(.5,0,.3,1) var(--d) infinite both}
@keyframes scFly{0%{opacity:0;transform:translateX(-24px)}40%{opacity:1;transform:none}100%{opacity:0;transform:translateX(70px) scale(.5)}}
.sc-hub{display:grid;place-items:center;width:78px;height:78px;border-radius:24px;background:var(--surface);box-shadow:0 18px 40px rgba(0,0,0,.16);animation:scPulse 1.2s ease-out .6s}
.sc-hub img{width:46px;height:46px}
@keyframes scPulse{0%{transform:none}40%{transform:scale(1.08)}100%{transform:none}}
.sc-items{display:flex;flex-direction:column;gap:10px;min-width:0}
.sc-items > div{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:14px;padding:10px 12px;box-shadow:var(--shadow);font-size:14px;font-weight:500;
  opacity:0;transform:translateX(12px);animation:scPop .45s cubic-bezier(.22,.8,.3,1) var(--d) forwards;min-width:0}
.sc-items .ic{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;color:#fff;flex:none}
.sc-items .ic svg{width:15px;height:15px}
.sc-items > div > svg{margin-left:auto;color:var(--green);flex:none}
@media (max-width:900px){ .st{grid-template-columns:1fr} .st-item.on{transform:none} .st-stage{min-height:300px} }
@media (max-width:560px){ .sc3{grid-template-columns:1fr;justify-items:center} .sc-fly{flex-direction:row} .sc-items{width:100%} }
@media (prefers-reduced-motion:reduce){
  .sc,.sc *{animation:none!important;opacity:1!important;transform:none!important}
  .sc-field .typed{width:auto}
  .sc-prog b{width:100%}
}

/* ---------- presentación: todo un poco más grande ---------- */
.lp-top,.lp-hero,.lp-sec,.lp-final,.lp-foot{max-width:1240px}
.lp-brand .logo-pic img{height:38px}
.lp-nav button{font-size:15px;padding:8px 13px}
.lp-top .btn{font-size:15px;padding:10px 18px}
.lp-hero h1{font-size:clamp(40px,7vw,84px);max-width:14ch}
.lp-lead{font-size:clamp(17px,2.1vw,22px);max-width:60ch}
.btn.lg{padding:15px 28px;font-size:17px}
.lp-note{font-size:14px}
.lp-shots{max-width:1120px}
.lp-sec{padding-top:clamp(64px,11vh,120px)}
.lp-sec h2,.lp-final h2{font-size:clamp(32px,4.8vw,56px)}
.lp-sub{font-size:clamp(17px,1.6vw,20px);max-width:60ch;margin-bottom:40px}
.lp-tabs button{font-size:15px;padding:10px 18px}
.lp-tour-text h3{font-size:clamp(24px,2.8vw,32px)}
.lp-tour-text p{font-size:17px}
.lp-tour-text li{font-size:16px}
.cn-card{padding:18px 20px}
.cn-card b{font-size:17px}
.cn-card p{font-size:15px}
.cn-hub{max-width:460px}
.ft-text h3{font-size:clamp(24px,3vw,36px)}
.ft-text p{font-size:17px}
.ft-chip{font-size:14.5px;padding:10px 16px}
.lp-stats strong{font-size:50px}
.lp-stats span{font-size:15.5px}
.rv-card blockquote{font-size:16px}
.pr-main .amt{font-size:66px}
.pr-group li{font-size:15px}
.pr-gh b{font-size:16px}
.pr-steps li p{font-size:15px}
.lp-faq{max-width:840px}
.lp-faq summary{font-size:17px;padding:20px 0}
.lp-faq details p{font-size:16px}
.ask{max-width:840px}
.lp-final p{font-size:19px}
.lp-foot{font-size:14px}
@media (max-width:560px){
  .lp-brand .logo-pic img{height:30px}
  .lp-top .btn{font-size:14px;padding:8px 14px}
  .pr-main .amt{font-size:54px}
  .lp-stats strong{font-size:40px}
}
.lp-nav button{white-space:nowrap}
@media (max-width:1100px){ .lp-nav{display:none} }
.st{margin-top:40px}

/* ---------- presentación: barra superior de lado a lado ---------- */
.lp-top{max-width:none;margin:0;border-radius:0;padding:12px max(24px,calc((100% - 1240px) / 2 + 24px));
  background:color-mix(in srgb,var(--bg) 72%,transparent);box-shadow:0 1px 0 transparent}
.lp-top.scrolled{box-shadow:0 1px 0 var(--sep),0 10px 30px rgba(0,0,0,.06);background:color-mix(in srgb,var(--surface) 80%,transparent)}

/* ---------- presentación: portada con el logo en 3D ---------- */
.lp-hero{text-align:left}
.lp-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:32px;align-items:center}
.lp-hero-text h1{margin:0 0 20px;max-width:13ch}
.lp-hero-text .lp-lead{margin:0 0 30px}
.lp-hero-text .lp-cta{justify-content:flex-start}
.lp-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;font-size:15px;font-weight:600;letter-spacing:.01em;
  background:linear-gradient(90deg,var(--claude),#2b8cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-eyebrow svg{color:var(--claude-ic);width:18px;height:18px}
.l3d{position:relative;justify-self:center;width:clamp(200px,26vw,330px);aspect-ratio:1;perspective:1100px}
.l3d-float{position:absolute;inset:0;animation:l3dFloat 6s ease-in-out infinite}
@keyframes l3dFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.l3d-obj{--rx:0deg;--ry:0deg;position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(calc(16deg + var(--rx))) rotateY(calc(-26deg + var(--ry))) rotateZ(7deg);transition:transform .5s cubic-bezier(.22,.8,.3,1)}
.l3d-obj i{position:absolute;inset:0;border-radius:23.4%;background:linear-gradient(145deg,#2a2a33,#07070a)}
.l3d-obj i:first-child{box-shadow:0 30px 60px rgba(0,0,0,.35)}
.l3d-face{position:absolute;inset:0;width:100%;height:100%;border-radius:23.4%;transform:translateZ(0);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.l3d-shine{position:absolute;inset:0;border-radius:23.4%;transform:translateZ(.5px);pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.06) 32%,transparent 50%,rgba(255,255,255,.05) 80%)}
.l3d-shadow{position:absolute;left:14%;right:14%;bottom:-14%;height:14%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.28),transparent);filter:blur(6px);animation:l3dShadow 6s ease-in-out infinite}
@keyframes l3dShadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.86);opacity:.7}}
@media (max-width:900px){
  .lp-hero{text-align:center}
  .lp-hero-grid{grid-template-columns:1fr;gap:10px}
  .lp-hero-grid .l3d{order:-1;width:160px;margin-bottom:10px}
  .lp-hero-text h1{margin-inline:auto}
  .lp-hero-text .lp-lead{margin-inline:auto}
  .lp-hero-text .lp-cta{justify-content:center}
}
@media (prefers-reduced-motion:reduce){ .l3d-float,.l3d-shadow{animation:none} }

/* ---------- presentación: una IA que trabaja por ti ---------- */
.iq{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:left}
.iq::before{content:'';position:absolute;top:58px;left:6%;right:6%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--s1),var(--s2),var(--s3),var(--claude-ic));opacity:.35}
.iq-card{position:relative;background:var(--surface);border-radius:24px;padding:24px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;
  transition:transform .2s ease-out,box-shadow .2s ease-out}
@media (hover:hover) and (pointer:fine){ .iq-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} }
.iq-n{position:absolute;top:20px;right:22px;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.iq-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;color:#fff;box-shadow:0 10px 24px color-mix(in srgb,var(--c) 35%,transparent);margin-bottom:6px}
.iq-ic svg{width:26px;height:26px}
.iq-card b{font-family:var(--font-display);font-size:22px;letter-spacing:-.02em}
.iq-card p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.5}
.lp-rise.in .iq-card{animation:lpUp .55s cubic-bezier(.22,.8,.3,1) both}
.lp-rise.in .iq-card:nth-child(2){animation-delay:.08s}.lp-rise.in .iq-card:nth-child(3){animation-delay:.16s}.lp-rise.in .iq-card:nth-child(4){animation-delay:.24s}
@media (max-width:1000px){ .iq{grid-template-columns:repeat(2,1fr)} .iq::before{display:none} }
@media (max-width:560px){ .iq{grid-template-columns:1fr} }

/* ---------- presentación: flechas a los lados del banner ---------- */
.ft-wrap{position:relative}
.ft-arrow{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg),0 0 0 1px var(--sep);transform:translateY(-50%);
  transition:transform .15s ease-out,background .15s ease-out}
.ft-arrow svg{width:20px;height:20px}
.ft-arrow.prev{left:-24px}.ft-arrow.next{right:-24px}
.ft-arrow:active{transform:translateY(-50%) scale(.92)}
@media (hover:hover) and (pointer:fine){ .ft-arrow:hover{background:var(--fill)} .ft-arrow.prev:hover svg{transform:translateX(-2px)} .ft-arrow.next:hover svg{transform:translateX(2px)} }
.ft-arrow svg{transition:transform .15s ease-out}
.ft-nav{justify-content:center}
@media (max-width:1320px){ .ft-wrap{padding:0 28px} .ft-arrow.prev{left:-4px} .ft-arrow.next{right:-4px} }
@media (max-width:560px){ .ft-wrap{padding:0} .ft-arrow{top:auto;bottom:6px;transform:none;width:40px;height:40px} .ft-arrow:active{transform:scale(.92)} .ft-arrow.prev{left:14px} .ft-arrow.next{right:14px} }

/* ---------- cuestionario: barra de progreso moderna y tarjeta ---------- */
.wiz-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px}
.wiz-top-sp{width:120px}
.ob-prog{width:100%;max-width:560px;justify-self:center;display:flex;flex-direction:column;gap:8px}
.ob-prog-row{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.ob-prog-row .pct{color:var(--ink-2)}
.ob-track{height:6px;border-radius:6px;background:var(--fill-2);overflow:hidden;cursor:pointer}
.ob-track b{position:relative;display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--claude-ic));
  transition:width .6s cubic-bezier(.22,.8,.3,1);overflow:hidden}
.ob-track b::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:obShine 2.4s ease-in-out infinite}
@keyframes obShine{60%,100%{transform:translateX(100%)}}
.wiz-body{max-width:680px;margin-top:clamp(16px,4vh,40px);margin-bottom:24px;background:var(--surface);border-radius:28px;box-shadow:var(--shadow-lg);
  padding:clamp(26px,5vh,44px) clamp(20px,5vw,40px) 36px}
.wiz-body h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.035em}
@media (max-width:700px){
  .wiz-top{grid-template-columns:auto minmax(0,1fr);gap:14px}
  .wiz-top-sp{display:none}
  .wiz-body{margin:0;border-radius:0;box-shadow:none;background:transparent}
}
@media (prefers-reduced-motion:reduce){ .ob-track b::after{animation:none} .ob-track b{transition:none} }

/* ---------- opiniones: aviso en el inicio y nota de moderación ---------- */
.review-ask{display:flex;align-items:center;gap:16px;background:var(--surface);border-radius:var(--r-xl);padding:16px 20px;box-shadow:var(--shadow);margin-bottom:18px;
  background-image:radial-gradient(80% 140% at 0% 0%,color-mix(in srgb,var(--claude-ic) 12%,transparent),transparent 60%);animation:lpFade .35s ease-out}
.review-ask > img{width:40px;height:40px;flex:none}
.review-ask .grow{flex:1;min-width:0}
.review-ask b{display:block;font-size:15.5px}
.review-ask p{margin:2px 0 0;font-size:13.5px;color:var(--ink-2)}
.ask-stars{display:flex;gap:2px}
.ask-stars .rv-star svg{width:30px;height:30px;transition:transform .15s ease-out}
@media (hover:hover) and (pointer:fine){ .ask-stars .rv-star:hover svg{transform:scale(1.12)} }
@media (max-width:700px){ .review-ask{flex-wrap:wrap} .ask-stars{order:3} }
.rv-how{display:flex;gap:8px;align-items:flex-start;justify-content:center;max-width:720px;margin:18px auto 0;font-size:13.5px;color:var(--ink-3);line-height:1.5}
.rv-how svg{flex:none;margin-top:2px;color:var(--green)}

/* ---------- botón « Asistente » fijo abajo a la derecha ---------- */
.assist-fab{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:45;display:inline-flex;align-items:center;gap:10px;
  padding:8px 18px 8px 8px;border:0;border-radius:999px;cursor:pointer;font:inherit;font-size:15px;font-weight:600;color:#fff;background:var(--accent);
  box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 38%,transparent),0 2px 6px rgba(0,0,0,.12);
  transition:transform .18s cubic-bezier(.22,.8,.3,1),box-shadow .18s ease-out;animation:fabIn .4s cubic-bezier(.22,.8,.3,1) both}
.assist-fab img{width:32px;height:32px;border-radius:10px;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.assist-fab:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){ .assist-fab:hover{transform:translateY(-2px);box-shadow:0 14px 36px color-mix(in srgb,var(--accent) 45%,transparent),0 2px 6px rgba(0,0,0,.12)} }
@keyframes fabIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@media (max-width:900px){ .assist-fab{right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));font-size:14px;padding:6px 14px 6px 6px} .assist-fab img{width:28px;height:28px} }
@media (prefers-reduced-motion:reduce){ .assist-fab{animation:none} }
/* que el contenido del final de cada página no quede tapado por el botón */
.main:not(.full){padding-bottom:120px}

/* ---------- opiniones: cinta que avanza sola ---------- */
.rv-marquee{overflow:hidden;margin:0 -24px;padding:8px 0 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rv-belt{display:flex;gap:16px;width:max-content;padding-left:16px;animation:rvBelt var(--dur,40s) linear infinite}
.rv-marquee:hover .rv-belt,.rv-marquee:focus-within .rv-belt{animation-play-state:paused}
@keyframes rvBelt{to{transform:translateX(-50%)}}
.rv-belt .rv-card,.rv-static .rv-card{width:min(360px,80vw);flex:none;text-align:left}
.rv-static{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.rv-tr{align-self:flex-start;border:0;background:none;padding:0;margin-top:-4px;color:var(--accent-text);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
@media (prefers-reduced-motion:reduce){ .rv-belt{animation:none} .rv-marquee{overflow-x:auto} }

/* ---------- barra superior: « Opiniones » siempre a la vista ---------- */
.lp-nav button{display:inline-flex;align-items:center;gap:6px}


.lp-top .lp-mark{display:none;width:34px;height:34px}
@media (max-width:420px){
  .lp-top .lp-brand .logo-pic{display:none}
  .lp-top .lp-mark{display:block}
  .lp-top{gap:8px}
}


/* ---------- presentación: esquema de conexiones (tech) ---------- */
.cn-lines .ln{stroke:color-mix(in srgb,var(--c) 55%,transparent);stroke-width:.45;stroke-dasharray:1.1 1.1;stroke-linecap:round;
  animation:cnDash 2.4s linear infinite;transition:stroke-width .25s,stroke .25s}
@keyframes cnDash{to{stroke-dashoffset:-4.4}}
.lp-connect[data-hl="mail"] .ln[data-k="mail"],
.lp-connect[data-hl="cal"] .ln[data-k="cal"],
.lp-connect[data-hl="plat"] .ln[data-k="plat"],
.lp-connect[data-hl="docs"] .ln[data-k="docs"],
.lp-connect[data-hl="people"] .ln[data-k="people"],
.lp-connect[data-hl="rules"] .ln[data-k="rules"]{stroke:var(--c);stroke-width:.9;stroke-dasharray:none}
.cn-lines .pk{filter:drop-shadow(0 0 1.2px currentColor)}
.cn-orbit{transform-origin:50px 50px;animation:cnSpin 60s linear infinite}
.cn-orbit .ring{fill:none;stroke:var(--sep-strong);stroke-width:.25;stroke-dasharray:.5 1.8}
.cn-orbit .ring.in{stroke-dasharray:.3 1.2;opacity:.7}
@keyframes cnSpin{to{transform:rotate(360deg)}}
.cn-center{box-shadow:0 0 0 1px var(--sep),0 18px 50px rgba(0,0,0,.18)}
.cn-center::before,.cn-center::after{content:'';position:absolute;inset:-10%;border-radius:32%;border:1.5px solid color-mix(in srgb,var(--claude-ic) 45%,transparent);animation:cnPulse 3s ease-out infinite}
.cn-center::after{animation-delay:1.5s}
@keyframes cnPulse{from{transform:scale(.9);opacity:.9}to{transform:scale(1.35);opacity:0}}
.cn-node{cursor:default;transition:opacity .25s}
.cn-node .sq{transition:transform .25s cubic-bezier(.22,.8,.3,1),box-shadow .25s}
.cn-card{transition:transform .2s ease-out,box-shadow .2s ease-out,opacity .25s}
.lp-connect[data-hl="mail"] :is(.cn-card,.cn-node):not([data-k="mail"]),
.lp-connect[data-hl="cal"] :is(.cn-card,.cn-node):not([data-k="cal"]),
.lp-connect[data-hl="plat"] :is(.cn-card,.cn-node):not([data-k="plat"]),
.lp-connect[data-hl="docs"] :is(.cn-card,.cn-node):not([data-k="docs"]),
.lp-connect[data-hl="people"] :is(.cn-card,.cn-node):not([data-k="people"]),
.lp-connect[data-hl="rules"] :is(.cn-card,.cn-node):not([data-k="rules"]){opacity:.45}
.lp-connect[data-hl="mail"] :is(.cn-card,.cn-node)[data-k="mail"],
.lp-connect[data-hl="cal"] :is(.cn-card,.cn-node)[data-k="cal"],
.lp-connect[data-hl="plat"] :is(.cn-card,.cn-node)[data-k="plat"],
.lp-connect[data-hl="docs"] :is(.cn-card,.cn-node)[data-k="docs"],
.lp-connect[data-hl="people"] :is(.cn-card,.cn-node)[data-k="people"],
.lp-connect[data-hl="rules"] :is(.cn-card,.cn-node)[data-k="rules"]{opacity:1}
.lp-connect[data-hl] .cn-node:hover .sq,.lp-connect[data-hl="mail"] .cn-node[data-k="mail"] .sq,
.lp-connect[data-hl="cal"] .cn-node[data-k="cal"] .sq,
.lp-connect[data-hl="plat"] .cn-node[data-k="plat"] .sq,
.lp-connect[data-hl="docs"] .cn-node[data-k="docs"] .sq,
.lp-connect[data-hl="people"] .cn-node[data-k="people"] .sq,
.lp-connect[data-hl="rules"] .cn-node[data-k="rules"] .sq{transform:scale(1.1);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent),var(--shadow-lg)}
.cn-card{position:relative;overflow:hidden}
.cn-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);opacity:0;transition:opacity .25s}
.lp-connect[data-hl="mail"] .cn-card[data-k="mail"]::before,
.lp-connect[data-hl="cal"] .cn-card[data-k="cal"]::before,
.lp-connect[data-hl="plat"] .cn-card[data-k="plat"]::before,
.lp-connect[data-hl="docs"] .cn-card[data-k="docs"]::before,
.lp-connect[data-hl="people"] .cn-card[data-k="people"]::before,
.lp-connect[data-hl="rules"] .cn-card[data-k="rules"]::before{opacity:1}
.cn-brands{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.br-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 4px;border-radius:999px;background:var(--fill);font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.br-tile{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#fff;color:var(--c,#1d1d1f);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.08);flex:none}
.br-tile svg{width:15px;height:15px}
.br-tile b{font-size:10.5px;font-weight:800;letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){ .cn-lines .ln,.cn-orbit,.cn-center::before,.cn-center::after{animation:none} }

/* ---------- capturas: la del tema claro o la del oscuro ---------- */
.shot{display:block;width:100%;height:100%}
.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.shot img.shot-d{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .shot img.shot-l{display:none}
  :root:not([data-theme="light"]) .shot img.shot-d{display:block}
}
:root[data-theme="dark"] .shot img.shot-l{display:none}
:root[data-theme="dark"] .shot img.shot-d{display:block}

/* ---------- esquema: logos junto a cada nodo ---------- */
.cn-hub{margin-bottom:34px}

/* ---------- barra superior: menú con todas las secciones en pantallas pequeñas ---------- */
.lp-menu-btn{display:none}
.burger{position:relative;display:block;width:18px;height:14px}
.burger i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s cubic-bezier(.22,.8,.3,1),opacity .2s}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:6px}.burger i:nth-child(3){top:12px}
.lp-top.menu-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.lp-top.menu-open .burger i:nth-child(2){opacity:0}
.lp-top.menu-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1100px){
  .lp-menu-btn{display:inline-grid;order:3}
  .lp-top{position:sticky}
  .lp-nav{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:2px;margin:0;padding:10px 16px 16px;
    background:var(--surface);
    box-shadow:0 18px 40px rgba(0,0,0,.12),0 1px 0 var(--sep);opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;
    transition:opacity .22s ease-out,transform .25s cubic-bezier(.22,.8,.3,1),visibility 0s linear .25s}
  .lp-top.menu-open .lp-nav{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .22s ease-out,transform .25s cubic-bezier(.22,.8,.3,1),visibility 0s}
  .lp-nav button{justify-content:flex-start;width:100%;font-size:17px;padding:13px 12px;border-radius:12px;color:var(--ink)}
}

/* ---------- opiniones en el móvil: fila lateral que pasa sola ---------- */
@media (max-width:700px){
  .rv-static{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:6px 16px 14px;gap:14px}
  .rv-static::-webkit-scrollbar{display:none}
  .rv-static .rv-card{scroll-snap-align:center;width:84vw}
}
/* logo 3D en modo oscuro: borde y resplandor para que no se pierda sobre el negro */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .l3d-obj i{background:linear-gradient(145deg,#3b3b46,#16161d)}
  :root:not([data-theme="light"]) .l3d-face{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),0 0 60px rgba(217,119,87,.18)}
}
:root[data-theme="dark"] .l3d-obj i{background:linear-gradient(145deg,#3b3b46,#16161d)}
:root[data-theme="dark"] .l3d-face{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),0 0 60px rgba(217,119,87,.18)}
@media (max-width:1100px){ .lp-nav button:hover{background:var(--fill)} }
/* clave de IA dentro del cuestionario */
.key-lbl{display:inline-flex;align-items:center;gap:8px}
.key-row{display:flex;gap:8px;align-items:center}
.key-row .inp{flex:1;min-width:0}
.key-inline .key-guide{margin:4px 0 6px;padding:12px 14px;border-radius:12px;background:var(--fill);animation:lpFade .25s ease-out}
/* la IA está escribiendo: solo tres puntos, sin texto */
.ai-dots{display:inline-flex;gap:4px;align-items:center;height:18px}
.ai-dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:lpcDot 1s infinite ease-in-out}
.ai-dots i:nth-child(2){animation-delay:.15s}.ai-dots i:nth-child(3){animation-delay:.3s}

/* ---------- redes sociales ---------- */
.social{display:flex;gap:10px}
.social-link{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--surface);color:var(--ink-2);box-shadow:var(--shadow),0 0 0 1px var(--sep);
  transition:transform .18s cubic-bezier(.22,.8,.3,1),color .18s,box-shadow .18s}
.social-link svg{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){ .social-link:hover{transform:translateY(-3px);color:var(--c,var(--ink));box-shadow:var(--shadow-lg),0 0 0 1px var(--sep);text-decoration:none} }
.social-link:active{transform:scale(.94)}
.lp-final-social{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:34px}
.lp-final-social > span,.lp-follow > span{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.lp-follow{display:flex;align-items:center;gap:12px}
.lp-follow .social-link{width:36px;height:36px;border-radius:11px}
.lp-follow .social-link svg{width:17px;height:17px}

/* ---------- capturas en el modo elegido (por defecto, el contrario al de la página) ---------- */
html .lp.shots-dark .shot img.shot-l{display:none}
html .lp.shots-dark .shot img.shot-d{display:block}
html .lp.shots-light .shot img.shot-d{display:none}
html .lp.shots-light .shot img.shot-l{display:block}
.bf-top{position:relative}
.shot-toggle{display:inline-flex;gap:2px;padding:2px;border-radius:999px;background:var(--fill);flex:none}
.shot-toggle button{display:grid;place-items:center;width:26px;height:22px;border:0;border-radius:999px;background:none;color:var(--ink-3);cursor:pointer;transition:background .2s,color .2s}
.shot-toggle button svg{width:13px;height:13px}
.shot-toggle button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.bf-img .shot img{transition:opacity .3s ease-out}

/* ---------- accueil : semaines qui glissent sur le côté ---------- */
.week-w .widget-head{align-items:center}
.wk-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.wk-range{font-size:13px;color:var(--ink-2);font-weight:500}
.wk-nav{display:flex;align-items:center;gap:2px}
.wk-nav .link{margin-left:8px}
.wk-arrow{width:30px;height:30px}
.wk-arrow:disabled{opacity:.3;pointer-events:none}
.wk-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;flex:1;align-items:stretch}
.wk-track::-webkit-scrollbar{display:none}
.wk-page{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column}
.wk-page .weekstrip{flex:1}
@media (max-width:560px){ .wk-arrow{display:none} }

/* ---------- Eliminados : borrar para siempre ---------- */
.purge-btn{color:var(--red);margin-left:4px}
.purge-btn:hover{background:color-mix(in srgb,var(--red) 12%,transparent)}

/* ---------- esquema de conexiones: constelación asimétrica ---------- */
.cn-hub{overflow:visible;isolation:isolate}
.cn-hub::before{content:'';position:absolute;inset:-8%;z-index:-1;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 16%,transparent) 1px,transparent 1.3px);background-size:16px 16px;
  -webkit-mask-image:radial-gradient(closest-side at 47% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(closest-side at 47% 50%,#000 30%,transparent 100%)}
.cn-lines .ln{fill:none}
.cn-orbit{transform-origin:47px 50px}
.cn-orbit.o2{animation-duration:85s;animation-direction:reverse}
.cn-orbit .ring{stroke-dasharray:.4 2.2}
.cn-node{transform:translate(-50%,calc(var(--sz,52px) / -2))}
.cn-node .sq{width:var(--sz,52px);height:var(--sz,52px);border-radius:calc(var(--sz,52px) * .3);position:relative;z-index:1}
.cn-node .sq svg{width:calc(var(--sz,52px) * .46);height:calc(var(--sz,52px) * .46)}
.cn-node small{position:relative;z-index:1}
.cn-sat{position:absolute;left:50%;top:calc(var(--sz,52px) / 2);width:0;height:0;
  transform:translate(var(--x),var(--y));transition:transform .45s cubic-bezier(.22,.8,.3,1)}
.cn-sat .br-tile{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 22%,rgba(0,0,0,.06)),0 4px 12px rgba(0,0,0,.12);
  animation:cnBob 4.2s ease-in-out infinite;animation-delay:var(--d)}
.cn-sat .br-tile svg{width:14px;height:14px}
.cn-sat .br-tile b{font-size:9.5px}
.cn-tether{position:absolute;left:0;top:0;height:1px;width:calc(var(--r) - var(--sz,52px) / 2 - 16px);transform-origin:0 50%;
  transform:rotate(calc(var(--a) + 180deg)) translateX(14px);
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--c) 55%,transparent) 0 3px,transparent 3px 6px);opacity:.7}
@keyframes cnBob{0%,100%{translate:0 0}50%{translate:0 -4px}}
.cn-node:hover .cn-sat,
.lp-connect[data-hl="mail"] .cn-node[data-k="mail"] .cn-sat,.lp-connect[data-hl="cal"] .cn-node[data-k="cal"] .cn-sat,
.lp-connect[data-hl="plat"] .cn-node[data-k="plat"] .cn-sat,.lp-connect[data-hl="docs"] .cn-node[data-k="docs"] .cn-sat,
.lp-connect[data-hl="people"] .cn-node[data-k="people"] .cn-sat,.lp-connect[data-hl="rules"] .cn-node[data-k="rules"] .cn-sat{
  transform:translate(calc(var(--x) * 1.14),calc(var(--y) * 1.14))}
}
@media (prefers-reduced-motion:reduce){ .cn-sat .br-tile{animation:none} }
.cn-center{width:22%}
.cn-fit{position:relative;width:100%;max-width:460px;height:460px;margin:0 auto 34px}
.lp-connect .cn-hub{position:absolute;left:0;top:0;width:460px;height:460px;max-width:none;aspect-ratio:auto;margin:0;transform-origin:0 0}
.cn-hub .cn-node small{font-size:12.5px;max-width:none;white-space:nowrap}

/* ---------- preguntas del día y paquetes extra ---------- */
.q-line{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--ink-2)}
.q-line.out{color:var(--red-text)}
.q-buy{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--accent-text);cursor:pointer}
.q-buy:hover{text-decoration:underline}
.cl-foot{display:flex;justify-content:center;align-items:center;gap:6px 14px;flex-wrap:wrap}
.chat-q{padding:4px 12px 8px;text-align:center}
.chat-q .q-line{justify-content:center}
.q-notice{margin-top:10px;padding:14px 16px;border-radius:var(--r-lg);background:var(--claude-soft);border:1px solid color-mix(in srgb,var(--claude-ic) 30%,transparent)}
.q-notice-t{display:flex;align-items:center;gap:8px;color:var(--ink)}
.q-notice-t svg{width:18px;height:18px;color:var(--claude-ic);flex:none}
.q-notice p{margin:6px 0 12px;font-size:14px;color:var(--ink-2);line-height:1.5}
.q-notice-a{display:flex;gap:8px;flex-wrap:wrap}
.q-packs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 4px}
.q-pack{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;border-radius:var(--r-lg);border:1px solid var(--sep-strong);background:var(--surface);cursor:pointer;text-align:left;font:inherit;color:var(--ink);transition:border-color .15s,transform .15s}
.q-pack:hover{border-color:var(--claude-ic);transform:translateY(-1px)}
.q-pack:disabled{opacity:.6;cursor:wait}
.q-pack b{font-size:16px}
.q-pack .q-price{font-size:22px;font-weight:700;letter-spacing:-.02em}
.q-pack small{font-size:12px;color:var(--ink-2)}
@media (max-width:480px){ .q-packs{grid-template-columns:1fr} }

/* ---------- panel del creador (#/admin) ---------- */
.adm .page-head .eyebrow svg{width:13px;height:13px;vertical-align:-2px}
.adm-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:4px 0 20px;padding-bottom:2px}
.adm-tabs::-webkit-scrollbar{display:none}
.adm-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;border:1px solid var(--sep-strong);background:var(--surface);color:var(--ink-2);font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.adm-tab svg{width:16px;height:16px}
.adm-tab:hover{color:var(--ink)}
.adm-tab.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.adm-alerts{display:grid;gap:8px;margin-bottom:18px}
.adm-alert{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r-md);font-size:14px;background:var(--fill)}
.adm-alert svg{width:17px;height:17px;flex:none}
.adm-alert.ok{background:var(--green-soft);color:var(--green-text)}
.adm-alert.warn{background:var(--orange-soft);color:var(--orange-text)}
.adm-alert.info{background:var(--accent-soft);color:var(--accent-text)}
.adm-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:18px}
.adm-kpi{background:var(--surface);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--shadow)}
.adm-kpi-h{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.adm-kpi-h svg{width:15px;height:15px}
.adm-kpi-v{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.adm-kpi-s{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.adm-kpi.ok .adm-kpi-v{color:var(--green-text)}
.adm-kpi.warn .adm-kpi-v{color:var(--orange-text)}
.adm-grid{margin-bottom:18px}
.adm-card{min-width:0}
.adm-bars{display:flex;align-items:flex-end;gap:3px;height:150px;padding-top:6px}
.adm-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;min-width:0}
.adm-bar i{display:block;width:100%;max-width:26px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--claude-ic),var(--claude))}
.adm-bar small{font-size:10px;color:var(--ink-3)}
.adm-table-wrap{overflow-x:auto;margin:0 -4px}
.adm-table{width:100%;border-collapse:collapse;font-size:14px}
.adm-table th{text-align:left;font-size:12px;font-weight:600;color:var(--ink-2);padding:8px 10px;border-bottom:1px solid var(--sep);white-space:nowrap}
.adm-table td{padding:10px;border-bottom:1px solid var(--sep);vertical-align:top}
.adm-table tr:last-child td{border-bottom:0}
.adm-tag{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--fill);color:var(--ink-2);white-space:nowrap}
.adm-tag.ok{background:var(--green-soft);color:var(--green-text)}
.adm-tag.warn{background:var(--orange-soft);color:var(--orange-text)}
.adm-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.adm-toolbar input{flex:1;max-width:420px}
.adm-actions{display:flex;gap:6px;flex-wrap:wrap}
.adm-linkrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.adm-reviews{display:grid;gap:12px}
.adm-review p{margin:8px 0 10px;line-height:1.5}
.adm-review-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adm-review-h .grow{flex:1}
.adm-stars{color:#f5a623;letter-spacing:1px}
.adm-social{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:18px}
.adm-net-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.adm-net-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--fill);color:var(--c,var(--ink));flex:none}
.adm-net-ic svg{width:20px;height:20px}
.adm-net-n{font-size:22px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.adm-net-n small{display:block;font-size:12px;font-weight:600}
.adm-net-n small.up{color:var(--green-text)}
.adm-net-n small.down{color:var(--red-text)}
.adm-net .adm-bars{height:80px}
.adm-net-f{display:flex;gap:8px;margin-top:10px}
.adm-net-f input{flex:1;min-width:0}
.adm-bio pre{white-space:pre-wrap;font:inherit;font-size:13.5px;color:var(--ink-2);margin:4px 0 0}
@media (max-width:700px){ .adm-kpis{grid-template-columns:1fr 1fr} .adm-kpi-v{font-size:22px} }