@font-face{font-family:'Vazirmatn';src:url('/assets/fonts/Vazirmatn-Variable.woff2') format('woff2 supports variations'),url('/assets/fonts/Vazirmatn-Variable.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}
:root{--bg:#f4f5f7;--panel:#fff;--ink:#1a1d21;--muted:#5b6470;--line:#e2e5ea;--soft:#eef1f4;--accent:#2f6df6;--danger:#dc2626;--ok:#16a34a;--warn:#d97706;--shadow:0 1px 2px rgba(20,25,35,.06),0 6px 20px rgba(20,25,35,.05);--r:14px}
html[data-theme=dark]{--bg:#0f1216;--panel:#171b21;--ink:#e8eaed;--muted:#9aa4b0;--line:#282e37;--soft:#1e232b;--accent:#5b8dff;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:'Vazirmatn',Tahoma,Arial,sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}
body.center{min-height:100vh;display:grid;place-items:center;padding:20px}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:1100px;margin-inline:auto;padding:22px 16px 70px}
.muted{color:var(--muted)}
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:1100px;margin-inline:auto;padding:10px 16px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:800}
.nav{display:flex;gap:14px;margin-inline-start:10px}.nav a{color:var(--muted);font-weight:600}.nav a:hover{color:var(--ink)}
.spacer{flex:1}
.btn{font:inherit;font-weight:600;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:8px 14px;border-radius:11px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.ghost{background:transparent}.btn.danger{color:#fff;background:var(--danger);border-color:var(--danger)}
.btn.block{width:100%;justify-content:center;margin-top:6px}.btn.sm{padding:5px 10px;font-size:13px;border-radius:9px}
.iconbtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;font-size:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px}
.login{width:min(400px,94vw)}.login-logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800}
.login label,.form label{display:block;margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.login input,.form input,.form select{width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit}
.lang-link{display:block;text-align:center;margin-top:14px;color:var(--muted);font-weight:700}
.page-h{display:flex;align-items:center;gap:14px;margin:6px 0 18px}.page-h h1{font-size:22px;margin:0;flex:1}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.proj .proj-h{display:flex;align-items:center;gap:10px}.proj h3{margin:0;font-size:16px}
.kind{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--soft)}
.row{display:flex;gap:8px;margin-top:12px}
.alert{padding:10px 12px;border-radius:10px;margin:10px 0;font-size:14px}
.alert.err{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.alert.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.alert.warn{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
.form.inline label{display:inline-block;margin-inline-end:10px}.form.inline input,.form.inline select{width:auto}
.table-scroll{overflow-x:auto}.tbl{width:100%;border-collapse:collapse}.tbl th,.tbl td{text-align:start;padding:9px 12px;border-bottom:1px solid var(--line)}
.viewer{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--panel)}
.viewer iframe{width:100%;height:78vh;border:0;display:block}
.editor{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.toolbar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.toolbar .sep{width:1px;height:20px;background:var(--line);margin:0 4px}.toolbar .spacer{flex:1}
.edit-main{display:flex;min-height:60vh}
#ed{flex:1;border:0;padding:18px;font-family:'Vazirmatn',monospace;font-size:15px;line-height:1.9;background:transparent;color:var(--ink);resize:vertical;min-height:60vh;outline:none}
.history-panel{width:260px;border-inline-start:1px solid var(--line);padding:12px;overflow:auto;max-height:70vh}
.history-panel h4{margin:4px 0 10px}.history-panel ul{list-style:none;margin:0;padding:0}
.history-panel li{padding:8px 10px;border:1px solid var(--line);border-radius:9px;margin-bottom:7px;cursor:pointer;font-size:12.5px}
.history-panel li:hover{border-color:var(--accent)}
.hint{padding:8px 14px;font-size:12.5px}.save-state{font-size:12.5px}

/* splash screen */
#splash{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--bg);transition:opacity .5s ease}
#splash.hide{opacity:0;pointer-events:none}
.sp-box{display:flex;flex-direction:column;align-items:center;gap:14px}
.sp-logo{filter:drop-shadow(0 8px 24px color-mix(in srgb,var(--accent) 35%,transparent))}
.sp-ring{transform-origin:50% 50%;stroke-dasharray:340;stroke-dashoffset:340;animation:sp-draw 1.1s ease forwards, sp-spin 2.4s linear .3s infinite}
.sp-bolt{opacity:0;transform-origin:50% 50%;transform:scale(.4);animation:sp-pop .5s cubic-bezier(.2,1.3,.4,1) .55s forwards}
.sp-name{font-weight:850;font-size:24px;letter-spacing:.02em;opacity:0;animation:sp-fade .5s ease .8s forwards;color:var(--ink)}
.sp-dots{display:flex;gap:7px;opacity:0;animation:sp-fade .5s ease 1s forwards}
.sp-dots i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:sp-bounce 1s ease infinite}
.sp-dots i:nth-child(2){animation-delay:.15s}.sp-dots i:nth-child(3){animation-delay:.3s}
@keyframes sp-draw{to{stroke-dashoffset:0}}
@keyframes sp-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes sp-pop{to{opacity:1;transform:scale(1)}}
@keyframes sp-fade{to{opacity:1}}
@keyframes sp-bounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-7px);opacity:1}}
@media (prefers-reduced-motion:reduce){.sp-ring,.sp-bolt,.sp-name,.sp-dots{animation:sp-fade .3s ease forwards}}

/* language segmented toggle + responsive header */
.langseg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--panel);flex:none}
.langseg a{padding:6px 13px;font-size:12.5px;font-weight:800;color:var(--muted);line-height:1.2;transition:.15s}
.langseg a:hover{color:var(--ink)}
.langseg a.on{background:var(--accent);color:#fff}
.controls{display:flex;align-items:center;gap:10px}
.login-float{position:fixed;inset-block-start:16px;inset-inline-end:16px;display:flex;align-items:center;gap:10px;z-index:5}
@media (max-width:600px){
  .top-in{flex-wrap:wrap;gap:10px}
  .brand{order:1}.controls{order:2;margin-inline-start:auto}
  .nav{order:3;width:100%;justify-content:center;margin-inline-start:0;gap:18px;border-top:1px solid var(--line);padding-top:8px}
  .spacer{display:none}
  .page-h{flex-wrap:wrap}.page-h h1{font-size:19px}
  .iconbtn{width:36px;height:36px}
}

/* smart project page */
.tabbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.tab{font:inherit;font-weight:700;border:1px solid var(--line);background:var(--panel);color:var(--muted);padding:9px 15px;border-radius:11px;cursor:pointer;transition:.15s}
.tab:hover{color:var(--ink)}.tab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.tabbar .spacer{flex:1}
.pane-opts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.viewer{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--panel)}
.viewer iframe{width:100%;height:76vh;border:0;display:block}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.gcard{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow);transition:.15s}
.gcard:hover{transform:translateY(-2px);border-color:var(--accent)}
.gcard img{width:100%;height:150px;object-fit:contain;background:var(--soft);display:block}
.gcard figcaption{padding:8px 10px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.files-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:14px}
.filelist{max-height:74vh;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.frow{cursor:pointer}.frow:hover{background:var(--soft)}.frow.sel{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.fname{font-size:13px;word-break:break-all}.fsize{white-space:nowrap;font-size:12px}
.preview{border:1px solid var(--line);border-radius:12px;background:var(--panel);min-height:60vh;overflow:hidden;display:flex;flex-direction:column}
.preview-empty{display:grid;place-items:center;height:60vh}
.pv-head{padding:10px 14px;border-bottom:1px solid var(--line);font-weight:700;font-size:13.5px}
.pv-body{flex:1;overflow:auto;display:grid;place-items:center;background:var(--soft)}
.pv-body img{max-width:100%;max-height:72vh;object-fit:contain}
.pv-frame{flex:1;width:100%;border:0;min-height:60vh}
.pv-code{flex:1;margin:0;padding:14px;overflow:auto;font-family:'Vazirmatn',monospace;font-size:12.5px;line-height:1.7;direction:ltr;text-align:left;white-space:pre-wrap;word-break:break-word}
.lightbox{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.85);display:grid;place-items:center;padding:24px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:96vw;max-height:92vh;object-fit:contain;border-radius:8px}
.lb-close{position:fixed;inset-block-start:16px;inset-inline-end:20px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#111;font-size:20px;cursor:pointer}
@media (max-width:720px){.files-split{grid-template-columns:1fr}.viewer iframe{height:64vh}}

/* clickable project card (download removed from dashboard) */
.proj-link{text-decoration:none;color:inherit;display:block;transition:.15s}
.proj-link:hover{transform:translateY(-2px);border-color:var(--accent)}
.proj-go{display:inline-block;margin-top:10px;font-weight:800;color:var(--accent);font-size:13.5px}
/* transformer winding guide tab */
.guide{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start}
.guide-img{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--soft);box-shadow:var(--shadow);position:sticky;top:80px}
.guide-text{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 20px}
.guide-text h2{font-size:19px;margin:18px 0 8px}.guide-text h3{font-size:16px;margin:16px 0 6px}
.guide-text h4,.guide-text h5{font-size:14.5px;margin:12px 0 6px;color:var(--muted)}
.guide-text p{margin:8px 0}.guide-text ul{margin:8px 0;padding-inline-start:22px}.guide-text li{margin:4px 0}
.guide-text blockquote{margin:10px 0;padding:8px 14px;border-inline-start:3px solid var(--accent);background:var(--soft);border-radius:8px;color:var(--muted)}
.guide-text code{background:var(--soft);padding:1px 6px;border-radius:6px;font-size:.92em}
@media (max-width:820px){.guide{grid-template-columns:1fr}.guide-img{position:static}}

/* guide image: hover to enlarge (desktop), click to open full */
.guide-img{cursor:zoom-in;transition:transform .2s ease, box-shadow .2s}
@media (hover:hover) and (pointer:fine){
  .guide-img:hover{transform:scale(1.9);position:relative;z-index:60;box-shadow:0 24px 70px rgba(0,0,0,.45)}
}
/* schematic editor (CAD) */
.cad-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--panel)}
.cad-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--line)}
.cad-toolbar .sep{width:1px;height:22px;background:var(--line)}.cad-toolbar .spacer{flex:1}
.cad-modes{display:flex;gap:6px}
.cad-body{display:grid;grid-template-columns:180px 1fr;min-height:70vh}
.cad-palette{border-inline-end:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:7px;background:var(--soft)}
.pal-title{font-size:12px;font-weight:800;margin-bottom:2px}
.pal-btn{font:inherit;font-weight:700;text-align:start;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:8px 10px;border-radius:9px;cursor:pointer;transition:.12s}
.pal-btn:hover{border-color:var(--accent);color:var(--accent)}
.pal-hint{font-size:11.5px;line-height:1.6;margin-top:8px}
.cad-canvas{overflow:auto;background:var(--bg)}
#cad{width:100%;height:72vh;display:block;touch-action:none}
#cad .sym{fill:var(--panel);stroke:var(--ink);stroke-width:2}
#cad .symL{stroke:var(--ink);stroke-width:2.5;fill:none}
#cad .symF{fill:var(--ink)}
#cad .symT{fill:var(--ink);font-size:11px;font-weight:700;text-anchor:middle}
#cad .symBig{fill:var(--ink);font-size:20px;font-weight:800;text-anchor:middle}
#cad .comp{cursor:move}
#cad .comp.sel .sym,#cad .comp.sel .symL{stroke:var(--accent)}
#cad .comp.sel{filter:drop-shadow(0 0 4px var(--accent))}
#cad .pin{fill:#16a34a;stroke:var(--panel);stroke-width:1.5}
#cad .pin.pinsel{fill:#dc2626;r:6}
#cad .pinlbl{fill:var(--muted);font-size:9.5px;font-weight:700}
#cad .reflbl{fill:var(--accent);font-size:12px;font-weight:800}
#cad .cwire{stroke:#2563eb;stroke-width:2.5;fill:none;cursor:pointer}
#cad .junc{fill:#2563eb}
#cad .netlbl{fill:#2563eb;font-size:10px;font-weight:800;text-anchor:middle}
@media (max-width:720px){.cad-body{grid-template-columns:1fr}.cad-palette{flex-direction:row;flex-wrap:wrap;border-inline-end:0;border-bottom:1px solid var(--line)}}

/* CAD v2: leads, hit targets, props panel, net highlight */
#cad .lead{stroke:var(--ink);stroke-width:2;fill:none}
#cad .pinhit{fill:transparent;cursor:crosshair}
#cad .pin.junc2{r:4.5}
#cad .cwire-hit{stroke:transparent;stroke-width:14;fill:none;cursor:pointer}
#cad .wireg.whot .cwire{stroke:#f59e0b;stroke-width:4}
#cad .wireg.wsel .cwire{stroke:#dc2626;stroke-width:4}
#cad .cwire.preview{stroke-dasharray:6 5;opacity:.7}
.cad-canvas{position:relative}
.cad-props{position:absolute;inset-block-start:14px;inset-inline-end:14px;width:220px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:12px 14px;z-index:5}
.cad-props .pp-title{font-weight:800;margin-bottom:8px}
.cad-props label{display:block;font-size:12px;color:var(--muted);margin:8px 0 0}
.cad-props input{width:100%;margin-top:4px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;font-size:13px}
.cad-props .pp-row{display:flex;gap:8px;margin-top:12px}