:root{
  --navy:#1F2B4D;--fg:#2D3748;--muted:#5E6678;--body:#334155;--green:#217A4C;--green2:#238C55;--green-dk:#1B5E3C;
  --lime:#d4ff50;--ink:#101312;--border:#E5E7EB;--bg:#F6F7F9;--card:#fff;
  --pos-bg:#F6FBF8;--pos-bd:#BBF7D0;--med-bg:#EEF1FC;--med-bd:#DCE3F9;--med:#4C5FD5;
  --warn-bg:#FFF9EB;--warn-bd:#F6D37A;--warn:#92400E;--neg-bg:#FEF2F2;--neg-bd:#FECACA;--neg:#B91C1C;--pink:#DB2777;
  --radius:10px;--shadow:0 1px 2px rgba(16,19,18,.06),0 1px 8px rgba(16,19,18,.04);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Noto Sans KR",Arial,sans-serif;color:var(--fg);background:var(--bg)}
a{color:var(--green);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:22px;margin:0 0 4px;color:var(--navy)}h2{font-size:16px;margin:0 0 12px;color:var(--navy)}h3{font-size:14px;margin:0 0 8px;color:var(--navy)}
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:var(--ink);color:#c9d0c8;padding:18px 12px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;color:#fff;font-weight:800;letter-spacing:.2px}
.brand img{width:42px;height:42px;border-radius:9px;background:#fff;object-fit:cover}
.brand small{display:block;color:var(--lime);font-weight:700;font-size:11px;letter-spacing:1px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:#c9d0c8;font-weight:600;font-size:13.5px}
.nav a:hover{background:#1c211f;text-decoration:none;color:#fff}
.nav a.on{background:#1f2622;color:var(--lime)}
.nav .ico{width:18px;text-align:center;opacity:.9}
.nav .badge{margin-left:auto;background:var(--lime);color:#111;border-radius:999px;font-size:11px;padding:0 7px;font-weight:800}
.nav .sep{height:1px;background:#222826;margin:10px 6px}
.side .env{margin:16px 8px 0;padding:10px;border:1px dashed #3a423e;border-radius:8px;font-size:11.5px;line-height:1.5;color:#aab3a9}
.side .env b{color:var(--lime)}
.main{min-width:0}
.top{display:flex;align-items:center;gap:12px;padding:12px 24px;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}
.top .grow{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--border);background:#fff;white-space:nowrap}
.pill.sandbox{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)}
.pill.sim{background:var(--med-bg);border-color:var(--med-bd);color:var(--med)}
.page{padding:22px 24px 60px;max-width:1500px}
.sub{color:var(--muted);margin:0 0 18px}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);min-width:0}
.kpi .v{font-size:28px;font-weight:800;color:var(--navy);line-height:1.1}.kpi .l{color:var(--muted);font-size:12.5px;font-weight:600}
.kpi.alert .v{color:var(--neg)}
table{width:100%;border-collapse:collapse}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);text-align:left;font-weight:700;padding:8px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:8px;border-bottom:1px solid var(--border);vertical-align:top}
tr.click{cursor:pointer}tr.click:hover td{background:#fafbfa}
.tbl-wrap{overflow:auto}
.st{display:inline-block;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:700;white-space:nowrap;border:1px solid transparent}
.st-planning,.st-not_started{background:#F3F4F6;color:#4B5563}
.st-drafting,.st-ai_draft{background:var(--med-bg);color:var(--med);border-color:var(--med-bd)}
.st-localization,.st-in_review{background:#EEF6FF;color:#1D4ED8;border-color:#D6E6FB}
.st-product_review{background:#F5F3FF;color:#6D28D9;border-color:#E7E1FB}
.st-pending_approval{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-bd)}
.st-changes_requested,.st-needs_update{background:#FFF1F2;color:#BE123C;border-color:#FBD3DA}
.st-approved{background:var(--pos-bg);color:var(--green);border-color:var(--pos-bd)}
.st-scheduled{background:#ECFDF5;color:var(--green-dk);border-color:#A7F3D0}
.st-sending,.st-sent{background:var(--green);color:#fff}
.st-paused{background:#F3F4F6;color:#374151;border-color:#D1D5DB}
.st-rejected,.st-blocked{background:var(--neg-bg);color:var(--neg);border-color:var(--neg-bd)}
.st-cancelled{background:#F3F4F6;color:#9CA3AF;text-decoration:line-through}
.type{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:#fff;color:var(--fg);padding:7px 12px;border-radius:8px;font:600 13px inherit;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:#cfd5db;background:#fafafa}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}.btn.primary:hover{background:var(--green-dk)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.btn.danger{color:var(--neg);border-color:var(--neg-bd)}.btn.danger:hover{background:var(--neg-bg)}
.btn.warn{color:var(--warn);border-color:var(--warn-bd);background:var(--warn-bg)}
.btn.sm{padding:4px 9px;font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}
.muted{color:var(--muted)}.small{font-size:12.5px}.tiny{font-size:11.5px}.mono{font-family:ui-monospace,Menlo,monospace;font-size:12px}
.callout{border-radius:8px;padding:10px 12px;border:1px solid;font-size:13px;margin:0 0 10px}
.callout.err{background:var(--neg-bg);border-color:var(--neg-bd);color:#7F1D1D}
.callout.warn{background:var(--warn-bg);border-color:var(--warn-bd);color:#78350F}
.callout.ok{background:var(--pos-bg);border-color:var(--pos-bd);color:#14532D}
.callout.info{background:var(--med-bg);border-color:var(--med-bd);color:#273277}
.callout ul{margin:4px 0 0;padding-left:18px}
label.f{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:0 0 4px}
input,select,textarea{font:inherit;color:inherit;border:1px solid var(--border);border-radius:8px;padding:7px 9px;background:#fff;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid #bfe3cf;border-color:var(--green2)}
input[type=checkbox],input[type=radio]{width:auto}
textarea{min-height:70px;resize:vertical}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:0 0 16px;overflow:auto}
.tabs a{padding:9px 13px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs a.on{color:var(--green);border-color:var(--green)}.tabs a:hover{text-decoration:none;color:var(--navy)}
.tabs .n{font-size:11px;background:#EEF0F2;border-radius:999px;padding:0 6px;margin-left:4px;color:var(--fg)}
.bar{height:6px;background:#EEF0F2;border-radius:99px;overflow:hidden;min-width:60px}.bar>i{display:block;height:100%;background:var(--green2)}
.meter{display:flex;align-items:center;gap:8px}.meter .bar{flex:1}
/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid var(--border);border-top:1px solid var(--border);background:#fff;border-radius:8px;overflow:hidden}
.cal .dh{padding:6px 8px;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;background:#FAFBFC;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.cal .d{min-height:118px;padding:6px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);position:relative}
.cal .d.out{background:#FAFBFC;color:#b5bcc5}.cal .d.we{background:#FBFBFC}.cal .d.hol{background:#FFF7F7}
.cal .d.today{box-shadow:inset 0 0 0 2px var(--green2)}
.cal .dn{font-size:12px;font-weight:700}.cal .hn{font-size:10px;color:var(--neg);display:block;line-height:1.2}
.chip{display:block;margin:4px 0 0;padding:3px 6px;border-radius:6px;font-size:11.5px;font-weight:700;line-height:1.3;cursor:pointer;border-left:3px solid;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.newsletter{background:#ECFDF3;border-color:var(--green2);color:#14532D}
.chip.onboarding,.chip.welcome{background:#F0F9FF;border-color:#0284C7;color:#075985}
.chip.feature_launch{background:#F5F3FF;border-color:#7C3AED;color:#4C1D95}
.chip.premium_discovery{background:#FDF2F8;border-color:var(--pink);color:#831843}
.chip.survey{background:#FFFBEB;border-color:#D97706;color:#78350F}
.chip.reactivation,.chip.retention{background:#F1F5F9;border-color:#475569;color:#1E293B}
.chip.marker{background:none;border:0;padding:1px 2px;font-weight:600;color:var(--muted);font-size:11px}
.chip.marker.notify{color:var(--med)}.chip.marker.deadline{color:var(--warn)}
.cal.week .d{min-height:260px}.chip:focus{outline:2px solid var(--med);outline-offset:1px}
.cal .d.drop-over{background:#ECFDF3;box-shadow:inset 0 0 0 2px var(--green2)}.chip[draggable=true]{cursor:grab}.chip.dragging{opacity:.4}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend span:before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px;background:var(--c)}
/* review */
.review{display:grid;grid-template-columns:330px minmax(0,1fr);gap:16px;align-items:start}
.langs{display:flex;flex-wrap:wrap;gap:5px}
.lg{border:1px solid var(--border);border-radius:7px;padding:3px 7px;font-size:12px;font-weight:700;cursor:pointer;background:#fff;display:inline-flex;gap:5px;align-items:center}
.lg i{width:8px;height:8px;border-radius:50%;display:inline-block;background:#D1D5DB}
.lg.on{outline:2px solid var(--green2);outline-offset:1px}
.lg.approved i{background:var(--green2)}.lg.ai_draft i{background:var(--med)}.lg.in_review i{background:#2563EB}
.lg.changes_requested i,.lg.needs_update i{background:#E11D48}
.frames{display:grid;grid-template-columns:1fr 1fr;gap:12px}.frames.single{grid-template-columns:1fr}
.frame{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#eef0ed}
.frame .fh{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:#fff;border-bottom:1px solid var(--border);font-size:12px;font-weight:700}
.frame iframe{width:100%;height:880px;border:0;display:block;background:#eef0ed}
.frames.mobile .frame iframe{width:390px;margin:0 auto}
.sticky{position:sticky;top:64px}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:92px 1fr auto;gap:10px;padding:8px 0;border-bottom:1px dashed var(--border);align-items:center}
.timeline .t{font-weight:800;color:var(--navy)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:#D1D5DB;margin-right:6px}.dot.done{background:var(--green2)}.dot.failed{background:var(--neg)}
.modal-bg{position:fixed;inset:0;background:rgba(16,19,18,.45);display:flex;align-items:flex-start;justify-content:center;z-index:50;padding:40px 16px;overflow:auto}
.modal{background:#fff;border-radius:12px;max-width:760px;width:100%;padding:20px;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.modal.wide{max-width:1100px}
.toast{position:fixed;right:18px;bottom:18px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:9px;z-index:60;max-width:460px;box-shadow:0 8px 30px rgba(0,0,0,.25);font-size:13px}
.toast.err{background:#7F1D1D}
.sec{border:1px solid var(--border);border-radius:9px;padding:12px;margin:0 0 12px;background:#fff}
.sec>.h{font-weight:800;color:var(--navy);margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.empty{padding:24px;text-align:center;color:var(--muted)}
.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#F4FBF7,#F3F8FC)}
.login .card{width:380px;padding:26px}
.kv{display:grid;grid-template-columns:140px 1fr;gap:4px 10px;font-size:13px}.kv dt{color:var(--muted);font-weight:600}.kv dd{margin:0;font-weight:600;color:var(--navy)}
.rule{display:grid;grid-template-columns:1.3fr 1fr 1.3fr auto;gap:6px;margin:0 0 6px}
.group{border-left:3px solid var(--med-bd);padding:8px 0 4px 10px;margin:6px 0}
.pv-wrap{display:flex;gap:10px;justify-content:center;align-items:flex-start;background:#eef0ed;overflow:auto}.pv-wrap iframe{border:0;background:#eef0ed;height:calc(100vh - 190px);flex:none;max-width:100%}
.swatch-btn{width:22px;height:22px;border-radius:6px;border:1px solid #cfd5db;cursor:pointer;padding:0}.swatch-btn.on{outline:2px solid var(--green2);outline-offset:1px}.sw-mini{width:18px;height:18px;border-radius:5px;display:inline-block;border:1px solid var(--border)}details.sec>summary{cursor:pointer}
.swatch .sw{height:54px;border-radius:10px;border:1px solid var(--border);margin:0 0 6px}
.editor-grid{display:flex;gap:14px;align-items:flex-start;margin-top:12px}
.ed-pal{width:190px;flex:none;position:sticky;top:64px}.ed-canvas{width:400px;flex:none;max-height:calc(100vh - 150px);overflow:auto}.ed-prev{flex:1;min-width:0;position:sticky;top:64px}
.ed-prev iframe{height:calc(100vh - 190px);margin:0 auto;transition:width .2s}
.pal-item{border:1px dashed #9CC9AE;background:var(--pos-bg);border-radius:8px;padding:7px 9px;margin:0 0 6px;font-weight:700;font-size:12.5px;cursor:grab;color:var(--green-dk)}
.blk{display:flex;gap:8px;align-items:center;border:1px solid var(--border);border-radius:9px;padding:8px;margin:0 0 6px;background:#fff;cursor:pointer}
.blk.on{outline:2px solid var(--green2)}.blk.over{border-top:3px solid var(--green2)}.blk.dragging{opacity:.4}.blk.hidden-blk{opacity:.55;background:#FAFBFC}
.blk-main{flex:1;min-width:0}.blk-main .tiny{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grip{cursor:grab;color:var(--muted);font-weight:900}
.drop-end{border:2px dashed var(--border);border-radius:9px;padding:10px;text-align:center;color:var(--muted);font-size:12px;margin:0 0 10px}.drop-end.over{border-color:var(--green2);color:var(--green)}
@media (max-width:1100px){.editor-grid{flex-wrap:wrap}.ed-pal,.ed-canvas{width:100%;position:static;max-height:none}.ed-prev{position:static;width:100%}.review{grid-template-columns:1fr}.sticky{position:static}.g4{grid-template-columns:repeat(2,1fr)}.frames{grid-template-columns:1fr}}
@media (max-width:860px){.app{grid-template-columns:1fr}.side{position:sticky;top:0;z-index:6;height:auto;padding:8px 10px;display:flex;align-items:center;gap:10px}
.brand{padding:0}.brand>div{display:none}.nav{display:flex;overflow-x:auto;gap:2px;flex:1;scrollbar-width:none}.nav a{white-space:nowrap;padding:7px 9px;font-size:12.5px}
.nav .sep,.side .env{display:none}.top{position:static;flex-wrap:wrap;padding:8px 12px;gap:6px}.top .grow{display:none}.kv{grid-template-columns:110px 1fr}}
@media (max-width:760px){.app{grid-template-columns:1fr}.g2,.g3,.g4{grid-template-columns:1fr}.page{padding:16px}}

/* analytics: dashboards, tooltips, reports */
.dash-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.widget{min-height:150px}.widget.over{outline:2px dashed var(--green2)}.widget.dragging{opacity:.4}.widget-h{margin:0 0 8px}.widget-h .grip{cursor:grab}
.an-tip{position:fixed;z-index:80;display:none;background:#121212;color:#fff;font-size:12px;padding:5px 8px;border-radius:6px;pointer-events:none;max-width:280px}
.pick{max-height:220px;overflow:auto;border:1px solid var(--border);border-radius:8px;padding:6px 8px}
.legend-v{display:grid;gap:3px}.btn.pulse{box-shadow:0 0 0 3px #bfe3cf}
@media (max-width:1100px){.dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.widget{grid-column:span 2!important}}
@media print{body.print-report .side,body.print-report .top,body.print-report .tabs,body.print-report #antab>.grid>.card:first-child,body.print-report #rout~*,body.print-report .card:not(.report .card):not(.kpi){display:none!important}
 body.print-report #rout,body.print-report .report{display:block!important}body.print-report .app{display:block}body.print-report .page{padding:0}}
/* visual (WYSIWYG) editor */
.wy-head{align-items:flex-end;flex-wrap:wrap}
.wy-toolbar{position:sticky;top:56px;z-index:20;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:10px;padding:6px 8px;margin:10px 0 0;box-shadow:0 2px 6px rgba(15,23,42,.05)}
.wy-toolbar .grp{display:flex;gap:2px;align-items:center;padding-right:8px;border-right:1px solid var(--border)}
.wy-toolbar .btn.sm{min-width:30px;justify-content:center}
.wy-grid{display:grid;grid-template-columns:210px minmax(0,1fr) 280px;gap:12px;align-items:start;margin-top:10px}
.wy-left,.wy-right{position:sticky;top:112px;max-height:calc(100vh - 124px);overflow:auto;padding:12px}
.wy-left .tabs{margin:0 0 10px;flex-wrap:wrap}.wy-left .tab{all:unset;cursor:pointer;padding:7px 6px;font-weight:700;font-size:12.5px;color:var(--muted);border-bottom:2px solid transparent}
.wy-left .tab.on{color:var(--green);border-color:var(--green)}.wy-left .tab:focus-visible{outline:2px solid #2a78d6}
.wy-center{min-width:0}.wy-center .pv-wrap{overflow:auto}.wy-center .pv-wrap iframe{height:calc(100vh - 170px);transition:width .2s;max-width:none}
.comp-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.comp{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 4px;border:1px solid var(--border);border-radius:9px;background:#fff;font-size:11.5px;font-weight:600;text-align:center;cursor:grab;user-select:none;color:var(--fg)}
.comp:hover,.comp:focus-visible{border-color:#2a78d6;background:#F3F8FE;outline:none}.comp .ci{font-size:16px;line-height:1}
.comp.wide{flex-direction:row;justify-content:flex-start;margin:0 0 4px;padding:7px 9px}
.wy-right h3{margin:0 0 8px}.wy-right .sec{margin:0 0 10px}.wy-right input[type=range]{width:100%}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cmp iframe{width:100%;height:60vh;border:1px solid var(--border);border-radius:8px;background:#eef0ed}.cmp .h{font-weight:700;font-size:13px;margin:0 0 4px}
@media (max-width:1180px){.wy-grid{grid-template-columns:1fr}.wy-left,.wy-right{position:static;max-height:none}.wy-toolbar{top:0}.cmp{grid-template-columns:1fr}}
.drag-ghost{position:fixed;z-index:99999;pointer-events:none;background:#1d2a3a;color:#fff;font:600 12px system-ui;padding:6px 10px;border-radius:7px;box-shadow:0 6px 18px rgba(0,0,0,.25)}body.dragging-comp,body.dragging-comp *{cursor:grabbing!important;user-select:none}
#props input:not([type=number]):not([type=color]):not([type=range]),#props textarea{unicode-bidi:plaintext}
/* dashboard layout editor (12-column grid, static/gridlayout.js) */
.dash-tools{gap:10px;margin:0 0 10px;flex-wrap:wrap}
.dash-frame{margin:0 auto;transition:max-width .2s}
.dash-canvas{position:relative;min-height:60px}
.dash-canvas .widget{position:absolute;min-height:0;margin:0;display:flex;flex-direction:column;padding:10px 12px;box-sizing:border-box;transition:left .18s ease,top .18s ease,width .18s ease,height .18s ease;overflow:hidden}
.dash-canvas .widget:focus-visible{outline:2px solid #2a78d6;outline-offset:2px}
.dash-canvas .widget-h{margin:0 0 6px;flex:none;gap:6px;flex-wrap:nowrap;min-width:0}
.dash-canvas .widget-h .wt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.dash-canvas .wbtns{gap:2px;flex:none}.dash-canvas .wbtns select{width:auto;font-size:11px;padding:2px 4px;max-width:120px}
.dash-canvas .widget-b{flex:1;min-height:0;overflow:auto}
.dash-canvas.editing .widget-h{cursor:grab;user-select:none}.dash-canvas.editing .widget-h .grip{color:var(--muted)}
.dash-canvas:not(.editing) .grip{display:none}
.dash-canvas .widget.moving{transition:none;z-index:50;box-shadow:0 14px 34px rgba(15,23,42,.22);opacity:.92;cursor:grabbing}
.dash-canvas .widget.resizing{transition:none;z-index:50;box-shadow:0 0 0 2px #2a78d6,0 10px 26px rgba(15,23,42,.18)}
.dash-ph{position:absolute;border:2px dashed #2a78d6;background:rgba(42,120,214,.08);border-radius:12px;z-index:1;pointer-events:none;transition:left .12s,top .12s,width .12s,height .12s}
.dash-canvas .rz{position:absolute;z-index:5;display:none}
.dash-canvas.editing .widget:hover .rz,.dash-canvas.editing .widget:focus-within .rz,.dash-canvas.editing .widget.resizing .rz{display:block}
.dash-canvas .rz.e,.dash-canvas .rz.w{top:12px;bottom:12px;width:10px;cursor:ew-resize}.dash-canvas .rz.e{right:0}.dash-canvas .rz.w{left:0}
.dash-canvas .rz.e::after,.dash-canvas .rz.w::after{content:"";position:absolute;top:50%;left:3px;width:4px;height:28px;margin-top:-14px;border-radius:2px;background:#2a78d6;opacity:.75}
.dash-canvas .rz.s{left:12px;right:12px;bottom:0;height:10px;cursor:ns-resize}
.dash-canvas .rz.s::after{content:"";position:absolute;left:50%;top:3px;height:4px;width:28px;margin-left:-14px;border-radius:2px;background:#2a78d6;opacity:.75}
.dash-canvas .rz.se,.dash-canvas .rz.sw{bottom:0;width:16px;height:16px}.dash-canvas .rz.se{right:0;cursor:nwse-resize}.dash-canvas .rz.sw{left:0;cursor:nesw-resize}
.dash-canvas .rz.se::after,.dash-canvas .rz.sw::after{content:"";position:absolute;bottom:3px;width:9px;height:9px;border-bottom:3px solid #2a78d6;opacity:.85}
.dash-canvas .rz.se::after{right:3px;border-right:3px solid #2a78d6;border-bottom-right-radius:3px}.dash-canvas .rz.sw::after{left:3px;border-left:3px solid #2a78d6;border-bottom-left-radius:3px}
.dash-canvas .wdim{position:absolute;right:10px;bottom:10px;z-index:6;background:#1d2a3a;color:#fff;font:600 11px/1 system-ui;padding:4px 7px;border-radius:5px;pointer-events:none}
.dash-canvas .wdim:empty{display:none}
body.dash-busy,body.dash-busy *{user-select:none!important}
.dash-canvas .wbtns{position:absolute;right:8px;top:7px;z-index:7;background:var(--card,#fff);padding:2px 0 2px 6px;border-radius:8px;opacity:0;transition:opacity .12s;box-shadow:-8px 0 8px var(--card,#fff)}
.dash-canvas .widget:hover .wbtns,.dash-canvas .widget:focus-within .wbtns{opacity:1}
@media (hover:none){.dash-canvas .wbtns{opacity:1;position:static;box-shadow:none}}
.dash-canvas .widget-b svg{display:block}
.dash-canvas.editing .rz{display:block}
.dash-canvas .rz::after{opacity:0!important;transition:opacity .12s}
.dash-canvas.editing .widget:hover .rz::after,.dash-canvas.editing .widget:focus-within .rz::after,.dash-canvas.editing .widget.resizing .rz::after{opacity:.8!important}
.dash-canvas.editing .rz:hover::after{opacity:1!important}
.dash-canvas .wmore{flex:none;padding:1px 7px;line-height:1.2;opacity:.35}.dash-canvas .widget:hover .wmore,.dash-canvas .widget:focus-within .wmore{opacity:1}
.dash-canvas .wbtns{opacity:1!important;display:none;top:36px;right:8px;box-shadow:0 6px 18px rgba(15,23,42,.16);border:1px solid var(--border);padding:4px 6px;background:#fff}
.dash-canvas .widget.tools-open .wbtns{display:flex}
.dash-canvas .widget.tools-open{overflow:visible;z-index:20}
/* ---------- design system harmonization (icons, focus, motion, states) ---------- */
.ico-svg{flex:none;vertical-align:-3px}.ico-wrap{display:inline-flex;align-items:center}
.btn,.tab,.nav a,.nav-act,.comp,.a-card{transition:background-color .12s,border-color .12s,color .12s,box-shadow .12s}
.btn:focus-visible,a:focus-visible,select:focus-visible,[tabindex]:focus-visible,.nav-act:focus-visible{outline:2px solid #2a78d6;outline-offset:2px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.danger .ico-svg{color:var(--neg)}
.pill.st-ok{background:var(--pos-bg);border-color:var(--pos-bd);color:var(--green-dk)}.pill.st-warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)}.pill.st-err{background:var(--neg-bg);border-color:var(--neg-bd);color:var(--neg)}
.empty .ico-svg{display:block;margin:0 auto 6px;color:var(--muted)}
.loading-dot{display:inline-block;width:14px;height:14px;border:2px solid #cfd5db;border-top-color:var(--green);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ---------- sidebar ---------- */
.nav a,.nav-item{position:relative}.nav .ico{width:18px;display:inline-flex;justify-content:center;opacity:.92}.nav .ico .ico-svg{vertical-align:0}
.nav a.on .ico{color:var(--lime);opacity:1}
.nav-group{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#7d877c;padding:6px 10px 2px}
.pin-dot{margin-left:auto;color:#7d877c;display:inline-flex}
.nav-foot{margin:10px 0 0;border-top:1px solid #262c29;padding-top:8px;display:flex;flex-direction:column;gap:4px}
.nav-foot .btn{justify-content:center}.nav-foot p{color:#aab3a9;margin:0 4px 4px}
.nav-act{all:unset;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:#aab3a9;font:600 12.5px inherit;cursor:pointer}.nav-act:hover{background:#1c211f;color:#fff}
.nav-item.cz{display:flex;align-items:center;gap:8px;padding:7px 6px 7px 4px;border-radius:8px;color:#e3e9e4;font-weight:600;font-size:13px;border:1px dashed #3a423e;margin:0 0 4px;background:#161a18}
.nav-item.cz:focus-visible{outline:2px solid var(--lime)}.nav-item.cz.dragging{opacity:.45}
.nav-grip{cursor:grab;color:#7d877c;display:inline-flex;touch-action:none}.nav-grip:active{cursor:grabbing}
.cz-btns{margin-left:auto;display:flex;gap:2px}.nav-mini{all:unset;cursor:pointer;color:#aab3a9;padding:3px;border-radius:5px;display:inline-flex}.nav-mini:hover,.nav-mini:focus-visible{background:#262c29;color:#fff}.nav-mini.on{color:var(--lime)}
#navlist{position:relative}.nav-drop{position:absolute;left:4px;right:4px;height:3px;background:var(--lime);border-radius:2px;display:none;box-shadow:0 0 0 3px rgba(212,255,80,.2)}
.app.nav-collapsed{grid-template-columns:64px 1fr}.app.nav-collapsed .side{padding:18px 8px}.app.nav-collapsed .brand>div,.app.nav-collapsed .lbl,.app.nav-collapsed .nav-group,.app.nav-collapsed .env,.app.nav-collapsed .pin-dot,.app.nav-collapsed .badge{display:none}
.app.nav-collapsed .nav a,.app.nav-collapsed .nav-act{justify-content:center;padding:9px 0}
@media (max-width:860px){.nav-foot{display:none}.app.nav-collapsed{grid-template-columns:1fr}.app.nav-collapsed .lbl{display:inline}.nav .pin-dot,.nav-group{display:none}}
/* ---------- Asset Library ---------- */
.al-tools{padding:10px 12px;margin:0 0 10px}
label.search{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:8px;padding:0 8px;background:#fff;min-width:220px;color:var(--muted)}label.search input{border:0;outline:0;padding:7px 0;min-width:0;flex:1;background:transparent}
.dropzone{display:flex;align-items:center;gap:14px;border:2px dashed #cfd5db;border-radius:12px;padding:14px 16px;background:#fbfcfb;cursor:pointer;margin:0 0 10px;color:var(--muted)}.dropzone.over,.dropzone:hover{border-color:var(--green2);background:#f3faf6}.dropzone label{margin-left:auto}
.up-row{display:flex;align-items:center;gap:10px;padding:5px 2px}.up-row.err .st{color:var(--neg)}
.a-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.a-list{display:flex;flex-direction:column;gap:4px}
.a-card{position:relative;all:unset;box-sizing:border-box;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;background:#fff;overflow:hidden;cursor:pointer}.a-card:hover,.a-card:focus-visible{border-color:#2a78d6;box-shadow:0 2px 10px rgba(42,120,214,.12)}
.a-card{position:relative}
.a-th{height:110px;background:repeating-conic-gradient(#f2f4f3 0 25%,#fff 0 50%) 0 0/14px 14px;display:flex;align-items:center;justify-content:center;overflow:hidden}.a-th img{max-width:100%;max-height:100%;object-fit:contain}.a-th.sm{width:46px;height:36px;border-radius:6px;flex:none}
.a-meta{padding:7px 9px}.a-meta b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-star{all:unset;position:absolute;top:6px;right:6px;background:rgba(255,255,255,.92);border-radius:6px;padding:3px;display:inline-flex;color:#9aa39a;cursor:pointer}.a-star.on{color:#eda100}.a-star.on .ico-svg{fill:currentColor}
.a-row{position:relative;display:grid;grid-template-columns:46px minmax(0,2fr) minmax(0,1.3fr) auto minmax(0,1fr) auto 28px;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:pointer}.a-row .a-star{position:static}
.a-pdf{display:flex;flex-direction:column;align-items:center;color:var(--neg);font-weight:800;font-size:11px}
.a-strip{display:flex;gap:6px;margin:0 0 12px;overflow:auto}.a-mini{all:unset;cursor:pointer;width:64px;height:48px;border:1px solid var(--border);border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff;flex:none}.a-mini img{max-width:100%;max-height:100%}
.a-preview{background:repeating-conic-gradient(#f2f4f3 0 25%,#fff 0 50%) 0 0/16px 16px;border:1px solid var(--border);border-radius:10px;min-height:220px;display:flex;align-items:center;justify-content:center;padding:10px;margin:0 0 10px}.a-preview img{max-width:100%;max-height:420px}
.a-grid.pick{max-height:60vh;overflow:auto}
.font-row,.style-row{padding:10px 0;border-bottom:1px solid var(--border)}.font-row:last-of-type,.style-row:last-child{border-bottom:0}
@media (max-width:1100px){#algrid{grid-template-columns:1fr!important}.a-row{grid-template-columns:46px 1fr auto 28px}.a-row>:nth-child(3),.a-row>:nth-child(5),.a-row>:nth-child(6){display:none}}
/* editor: asset field and assets tab */
.asset-field{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.asset-field img{width:64px;height:48px;object-fit:contain;border:1px solid var(--border);border-radius:6px;background:#f6f7f6}
.typo .h{display:flex;align-items:center;gap:6px}

.funnel td{padding:6px 8px}.funnel tr.tot td{border-bottom:2px solid var(--border)}.funnel tr.fin td{border-top:2px solid var(--border);font-weight:700}.funnel .bar{height:8px}
.pc-cat .bar{height:8px;min-width:80px}
.typo .row input[type=number]{min-width:56px;flex:1}.typo .fgrid input[type=number]{min-width:0}

.demobar{background:#fff8e1;border-bottom:1px solid #f1d58a;color:#6b4e00;font-size:12.5px;padding:6px 24px}.demobar a{color:#6b4e00;font-weight:600}
#ttab .row select,#ttab .row input[type=date]{width:auto}

/* Google sign-in button — Figma Havit-Flow 11254:2706 "Medium button": white, #DCDFD6 2px, pill, 48px, Poppins 14/22. Icon = official Google G. */
.google-btn{display:flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 20px;
  background:#fff;border:2px solid #DCDFD6;border-radius:99px;color:#000;text-decoration:none;font:400 14px/22px Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.google-btn:hover{background:#F7F8F5;text-decoration:none}
.google-btn:focus-visible{outline:2px solid #000;outline-offset:2px}