/* Graphican Studio skin — loaded last in every editor (Design, Slides, Video, PDF).
   A calm, neutral studio look (as in Butter / CapCut web): near-black surfaces, one quiet border,
   white primary buttons, an icon rail with labels on the left, a floating toolbar over the canvas.
   Brand violet stays only where it means something: selection, focus, the download button's edge.
   Dark is the default; the moon / sun button still switches to the neutral light version. */

:root, [data-theme="light"] {
  --canvas:#f2f2f2; --bg:#ffffff; --bg2:#f3f3f3; --bg3:#e8e8e8; --bg4:#dcdcdc;
  --text:#111111; --muted:#6f6f6f; --dim:#a3a3a3; --line:#ebebeb; --line2:#dedede;
  --acc:#6d56fa; --acc2:#8f7bff; --acc-soft:rgba(109,86,250,.10);
  --pri:#111111; --pri-fg:#ffffff; --pri-hover:#2a2a2a;
  --rail:#f7f7f7; --dot:transparent; --grad:var(--pri);
  --glow:none; --panel-shadow:none; --shadow:0 12px 32px -14px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.06);
  --glass:#ffffff; --glass-line:#e4e4e4; --glass-text:#111111;
  --st-edge:linear-gradient(100deg, #b7a9ff, #6d56fa 55%, #9f8cff);
}
[data-theme="dark"] {
  --canvas:#0a0a0a; --bg:#121212; --bg2:#1b1b1b; --bg3:#252525; --bg4:#303030;
  --text:#ededed; --muted:#8f8f8f; --dim:#5e5e5e; --line:#1f1f1f; --line2:#2b2b2b;
  --acc:#8b76ff; --acc2:#a497ff; --acc-soft:rgba(139,118,255,.14);
  --pri:#ffffff; --pri-fg:#0a0a0a; --pri-hover:#e6e6e6;
  --rail:#0e0e0e; --dot:transparent; --grad:var(--pri);
  --glow:none; --panel-shadow:none; --shadow:0 18px 40px -16px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.5);
  --glass:#151515; --glass-line:#2a2a2a; --glass-text:#ededed;
}
html, body { background:var(--canvas); }
::selection { background:rgba(139,118,255,.3); }
* { scrollbar-color:var(--bg4) transparent; }

/* ---------- buttons: white primary, soft secondary, quiet icons ---------- */
.btn-primary, .btn-x, .ps .btn.full[data-a^="export"], .ui-start-actions button:first-child, .vempty .btn-x {
  background:var(--pri) !important; color:var(--pri-fg) !important; box-shadow:none !important; border-radius:10px !important; font-weight:600 !important; }
.btn-primary:hover:not(:disabled), .btn-x:hover:not(:disabled), .ps .btn.full[data-a^="export"]:hover, .ui-start-actions button:first-child:hover { background:var(--pri-hover) !important; filter:none !important; }
/* the one download button in each header: dark surface with a thin brand edge */
#ed-export, #v-export, #pe-save {
  background:linear-gradient(var(--bg), var(--bg)) padding-box, var(--st-edge, linear-gradient(100deg, #b7a9ff, #8b76ff 55%, #c9bdff)) border-box !important;
  border:1.5px solid transparent !important; color:var(--text) !important; box-shadow:none !important; border-radius:10px !important; }
#ed-export:hover, #v-export:hover, #pe-save:hover:not(:disabled) { background:linear-gradient(var(--bg2), var(--bg2)) padding-box, var(--st-edge, linear-gradient(100deg, #b7a9ff, #8b76ff 55%, #c9bdff)) border-box !important; }
.btn, .btn-g, .ui-start-actions button, .chip { background:var(--bg2); border:1px solid var(--line2) !important; color:var(--text); box-shadow:none; }
.btn:hover, .btn-g:hover, .ui-start-actions button:hover, .chip:hover { background:var(--bg3); }
.btn.acc { background:var(--bg2); color:var(--text); }
.ib:hover:not(:disabled) { background:var(--bg2); }
.ib.on, .ib[aria-pressed="true"] { background:var(--bg3); color:var(--text); }
input[type="range"] { accent-color:var(--text); }
.menu { background:var(--bg) !important; color:var(--text) !important; border:1px solid var(--line2) !important; border-radius:12px; box-shadow:var(--shadow) !important; }
.menu > button:hover, .menu .mi:hover { background:var(--bg2) !important; color:var(--text) !important; }

/* =========================== Design + Slides editor =========================== */
.stage { background:var(--canvas); background-image:none; }
.stage::before, .lp::before, .rp::before { display:none !important; }
.lp, .rp { background:var(--bg); }
.logo { font-size:17px; }
.orb { box-shadow:none; }
.mode-sw { background:none !important; padding:0 !important; gap:18px; margin:2px 14px 12px !important; border-bottom:1px solid var(--line); border-radius:0 !important; justify-content:flex-start; }
.mode-sw a { flex:none !important; padding:6px 0 9px !important; border-radius:0 !important; background:none !important; box-shadow:none !important; color:var(--dim) !important; font-size:13px !important; font-weight:600; margin-bottom:-1px; border-bottom:2px solid transparent; }
.mode-sw a:hover { color:var(--text) !important; }
.mode-sw a.on { color:var(--text) !important; border-bottom-color:var(--text); }
.file-name { font-size:14px; font-weight:600; }
.ps-h { font-size:12.5px !important; font-weight:650 !important; letter-spacing:0 !important; text-transform:none !important; color:var(--text) !important; }
.ps-l { letter-spacing:0 !important; text-transform:none !important; font-size:11.5px !important; color:var(--muted); }
.ps { border-color:var(--line); }
.nf, .stepper, select, .rp-body input[type="text"], .rp-body input[type="number"] { background:var(--bg2); border-color:var(--line2); }
.nf:focus-within { border-color:var(--text); box-shadow:none; }
.rp-tabs button.on { background:var(--bg3) !important; color:var(--text) !important; }
.tp-chips button.on { background:var(--pri) !important; color:var(--pri-fg) !important; box-shadow:none !important; }
.ly.on { background:var(--bg2); box-shadow:inset 2px 0 0 var(--text); }
.ly.frame .li { color:var(--muted); }
.ed-quick-actions button { background:var(--bg2); border:1px solid var(--line) !important; }
.ed-quick-actions button::before { background:var(--bg3); }
.ed-quick-actions button::after { background:var(--text); }
.ed-quick-actions button:hover { background:var(--bg3); border-color:var(--line2) !important; }
.ed-quick b { letter-spacing:0 !important; text-transform:none !important; font-size:12.5px !important; color:var(--text) !important; }
.hint, .hint.ui-start { background:var(--bg); border:1px solid var(--line2); box-shadow:var(--shadow); }

/* the tool dock and context bar: one flat bar, the active tool is simply lighter */
.dock, .ctxbar { background:var(--bg) !important; border:1px solid var(--line2) !important; border-radius:14px !important; color:var(--text) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:var(--shadow) !important; }
.dock .tool, .ctxbar .tool { color:var(--muted) !important; border-radius:10px !important; }
.dock .tool:hover, .ctxbar .tool:hover { background:var(--bg2) !important; color:var(--text) !important; }
.dock .tool.on, .ctxbar .tool.ok { background:var(--bg3) !important; color:var(--text) !important; box-shadow:none !important; }
.dock .sep, .ctxbar .sep { background:var(--line2) !important; }
.ctxbar .ctx-lbl { color:var(--muted) !important; } .ctxbar .ctx-v { color:var(--text) !important; }
.ctxbar .ctx-num { background:var(--bg2) !important; border-color:var(--line2) !important; color:var(--text) !important; }
.btn-present { background:var(--pri) !important; color:var(--pri-fg) !important; box-shadow:none !important; border-radius:10px !important; }
.mob-top button.dl { background:var(--pri) !important; color:var(--pri-fg) !important; box-shadow:none !important; }
.ppt-bar { background:var(--bg); border-top-color:var(--line); }
.ppt-sl.on img { box-shadow:0 0 0 2px var(--text) !important; }

@media (min-width:901px) {
  :root { --lw:344px; --rw:296px; }
  @media (max-width:1280px) { :root { --lw:300px; --rw:264px; } }
  .app { padding:10px; gap:10px; }
  .lp, .rp { border:1px solid var(--line) !important; border-radius:16px; box-shadow:none !important; overflow:hidden; }
  .stage { border-radius:16px; box-shadow:none; border:1px solid var(--line); }

  /* left: an icon rail with labels, the open section beside it */
  .lp { min-width:290px; display:grid; grid-template-columns:72px minmax(0, 1fr); grid-template-rows:auto auto auto minmax(0, 1fr); }
  .lp.lp-wide { width:max(var(--lw), 420px); }
  .lp-head { grid-column:2; grid-row:1; padding:14px 14px 8px; }
  .mode-sw { grid-column:2; grid-row:2; }
  .lp-file { grid-column:2; grid-row:3; padding:0 14px 10px; }
  .lp-body { grid-column:2; grid-row:4; padding:4px 12px 40px; }
  .lp-tabs { grid-column:1; grid-row:1 / -1; display:flex !important; flex-direction:column; gap:4px; margin:0 !important; padding:12px 6px !important;
    border:0 !important; border-right:1px solid var(--line) !important; border-radius:0 !important; background:var(--rail) !important; overflow-y:auto; scrollbar-width:none; }
  .lp-tabs button { grid-column:auto !important; flex:none !important; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    width:100%; height:auto !important; min-height:60px; padding:8px 2px !important; border-radius:12px !important; background:none !important; box-shadow:none !important;
    color:var(--muted) !important; font-size:10.5px !important; font-weight:600; line-height:1.15; text-align:center; white-space:normal; letter-spacing:0; }
  .lp-tabs button::before { content:""; width:22px; height:22px; flex:none; background:currentColor; -webkit-mask:var(--ti) center / contain no-repeat; mask:var(--ti) center / contain no-repeat; }
  .lp-tabs button:hover { color:var(--text) !important; background:var(--bg2) !important; }
  .lp-tabs button.on { color:var(--text) !important; background:var(--bg3) !important; }
  .lp-tabs [data-tab="layers"] { --ti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E"); }
  .lp-tabs [data-tab="add"] { --ti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }
  .lp-tabs [data-tab="templates"] { --ti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3'/%3E%3Cpath d='M3.5 9.5h17M9.5 9.5v11'/%3E%3C/svg%3E"); }
  .lp-tabs [data-tab="stock"] { --ti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m20.5 15.5-5-5-9 9'/%3E%3C/svg%3E"); }
  .lp-tabs [data-tab="org"] { --ti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.5V8l8-4.5L20 8v12.5'/%3E%3Cpath d='M9 20.5v-6h6v6M3 20.5h18M8 10h.01M12 10h.01M16 10h.01'/%3E%3C/svg%3E"); }
  .lp-tabs [data-tab="kit"] { --ti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='7.5' r='4'/%3E%3Crect x='13' y='13' width='7.5' height='7.5' rx='1.5'/%3E%3Cpath d='M17 3.5 21 10h-8z'/%3E%3Cpath d='M4.5 13.5h6v7h-6z'/%3E%3C/svg%3E"); }

  /* top: undo / redo, zoom, theme, help and download float over the canvas as one pill */
  .rp-head { position:fixed; z-index:40; top:20px; left:calc((max(var(--lw), 290px) + 100vw - var(--rw)) / 2); transform:translateX(-50%);
    width:auto; height:48px; padding:0 6px 0 8px; gap:4px !important; border:1px solid var(--line2) !important; border-radius:14px; background:var(--bg); box-shadow:var(--shadow); }
  .rp-head .grow { flex:none; width:1px; height:22px; margin:0 4px; background:var(--line2); }
  .rp-head .zoom { background:none !important; font-weight:600; }
  .rp-head .ib { width:32px !important; height:32px !important; }
  #ed-export { height:34px !important; padding:0 14px !important; margin-left:4px; }
  .rp-body { padding-top:6px; }
  .hint.ui-start { top:84px; }
  body[data-mode="ppt"] .hint.ui-start { top:84px; }
}

/* ================================ Video editor ================================ */
.vapp { background:var(--canvas); }
.vh { border-bottom:0; height:58px; }
.vh .vname { font-size:14px; }
.vstage { background:var(--canvas); }
.vstage canvas { box-shadow:none; border-radius:4px; }
.vtr { border-top:1px solid var(--line); background:var(--canvas); }
.vtr .play { background:var(--text); color:var(--canvas); }
.vtr .ib.tog.on, .vtr .ib.on { color:var(--text) !important; background:var(--bg3) !important; border-color:var(--line2) !important; }
.vtr .ib:not(:disabled):hover { border-color:var(--line2) !important; }
.vtl, .vtl-tracks { background:var(--bg); border-color:var(--line); }
.ptools .tb.on { background:var(--bg3) !important; box-shadow:none !important; }
.vstart { background:var(--canvas) !important; }
.vt-start-cta { background:var(--bg2) !important; border:1px solid var(--line2) !important; box-shadow:none !important; }
@media (min-width:1024px) {
  .vmain { padding:0 10px 0; gap:10px; background:var(--canvas); }
  .vrail { width:76px; padding:10px 6px; border:1px solid var(--line) !important; border-radius:16px; background:var(--rail); margin:0 0 10px; }
  .vrail .tb { font-size:10.5px; border-radius:12px; color:var(--muted); gap:5px; padding:8px 4px !important; }
  .vrail .tb:hover { background:var(--bg2); color:var(--text); }
  .vrail .tb.on { background:var(--bg3) !important; color:var(--text) !important; box-shadow:none !important; }
  .vpanel { border:1px solid var(--line) !important; border-radius:16px; background:var(--bg) !important; margin:0 0 10px; }
  .vtl { margin:0 10px 10px; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
  .vtl-tracks { border-right:1px solid var(--line); }
}

/* ================================= PDF editor ================================= */
.body { background-color:var(--canvas) !important; background-image:none !important; }
.drop { border:1px dashed var(--line2) !important; background:var(--bg) !important; box-shadow:none !important; }
.drop:hover, .drop.over { border-color:var(--muted) !important; background:var(--bg2) !important; box-shadow:none !important; }
.drop-ic { background:var(--bg3) !important; color:var(--text) !important; box-shadow:none !important; }
.rail { background:var(--rail) !important; box-shadow:inset -1px 0 0 var(--line) !important; }
.rb:hover { background:var(--bg2) !important; }
.rb.on { background:var(--bg3) !important; color:var(--text) !important; box-shadow:none !important; }
.tag { background:var(--bg3) !important; color:var(--muted) !important; }
.zoomg { background:var(--bg2) !important; }
.th.on canvas, .th.on img { box-shadow:0 0 0 2px var(--text) !important; }
/* the PDF tool dock follows the same flat bar as the design editor */
.dock .tool span { color:var(--muted) !important; }
.dock .tool.on span { color:var(--text) !important; }

/* iPad landscape / small laptops: narrower panels, an icon-only tool dock that always fits the canvas */
@media (min-width:901px) and (max-width:1180px) {
  :root { --lw:290px; --rw:248px; }
  .dock { max-width:calc(100% - 16px); overflow-x:auto; scrollbar-width:none; }
  .dock .tool .tl { display:none; }
  .dock .tool { min-width:38px !important; min-height:40px !important; height:40px !important; }
  .hint.ui-start { width:min(420px, calc(100% - 24px)); }
}

/* ===================== Video panels: calm, ordered controls ===================== */
/* tabs read like Butter's: plain words, the open one underlined */
.vapp .stabs, .sheet .stabs { background:var(--bg) !important; padding:0 !important; gap:18px !important; border-radius:0 !important; border-bottom:1px solid var(--line2); margin:0 0 14px !important; }
.vapp .stabs button, .sheet .stabs button { flex:none !important; height:38px !important; padding:0 !important; border-radius:0 !important; background:none !important; color:var(--dim) !important; font-size:13px !important; margin-bottom:-1px; border-bottom:2px solid transparent; }
.vapp .stabs button:hover { color:var(--text) !important; }
.vapp .stabs button.on, .sheet .stabs button.on { color:var(--text) !important; border-bottom-color:var(--text); }
/* the docked sheet repeats the panel's title — show it once */
.sheet.dock.tabbed > h3 { display:none; }
.sheet h3 .done { background:var(--pri) !important; color:var(--pri-fg) !important; }
/* labels: small and muted; a slider's value sits on the label's line, the slider runs full width below */
.sheet .lbl { font-size:12px; font-weight:500; color:var(--muted); margin:16px 0 8px; }
.sheet .lbl + .rowv { position:relative; }
.sheet .lbl + .rowv > b { position:absolute; right:0; top:-27px; min-width:0 !important; padding:2px 8px; border-radius:6px; background:var(--bg3); color:var(--text); font-size:11.5px; font-weight:600; }
.sheet input[type=range], .vapp input[type=range] { accent-color:#e6e6e6 !important; height:18px; }
.sheet textarea, .sheet input[type=text], .sheet input[type=number], .sheet input[type=search], .sheet select { background:var(--bg2) !important; border:1px solid var(--line2) !important; border-radius:10px; }
.sheet textarea:focus, .sheet input:focus, .sheet select:focus { border-color:#7a7a7a !important; }
/* numbers in a row: X · Y · rotation, as in Figma / Butter */
.nfs { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .nfs.n3 { grid-template-columns:1fr 1fr 1fr; }
.nfx { display:flex; align-items:center; gap:6px; height:38px; padding:0 10px; border:1px solid var(--line2); border-radius:10px; background:var(--bg2); cursor:text; }
.nfx:focus-within { border-color:#7a7a7a; }
.nfx span { font-size:12px; font-weight:600; color:var(--dim); flex:none; }
.sheet .nfx input, .nfx input { flex:1; min-width:0; width:100%; height:100%; padding:0 !important; border:0 !important; background:none !important; font:600 13px/1 Inter, sans-serif; color:var(--text); font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.nfx input::-webkit-outer-spin-button, .nfx input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.nfx i { font-style:normal; font-size:12px; color:var(--dim); flex:none; }
/* choices: the selected one is simply lighter, no violet rings */
.opt { background:var(--bg2); border:1px solid var(--line2) !important; font-weight:550 !important; }
.opt:not([style*="background"]):hover { background:var(--bg3); }
.opt.on { border-color:#d9d9d9 !important; }
.opt.on:not([style*="background"]) { background:var(--bg4); color:var(--text); }
.seg { background:var(--bg2) !important; border:1px solid var(--line2); }
.seg button.on { background:var(--bg4) !important; color:var(--text) !important; box-shadow:none !important; }
.styles button { background:var(--bg2) !important; border:1px solid var(--line2) !important; }
.styles button.on, .styles.lab button.on { border-color:#d9d9d9 !important; box-shadow:none !important; }
.sw.on { border-color:var(--bg) !important; box-shadow:0 0 0 2px #e6e6e6 !important; }
.fr { border:1px solid var(--line2) !important; }
.fr.on { border-color:#d9d9d9 !important; background:var(--bg3) !important; }
.fcats button { background:var(--bg2) !important; border:1px solid var(--line2); }
.fcats button.on { background:var(--pri) !important; color:var(--pri-fg) !important; border-color:var(--pri); }
.vf-b.on, .vfmt .on { background:var(--bg4) !important; color:var(--text) !important; box-shadow:none !important; border-color:#d9d9d9 !important; }
.vfmt > * { border-color:var(--line2) !important; }
details.capmore > summary { color:var(--muted); font-size:12.5px; }
.agrp > b { display:block; margin:18px 0 0; font-size:13px; color:var(--text); }
.note { color:var(--dim) !important; font-size:12px !important; line-height:1.5; }

/* ===================== Design editor: one calm selected state ===================== */
[data-theme] .btn.acc, .btn.acc { background:var(--bg4) !important; color:var(--text) !important; box-shadow:inset 0 0 0 1px var(--muted) !important; }
.fx-pre, .anim-b, .pre { border-color:var(--line2) !important; }
.fx-pre.on, .anim-b.on, .pre.on { border-color:var(--text) !important; box-shadow:none !important; background:var(--bg3) !important; }
.anim-b i { background:var(--muted) !important; }
.bpop-g button.on, .gs-row.on, .fr.on { background:var(--bg3) !important; color:var(--text) !important; box-shadow:inset 0 0 0 1px var(--muted) !important; }
.kit-pals button.on, .kit-stys button.on, .kit-mk button.on, .kit-types button.on { border-color:var(--text) !important; box-shadow:none !important; color:var(--text) !important; background:var(--bg3) !important; }
.ctool.on, .fpk-tabs button.on { background:var(--pri) !important; border-color:var(--pri) !important; color:var(--pri-fg) !important; }
.shcol button.on { box-shadow:0 0 0 2px var(--bg2), 0 0 0 4px var(--text) !important; }
.opad i { background:var(--text) !important; border-color:var(--bg) !important; }
.sl b, .sl output, .sl span:last-child { font-variant-numeric:tabular-nums; }
.tp-apply, .deck-all:hover { background:var(--pri) !important; color:var(--pri-fg) !important; border-color:var(--pri) !important; }