/* Point Edit Studio — Editor styles */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --mono:'JetBrains Mono',monospace; --ui:'Fraunces',Georgia,serif; --body:'Inter',system-ui,sans-serif;
  --accent:#5b8dee; --accent2:#7ba5f5; --green:#3ecf7e; --amber:#f0a029; --red:#e8504a; --cyan:#3dd6c8;
  --top-h:50px; --panel-w:420px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08);
  --shadow-md:0 4px 12px rgba(0,0,0,.15),0 1px 4px rgba(0,0,0,.1);
  --shadow-lg:0 10px 30px rgba(0,0,0,.2),0 2px 8px rgba(0,0,0,.12);
}
[data-theme="dark"]{
  --bg0:#090b11;--bg1:#0f121b;--bg2:#151923;--bg3:#1c2030;--bg4:#242a3d;
  --border:rgba(255,255,255,0.06);--border2:rgba(255,255,255,0.1);--border3:rgba(255,255,255,0.18);
  --txt:#e1e4f0;--txt2:#898ea8;--txt3:#4f5570;
  --glow1:rgba(91,141,238,.14);--glow2:rgba(61,214,200,.07);--noise-op:.02;--grid-line:rgba(255,255,255,0.035);
}
[data-theme="light"]{
  --bg0:#FBFAF6;--bg1:#F4F1E9;--bg2:#ffffff;--bg3:#F7F4ED;--bg4:#F0ECE1;--accent:#1A5FD6;--accent2:#2f74e8;--green:#2D8C4C;--amber:#c9851a;--red:#BE3A1F;--cyan:#0f9b8e;
  --border:#E7E3D8;--border2:#D5D0C2;--border3:#bdb7a6;
  --txt:#13151A;--txt2:#43474F;--txt3:#8C8B82;
  --glow1:rgba(26,95,214,.06);--glow2:rgba(15,155,142,.045);--noise-op:.015;--grid-line:rgba(19,21,26,0.05);
}
html,body{height:100%;overflow:hidden;background:var(--bg0);color:var(--txt);font-family:var(--body);font-size:13px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* ambient gradient + grain texture (matches static pages) */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px),radial-gradient(60% 50% at 82% -4%,var(--glow1),transparent 70%),radial-gradient(52% 46% at 4% 104%,var(--glow2),transparent 70%);background-size:56px 56px,56px 56px,100% 100%,100% 100%;transition:background .35s var(--ease,ease)}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--noise-op);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── Login ── */
#login-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:transparent;z-index:9999}
.lcard{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px 36px;width:360px;box-shadow:var(--shadow-lg)}
.lcard-logo{margin-bottom:28px;text-align:center}
.lcard-logo .logo-main{font-family:var(--ui);font-size:24px;font-weight:700;color:var(--txt);letter-spacing:-.01em}
.lcard-logo .logo-main em{color:var(--accent);font-style:normal}
.lcard-logo .logo-sub{font-size:10px;font-weight:500;color:var(--txt3);letter-spacing:.08em;font-family:var(--mono);text-transform:uppercase;margin-left:5px}
.lcard-logo .logo-sub em{color:var(--accent);font-style:normal}
.lcard-tagline{font-size:12px;color:var(--txt2);margin-bottom:8px;line-height:1.6;text-align:center}
.lcard-tagline strong{color:var(--txt);font-weight:600}
.lcard-divider{height:1px;background:var(--border);margin:20px 0}
.lf{margin-bottom:14px}
.lf label{display:block;font-size:10px;color:var(--txt2);margin-bottom:5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.lf input{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--txt);font-family:var(--mono);font-size:13px;padding:10px 12px;outline:none;transition:all .15s}
.lf input:hover{border-color:var(--border3)}
.lf input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,141,238,.12)}
.lbtn{width:100%;margin-top:8px;padding:11px;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:var(--radius-sm);color:#fff;font-family:var(--ui);font-size:14px;font-weight:700;cursor:pointer;transition:all .15s}
.lbtn:hover{box-shadow:0 4px 16px rgba(91,141,238,.3);transform:translateY(-1px)}
.lbtn:active{transform:translateY(0)}
#login-err{color:var(--red);font-size:12px;margin-top:10px;min-height:18px;text-align:center}

/* ── App ── */
#app{display:none;flex-direction:column;height:100vh;position:relative;z-index:1}

/* ── Topbar ── */
#topbar{height:var(--top-h);background:rgba(15,18,27,.82);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;padding:0 14px;flex-shrink:0;z-index:50;overflow:visible;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
[data-theme="light"] #topbar{background:rgba(253,253,253,.82)}
#logo{font-family:var(--ui);flex-shrink:0;display:flex;align-items:baseline;gap:5px;line-height:1}
#logo .logo-main{font-size:15px;font-weight:700;color:var(--txt);letter-spacing:-.01em}
#logo em{color:var(--accent);font-style:normal}
#logo .logo-sub{font-size:10px;font-weight:500;color:var(--txt3);letter-spacing:.05em;font-family:var(--mono);text-transform:uppercase}
#logo .logo-sub em{color:var(--accent);font-style:normal;font-weight:500}
.tbtn{padding:6px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--txt2);font-family:var(--mono);font-size:11px;cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0;font-weight:500}
.tbtn:hover{background:var(--bg4);color:var(--txt);border-color:var(--border3);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.tbtn:active{transform:translateY(0)}
.tbtn.pri{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#fff;font-weight:600}
.tbtn.pri:hover{background:linear-gradient(135deg,var(--accent2),var(--accent));box-shadow:0 2px 10px rgba(91,141,238,.3)}
.tbtn.suc{background:var(--green);border-color:var(--green);color:#0c0e14}
.tbtn.warn{background:var(--amber);border-color:var(--amber);color:#0c0e14}
.wys-btn{background:var(--bg3);border:1px solid var(--border2);color:var(--txt);border-radius:4px;padding:3px 8px;font-size:11px;cursor:pointer;font-family:var(--mono);font-weight:600;min-width:24px;text-align:center;line-height:1.4}
.wys-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
#inline-toolbar .wys-btn{padding:2px 7px;font-size:10px;border-radius:3px}
#mode-toggle{display:flex;border:1px solid var(--border2);border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;background:var(--bg2)}
.mdbtn{padding:6px 11px;background:transparent;border:none;color:var(--txt3);font-family:var(--mono);font-size:11px;cursor:pointer;transition:all .15s;font-weight:500}
.mdbtn.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 2px 8px rgba(91,141,238,.25)}
.mdbtn:hover:not(.active){color:var(--txt);background:var(--bg3)}
#status-pill{font-size:11px;color:var(--txt3);padding:4px 12px;background:var(--bg2);border-radius:20px;flex-shrink:0;border:1px solid var(--border);min-width:88px;text-align:center;font-weight:500;letter-spacing:.02em}
#status-pill.ok{color:var(--green);border-color:rgba(62,207,126,.2);background:rgba(62,207,126,.06)}
#status-pill.warn{color:var(--amber);border-color:rgba(240,160,41,.2);background:rgba(240,160,41,.06)}
#status-pill.err{color:var(--red);border-color:rgba(232,80,74,.2);background:rgba(232,80,74,.06)}
#theme-btn{display:flex;align-items:center;padding:6px 9px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg2);cursor:pointer;flex-shrink:0;color:var(--txt2);font-size:14px;transition:all .15s}
#theme-btn:hover{background:var(--bg4);color:var(--txt);transform:translateY(-1px)}

/* ── Body ── */
#editor-view{display:none;flex:1;overflow:hidden;flex-direction:column}
#body{display:flex;flex:1;overflow:hidden;flex-direction:column}
#body-inner{display:flex;flex:1;overflow:hidden;min-height:0}
#canvas-wrap{flex:1;position:relative;overflow:hidden;background:#e8eaf0;min-width:0}
#canvas{width:100%;height:100%;border:none;display:block;background:#fff}
#hl-box{position:fixed;pointer-events:none;border:2px solid var(--accent);background:rgba(91,141,238,.07);border-radius:2px;display:none;z-index:930}
#hl-label{position:fixed;pointer-events:none;background:var(--accent);color:#fff;font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:3px;display:none;z-index:930;white-space:nowrap}

/* spacing visualiser overlay */
#spacing-overlay{position:absolute;pointer-events:none;top:0;left:0;width:100%;height:100%;z-index:12;display:none}

/* ── Panel ── */
#panel{width:var(--panel-w);background:var(--bg1);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;min-width:300px;max-width:800px}
/* resize handle */
#panel-resizer{position:absolute;left:0;top:0;width:5px;height:100%;cursor:col-resize;z-index:20;background:transparent;transition:background .15s}
#panel-resizer:hover,#panel-resizer.dragging{background:var(--accent)}
#panel-wrap{position:relative;display:flex;flex-shrink:0}
/* icon tab bar */
/* ── Panel tool groups ── */
#panel-header{display:flex;flex-direction:column;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0}
/* ── Category switcher row ── */
#cat-bar{display:flex;background:var(--bg0);border-bottom:1px solid var(--border2)}
.cat-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:8px 4px 6px;gap:4px;cursor:pointer;border:none;background:transparent;border-bottom:3px solid transparent;transition:background .12s,border-color .12s;position:relative}
.cat-btn:hover{background:var(--bg2)}
.cat-btn.active{background:var(--bg2);border-bottom-color:var(--accent)}
.cat-btn svg{width:16px;height:16px;stroke:var(--txt3);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .12s}
.cat-btn.active svg{stroke:var(--accent2)}
.cat-btn:hover:not(.active) svg{stroke:var(--txt2)}
.cat-btn span{font-size:8px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt3);font-family:var(--mono);line-height:1;transition:color .12s;white-space:nowrap}
.cat-btn.active span{color:var(--accent2)}
.cat-btn:hover:not(.active) span{color:var(--txt2)}
.cat-btn::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--bg0);border:1px solid var(--border2);color:var(--txt);font-size:11px;font-family:var(--mono);padding:5px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:200;box-shadow:0 4px 12px rgba(0,0,0,.3)}
@media (hover:hover){.cat-btn:hover::after{opacity:1}}
/* ── Tool row (one shown at a time) ── */
.tool-row{display:none;flex-direction:row;flex-wrap:nowrap;padding:3px 4px 4px;gap:2px;background:var(--bg2)}
.tool-row.active{display:flex}

/* group row */

/* icon button */
.ptab-icon{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4px 3px 3px;flex:1;min-width:0;
  cursor:pointer;border:none;
  background:transparent;
  border-radius:4px;
  border:1px solid transparent;
  gap:2px;position:relative;
  transition:background .12s,border-color .12s;
}
.ptab-icon:hover{background:var(--bg3);border-color:var(--border2)}
.ptab-icon.active{background:var(--bg4);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.ptab-icon svg{width:11px;height:11px;stroke:var(--txt3);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;transition:stroke .12s}
.ptab-icon.active svg{stroke:var(--accent2)}
.ptab-icon:hover:not(.active) svg{stroke:var(--txt)}
.ptab-icon span{font-size:7px;letter-spacing:.03em;text-transform:uppercase;color:var(--txt2);font-family:var(--mono);transition:color .12s;line-height:1;white-space:nowrap}
.ptab-icon.active span{color:var(--accent2);font-weight:500}
/* tooltip */
.ptab-icon::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--bg0);border:1px solid var(--border2);color:var(--txt);font-size:11px;font-family:var(--mono);padding:5px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:200;box-shadow:0 4px 12px rgba(0,0,0,.3)}
@media (hover:hover){.ptab-icon:hover::after{opacity:1}}
/* canvas viewport bar — lives above canvas, not in panel */
#viewport-bar{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:8px 10px;background:var(--bg2);border-top:1px solid var(--border);flex-shrink:0}
#viewport-bar-title{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);font-family:var(--mono);width:100%;margin-bottom:2px}
.vp-btn{padding:5px 0;font-size:10px;border:1px solid var(--border2);border-radius:5px;background:var(--bg3);color:var(--txt2);cursor:pointer;font-family:var(--mono);transition:all .12s;display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:44px}
.vp-btn:hover{background:var(--bg4);color:var(--txt);border-color:var(--border3)}
.vp-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.vp-btn.active svg{stroke:#fff}
.vp-btn svg{stroke:var(--txt3);fill:none;stroke-width:1.6;stroke-linecap:round;transition:stroke .12s}
.vp-btn:hover svg{stroke:var(--txt)}
.vp-btn span{font-size:9px;letter-spacing:.03em}
.vp-sep{width:1px;height:28px;background:var(--border);flex-shrink:0}
#vp-custom-wrap{display:flex;align-items:center;gap:4px;flex:1;min-width:90px}
#vp-custom{flex:1;min-width:0;background:var(--bg3);border:1px solid var(--border2);border-radius:5px;color:var(--txt);font-family:var(--mono);font-size:11px;padding:4px 6px;outline:none;text-align:center}
#vp-custom:focus{border-color:var(--accent)}
#vp-custom-label{font-size:9px;color:var(--txt3);font-family:var(--mono);white-space:nowrap}
#breadcrumb{padding:7px 13px 0;font-size:11px;color:var(--txt3);flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:22px}
#breadcrumb b{color:var(--accent2);font-weight:400}
#panel-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:13px;scrollbar-width:thin;scrollbar-color:var(--bg4) transparent}
#panel-code{flex:1;min-height:0;display:none;flex-direction:column;overflow:hidden}
#code-area{flex:1;width:100%;background:var(--bg0);color:var(--txt);border:none;outline:none;font-family:var(--mono);font-size:12px;line-height:1.7;padding:13px;resize:none;tab-size:2}
#css-subtabs{display:none;flex-wrap:wrap;gap:4px;padding:8px 13px 0;flex-shrink:0;border-bottom:1px solid var(--border)}
.css-stab{padding:3px 10px;font-size:11px;border-radius:4px;cursor:pointer;border:1px solid var(--border2);color:var(--txt2);background:var(--bg3);font-family:var(--mono);transition:all .12s;display:flex;align-items:center;gap:5px}
.css-stab.active{background:var(--bg4);color:var(--cyan);border-color:var(--cyan)}
.css-badge{font-size:9px;padding:1px 5px;border-radius:3px;letter-spacing:.04em;text-transform:uppercase}
.css-badge.ext{background:rgba(61,214,200,.15);color:var(--cyan)}
.css-badge.inline{background:rgba(240,160,41,.15);color:var(--amber)}
#css-save-bar{display:none;align-items:center;justify-content:space-between;padding:7px 13px;border-top:1px solid var(--border);flex-shrink:0}
#css-save-bar span{font-size:11px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
#pagesrc-save-bar,#src-save-bar{display:none;align-items:center;justify-content:space-between;padding:7px 13px;border-top:1px solid var(--border);flex-shrink:0;gap:6px}
#pagesrc-save-bar span,#src-save-bar span{font-size:11px;color:var(--txt2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px;color:var(--txt3);font-size:12px;text-align:center;padding:24px;line-height:1.6}
#empty-state svg{opacity:.25;margin-bottom:4px}

/* ── Form elements ── */
.section{margin-bottom:20px}
.sec-title{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);font-weight:600}
.row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.row label{font-size:11px;color:var(--txt2);min-width:66px;flex-shrink:0;font-weight:500}
.inp{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--txt);font-family:var(--mono);font-size:12px;padding:6px 10px;outline:none;width:100%;transition:all .15s}
.inp:hover{border-color:var(--border3)}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,141,238,.1)}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23898ea8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;cursor:pointer}
textarea.inp{resize:vertical;min-height:80px;line-height:1.5}
.color-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.color-row label{font-size:11px;color:var(--txt2);min-width:66px;flex-shrink:0;font-weight:500}
.color-wrap{display:flex;align-items:center;gap:6px;flex:1}
input[type="color"]{width:28px;height:28px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px;background:var(--bg3);cursor:pointer;flex-shrink:0}
.hex-inp{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--txt);font-family:var(--mono);font-size:12px;padding:6px 10px;outline:none;transition:all .15s}
.hex-inp:hover{border-color:var(--border3)}
.hex-inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,141,238,.1)}

/* ── File Tree ── */
#tree-wrap{flex:1;min-height:0;display:none;flex-direction:column;overflow:hidden}
#tree-toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 13px;border-bottom:1px solid var(--border);flex-shrink:0}
#tree-toolbar span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)}
#tree-refresh{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:14px;padding:0 2px}
#tree-refresh:hover{color:var(--accent)}
#tree-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:5px 0;scrollbar-width:thin;scrollbar-color:var(--bg4) transparent}
.tree-dir-label{display:flex;align-items:center;gap:5px;padding:4px 13px;font-size:12px;color:var(--txt2);cursor:pointer;user-select:none}
.tree-dir-label:hover{background:var(--bg3);color:var(--txt)}
.tree-dir-icon{font-size:10px;color:var(--txt3);transition:transform .15s;flex-shrink:0}
.tree-dir.open>.tree-dir-label .tree-dir-icon{transform:rotate(90deg)}
.tree-children{display:none;padding-left:14px}
.tree-dir.open>.tree-children{display:block}
.tree-file{display:flex;align-items:center;gap:6px;padding:3px 13px;font-size:12px;color:var(--txt2);cursor:pointer;border-left:2px solid transparent}
.tree-file:hover{background:var(--bg3);color:var(--txt)}
.tree-file.active{background:var(--bg4);color:var(--accent2);border-left-color:var(--accent)}
.ext-html{color:var(--amber);font-size:9px;flex-shrink:0}
.ext-css{color:var(--cyan);font-size:9px;flex-shrink:0}
.ext-other{color:var(--txt3);font-size:9px;flex-shrink:0}


/* ── Image Panel ── */
#img-wrap{flex:1;min-height:0;display:none;flex-direction:column;overflow:hidden}
#img-toolbar{display:flex;align-items:center;gap:8px;padding:8px 13px;border-bottom:1px solid var(--border);flex-shrink:0}
#img-toolbar span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);flex:1}
#img-search{background:var(--bg3);border:1px solid var(--border2);border-radius:5px;color:var(--txt);font-family:var(--mono);font-size:11px;padding:4px 8px;outline:none;width:130px}
#img-search:focus{border-color:var(--accent)}
#img-scroll{flex:1;min-height:0;overflow-y:auto;padding:10px 13px;scrollbar-width:thin;scrollbar-color:var(--bg4) transparent}
.img-folder{margin-bottom:16px}
.img-folder-name{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);margin-bottom:7px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.img-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.img-thumb{border:2px solid transparent;border-radius:6px;overflow:hidden;cursor:pointer;background:var(--bg3);aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative;transition:border-color .12s}
.img-thumb:hover{border-color:var(--accent)}
.img-thumb.selected{border-color:var(--green)}
.img-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.img-thumb-label{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.55);color:#fff;font-size:9px;padding:2px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono)}
.img-thumb svg{opacity:.3}
#img-apply-bar{display:none;padding:8px 13px;border-top:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;gap:8px;background:var(--bg2)}
#img-selected-name{font-size:11px;color:var(--txt2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#img-empty{padding:24px 13px;text-align:center;color:var(--txt3);font-size:12px;line-height:1.7}
#img-wrap.img-drag-over{box-shadow:inset 0 0 0 2px var(--accent);background:rgba(91,141,238,.05)}
#img-wrap.img-drag-over::after{content:'Drop images here';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--accent);font-weight:600;pointer-events:none;z-index:10}

/* ── SEO Panel ── */
#seo-wrap{flex:1;min-height:0;display:none;flex-direction:column;overflow:hidden}
#seo-subtab-bar{display:flex;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0;overflow-x:auto;scrollbar-width:none}
#seo-subtab-bar::-webkit-scrollbar{display:none}
.seo-stab{flex-shrink:0;padding:7px 11px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt3);font-family:var(--mono);cursor:pointer;border:none;background:transparent;border-bottom:2px solid transparent;transition:color .12s,border-color .12s;white-space:nowrap}
.seo-stab:hover{color:var(--txt2)}
.seo-stab.active{color:var(--accent2);border-bottom-color:var(--accent)}
#seo-body{flex:1;min-height:0;overflow-y:auto;padding:12px;scrollbar-width:thin;scrollbar-color:var(--bg4) transparent}
#seo-save-bar{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-top:1px solid var(--border);flex-shrink:0;background:var(--bg2)}
#seo-save-bar span{font-size:11px;color:var(--txt2);font-family:var(--mono)}
/* score badge */
.seo-score{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-size:11px;font-weight:500;font-family:var(--mono);flex-shrink:0}
.seo-score.good{background:rgba(62,207,126,.15);color:var(--green);border:1px solid rgba(62,207,126,.3)}
.seo-score.ok{background:rgba(240,160,41,.15);color:var(--amber);border:1px solid rgba(240,160,41,.3)}
.seo-score.bad{background:rgba(232,80,74,.15);color:var(--red);border:1px solid rgba(232,80,74,.3)}
/* audit table */
.audit-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:11px}
.audit-row:last-child{border-bottom:none}
.audit-path{flex:1;color:var(--txt2);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.audit-path:hover{color:var(--accent2)}
.audit-miss{display:flex;gap:3px;flex-wrap:wrap}
.miss-tag{font-size:9px;padding:1px 5px;border-radius:3px;background:rgba(232,80,74,.15);color:var(--red);font-family:var(--mono);text-transform:uppercase;border:1px solid rgba(232,80,74,.2)}
/* char counter */
.char-counter{font-size:10px;color:var(--txt3);font-family:var(--mono);text-align:right;margin-top:2px}
.char-counter.warn{color:var(--amber)}
.char-counter.over{color:var(--red)}
/* schema editor */
.schema-block{background:var(--bg3);border:1px solid var(--border2);border-radius:6px;margin-bottom:8px;overflow:hidden}
.schema-block-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;font-size:11px;color:var(--txt2);font-family:var(--mono);cursor:pointer;background:var(--bg4)}
.schema-block-header:hover{background:var(--bg3)}
.schema-textarea{width:100%;background:var(--bg0);color:var(--txt);border:none;outline:none;font-family:var(--mono);font-size:11px;line-height:1.6;padding:10px;resize:vertical;min-height:120px;tab-size:2}
/* og image preview */
.og-img-preview{width:100%;aspect-ratio:1.91;background:var(--bg3);border:1px solid var(--border2);border-radius:6px;object-fit:cover;margin-top:6px;display:block}
.og-img-placeholder{width:100%;aspect-ratio:1.91;background:var(--bg3);border:1px dashed var(--border2);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--txt3);font-size:11px;font-family:var(--mono);margin-top:6px}

/* ── History Panel ── */
#hist-wrap{flex:1;min-height:0;display:none;flex-direction:column;overflow:hidden}
#hist-subtab-bar{display:flex;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0}
.hist-stab{flex:1;padding:7px 6px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt3);font-family:var(--mono);cursor:pointer;border:none;background:transparent;border-bottom:2px solid transparent;transition:color .12s,border-color .12s;text-align:center}
.hist-stab:hover{color:var(--txt2)}
.hist-stab.active{color:var(--accent2);border-bottom-color:var(--accent)}
#hist-body{flex:1;min-height:0;overflow-y:auto;padding:12px;scrollbar-width:thin;scrollbar-color:var(--bg4) transparent}
/* undo log entries */
.undo-entry{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:5px;cursor:pointer;border:1px solid transparent;transition:all .12s;margin-bottom:3px}
.undo-entry:hover{background:var(--bg3);border-color:var(--border2)}
.undo-entry.current{background:var(--bg4);border-color:var(--accent);color:var(--accent2)}
.undo-entry-num{font-size:10px;color:var(--txt3);font-family:var(--mono);min-width:22px;text-align:right;flex-shrink:0}
.undo-entry-icon{font-size:13px;flex-shrink:0}
.undo-entry-label{font-size:11px;color:var(--txt2);flex:1;font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.undo-entry.current .undo-entry-label{color:var(--accent2)}
.undo-entry.future{opacity:.45}
.undo-entry-meta{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0;min-width:0}
.undo-user{font-size:9px;color:var(--accent2);font-family:var(--mono);letter-spacing:.02em;white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}
.undo-time{font-size:9px;color:var(--txt3);font-family:var(--mono);white-space:nowrap}
/* backup entries */
.backup-file{margin-bottom:14px}
.backup-file-name{font-size:11px;color:var(--accent2);font-family:var(--mono);margin-bottom:5px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.backup-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 6px;border-radius:4px;font-size:11px;color:var(--txt2);font-family:var(--mono)}
.backup-row:hover{background:var(--bg3)}
.backup-row-left{display:flex;flex-direction:column;gap:2px;min-width:0}
.backup-row-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.backup-stamp{color:var(--txt2)}
.backup-by{font-size:9px;color:var(--txt3);letter-spacing:.02em}
.backup-by-user{color:var(--accent2);font-weight:500}
.backup-size{color:var(--txt3);font-size:10px}
.backup-size{color:var(--txt3);flex-shrink:0;min-width:50px;text-align:right}
/* ── Spacing Visualiser ── */
.spacing-legend{display:flex;gap:10px;flex-wrap:wrap;padding:8px 0 4px;font-size:11px;color:var(--txt2)}
.sleg{display:flex;align-items:center;gap:4px}
.sleg-dot{width:10px;height:10px;border-radius:2px}

/* ── Find & Replace panel ── */
#fr-wrap{flex:1;min-height:0;display:none;flex-direction:column;overflow:hidden}
#fr-body{flex:1;min-height:0;overflow-y:auto;padding:13px;scrollbar-width:thin;scrollbar-color:var(--bg4) transparent}
#fr-results{margin-top:12px}
.fr-file{margin-bottom:10px}
.fr-file-name{font-size:11px;color:var(--accent2);margin-bottom:4px;padding:3px 0;border-bottom:1px solid var(--border)}
.fr-match{font-size:11px;color:var(--txt2);padding:2px 6px;display:flex;gap:8px;border-radius:3px}
.fr-match:hover{background:var(--bg3)}
.fr-line{color:var(--txt3);flex-shrink:0;min-width:28px}
.fr-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-text mark{background:rgba(240,160,41,.3);color:var(--amber);border-radius:2px}
#fr-summary{font-size:11px;color:var(--txt3);margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}

/* ── Settings Panel ── */
#settings-wrap{flex:1;display:none;flex-direction:column;overflow:hidden}
#settings-subtab-bar{display:flex;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0}
.sett-stab{flex:1;padding:8px 4px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--txt3);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:all .12s}
.sett-stab:hover{color:var(--txt2);background:var(--bg3)}
.sett-stab.active{color:var(--accent2);border-bottom-color:var(--accent);background:var(--bg2)}
/* Settings inner UI */
.sett-section{margin-bottom:20px}
.sett-section-title{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt3);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);font-family:var(--ui)}
.sett-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sett-label{font-size:11px;color:var(--txt2);flex-shrink:0;width:72px}
.sett-inp{flex:1;background:var(--bg3);border:1px solid var(--border2);border-radius:6px;color:var(--txt);font-family:var(--mono);font-size:12px;padding:6px 10px;outline:none;min-width:0}
.sett-inp:focus{border-color:var(--accent)}
.sett-select{flex:1;background:var(--bg3);border:1px solid var(--border2);border-radius:6px;color:var(--txt);font-family:var(--mono);font-size:12px;padding:6px 10px;outline:none;cursor:pointer}
.sett-btn{padding:6px 14px;background:var(--accent);border:none;border-radius:6px;color:#fff;font-family:var(--ui);font-size:12px;font-weight:700;cursor:pointer;transition:background .12s;white-space:nowrap}
.sett-btn:hover{background:var(--accent2)}
.sett-btn.del{background:transparent;border:1px solid rgba(232,80,74,.4);color:var(--red)}
.sett-btn.del:hover{background:rgba(232,80,74,.12)}
.sett-btn.sec{background:transparent;border:1px solid var(--border2);color:var(--txt2)}
.sett-btn.sec:hover{background:var(--bg3);color:var(--txt)}
/* User cards */
.user-card{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:10px 12px;display:flex;align-items:center;gap:10px;margin-bottom:8px}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--ui);font-weight:700;font-size:13px;color:#fff;flex-shrink:0}
.user-info{flex:1;min-width:0}
.user-name{font-size:12px;font-weight:600;color:var(--txt);font-family:var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:10px;color:var(--txt3);letter-spacing:.04em;text-transform:uppercase;margin-top:1px}
/* Extension cards */
.ext-card{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:10px 12px;display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ext-icon{width:32px;height:32px;border-radius:7px;background:var(--bg4);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ext-icon svg{width:16px;height:16px;stroke:var(--accent2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ext-info{flex:1;min-width:0}
.ext-name{font-size:12px;font-weight:600;color:var(--txt);font-family:var(--ui)}
.ext-meta{font-size:10px;color:var(--txt3);margin-top:1px}
.ext-toggle{position:relative;width:32px;height:18px;flex-shrink:0}
.ext-toggle input{opacity:0;width:0;height:0;position:absolute}
.ext-toggle-slider{position:absolute;inset:0;background:var(--bg4);border-radius:9px;cursor:pointer;transition:.15s;border:1px solid var(--border2)}
.ext-toggle-slider::before{content:'';position:absolute;width:12px;height:12px;left:2px;top:2px;background:var(--txt3);border-radius:50%;transition:.15s}
.ext-toggle input:checked+.ext-toggle-slider{background:var(--accent);border-color:var(--accent)}
.ext-toggle input:checked+.ext-toggle-slider::before{transform:translateX(14px);background:#fff}
/* Install tabs */
.inst-tab-bar{display:flex;gap:4px;margin-bottom:12px}
.inst-tab{padding:5px 12px;background:transparent;border:1px solid var(--border2);border-radius:5px;color:var(--txt3);font-family:var(--mono);font-size:11px;cursor:pointer;transition:all .12s}
.inst-tab.active{background:var(--bg4);border-color:var(--accent);color:var(--accent2)}
.inst-dropzone{border:2px dashed var(--border2);border-radius:8px;padding:24px;text-align:center;cursor:pointer;transition:border-color .12s,background .12s;font-size:12px;color:var(--txt3)}
.inst-dropzone:hover,.inst-dropzone.drag{border-color:var(--accent);background:rgba(91,141,238,.04);color:var(--txt2)}
/* Toggle row */
.sett-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}
.sett-toggle-row:last-child{border-bottom:none}
.sett-toggle-info{font-size:12px;color:var(--txt)}
.sett-toggle-sub{font-size:10px;color:var(--txt3);margin-top:2px}


/* ── Spacing vis panel section ── */
#spacingvis-section{display:none}

/* ── Copy-styles indicator ── */
#copy-style-banner{display:none;background:var(--amber);color:var(--bg0);font-size:11px;padding:5px 13px;text-align:center;flex-shrink:0;cursor:pointer}

/* ════════════════════════════════════════
   Tutorial Overlay
   ════════════════════════════════════════ */
#tut-backdrop{position:fixed;inset:0;z-index:8000;pointer-events:none;display:none}
#tut-backdrop.active{display:block}
#tut-svg{position:absolute;inset:0;width:100%;height:100%}
#tut-card{
  position:fixed;z-index:8100;width:400px;
  background:var(--bg2);border:1px solid var(--border3);border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04);
  pointer-events:all;transition:opacity .25s,transform .25s;
}
#tut-card.hidden{opacity:0;transform:translateY(8px);pointer-events:none}
#tut-arrow{position:absolute;width:12px;height:12px;background:var(--bg2);border:1px solid var(--border3);transform:rotate(45deg);z-index:-1}
#tut-head{padding:18px 20px 14px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:10px}
#tut-step-badge{flex-shrink:0;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:rgba(91,141,238,.12);border:1px solid rgba(91,141,238,.22);border-radius:20px;padding:3px 10px;font-family:var(--mono);margin-top:2px;white-space:nowrap}
#tut-title{font-family:var(--ui);font-size:17px;font-weight:700;line-height:1.2;flex:1}
#tut-body{padding:14px 20px 18px;font-size:13px;color:var(--txt2);line-height:1.8}
#tut-body strong{color:var(--txt);font-weight:500}
#tut-body code{background:var(--bg4);border:1px solid var(--border2);border-radius:3px;padding:1px 6px;font-size:12px;color:var(--accent2)}
#tut-foot{padding:12px 20px 16px;display:flex;align-items:center;gap:8px}
#tut-progress{flex:1;display:flex;gap:5px;align-items:center}
.tut-dot{width:7px;height:7px;border-radius:50%;background:var(--bg4);border:1px solid var(--border2);transition:all .2s;cursor:pointer}
.tut-dot.active{background:var(--accent);border-color:var(--accent);transform:scale(1.3)}
.tut-dot.done{background:var(--accent2);border-color:var(--accent2);opacity:.55}
#tut-prev{padding:6px 14px;background:transparent;border:1px solid var(--border2);border-radius:6px;color:var(--txt2);font-family:var(--mono);font-size:12px;cursor:pointer;transition:all .12s}
#tut-prev:hover{background:var(--bg3);color:var(--txt)}
#tut-prev:disabled{opacity:.3;cursor:not-allowed}
#tut-next{padding:6px 16px;background:var(--accent);border:none;border-radius:6px;color:#fff;font-family:var(--ui);font-size:13px;font-weight:700;cursor:pointer;transition:background .12s}
#tut-next:hover{background:var(--accent2)}
#tut-skip{position:absolute;top:12px;right:14px;background:transparent;border:none;color:var(--txt3);font-size:18px;cursor:pointer;line-height:1;padding:2px}
#tut-skip:hover{color:var(--txt)}
#tut-replay-btn{display:none;padding:5px 10px;background:transparent;border:1px solid var(--border2);border-radius:6px;color:var(--txt3);font-family:var(--mono);font-size:11px;cursor:pointer;transition:all .12s;flex-shrink:0}
#tut-replay-btn:hover{background:var(--bg3);color:var(--txt);border-color:var(--border3)}

/* ── Setup wizard banner ── */
#setup-banner{display:none;background:rgba(240,160,41,.1);border:1px solid rgba(240,160,41,.3);border-radius:8px;padding:12px 16px;margin-bottom:16px;font-size:12px;line-height:1.6;color:var(--amber)}
#setup-banner a{color:var(--accent);text-decoration:none;font-weight:500;border-bottom:1px solid rgba(91,141,238,.3)}
#setup-banner a:hover{border-bottom-color:var(--accent)}

/* ════════════════════════════════════════
   MOBILE RESPONSIVE — drawer + touch
   ════════════════════════════════════════ */

/* ── Long-press tooltip in canvas ── */
#touch-tooltip{
  position:fixed;z-index:99998;
  background:var(--bg0);border:1px solid var(--border2);
  border-radius:8px;padding:8px 0;min-width:160px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  display:none;
  font-family:var(--mono);font-size:12px;
}
#touch-tooltip.visible{display:block}
.tt-item{
  padding:9px 14px;color:var(--txt2);cursor:pointer;
  display:flex;align-items:center;gap:8px;
  transition:background .1s;
}
.tt-item:hover,.tt-item:active{background:var(--bg3);color:var(--txt)}
.tt-item svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6;flex-shrink:0}

/* ── Mobile panel toggle FAB ── */
#panel-fab{
  display:none;
  position:fixed;bottom:20px;right:20px;z-index:1000;
  width:52px;height:52px;border-radius:50%;
  background:var(--accent);border:none;
  color:#fff;cursor:pointer;
  box-shadow:0 4px 16px rgba(91,141,238,.5);
  align-items:center;justify-content:center;
  transition:transform .15s,box-shadow .15s;
}
#panel-fab:active{transform:scale(.93)}
#panel-fab svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8}

/* ── Drawer overlay ── */
#drawer-overlay{
  display:none;
  position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.55);
  opacity:0;transition:opacity .25s;
}
#drawer-overlay.visible{opacity:1}

/* ── Mobile topbar: icon-only compact buttons ── */
@media (max-width:700px){
  :root{ --top-h:48px; }

  /* Topbar: squeeze everything, reduce gap */
  #topbar{ padding:0 6px; gap:4px; overflow:hidden; }
  #logo .logo-sub{ display:none; }
  #logo .logo-main{ font-size:12px; }
  #logo{ flex-shrink:1; min-width:0; }

  /* Status pill compact — shrinks first */
  #status-pill{ min-width:50px; font-size:10px; padding:2px 6px; flex-shrink:2; }

  /* Hide text labels on all topbar buttons, keep icons */
  #tut-replay-btn{ display:none !important; }
  #save-html-btn{ font-size:0 !important; padding:5px 10px; min-width:32px; }
  #save-html-btn::before{ content:'💾'; font-size:15px; }
  .mdbtn{ font-size:0 !important; padding:5px 8px; min-width:28px; }
  #btn-edit::before{ content:'✏️'; font-size:13px; }
  #btn-browse::before{ content:'👁'; font-size:13px; }
  #undo-btn,#redo-btn{ font-size:16px !important; padding:4px 7px; }
  #theme-btn{ font-size:16px; padding:4px 7px; flex-shrink:0; }
  .tbtn[onclick="doLogout()"]{ font-size:0 !important; padding:5px 9px; }
  .tbtn[onclick="doLogout()"]::before{ content:'⏏'; font-size:14px; }

  /* Body: canvas fills full width, panel-wrap is out of flow */
  #body-inner{ position:relative; }
  #canvas-wrap{ width:100% !important; flex:1; min-height:0; height:100%; }

  /* Viewport bar: hide laptop preset, compress */
  #vp-laptop{ display:none; }
  #vp-custom-wrap{ min-width:70px; }
  #viewport-bar-title{ display:none; }
  #viewport-bar{ padding:5px 8px; gap:4px; }

  /* Panel becomes a right drawer */
  #panel-wrap{
    position:fixed !important;
    top:var(--top-h);right:0;bottom:0;
    width:min(88vw, 420px) !important;
    z-index:950;
    transform:translateX(105%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    display:flex !important;
    box-shadow:-4px 0 24px rgba(0,0,0,.35);
  }
  #panel-wrap.drawer-open{
    transform:translateX(0);
  }
  #panel{ width:100% !important; min-width:0 !important; }

  /* Hide the drag resizer on mobile */
  #panel-resizer{ display:none; }

  /* Show FAB */
  #panel-fab{ display:flex; }

  /* Drawer overlay sits below drawer but above canvas */
  #drawer-overlay{ z-index:940; }

  /* Larger touch targets for panel inputs */
  .inp,.hex-inp{ font-size:14px !important; padding:8px 10px !important; min-height:40px; }
  select.inp{ font-size:14px !important; padding:8px 28px 8px 10px !important; }
  .tbtn{ padding:7px 12px; font-size:12px; }
  .ptab-icon{ padding:7px 4px 5px; flex:1; }
  .cat-btn{ padding:10px 4px 8px; }
  .row label{ min-width:72px; font-size:12px; }
  input[type="color"]{ width:34px; height:34px; }

  /* Tree files easier to tap */
  .tree-file,.tree-dir-label{ padding:9px 13px; min-height:44px; }

  /* Larger undo entries */
  .undo-entry{ padding:10px 8px; }

  /* Textarea bigger for thumb typing */
  textarea.inp{ min-height:100px !important; font-size:14px !important; }

  /* Panel header taller cats */
  .cat-btn span{ font-size:9px; }
  .cat-btn svg{ width:18px; height:18px; }

  /* Login card full-width on small screens */
  .lcard{ width:92vw; padding:28px 20px; }

  /* Tutorial card — always centred, never beside panel */
  #tut-card{ left:50% !important; transform:translateX(-50%); max-width:92vw; }
}

/* ── Tablet (701-1000px): side-by-side but narrower panel ── */
@media (min-width:701px) and (max-width:1000px){
  :root{ --panel-w:340px; }
  #tut-replay-btn{ display:none !important; }
  #logo .logo-sub{ display:none; }
  .inp,.hex-inp{ font-size:13px !important; }
  .tree-file,.tree-dir-label{ padding:7px 13px; }
}

/* ── Template picker modal ── */
#tpl-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:9999;display:none;align-items:center;justify-content:center}
#tpl-overlay.open{display:flex}
#tpl-card{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:28px 26px;width:420px;max-height:80vh;display:flex;flex-direction:column}
#tpl-card h3{font-family:var(--ui);font-size:16px;margin-bottom:18px;color:var(--txt)}
.tpl-list{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;overflow-y:auto;flex:1}
.tpl-item{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bg1);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:border-color .12s,background .12s}
.tpl-item:hover{background:var(--bg3);border-color:var(--border3)}
.tpl-item.selected{border-color:var(--accent);background:var(--bg4)}
.tpl-item .tpl-icon{font-size:20px;flex-shrink:0}
.tpl-item .tpl-info{flex:1;min-width:0}
.tpl-item .tpl-name{font-size:13px;color:var(--txt);font-weight:500}
.tpl-item .tpl-desc{font-size:10px;color:var(--txt3);margin-top:2px}
.tpl-path-row{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.tpl-path-row label{font-size:10px;color:var(--txt2);letter-spacing:.06em;text-transform:uppercase;flex-shrink:0}
.tpl-path-row input{flex:1;background:var(--bg3);border:1px solid var(--border2);border-radius:6px;color:var(--txt);font-family:var(--mono);font-size:12px;padding:8px 10px;outline:none}
.tpl-path-row input:focus{border-color:var(--accent)}
#tpl-actions{display:flex;gap:8px}
#tpl-actions button{flex:1}
#tpl-err{color:var(--red);font-size:11px;min-height:16px;margin-top:8px}

/* ── Multi-Tenant Dashboard ── */
#dash-view{display:none;flex:1;overflow:hidden}
#dash-shell{display:flex;height:100%}
#dash-sidebar{width:220px;background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 100%);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.dash-sb-header{padding:20px 18px 14px;border-bottom:1px solid var(--border)}
.dash-sb-title{font-family:var(--ui);font-size:11px;font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:.09em}
.dash-nav{flex:1;padding:6px 0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bg4) transparent}
.dash-nav::-webkit-scrollbar{width:4px}
.dash-nav::-webkit-scrollbar-track{background:transparent}
.dash-nav::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:4px}

/* ── Nav Sections ── */
.nav-section{position:relative}
.nav-section+.nav-section{border-top:1px solid var(--border)}
.nav-section.disabled{opacity:.38;pointer-events:none}
.nav-section-header{display:flex;align-items:center;gap:10px;padding:11px 18px;cursor:pointer;color:var(--txt2);font-family:var(--ui);font-size:12px;font-weight:600;transition:all .18s;user-select:none;border-left:3px solid transparent;letter-spacing:.02em}
.nav-section-header:hover{background:rgba(91,141,238,.04);color:var(--txt);border-left-color:rgba(91,141,238,.25)}
.nav-section-header svg{width:15px;height:15px;flex-shrink:0;opacity:.5;transition:all .18s}
.nav-section-header:hover svg{opacity:.8}
.nav-section-desc{font-family:var(--mono);font-size:9px;color:var(--txt3);padding:0 18px 8px;margin-left:25px;letter-spacing:.04em;text-transform:uppercase}
.nav-expand-icon{font-size:9px;margin-left:auto;transition:transform .2s cubic-bezier(.4,0,.2,1);opacity:.4;line-height:1}
.nav-section:not(.expanded) .nav-expand-icon{transform:rotate(-90deg)}
.nav-section-arrow{font-size:12px;margin-left:auto;opacity:.3;transition:all .15s}
.nav-section-header:hover .nav-section-arrow{opacity:.7;transform:translateX(2px)}
.cs-badge{font-family:var(--mono);font-size:8px;font-weight:500;background:var(--bg3);color:var(--txt3);border-radius:10px;padding:2px 8px;margin-left:auto;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--border)}
.nav-sub-items{overflow:hidden;transition:max-height .28s cubic-bezier(.4,0,.2,1)}
.nav-section:not(.expanded) .nav-sub-items{max-height:0}
.nav-section.expanded .nav-sub-items{max-height:600px}

/* ── Sub nav items ── */
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 18px 8px 30px;cursor:pointer;color:var(--txt2);font-family:var(--mono);font-size:11.5px;font-weight:400;transition:all .15s;border-left:3px solid transparent;user-select:none;position:relative;margin:0}
.nav-item::before{content:'';position:absolute;left:18px;width:4px;height:4px;border-radius:50%;background:var(--border2);opacity:0;transition:all .15s}
.nav-item:hover{color:var(--txt);background:rgba(91,141,238,.03)}
.nav-item:hover::before{opacity:.4}
.nav-item.active{color:var(--accent);background:linear-gradient(90deg,rgba(91,141,238,.07) 0%,transparent 100%);border-left-color:var(--accent);font-weight:500}
.nav-item.active::before{background:var(--accent);opacity:1}
.nav-item svg{width:15px;height:15px;flex-shrink:0;opacity:.55;transition:all .15s}
.nav-item:hover svg{opacity:.75}
.nav-item.active svg{opacity:1}
.nav-item.active:hover{background:linear-gradient(90deg,rgba(91,141,238,.09) 0%,transparent 100%)}
.nav-badge{font-family:var(--mono);font-size:9.5px;font-weight:500;background:var(--bg3);color:var(--txt3);border-radius:10px;padding:1px 8px;margin-left:auto;border:1px solid var(--border)}
.nav-item.active .nav-badge{background:rgba(91,141,238,.12);color:var(--accent);border-color:rgba(91,141,238,.2)}
#dash-content{flex:1;overflow-y:auto;padding:36px 40px;scrollbar-width:thin;scrollbar-color:var(--bg4) transparent;background:transparent}
/* tiles & info lift off the textured background */
.stat-card,.site-card,.config-card,.dash-user-table-wrap,.sd-env-tile,.sd-stat-card{box-shadow:var(--shadow-md)}
.dash-page{display:none;animation:fadeIn .2s ease}
.dash-page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.dash-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px}
.dash-header+.dash-header{margin-top:44px}
.dash-title{font-family:var(--ui);font-size:22px;font-weight:700;display:flex;align-items:center;gap:10px}
.dash-title em{color:var(--accent);font-style:normal}
.dash-count{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--txt2);background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:3px 12px;line-height:1.5}
.dash-actions{display:flex;gap:8px}

.dash-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:36px}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 22px;transition:all .2s;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;opacity:0;transition:opacity .2s}
.stat-card:hover{border-color:var(--border3);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.stat-card:hover::before{opacity:1}
.stat-card:nth-child(1)::before{background:linear-gradient(90deg,var(--accent),var(--cyan))}
.stat-card:nth-child(2)::before{background:linear-gradient(90deg,var(--cyan),var(--green))}
.stat-card:nth-child(3)::before{background:linear-gradient(90deg,var(--green),var(--accent2))}
.stat-card:nth-child(4)::before{background:linear-gradient(90deg,var(--amber),var(--accent))}
.stat-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.stat-icon{width:38px;height:38px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-icon.sites{background:rgba(91,141,238,.1);color:var(--accent)}
.stat-icon.users{background:rgba(61,214,200,.1);color:var(--cyan)}
.stat-icon.local{background:rgba(62,207,126,.1);color:var(--green)}
.stat-icon.remote{background:rgba(240,160,41,.1);color:var(--amber)}
.stat-icon.open{background:rgba(91,141,238,.1);color:var(--accent)}
.stat-icon.unassigned{background:rgba(240,160,41,.1);color:var(--amber)}
.stat-icon.overdue{background:rgba(229,83,75,.1);color:var(--red)}
.stat-icon.resolved{background:rgba(76,175,80,.1);color:var(--green)}
.stat-icon svg{width:17px;height:17px}
.stat-value{font-family:var(--ui);font-size:28px;font-weight:700;color:var(--txt);line-height:1}
.stat-label{font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:.06em;margin-top:6px;font-weight:500}

.overview-quick{display:flex;gap:10px;margin-bottom:36px}
.overview-quick .tbtn.pri{padding:10px 20px;font-size:12px}
.overview-sites{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px;margin-bottom:28px}
.overview-foot{text-align:center;padding:10px 0}
.overview-foot a{color:var(--accent);font-size:12px;cursor:pointer;text-decoration:none;font-family:var(--mono);font-weight:500;transition:color .15s}
.overview-foot a:hover{color:var(--accent2)}
.overview-recent-label{font-family:var(--ui);font-size:15px;font-weight:600;color:var(--txt);margin-bottom:16px;display:flex;align-items:center;gap:10px}

.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.site-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px 22px 18px;cursor:pointer;transition:all .22s;position:relative;overflow:hidden}
.site-card::after{content:'';position:absolute;inset:0;border-radius:var(--radius-md);opacity:0;transition:opacity .25s;pointer-events:none;background:radial-gradient(ellipse at top left, rgba(91,141,238,.05), transparent 65%)}
.site-card:hover{background:var(--bg3);border-color:var(--border3);transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.site-card:hover::after{opacity:1}
.site-card.type-local{border-left:3px solid var(--cyan)}
.site-card.type-remote{border-left:3px solid var(--amber)}
.site-card-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.site-card-name{font-family:var(--ui);font-size:16px;font-weight:700;color:var(--txt);line-height:1.3;flex:1;min-width:0}
.site-type-badge{font-family:var(--mono);font-size:9px;font-weight:500;padding:3px 8px;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;margin-left:10px}
.site-type-badge.local{background:rgba(62,207,126,.08);color:var(--green);border:1px solid rgba(62,207,126,.15)}
.site-type-badge.remote{background:rgba(240,160,41,.08);color:var(--amber);border:1px solid rgba(240,160,41,.15)}
.site-card-url{font-size:10px;color:var(--txt3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);margin-bottom:14px;line-height:1.5}
.site-card-meta{display:flex;align-items:center;gap:10px;font-size:10px;color:var(--txt3);letter-spacing:.03em;margin-bottom:14px}
.site-status{display:flex;align-items:center;gap:6px;padding:3px 10px;border-radius:10px;font-size:9px;font-family:var(--mono);font-weight:500}
.site-status.active{background:rgba(62,207,126,.06);color:var(--green);border:1px solid rgba(62,207,126,.12)}
.site-status.inactive{background:rgba(232,80,74,.06);color:var(--red);border:1px solid rgba(232,80,74,.12)}
.site-status-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.site-status.active .site-status-dot{background:var(--green);box-shadow:0 0 6px var(--green)}
.site-status.inactive .site-status-dot{background:var(--red)}
.site-card-actions{display:flex;gap:6px}
.site-card-btn{padding:5px 11px;font-size:10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg3);color:var(--txt2);cursor:pointer;font-family:var(--mono);transition:all .15s;line-height:1;font-weight:500}
.site-card-btn:hover{background:var(--bg4);color:var(--txt);border-color:var(--border3)}
.site-card-btn.danger{color:var(--txt3)}
.site-card-btn.danger:hover{background:rgba(232,80,74,.1);color:var(--red);border-color:rgba(232,80,74,.25)}
.dash-empty{grid-column:1/-1;text-align:center;padding:64px 24px;color:var(--txt3);line-height:1.8}
.dash-empty-icon{width:52px;height:52px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--txt3);border:1px solid var(--border)}
.dash-empty-icon svg{width:22px;height:22px}
.dash-empty-title{font-family:var(--ui);font-size:16px;color:var(--txt2);margin-bottom:8px;font-weight:600}
.dash-empty-desc{font-size:11px;max-width:340px;margin:0 auto}

.dash-pager{display:flex;align-items:center;justify-content:center;gap:4px;padding:20px 0 8px}
.page-btn{min-width:32px;height:30px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg2);color:var(--txt2);cursor:pointer;transition:all .15s;padding:0 8px;font-weight:500}
.page-btn:hover:not(.active):not(:disabled){background:var(--bg4);color:var(--txt);border-color:var(--border3);transform:translateY(-1px)}
.page-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#fff;box-shadow:0 2px 8px rgba(91,141,238,.2)}
.page-btn:disabled{opacity:.3;cursor:default}
.page-ellipsis{width:30px;text-align:center;color:var(--txt3);font-size:11px}

.sites-table-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.sites-table{width:100%;border-collapse:collapse;font-size:12px}
.sites-table th{padding:10px 14px;text-align:left;font-size:10px;font-weight:600;color:var(--txt3);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border);background:var(--bg1);white-space:nowrap}
.sites-table td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle;transition:background .12s}
.sites-table tbody:last-child td{border-bottom:none}
.sites-table tbody tr{transition:background .1s;cursor:pointer}
.sites-table tbody tr:hover td{background:var(--bg3)}
.sites-table .tbl-btn{padding:5px 11px;font-size:10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg3);color:var(--txt2);cursor:pointer;transition:all .15s;white-space:nowrap;font-family:var(--mono);font-weight:500}
.sites-table .tbl-btn:hover{background:var(--bg4);color:var(--txt);border-color:var(--border3);transform:translateY(-1px)}
.sites-table .tbl-btn.del{color:var(--txt3)}
.sites-table .tbl-btn.del:hover{background:rgba(232,80,74,.1);color:var(--red);border-color:rgba(232,80,74,.25)}
.sites-table .tbl-btn.clone{color:var(--txt3)}
.sites-table .tbl-btn.clone:hover{background:rgba(91,141,238,.1);color:var(--accent2);border-color:rgba(91,141,238,.25)}

#dash-menu-btn{display:none;position:absolute;top:10px;left:10px;z-index:60;width:34px;height:34px;border-radius:8px;background:var(--bg2);border:1px solid var(--border2);cursor:pointer;align-items:center;justify-content:center;color:var(--txt2)}
#dash-menu-btn svg{width:18px;height:18px}
#dash-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:58}

/* User table */
.dash-users-section{margin-top:8px}
.dash-user-table-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.dash-user-search{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--bg1)}
.dash-user-search svg{width:14px;height:14px;flex-shrink:0;color:var(--txt3)}
.dash-user-search input{flex:1;background:transparent;border:none;color:var(--txt);font-family:var(--mono);font-size:12px;outline:none;padding:4px 0}
.dash-user-search input::placeholder{color:var(--txt3)}
.dash-user-table{width:100%;border-collapse:collapse;font-size:12px}
.dash-user-table th{padding:10px 14px;text-align:left;font-size:10px;font-weight:600;color:var(--txt3);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border);cursor:pointer;user-select:none;white-space:nowrap;transition:color .12s;background:var(--bg1)}
.dash-user-table th:hover{color:var(--accent)}
.dash-user-table td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle;transition:background .12s}
.dash-user-table tbody tr:last-child td{border-bottom:none}
.dash-user-table tbody tr{transition:background .1s}
.dash-user-table tbody tr:hover td{background:var(--bg3)}
.role-badge{font-size:9px;padding:2px 8px;border-radius:9px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;font-weight:500}
.role-badge.admin{background:rgba(91,141,238,.15);color:var(--accent);border:1px solid rgba(91,141,238,.2)}
.role-badge.reseller{background:rgba(180,130,255,.15);color:#b482ff;border:1px solid rgba(180,130,255,.2)}
.role-badge.account_owner{background:rgba(61,214,200,.12);color:var(--cyan);border:1px solid rgba(61,214,200,.2)}
.role-badge.sub_user{background:rgba(240,160,41,.12);color:var(--amber);border:1px solid rgba(240,160,41,.2)}
.role-badge.client{background:rgba(240,160,41,.12);color:var(--amber);border:1px solid rgba(240,160,41,.2)}
.dash-user-table .user-owner-mt{font-size:10px;color:var(--txt3);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl-btn{padding:5px 11px;font-size:10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg3);color:var(--txt2);cursor:pointer;transition:all .15s;white-space:nowrap;font-family:var(--mono);font-weight:500}
.tbl-btn:hover{background:var(--bg4);color:var(--txt);border-color:var(--border3);transform:translateY(-1px)}
.tbl-btn.del{color:var(--txt3);border-color:var(--border)}
.tbl-btn.del:hover{background:rgba(232,80,74,.1);color:var(--red);border-color:rgba(232,80,74,.25)}
.tbl-btn.clone{color:var(--txt3);border-color:var(--border)}
.tbl-btn.clone:hover{background:rgba(91,141,238,.1);color:var(--accent2);border-color:rgba(91,141,238,.25)}
.tbl-actions{display:flex;gap:4px}
.no-results{text-align:center;padding:36px 16px;color:var(--txt3);font-size:12px}

/* Roles & Permissions */
.perm-badge{font-size:9px;padding:2px 8px;border-radius:9px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;font-weight:500}
.perm-badge.count{background:rgba(91,141,238,.12);color:var(--accent2);border:1px solid rgba(91,141,238,.2)}
.perm-badge.wildcard{background:rgba(232,80,74,.12);color:var(--red);border:1px solid rgba(232,80,74,.2)}
.sys-badge{font-size:9px;padding:2px 8px;border-radius:9px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;font-weight:500;background:rgba(240,160,41,.12);color:var(--amber);border:1px solid rgba(240,160,41,.2)}
.perm-group{border:1px solid var(--border2);border-radius:var(--radius-sm);margin-bottom:6px;overflow:hidden}
.perm-group-header{font-family:var(--mono);font-size:11px;font-weight:600;padding:8px 12px;background:var(--bg3);cursor:pointer;user-select:none;display:flex;justify-content:space-between;align-items:center}
.perm-group-header::after{content:var(--expand-icon, '\25b2');font-size:9px;color:var(--txt3);transition:transform .15s}
.perm-group.collapsed .perm-group-header::after{transform:rotate(-90deg)}
.perm-group-body{display:flex;flex-wrap:wrap;gap:4px;padding:10px 12px}
.perm-group.collapsed .perm-group-body{display:none}
.perm-check{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:11px;color:var(--txt2);padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg2);transition:all .12s;user-select:none}
.perm-check:hover{border-color:var(--border3);background:var(--bg3)}
.perm-check.checked{border-color:var(--accent2);background:rgba(91,141,238,.08);color:var(--txt)}
.perm-check input[type=checkbox]{display:none}
.perm-label{display:flex;align-items:center;gap:6px}
.perm-id{font-size:9px;color:var(--txt3);font-family:var(--mono)}

/* User permission override states */
.perm-check.upm-granted{border-color:var(--cyan);background:rgba(61,214,200,.08)}
.perm-check.upm-role{border-style:dashed;border-color:var(--border2);box-shadow:inset 0 0 0 1px var(--border);opacity:.85}
.perm-check.upm-revoked{border-color:var(--red);background:rgba(232,80,74,.06);opacity:.6;text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:1px}

/* Toast */
#toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 16px;font-family:var(--mono);font-size:12px;color:var(--txt);box-shadow:0 10px 30px rgba(0,0,0,.4);pointer-events:auto;display:flex;align-items:center;gap:10px;min-width:260px;max-width:400px;animation:toastIn .3s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.toast.dismiss{animation:toastOut .2s ease forwards}
.toast-icon{width:20px;height:20px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.toast.ok .toast-icon{background:rgba(62,207,126,.12);color:var(--green)}
.toast.err .toast-icon{background:rgba(232,80,74,.12);color:var(--red)}
.toast.warn .toast-icon{background:rgba(240,160,41,.12);color:var(--amber)}
.toast-msg{flex:1;line-height:1.4}
.toast-close{cursor:pointer;color:var(--txt3);font-size:15px;line-height:1;padding:2px 4px;border-radius:3px;transition:all .12s}
.toast-close:hover{color:var(--txt);background:var(--bg4)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(8px) scale(.96)}}

.skel-spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;margin:0 auto;animation:skelSpin .7s linear infinite}
@keyframes skelSpin{to{transform:rotate(360deg)}}

.bulk-bar{display:none;align-items:center;gap:10px;padding:8px 14px;background:rgba(91,141,238,.08);border:1px solid rgba(91,141,238,.2);border-radius:8px;margin-bottom:12px;font-size:11px;color:var(--txt)}
.bulk-bar .bulk-label{font-weight:500;margin-right:6px}
.bulk-bar button{padding:4px 10px;font-size:10px;border:1px solid var(--border2);border-radius:5px;background:transparent;color:var(--txt2);cursor:pointer;font-family:var(--mono);transition:all .12s}
.bulk-bar button:hover{background:var(--bg4);color:var(--txt)}
.bulk-bar button.del:hover{background:rgba(232,80,74,.1);color:var(--red);border-color:rgba(232,80,74,.3)}

.overview-section{margin-top:36px}
.activity-feed{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.act-item{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border);font-size:11px}
.act-item:last-child{border-bottom:none}
.act-icon{width:22px;height:22px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;color:var(--txt3)}
.act-text{flex:1;min-width:0}
.act-text strong{color:var(--txt);font-weight:600}
.act-text em{color:var(--accent);font-style:normal}
.act-time{font-size:9px;color:var(--txt3);white-space:nowrap;flex-shrink:0}

.page-size-sel{background:var(--bg3);border:1px solid var(--border2);border-radius:5px;color:var(--txt);font-family:var(--mono);font-size:10px;padding:5px 6px;outline:none;cursor:pointer;margin-right:6px}

.config-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:20px 22px;margin-bottom:16px}
.config-card h4{font-family:var(--ui);font-size:14px;font-weight:600;margin-bottom:14px;color:var(--txt)}
.config-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.config-row label{font-size:11px;color:var(--txt2);min-width:130px;flex-shrink:0}
.config-row input,.config-row textarea{flex:1;background:var(--bg3);border:1px solid var(--border2);border-radius:6px;color:var(--txt);font-family:var(--mono);font-size:12px;padding:7px 10px;outline:none;max-width:320px}
.config-row input:focus{border-color:var(--accent)}
.config-row .hint{font-size:9px;color:var(--txt3);margin-left:6px}
.config-tags{display:flex;flex-wrap:wrap;gap:6px}
.config-tag{display:flex;align-items:center;gap:4px;padding:3px 9px;background:var(--bg4);border:1px solid var(--border2);border-radius:6px;font-size:11px;font-family:var(--mono);color:var(--txt)}
.config-tag button{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:13px;line-height:1;padding:0 1px;font-family:var(--mono)}
.config-tag button:hover{color:var(--red)}
.config-add-tag{display:flex;gap:4px;margin-top:8px}
.config-add-tag input{width:90px;background:var(--bg3);border:1px solid var(--border2);border-radius:6px;color:var(--txt);font-family:var(--mono);font-size:11px;padding:5px 8px;outline:none}
.config-add-tag input:focus{border-color:var(--accent)}
.config-add-tag button{padding:4px 10px;border:1px solid var(--border2);border-radius:6px;background:var(--accent);color:#fff;font-family:var(--ui);font-size:11px;font-weight:600;cursor:pointer}
.config-save-bar{display:flex;align-items:center;gap:10px;margin-top:10px}
.config-msg{font-size:11px;min-height:18px}

.ext-tab-btn{padding:7px 16px;font-family:var(--ui);font-size:12px;font-weight:600;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--txt2);cursor:pointer;transition:all .15s}
.ext-tab-btn:hover{background:var(--bg4);color:var(--txt);transform:translateY(-1px)}
.ext-tab-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#fff;box-shadow:0 2px 8px rgba(91,141,238,.2)}
.ext-table{width:100%;border-collapse:collapse;font-size:12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.ext-table th{padding:10px 14px;text-align:left;font-size:10px;font-weight:600;color:var(--txt3);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border);background:var(--bg1);white-space:nowrap}
.ext-table td{padding:11px 14px;vertical-align:middle}
.ext-table tbody td{border-bottom:1px solid var(--border)}
.ext-table tbody:last-child td{border-bottom:none}
.ext-table tbody tr:first-child{transition:background .1s}
.ext-table tbody tr:first-child:hover td{background:var(--bg3)}
.ext-name{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--txt)}
.ext-ver{font-size:9px;color:var(--txt3);font-weight:500;background:var(--bg4);padding:2px 7px;border-radius:var(--radius-sm);margin-left:5px}
.ext-desc-cell{color:var(--txt2);font-size:11px;line-height:1.4}
.ext-author{font-size:10px;color:var(--txt3)}
.ext-category{font-size:9px;color:var(--txt3);text-transform:uppercase;letter-spacing:.03em;background:var(--bg3);padding:2px 7px;border-radius:4px}
.ext-installed-badge{font-size:9px;color:var(--green);background:rgba(62,207,126,.1);border:1px solid rgba(62,207,126,.2);padding:2px 8px;border-radius:6px;white-space:nowrap}
.ext-coming-badge{font-size:9px;color:var(--amber);background:rgba(240,160,41,.1);border:1px solid rgba(240,160,41,.2);padding:3px 10px;border-radius:6px;white-space:nowrap;font-family:var(--mono);cursor:default}
.ext-disabled-pill{font-size:11px;font-weight:600;color:var(--amber);background:transparent;border:1px solid rgba(240,160,41,.3);padding:5px 12px;border-radius:6px;white-space:nowrap;font-family:var(--ui)}
.ext-install-btn{padding:6px 14px;font-size:11px;font-weight:600;border:none;border-radius:6px;background:var(--accent);color:#fff;font-family:var(--ui);cursor:pointer;transition:all .12s;white-space:nowrap}
.ext-install-btn:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 2px 8px rgba(91,141,238,.3)}
.ext-install-btn:active{transform:translateY(0)}
.ext-site-count{display:inline-block;font-size:10px;padding:2px 8px;border-radius:8px;background:rgba(91,141,238,.1);color:var(--accent);cursor:pointer;font-family:var(--mono);white-space:nowrap;transition:all .12s}
.ext-site-count:hover{background:rgba(91,141,238,.2);color:var(--accent2)}
.ext-sites-list{max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bg4) transparent;background:var(--bg1);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.ext-sites-table{width:100%;border-collapse:collapse;font-size:11px}
.ext-sites-table th{padding:7px 10px;text-align:left;font-size:9px;font-weight:600;color:var(--txt3);letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--border);background:var(--bg1)}
.ext-sites-table td{padding:7px 10px;border-bottom:1px solid var(--border)}
.ext-sites-table tr:last-child td{border-bottom:none}

.ext-tgl{position:relative;width:40px;height:22px;display:inline-block;vertical-align:middle}
.ext-tgl input{opacity:0;width:0;height:0;position:absolute}
.ext-tgl-slider{position:absolute;inset:0;background:var(--bg4);border-radius:11px;cursor:pointer;transition:.15s;border:1px solid var(--border)}
.ext-tgl-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:2px;background:var(--txt3);border-radius:50%;transition:.18s}
.ext-tgl input:checked+.ext-tgl-slider{background:var(--accent);border-color:var(--accent)}
.ext-tgl input:checked+.ext-tgl-slider::before{transform:translateX(18px);background:#fff}

/* ── Modals ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:9998;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-overlay.open{display:flex}
.modal-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;width:460px;max-height:85vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bg4) transparent;box-shadow:var(--shadow-lg)}
.modal-card h3{font-family:var(--ui);font-size:17px;margin-bottom:20px;color:var(--txt)}
.modal-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.modal-row label{font-size:11px;color:var(--txt2);min-width:80px;flex-shrink:0;font-weight:500}
.inp{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--txt);font-family:var(--mono);font-size:13px;padding:8px 12px;outline:none;transition:all .15s}
.inp:hover{border-color:var(--border3)}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,141,238,.1)}
.inp[type=password]{font-size:13px;letter-spacing:.15em}
.modal-actions{display:flex;gap:8px;margin-top:20px}
.modal-btn{padding:9px 18px;border:none;border-radius:var(--radius-sm);font-family:var(--ui);font-size:13px;font-weight:700;cursor:pointer;flex:1;transition:all .15s}
.modal-btn.pri{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.modal-btn.pri:hover{box-shadow:0 4px 16px rgba(91,141,238,.3);transform:translateY(-1px)}
.modal-btn.sec{background:transparent;border:1px solid var(--border2);color:var(--txt2)}
.modal-btn.sec:hover{background:var(--bg3);color:var(--txt)}
.modal-btn.del{background:transparent;border:1px solid rgba(232,80,74,.4);color:var(--red)}
.modal-btn.del:hover{background:rgba(232,80,74,.12)}
.modal-err{color:var(--red);font-size:11px;min-height:16px;margin-top:10px}
/* Stat info modal sections */
.sim-section{margin-bottom:16px}
.sim-section-h{font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;font-weight:600}
.sim-section p{margin:0 0 6px 0;font-size:12px;color:var(--txt2);line-height:1.6}
.sim-section code{background:var(--bg4);padding:1px 5px;border-radius:3px;font-family:var(--mono);font-size:10px;color:var(--accent)}
.sim-section ol li,.sim-section ul li{font-size:12px;color:var(--txt2);line-height:1.6;margin-bottom:2px}
.sim-section ol li strong,.sim-section ul li strong{color:var(--txt)}
.sim-status-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px}
.sim-status-row span{color:var(--txt3)}
.sim-status-row strong{color:var(--txt);font-family:var(--mono);font-size:13px}
.sim-status-ok{font-size:12px;color:var(--txt);line-height:1.6;padding:10px 14px;background:rgba(63,185,80,.08);border:1px solid rgba(63,185,80,.2);border-radius:6px}
.sim-status-bad{font-size:12px;color:var(--txt);line-height:1.6;padding:10px 14px;background:rgba(232,80,74,.08);border:1px solid rgba(232,80,74,.2);border-radius:6px}
.sim-status-warn{font-size:12px;color:var(--txt);line-height:1.6;padding:10px 14px;background:rgba(240,160,41,.08);border:1px solid rgba(240,160,41,.2);border-radius:6px}
/* File tree in modal */
.sim-tree-row{display:flex;align-items:center;gap:4px;padding:2px 4px;border-radius:3px;cursor:default;white-space:nowrap}
.sim-tree-dir{cursor:pointer;color:var(--accent)}
.sim-tree-dir:hover{background:var(--bg4)}
.sim-tree-file{color:var(--txt2)}
.sim-tree-arrow{font-size:9px;width:14px;text-align:center;flex-shrink:0;color:var(--txt3)}
.sim-tree-icon{font-size:12px;flex-shrink:0}
.sim-tree-children{border-left:1px solid var(--border);margin-left:7px}
/* Backup list in modal */
.sim-bk-row{padding:8px 0;border-bottom:1px solid var(--border)}
.sim-bk-row:last-child{border-bottom:none}
.sim-bk-path{font-family:var(--mono);font-size:11px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px}
.sim-bk-meta{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--txt3)}
.sim-bk-cmp{font-size:10px;padding:2px 8px;border:1px solid var(--border2);border-radius:4px;background:var(--bg3);color:var(--accent);cursor:pointer;font-family:var(--mono);transition:all .12s}
.sim-bk-cmp:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Backup diff table */
.bkdiff-table{width:100%;border-collapse:collapse;table-layout:fixed}
.bkdiff-table td{padding:1px 8px;vertical-align:top;font-size:11px;line-height:1.6;word-break:break-all}
.bkdiff-table .bkdiff-num{width:40px;text-align:right;color:var(--txt3);font-size:10px;padding-right:8px;user-select:none;background:var(--bg2)}
.bkdiff-table .bkdiff-sign{width:20px;text-align:center;font-weight:700;font-size:10px}
.bkdiff-table tr.bkdiff-eq .bkdiff-num{background:var(--bg2)}
.bkdiff-table tr.bkdiff-add td{background:rgba(63,185,80,.08)}
.bkdiff-table tr.bkdiff-add .bkdiff-sign{color:var(--green)}
.bkdiff-table tr.bkdiff-del td{background:rgba(232,80,74,.08)}
.bkdiff-table tr.bkdiff-del .bkdiff-sign{color:var(--red)}
.bkdiff-table tr.bkdiff-header td{background:var(--bg3);font-weight:600;font-size:10px;color:var(--txt2);text-transform:uppercase;letter-spacing:.04em;padding:6px 8px}
/* SEO audit report in modal */
.seo-sum-card{background:var(--bg3);border-radius:8px;padding:12px;text-align:center}
.seo-sum-val{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--txt);line-height:1}
.seo-sum-lbl{font-size:9px;color:var(--txt3);text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
.seo-el-tag{font-size:9px;padding:2px 6px;border-radius:3px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.03em}
.seo-el-tag.ok{background:rgba(63,185,80,.12);color:var(--green);border:1px solid rgba(63,185,80,.2)}
.seo-audit-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:11px}
.seo-audit-row:last-child{border-bottom:none}
.seo-score-badge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-size:10px;font-weight:600;font-family:var(--mono);flex-shrink:0}
.seo-score-badge.good{background:rgba(63,185,80,.12);color:var(--green);border:1px solid rgba(63,185,80,.3)}
.seo-score-badge.ok{background:rgba(240,160,41,.12);color:var(--amber);border:1px solid rgba(240,160,41,.3)}
.seo-score-badge.bad{background:rgba(232,80,74,.12);color:var(--red);border:1px solid rgba(232,80,74,.3)}
.seo-audit-path{flex:1;font-family:var(--mono);font-size:10px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seo-audit-miss{display:flex;gap:3px;flex-wrap:wrap;flex-shrink:0}
.seo-miss-tag{font-size:8px;padding:1px 5px;border-radius:3px;background:rgba(232,80,74,.15);color:var(--red);font-family:var(--mono);text-transform:uppercase;border:1px solid rgba(232,80,74,.2)}
/* SEO element coverage bars */
.seo-el-row{display:flex;align-items:center;gap:10px;padding:5px 0}
.seo-el-name{font-size:11px;color:var(--txt2);min-width:120px;text-align:right}
.seo-el-bar{flex:1;height:6px;background:var(--bg4);border-radius:3px;overflow:hidden}
.seo-el-fill{height:100%;border-radius:3px;transition:width .3s}
.seo-el-pct{font-family:var(--mono);font-size:10px;min-width:36px;text-align:right;font-weight:600}
/* Performance metric grid */
.seo-perf-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.seo-perf-item{background:var(--bg3);border-radius:6px;padding:10px 8px;text-align:center}
.seo-perf-val{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--txt);line-height:1}
.seo-perf-lbl{font-size:9px;color:var(--txt3);margin-top:3px;text-transform:uppercase;letter-spacing:.03em}
@media(max-width:500px){.seo-perf-grid{grid-template-columns:repeat(3,1fr)}.seo-el-name{min-width:90px;font-size:10px}}
.seo-perf-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);font-size:11px}
.seo-perf-row span{color:var(--txt3)}
.seo-perf-row strong{color:var(--txt);font-family:var(--mono);font-size:12px}
#site-switcher{display:none;align-items:center;gap:4px;flex-shrink:0}
#site-switcher select{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--txt);font-family:var(--mono);font-size:11px;padding:5px 10px;outline:none;cursor:pointer;max-width:200px;transition:all .15s}
#site-switcher select:hover{border-color:var(--border3)}
#site-switcher select:focus{border-color:var(--accent)}
.check-list{max-height:200px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg3);scrollbar-width:thin;scrollbar-color:var(--bg4) transparent}
.check-row{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px;cursor:pointer;user-select:none;transition:background .1s;border-bottom:1px solid var(--border)}
.check-row:last-child{border-bottom:none}
.check-row:hover{background:var(--bg2)}
.check-row.checked{background:rgba(91,141,238,.06)}
.check-row input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;cursor:pointer;flex-shrink:0}
.check-row .check-name{flex:1;color:var(--txt);font-family:var(--ui)}
.check-row .check-url{font-size:10px;color:var(--txt3);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Site Dashboard ── */
.sd-back-link{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--txt3);cursor:pointer;text-decoration:none;font-family:var(--mono);transition:color .12s;margin-bottom:12px}
.sd-back-link:hover{color:var(--accent)}
.sd-env-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.sd-env-tile{background:var(--bg2);border:2px solid var(--border);border-radius:12px;padding:18px;cursor:pointer;transition:all .18s;position:relative;overflow:hidden}
.sd-env-tile:hover{border-color:var(--border3);background:var(--bg3);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.sd-env-tile.active{border-color:var(--accent);background:var(--bg3);box-shadow:0 0 0 1px var(--accent)}
.sd-env-tile.local{border-left:4px solid var(--cyan)}
.sd-env-tile.staging{border-left:4px solid var(--amber)}
.sd-env-tile.live{border-left:4px solid var(--green)}
.sd-env-tile.unconfigured{opacity:.45;cursor:default;border-left-color:var(--border2)}
.sd-env-tile.unconfigured:hover{transform:none;box-shadow:none;border-color:var(--border)}
.sd-env-tile-arrow{position:absolute;right:-12px;top:50%;transform:translateY(-50%);color:var(--txt3);font-size:18px;z-index:1;pointer-events:none}
.sd-env-tile-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:10px}
.sd-env-tile-icon.local{background:rgba(86,204,242,.12);color:var(--cyan)}
.sd-env-tile-icon.staging{background:rgba(240,160,41,.12);color:var(--amber)}
.sd-env-tile-icon.live{background:rgba(63,185,80,.12);color:var(--green)}
.sd-env-tile.unconfigured .sd-env-tile-icon{background:var(--bg4);color:var(--txt3)}
.sd-env-tile-name{font-family:var(--ui);font-size:14px;font-weight:700;color:var(--txt);margin-bottom:2px}
.sd-env-tile-url{font-size:10px;color:var(--txt3);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:8px}
.sd-env-tile-meta{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--txt3)}
.sd-env-tile-branch{background:var(--bg4);padding:2px 6px;border-radius:3px;font-family:var(--mono);font-size:9px;color:var(--txt2)}
.sd-env-tile-badge{padding:2px 6px;border-radius:3px;font-size:9px;font-weight:600}
.sd-env-tile-badge.local{background:rgba(86,204,242,.15);color:var(--cyan)}
.sd-env-tile-badge.staging{background:rgba(240,160,41,.15);color:var(--amber)}
.sd-env-tile-badge.live{background:rgba(63,185,80,.15);color:var(--green)}
.sd-env-tile-btn{padding:4px 12px;font-size:10px;border:1px solid var(--border2);border-radius:5px;background:transparent;color:var(--txt2);cursor:pointer;font-family:var(--mono);transition:all .12s;margin-top:10px}
.sd-env-tile-btn:hover{background:var(--bg4);color:var(--txt);border-color:var(--border3)}
.sd-env-tile-btn.pri{background:var(--accent);color:#fff;border-color:var(--accent)}
.sd-env-tile-btn.pri:hover{filter:brightness(1.1)}
.sd-env-tile.unconfigured .sd-env-tile-btn{opacity:.65}
@media(max-width:700px){.sd-env-tiles{grid-template-columns:1fr}.sd-env-tile-arrow{display:none}}
.sd-stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.sd-stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:14px;transition:all .12s;cursor:pointer;user-select:none}
.sd-stat-card:hover{background:var(--bg3);border-color:var(--border3)}
.sd-stat-card.health{border-left:3px solid var(--green)}
.sd-stat-card.files{border-left:3px solid var(--cyan)}
.sd-stat-card.backups{border-left:3px solid var(--amber)}
.sd-stat-card.seo{border-left:3px solid var(--accent)}
.sd-stat-card.seo.warn{border-left-color:var(--amber)}
.sd-stat-card.seo.bad{border-left-color:var(--red)}
.sd-stat-value{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--txt);margin-bottom:2px}
.sd-stat-value.healthy{color:var(--green)}
.sd-stat-value.unhealthy{color:var(--red)}
.sd-stat-label{font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:.04em}
.sd-stat-sub{font-size:9px;color:var(--txt3);margin-top:2px;font-family:var(--mono)}
.sd-stat-card.activity{border-left:3px solid var(--purple)}
.sd-stat-card.ssl{border-left:3px solid var(--green)}
.sd-stat-card.ssl.warn{border-left-color:var(--amber)}
.sd-stat-card.ssl.bad{border-left-color:var(--red)}
.sd-stat-card.breakdown{border-left:3px solid var(--txt3)}
.sd-stat-card.extensions{border-left:3px solid var(--purple)}
.sd-stat-cards-4{grid-template-columns:repeat(4,1fr)}
.sd-stat-cards-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.sd-stat-cards-4,.sd-stat-cards-3{grid-template-columns:repeat(2,1fr)}}
.sd-stat-na{color:var(--txt3);font-size:22px;text-align:center;padding:6px 0}
.sd-activity-item{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:10px}
.sd-activity-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.sd-activity-dot.commit{background:var(--accent)}
.sd-activity-dot.save{background:var(--green)}
.sd-activity-dot.deploy{background:var(--amber)}
.sd-activity-dot.edit{background:var(--cyan)}
.sd-activity-text{color:var(--txt2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-activity-time{color:var(--txt3);flex-shrink:0;font-family:var(--mono)}
.sd-changes{margin-top:4px}
.sd-changes-list{display:flex;flex-direction:column;gap:5px}
.sd-change-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;font-size:11px;transition:border-color .12s}
.sd-change-item:hover{border-color:var(--border3)}
.sd-change-info{flex:1;min-width:0}
.sd-change-file{font-weight:600;color:var(--txt);font-size:11px;margin-bottom:2px}
.sd-change-detail{color:var(--txt2);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-change-meta{color:var(--txt3);font-size:9px;margin-top:2px}
.sd-change-btn{padding:3px 10px;border-radius:4px;font-size:9px;cursor:pointer;border:1px solid var(--border2);background:var(--bg3);color:var(--txt2);white-space:nowrap;font-family:var(--ui);transition:all .12s}
.sd-change-btn:hover{color:var(--accent);border-color:var(--accent)}
.sd-change-btn.revert{color:var(--amber);border-color:var(--amber)}
.sd-change-btn.revert:hover{background:var(--amber);color:#000}
.sd-change-empty{padding:12px 14px;color:var(--txt3);font-size:11px;text-align:center;border:1px dashed var(--border);border-radius:6px}
.sd-breakdown-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;margin-bottom:4px;gap:1px;background:var(--bg4)}
.sd-breakdown-seg{height:100%;border-radius:1px;min-width:2px}
.sd-breakdown-legend{display:flex;flex-wrap:wrap;gap:6px}
.sd-breakdown-legend-item{font-size:9px;color:var(--txt2);display:flex;align-items:center;gap:3px;font-family:var(--mono)}
.sd-breakdown-swatch{width:8px;height:8px;border-radius:2px;flex-shrink:0}
@media(max-width:700px){.sd-stat-cards{grid-template-columns:repeat(2,1fr)}}
.sd-commit-list{margin-bottom:20px}
.sd-commit-row{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--border);border-left:3px solid var(--border2);border-radius:8px;margin-bottom:6px;cursor:pointer;transition:all .12s;background:var(--bg2)}
.sd-commit-row:hover{background:var(--bg3);border-color:var(--border3);border-left-color:var(--accent);transform:translateY(-1px)}
.sd-commit-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:4px}
.sd-commit-body{flex:1;min-width:0}
.sd-commit-hash{font-family:var(--mono);font-size:10px;color:var(--accent);margin-right:8px}
.sd-commit-author{font-size:11px;font-weight:500;color:var(--txt)}
.sd-commit-date{font-size:10px;color:var(--txt3);margin-left:8px}
.sd-commit-msg{font-size:11px;color:var(--txt2);margin-top:2px;line-height:1.4}
.sd-commit-files{font-size:9px;color:var(--txt3);margin-top:3px;font-family:var(--mono)}
.sd-commit-actions{flex-shrink:0;display:flex;gap:6px}
.sd-commit-btn{padding:3px 8px;font-size:9px;border:1px solid var(--border2);border-radius:4px;background:transparent;color:var(--txt2);cursor:pointer;font-family:var(--mono);transition:all .12s}
.sd-commit-btn:hover{background:var(--bg4);color:var(--txt);border-color:var(--border3)}
.sd-commit-btn.danger{color:var(--txt3)}
.sd-commit-btn.danger:hover{background:rgba(232,80,74,.12);color:var(--red);border-color:rgba(232,80,74,.3)}
.sd-pipeline-bar{display:flex;gap:10px;align-items:center;padding:14px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;margin-bottom:4px;flex-wrap:wrap}
.sd-pipeline-bar .sd-merge-btn{font-size:11px;padding:7px 12px;border-radius:8px}
.sd-pipeline-label{font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:.04em;margin-right:4px}
.sd-actions-bar{display:flex;gap:8px;padding:14px 0;border-top:1px solid var(--border);margin-top:16px;align-items:center}
.sd-merge-btn{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.02em;border:1px solid var(--border2);border-radius:8px;cursor:pointer;background:var(--bg3);color:var(--txt2);transition:transform .14s,box-shadow .2s,border-color .18s,background .18s}
.sd-merge-btn .env{display:inline-flex;align-items:center;gap:5px;color:var(--txt);font-weight:700;text-transform:capitalize}
.sd-merge-btn .env::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dotc,var(--txt3))}
.sd-merge-btn .e-local{--dotc:var(--txt3)}
.sd-merge-btn .e-staging{--dotc:var(--amber)}
.sd-merge-btn .e-live{--dotc:var(--green)}
.sd-merge-btn .flow{color:var(--txt3);font-size:13px;line-height:1}
.sd-merge-btn .flow-lbl{color:var(--txt2);font-weight:700}
.sd-merge-btn:hover{transform:translateY(-1px);border-color:var(--border3);box-shadow:var(--shadow-md)}
.sd-merge-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.sd-merge-btn.push{background:color-mix(in srgb,var(--accent) 12%,var(--bg2));border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
.sd-merge-btn.push .flow{color:var(--accent2)}
.sd-merge-btn.push.to-live{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;box-shadow:0 6px 16px -9px color-mix(in srgb,var(--accent) 55%,transparent)}
.sd-merge-btn.push.to-live .env{color:#fff}
.sd-merge-btn.push.to-live .env::before{background:#fff}
.sd-merge-btn.push.to-live .flow{color:rgba(255,255,255,.75)}
.sd-merge-btn.push.to-live:hover{box-shadow:0 11px 24px -9px color-mix(in srgb,var(--accent) 60%,transparent)}
.sd-merge-btn.pull{background:var(--bg2)}
.sd-merge-btn.merge{background:transparent;border-style:dashed;border-color:var(--border3);color:var(--txt2)}
.sd-merge-btn.merge:hover{border-color:var(--accent2);color:var(--txt)}
.sd-merge-confirm{font-size:11px;color:var(--amber);margin-left:12px;display:none;align-items:center;gap:6px;white-space:nowrap}
.sd-pipeline-inner{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wf-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);font-size:11px}
.wf-item:last-child{border-bottom:none}
.wf-badge{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;white-space:nowrap}
.wf-badge.running{background:rgba(91,141,238,.15);color:var(--accent)}
.wf-badge.done{background:rgba(62,207,126,.15);color:var(--green)}
.wf-badge.failed{background:rgba(232,80,74,.15);color:var(--red)}
.wf-type{font-weight:600;color:var(--txt)}
.wf-envs{color:var(--txt2)}
.wf-time{color:var(--txt3);margin-left:auto;white-space:nowrap}
.wf-arrow{color:var(--txt3);margin:0 2px}
@keyframes wf-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.wf-item.live .wf-badge.running{animation:wf-pulse 1.5s infinite}
.sd-quick-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.sd-empty{text-align:center;padding:40px;color:var(--txt3)}
.sd-empty-icon{margin-bottom:12px;opacity:.4}
.sd-empty-title{font-size:14px;font-weight:600;color:var(--txt2);margin-bottom:4px}
.sd-empty-desc{font-size:11px;color:var(--txt3)}
.sd-section-label{font-size:12px;font-weight:600;color:var(--txt);text-transform:uppercase;letter-spacing:.04em}
.sd-section-count{font-size:10px;color:var(--txt3);font-family:var(--mono)}
.sd-diff-modal-body{max-height:60vh;overflow-y:auto;font-family:var(--mono);font-size:11px;line-height:1.5;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:14px;white-space:pre-wrap;color:var(--txt2)}
.sd-diff-add{color:var(--green)}
.sd-diff-del{color:var(--red)}
.sd-diff-hunk{color:var(--accent)}
.sd-status-bar{display:flex;gap:12px;align-items:center;margin-bottom:16px;font-size:10px;color:var(--txt3)}
.sd-status-bar .clean{color:var(--green)}
.sd-status-bar .dirty{color:var(--amber)}
.sd-commit-prompt{display:flex;gap:8px;align-items:center;margin-top:10px;padding:8px 12px;background:var(--bg3);border:1px solid var(--border2);border-radius:6px}
.sd-commit-prompt input{flex:1;background:var(--bg);border:1px solid var(--border2);border-radius:4px;padding:6px 10px;color:var(--txt);font-family:var(--mono);font-size:11px;outline:none}
.sd-commit-prompt input:focus{border-color:var(--accent)}
.sd-commit-prompt button{padding:5px 12px;font-size:10px;border:none;border-radius:4px;cursor:pointer;font-family:var(--mono);transition:all .12s}
.sd-commit-prompt .scp-ok{background:var(--accent);color:#fff}
.sd-commit-prompt .scp-cancel{background:var(--bg4);color:var(--txt2)}

@media(max-width:700px){
  #dash-view{padding:0;position:relative}
  #dash-shell{position:relative}
  #dash-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:59;transform:translateX(-100%);transition:transform .25s;box-shadow:4px 0 24px rgba(0,0,0,.4)}
  #dash-sidebar.open{transform:translateX(0)}
  #dash-sidebar-backdrop.open{display:block}
  #dash-menu-btn{display:flex}
  #dash-content{padding:16px}
  .dash-grid{grid-template-columns:1fr}
  .dash-stats{grid-template-columns:repeat(2,1fr)}
  .overview-sites{grid-template-columns:1fr}
  .modal-card{width:92vw;padding:20px}
  #site-switcher select{max-width:120px}
}

/* ── Add Site Wizard Overlay ── */
.wiz-overlay{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.65);display:none;align-items:flex-start;justify-content:center;padding:20px 12px 60px;overflow-y:auto}
.wiz-overlay.open{display:flex}
.wiz-panel{background:var(--bg2);border:1px solid var(--border2);border-radius:14px;width:100%;max-width:540px;overflow:hidden}
.wiz-pnl-head{padding:22px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.wiz-pnl-head h2{font-family:var(--ui);font-size:17px;font-weight:700}
.wiz-pnl-head button{background:none;border:none;color:var(--txt3);font-size:20px;cursor:pointer;line-height:1;padding:0 4px;font-family:var(--mono)}
.wiz-pnl-head button:hover{color:var(--txt)}
.wiz-steps{display:flex;border-bottom:1px solid var(--border);background:var(--bg1)}
.wiz-step-ind{flex:1;display:flex;align-items:center;gap:6px;padding:10px 8px;font-size:10px;color:var(--txt3);border-bottom:2px solid transparent;transition:all .2s}
.wiz-step-ind.active{border-bottom-color:var(--accent);color:var(--txt)}
.wiz-step-ind.done{border-bottom-color:var(--green);color:var(--green)}
.wiz-step-num{width:18px;height:18px;border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:500;flex-shrink:0}
.wiz-step-ind.active .wiz-step-num{background:var(--accent);color:#fff}
.wiz-step-ind.done .wiz-step-num{background:var(--green);color:var(--bg0)}
.wiz-step-label{font-size:9px;letter-spacing:.04em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis}
.wiz-body{padding:20px 24px;max-height:48vh;overflow-y:auto}
.wiz-foot{padding:14px 24px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg1)}
.wiz-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wiz-type-card{border:2px solid var(--border2);border-radius:10px;padding:18px 14px;cursor:pointer;transition:all .15s;background:var(--bg3);text-align:center}
.wiz-type-card:hover{border-color:var(--accent);background:var(--bg4)}
.wiz-type-card.selected{border-color:var(--accent);background:rgba(91,141,238,.08)}
.wiz-type-icon{font-size:24px;margin-bottom:8px}
.wiz-type-name{font-family:var(--ui);font-size:14px;font-weight:700;margin-bottom:4px}
.wiz-type-desc{font-size:10px;color:var(--txt2);line-height:1.5}
.wiz-provider-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.wiz-prov-card{border:1px solid var(--border2);border-radius:8px;padding:10px 12px;cursor:pointer;font-size:11px;color:var(--txt2);text-align:center;background:var(--bg3);transition:all .12s}
.wiz-prov-card:hover{border-color:var(--accent2);color:var(--txt)}
.wiz-prov-card.active{border-color:var(--accent);color:var(--accent2);background:rgba(91,141,238,.06)}
.wiz-field{margin-bottom:14px}
.wiz-field label{display:block;font-size:10px;color:var(--txt2);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
.wiz-field label .req{color:var(--red)}
.wiz-field input{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:6px;color:var(--txt);font-family:var(--mono);font-size:12px;padding:8px 10px;outline:none}
.wiz-field input:focus{border-color:var(--accent)}
.wiz-field input.err{border-color:var(--red)}
.wiz-hint{font-size:10px;color:var(--txt3);margin-top:4px;line-height:1.5}
.wiz-hint code{background:var(--bg4);border:1px solid var(--border);border-radius:3px;padding:1px 4px;font-size:10px;color:var(--accent2)}
.wiz-pb{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:12px;margin-top:8px;display:none}
.wiz-pb.visible{display:block}
.wiz-pb-title{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt3);margin-bottom:8px}
.wiz-pb-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.wiz-pb-label{font-size:10px;color:var(--txt2);width:70px;flex-shrink:0}
.wiz-pb-input{flex:1;background:var(--bg4);border:1px solid var(--border2);border-radius:5px;color:var(--txt);font-family:var(--mono);font-size:11px;padding:5px 7px;outline:none}
.wiz-pb-input:focus{border-color:var(--accent)}
.wiz-pb-preview{background:var(--bg0);border:1px solid var(--border);border-radius:5px;padding:6px 8px;margin-top:6px;font-size:10px;color:var(--accent2);word-break:break-all}
.wiz-pb-preview span{color:var(--txt3)}
.wiz-checks{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.wiz-check-row{display:flex;align-items:flex-start;gap:8px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:11px;transition:all .2s}
.wiz-check-row.ok{border-color:rgba(62,207,126,.3);background:rgba(62,207,126,.05)}
.wiz-check-row.fail{border-color:rgba(232,80,74,.3);background:rgba(232,80,74,.05)}
.wiz-check-row.warn{border-color:rgba(240,160,41,.3);background:rgba(240,160,41,.05)}
.wiz-check-row.pending{opacity:.5}
.wiz-check-icon{width:18px;height:18px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px}
.wiz-check-row.ok .wiz-check-icon{background:rgba(62,207,126,.2);color:var(--green)}
.wiz-check-row.fail .wiz-check-icon{background:rgba(232,80,74,.2);color:var(--red)}
.wiz-check-row.warn .wiz-check-icon{background:rgba(240,160,41,.2);color:var(--amber)}
.wiz-check-row.pending .wiz-check-icon{background:var(--bg4);color:var(--txt3)}
.wiz-success{text-align:center;padding:16px 0 8px}
.wiz-success-icon{width:56px;height:56px;border-radius:50%;background:rgba(62,207,126,.15);border:2px solid rgba(62,207,126,.4);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:24px}
.wiz-success h3{font-family:var(--ui);font-size:18px;margin-bottom:6px;color:var(--txt)}
.wiz-success h3 em{color:var(--green);font-style:normal}
.wiz-success p{font-size:11px;color:var(--txt2);margin-bottom:16px}
.wiz-alert{border-radius:6px;padding:8px 12px;font-size:11px;line-height:1.5;margin-bottom:12px;display:flex;gap:8px;align-items:flex-start}
.wiz-alert.warn{background:rgba(240,160,41,.1);border:1px solid rgba(240,160,41,.25);color:var(--amber)}
.wiz-alert.info{background:rgba(91,141,238,.1);border:1px solid rgba(91,141,238,.2);color:var(--accent2)}
.wiz-alert.err{background:rgba(232,80,74,.1);border:1px solid rgba(232,80,74,.2);color:var(--red)}
@media(max-width:700px){
  .wiz-panel{max-width:100%}
  .wiz-body{padding:16px 16px}
  .wiz-foot{padding:12px 16px}
  .wiz-type-grid{grid-template-columns:1fr}
  .wiz-provider-grid{grid-template-columns:1fr 1fr}
}
.dev-tab{display:none}
.dev-only{display:none}

/* ── Print / PDF Export ── */
@media print{
  #topbar,#dash-sidebar,#dash-sidebar-backdrop,#dash-menu-btn{display:none !important}
  #dash-content{padding:20px 30px !important;overflow:visible !important}
  .no-print{display:none !important}
  #dash-page-intake-view{display:block !important}
  #dash-page-intake-view .dash-header{margin-bottom:20px}
  #dash-page-intake-view .dash-title{font-size:18px;color:#000}
  #iv-body{max-width:100% !important}
  .iv-section{border-color:#ccc !important}
  .iv-section h3{color:#333 !important}
  .iv-field-label{color:#666 !important}
  .iv-field-value{color:#000 !important}
  .iv-meta{color:#999 !important}
  body{background:#fff !important;color:#000 !important}
}