/* ══════════════════════════════════════════
   TemplateBuilder — styles.css
   by RamprasadNS · ramprasadns.com
══════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0d1117;--surface:#161b22;--surface2:#21262d;--surface3:#2d333b;
  --border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.15);
  --text:#e6edf3;--text2:#8b949e;--text3:#484f58;
  --navy:#0B132B;--navy2:#1C2541;
  --gold:#D4AF37;--gold2:#c5a02a;--gold-bg:rgba(212,175,55,0.1);--gold-border:rgba(212,175,55,0.25);
  --green:#3fb950;--green-bg:rgba(63,185,80,0.1);--green-border:rgba(63,185,80,0.25);
  --red:#f85149;--red-bg:rgba(248,81,73,0.1);
  --blue:#58a6ff;--blue-bg:rgba(88,166,255,0.1);
  --radius:10px;--radius-sm:6px;--radius-lg:14px;
}

body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;}

/* ── Top Bar ── */
.topbar{background:var(--navy);border-bottom:2px solid var(--gold);display:flex;align-items:center;padding:0 24px;height:54px;gap:0;position:sticky;top:0;z-index:100;}
.topbar-brand{display:flex;align-items:center;gap:10px;margin-right:32px;text-decoration:none;}
.topbar-brand .logo-img{height:38px;width:auto;display:block;}
.topbar-brand .logo-mark{width:30px;height:30px;background:var(--gold);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--navy);flex-shrink:0;}
.topbar-brand .logo-text{font-size:14px;font-weight:700;color:var(--text);line-height:1.2;}
.topbar-brand .logo-sub{font-size:10px;color:var(--gold);letter-spacing:.04em;}
.tab-nav{display:flex;gap:2px;flex:1;}
.tab-btn{padding:0 18px;height:54px;border:none;background:none;color:var(--text2);font-size:13px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s;display:flex;align-items:center;gap:7px;white-space:nowrap;}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--gold);border-bottom-color:var(--gold);}
.tab-btn .tab-icon{font-size:15px;}
.topbar-meta{margin-left:auto;font-size:11px;color:var(--text3);}
.topbar-meta a{color:var(--gold);text-decoration:none;opacity:.7;}
.topbar-meta a:hover{opacity:1;}

/* ── Tab Panels ── */
.tab-panel{display:none;min-height:calc(100vh - 54px);}
.tab-panel.active{display:block;}

/* ── Shared card/section styles ── */
.wrap{max-width:860px;margin:0 auto;padding:2rem 1.5rem;}
.wrap-wide{max-width:1100px;margin:0 auto;padding:2rem 1.5rem;}
.card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.25rem;}
.card-title{font-size:13px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:1rem;display:flex;align-items:center;gap:7px;}
label{font-size:13px;color:var(--text2);display:block;margin-bottom:5px;font-weight:500;}
input[type=text],input[type=password],input[type=color],select,textarea{
  width:100%;padding:9px 12px;border:0.5px solid var(--border2);border-radius:var(--radius-sm);
  font-size:14px;background:var(--surface2);color:var(--text);outline:none;transition:border-color .15s;font-family:inherit;}
input:focus,select:focus,textarea:focus{border-color:var(--gold);}
textarea{resize:vertical;min-height:80px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer;border:0.5px solid var(--border2);background:var(--surface2);color:var(--text);transition:all .15s;white-space:nowrap;}
.btn:hover{border-color:var(--gold);color:var(--gold);}
.btn:disabled{opacity:.35;cursor:not-allowed;}
.btn-gold{background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:700;}
.btn-gold:hover{background:var(--gold2);color:var(--navy);}
.btn-navy{background:var(--navy2);color:var(--gold);border:1px solid var(--gold-border);}
.btn-navy:hover{border-color:var(--gold);}
.btn-green{background:var(--green-bg);color:var(--green);border-color:var(--green-border);}
.btn-green:hover{background:rgba(63,185,80,0.18);}
.btn-lg{padding:12px 28px;font-size:14px;}
.btn-full{width:100%;justify-content:center;}

/* ── Status / badge ── */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;letter-spacing:.04em;}
.badge-gold{background:var(--gold-bg);color:var(--gold);border:0.5px solid var(--gold-border);}
.badge-green{background:var(--green-bg);color:var(--green);}
.badge-red{background:var(--red-bg);color:var(--red);}
.status-msg{font-size:13px;padding:10px 14px;border-radius:var(--radius-sm);margin-top:.75rem;}
.status-msg.ok{background:var(--green-bg);color:var(--green);border:0.5px solid var(--green-border);}
.status-msg.err{background:var(--red-bg);color:var(--red);}
.status-msg.info{background:var(--blue-bg);color:var(--blue);border:0.5px solid rgba(88,166,255,.25);}

/* ── Notice ── */
.notice{background:var(--gold-bg);border:0.5px solid var(--gold-border);border-radius:var(--radius-sm);padding:.75rem 1rem;font-size:13px;color:var(--gold);display:flex;gap:8px;align-items:flex-start;line-height:1.5;margin-bottom:1rem;}

/* ── Step progress bar ── */
.stepper{display:flex;align-items:center;gap:0;margin-bottom:2rem;padding:1.25rem 1.5rem;background:var(--surface);border-bottom:0.5px solid var(--border);}
.stepper-item{display:flex;align-items:center;gap:8px;flex:1;}
.stepper-item:last-child{flex:0;}
.step-circle{width:28px;height:28px;border-radius:50%;border:2px solid var(--border2);background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text3);flex-shrink:0;transition:all .2s;}
.step-circle.active{border-color:var(--gold);background:var(--gold);color:var(--navy);}
.step-circle.done{border-color:var(--green);background:var(--green);color:#fff;}
.step-label{font-size:12px;color:var(--text3);font-weight:500;transition:color .2s;}
.step-label.active{color:var(--gold);}
.step-label.done{color:var(--green);}
.step-connector{flex:1;height:1px;background:var(--border2);margin:0 8px;}
.step-connector.done{background:var(--green);}

/* ── Category grid ── */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:1.5rem;}
.cat-card{border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1rem;background:var(--surface2);cursor:pointer;text-align:center;transition:all .15s;}
.cat-card:hover{border-color:var(--gold-border);background:var(--gold-bg);}
.cat-card.selected{border-color:var(--gold);background:var(--gold-bg);box-shadow:0 0 0 2px var(--gold-border);}
.cat-icon{font-size:28px;margin-bottom:8px;display:block;}
.cat-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;}
.cat-desc{font-size:11px;color:var(--text2);}

/* ── Layout picker ── */
.layout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:1.5rem;}
.layout-card{border:1px solid var(--border);border-radius:var(--radius);padding:1rem;background:var(--surface2);cursor:pointer;transition:all .15s;}
.layout-card:hover{border-color:var(--gold-border);}
.layout-card.selected{border-color:var(--gold);background:rgba(212,175,55,0.06);}
.layout-thumb{width:100%;height:100px;border-radius:6px;background:var(--surface3);margin-bottom:10px;overflow:hidden;padding:0;display:block;}
.lt-bar{background:var(--border2);border-radius:2px;}
.lt-cols{display:flex;gap:4px;flex:1;}
.lt-col{flex:1;background:var(--border);border-radius:2px;}
.lt-col.accent{flex:0 0 42%;background:var(--border2);}
.lt-hero{background:var(--border2);height:32px;border-radius:2px;}
.lt-cards{display:grid;grid-template-columns:1fr 1fr;gap:3px;flex:1;}
.lt-card-mini{background:var(--border);border-radius:2px;}
.layout-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;}
.layout-best{font-size:11px;color:var(--text2);}

/* ── Image library ── */
.img-section{margin-bottom:1.5rem;}
.img-section-title{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.img-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:8px;}
.img-opt{border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .15s;aspect-ratio:16/9;position:relative;}
.img-opt img{width:100%;height:100%;object-fit:cover;display:block;}
.img-opt:hover{border-color:var(--gold-border);}
.img-opt.selected{border-color:var(--gold);}
.img-opt.selected::after{content:'✓';position:absolute;top:4px;right:4px;background:var(--gold);color:var(--navy);width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;}
.img-upload-btn{border:1.5px dashed var(--border2);border-radius:8px;padding:8px;font-size:11px;color:var(--text3);cursor:pointer;text-align:center;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:4px;aspect-ratio:16/9;}
.img-upload-btn:hover{border-color:var(--gold);color:var(--gold);}

/* ── Editor split screen ── */
.editor-layout{display:grid;grid-template-columns:340px 1fr;gap:0;min-height:calc(100vh - 54px - 80px);border-top:0.5px solid var(--border);}
.editor-left{border-right:0.5px solid var(--border);background:var(--surface);overflow-y:auto;padding:1.5rem;}
.editor-right{background:var(--surface3);display:flex;flex-direction:column;}
.preview-bar{padding:.75rem 1rem;background:var(--surface2);border-bottom:0.5px solid var(--border);display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text3);}
.preview-bar .url-bar{flex:1;background:var(--bg);border:0.5px solid var(--border);border-radius:20px;padding:4px 14px;font-size:12px;color:var(--text3);}
.preview-iframe{flex:1;border:none;width:100%;background:#fff;}
.editor-section{margin-bottom:1.5rem;}
.editor-section-title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.75rem;padding-bottom:6px;border-bottom:0.5px solid var(--border);}
.field-group{margin-bottom:.75rem;}
.field-group label{font-size:12px;color:var(--text2);margin-bottom:4px;}
.field-group input,.field-group textarea{font-size:13px;padding:7px 10px;}
.color-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.color-field{display:flex;align-items:center;gap:8px;background:var(--surface2);border:0.5px solid var(--border2);border-radius:var(--radius-sm);padding:6px 10px;}
.color-field input[type=color]{width:28px;height:28px;border:none;background:none;cursor:pointer;padding:0;border-radius:4px;}
.color-field span{font-size:12px;color:var(--text2);}
.font-pills{display:flex;flex-wrap:wrap;gap:6px;}
.font-pill{padding:5px 12px;border-radius:20px;border:0.5px solid var(--border2);font-size:12px;color:var(--text2);cursor:pointer;transition:all .15s;background:var(--surface2);}
.font-pill:hover{border-color:var(--gold);}
.font-pill.selected{background:var(--gold-bg);color:var(--gold);border-color:var(--gold-border);}

/* ── Step nav footer ── */
.step-nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:var(--surface);border-top:0.5px solid var(--border);}

/* ── Download card ── */
.dl-card{background:var(--surface);border:1px solid var(--gold-border);border-radius:var(--radius-lg);padding:2rem;text-align:center;margin-bottom:1.5rem;}
.dl-icon{font-size:48px;margin-bottom:12px;}
.dl-title{font-size:20px;font-weight:700;color:var(--text);margin-bottom:6px;}
.dl-sub{font-size:14px;color:var(--text2);margin-bottom:1.5rem;line-height:1.6;}
.dl-features{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:1.5rem;text-align:left;}
.dl-feat{background:var(--surface2);border-radius:8px;padding:10px 12px;font-size:12px;color:var(--text2);display:flex;align-items:center;gap:7px;}
.dl-feat span{color:var(--green);}

/* ── CMS Converter tab ── */
.cms-step{font-size:12px;padding:3px 12px;border-radius:12px;background:var(--surface2);color:var(--text3);border:0.5px solid var(--border);}
.cms-step.active{background:var(--blue-bg);color:var(--blue);border-color:rgba(88,166,255,0.3);}
.cms-step.done{background:var(--green-bg);color:var(--green);border-color:var(--green-border);}
.drop-zone{border:2px dashed var(--border2);border-radius:var(--radius);padding:3rem 1rem;text-align:center;cursor:pointer;transition:all .15s;background:var(--surface2);}
.drop-zone:hover,.drop-zone.drag{background:var(--blue-bg);border-color:var(--blue);}
.drop-zone svg{width:40px;height:40px;stroke:var(--text3);margin-bottom:10px;}
.drop-zone p{font-size:15px;color:var(--text2);margin-bottom:4px;}
.drop-zone span{font-size:13px;color:var(--text3);}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--green-bg);color:var(--green);border-radius:20px;padding:4px 14px;font-size:13px;font-weight:500;border:0.5px solid var(--green-border);margin-top:10px;}
.log-box{background:var(--surface2);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:1rem;font-family:ui-monospace,monospace;font-size:12.5px;min-height:60px;max-height:200px;overflow-y:auto;line-height:1.7;}
.log-box .ok{color:var(--green);}
.log-box .err{color:var(--red);}
.log-box .info{color:var(--blue);}
.progress-wrap{background:var(--surface2);border-radius:4px;height:6px;overflow:hidden;margin-bottom:.75rem;}
.progress-bar{height:100%;background:var(--blue);border-radius:4px;transition:width .4s ease;width:0%;}
.out-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:1.25rem;}
.out-card{background:var(--surface2);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:1rem;text-align:center;}
.out-card svg{width:32px;height:32px;stroke:var(--text3);margin-bottom:6px;}
.out-card p{font-size:13px;font-weight:500;margin-bottom:2px;}
.out-card span{font-size:11px;color:var(--text3);}
details{margin-top:.75rem;}
details summary{cursor:pointer;font-size:13px;color:var(--text2);}
details pre{margin-top:.5rem;font-size:11px;font-family:ui-monospace,monospace;background:var(--surface2);padding:.75rem;border-radius:var(--radius-sm);overflow-x:auto;color:var(--text2);border:0.5px solid var(--border);max-height:200px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;}

/* ── Key Generator tab ── */
.key-box{font-family:ui-monospace,monospace;font-size:14px;background:var(--surface2);border:1px solid var(--gold-border);border-radius:var(--radius-sm);padding:12px 16px;color:var(--gold);word-break:break-all;cursor:pointer;transition:background .15s;letter-spacing:.05em;}
.key-box:hover{background:var(--gold-bg);}
.hint{font-size:12px;color:var(--text3);margin-top:6px;display:flex;align-items:center;gap:5px;}
.lock-screen{position:fixed;inset:0;background:rgba(11,19,43,0.97);z-index:500;display:flex;align-items:center;justify-content:center;}
.lock-box{background:var(--surface);border:1px solid var(--gold-border);border-radius:var(--radius-lg);padding:2.5rem;width:340px;text-align:center;}
.lock-box .lock-icon{font-size:40px;margin-bottom:1rem;}
.lock-box h2{font-size:16px;font-weight:600;margin-bottom:6px;color:var(--gold);}
.lock-box p{font-size:13px;color:var(--text2);margin-bottom:1.25rem;}
.lock-err{font-size:12px;color:var(--red);margin-top:.5rem;min-height:18px;}
.hist-item{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:0.5px solid var(--border);gap:10px;}
.hist-item:last-child{border-bottom:none;}
.hist-fname{font-size:13px;color:var(--text2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hist-key{font-family:ui-monospace,monospace;font-size:11px;color:var(--text3);}
.hist-copy{font-size:11px;color:var(--gold);cursor:pointer;padding:2px 8px;border:0.5px solid var(--gold-border);border-radius:4px;background:none;}
.hist-copy:hover{background:var(--gold-bg);}

/* ── Password strength indicator ── */
.pass-strength{height:4px;border-radius:2px;margin-top:6px;transition:all .3s;width:0%;}
.pass-strength.weak{background:var(--red);width:33%;}
.pass-strength.medium{background:var(--gold);width:66%;}
.pass-strength.strong{background:var(--green);width:100%;}
.pass-hint{font-size:11px;color:var(--text3);margin-top:4px;}

/* ── localStorage restore banner ── */
.restore-banner{background:var(--blue-bg);border:0.5px solid rgba(88,166,255,.3);border-radius:var(--radius-sm);padding:.65rem 1rem;font-size:13px;color:var(--blue);display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:1rem;}
.restore-banner button{font-size:12px;padding:4px 10px;border:0.5px solid rgba(88,166,255,.4);border-radius:4px;background:none;color:var(--blue);cursor:pointer;}
.restore-banner button:hover{background:rgba(88,166,255,.1);}

/* ── Responsive ── */
@media(max-width:700px){
  .cat-grid{grid-template-columns:repeat(3,1fr);}
  .layout-grid{grid-template-columns:1fr 1fr;}
  .img-grid{grid-template-columns:repeat(3,1fr);}
  .editor-layout{grid-template-columns:1fr;}
  .editor-right{display:none;}
  .row2,.row3{grid-template-columns:1fr;}
  .dl-features{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .topbar{padding:0 12px;}
  .tab-btn{padding:0 10px;font-size:12px;}
}

.hidden{display:none!important;}
#legal-modal .lock-box{width:auto;max-width:560px;}

/* ── Site footer ──────────────────────── */
.site-footer{background:var(--surface);border-top:0.5px solid var(--border);padding:2rem 24px 1.25rem;margin-top:0;}
.site-footer-inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.site-footer-main{flex:1;min-width:240px;max-width:520px;}
.site-footer-brand{margin-bottom:.6rem;}
.site-footer-desc{font-size:12px;color:var(--text3);line-height:1.7;}
.site-footer-links{display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:13px;}
.site-footer-links a{color:var(--text2);text-decoration:none;}
.site-footer-links a:hover{color:var(--gold);text-decoration:underline;}
.site-footer-bottom{max-width:1100px;margin:1.5rem auto 0;padding-top:1rem;border-top:0.5px solid var(--border);font-size:11px;color:var(--text3);line-height:1.6;}
@media(max-width:600px){
  .site-footer-inner{flex-direction:column;}
  .site-footer-links{flex-direction:row;flex-wrap:wrap;gap:16px;}
}