:root{
  --bg:#07111f;
  --bg2:#0b1628;
  --panel:#101d31;
  --panel2:#13233b;
  --line:#263a57;
  --text:#eef5ff;
  --muted:#94a8c2;
  --primary:#5ea2ff;
  --primary2:#7c6dff;
  --green:#34d399;
  --red:#fb7185;
  --amber:#fbbf24;
  --cyan:#38bdf8;
  --shadow:0 24px 70px rgba(0,0,0,.28);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 8% 0%,rgba(94,162,255,.13),transparent 24%),
    radial-gradient(circle at 95% 10%,rgba(124,109,255,.10),transparent 25%),
    linear-gradient(180deg,#07111f 0%,#091421 100%);
  font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  min-height:100vh;
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,#000,transparent 80%);
}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.topbar{
  position:sticky;top:0;z-index:100;
  min-height:72px;padding:12px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:rgba(7,17,31,.88);
  border-bottom:1px solid rgba(148,168,194,.18);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.brandbox{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.brandbox strong{font-size:18px;letter-spacing:-.02em}
.brandbox span{font-size:12px;color:var(--muted)}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}
.app{
  width:min(1680px,calc(100% - 28px));margin:14px auto 28px;
  display:grid;grid-template-columns:minmax(440px,620px) minmax(0,1fr);gap:14px;align-items:start
}
.panel,.preview-area{
  border:1px solid rgba(148,168,194,.18);
  background:linear-gradient(180deg,rgba(16,29,49,.96),rgba(10,22,39,.96));
  border-radius:var(--radius);box-shadow:var(--shadow)
}
.controls{padding:18px}
.controls>h1{font-size:28px;line-height:1.05;margin:3px 0 8px;letter-spacing:-.035em}
.muted{margin:0 0 16px;color:var(--muted)}
.group{
  margin:10px 0;border:1px solid rgba(148,168,194,.16);border-radius:14px;
  background:rgba(10,22,39,.72);overflow:hidden
}
.group>summary{
  list-style:none;display:flex;align-items:center;gap:10px;
  padding:13px 14px;font-weight:800;color:#f8fbff;cursor:pointer;user-select:none;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)
}
.group>summary::-webkit-details-marker{display:none}
.group>summary:before{content:"▸";color:var(--primary);transition:transform .18s ease}
.group[open]>summary:before{transform:rotate(90deg)}
.group[open]>summary{border-bottom:1px solid rgba(148,168,194,.13)}
.group>label,.group>.grid2,.group>.colorgrid,.group>.togglegrid,.group>.route-note,.group>.help,.group>.note,.group>#trustEditor,.group>#specEditor,.group>#reviewEditor,.group>#faqEditor,.group>#recEditor,.group>.history-summary,.group>.current-theme-usage,.group>.history-sync-status,.group>.history-tools,.group>.theme-history-list{margin-left:14px;margin-right:14px}
.group>label:first-of-type{margin-top:14px}
.group>label:last-of-type{margin-bottom:14px}
label{display:grid;gap:6px;color:#dbe8f7;font-size:12px;font-weight:650;margin-top:10px}
input:not([type="checkbox"]):not([type="color"]),textarea,select{
  width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;
  background:#081525;color:var(--text);padding:10px 11px;outline:none;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease
}
textarea{resize:vertical;min-height:92px;line-height:1.45;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(94,162,255,.12);background:#0a192c}
input[type="color"]{width:100%;height:42px;border:1px solid var(--line);border-radius:10px;background:#081525;padding:4px}
input[type="checkbox"]{width:17px;height:17px;accent-color:var(--primary)}
.check{display:flex;grid-template-columns:none;align-items:flex-start;gap:8px;font-weight:550}
.check span{min-width:0}
.grid2,.colorgrid,.togglegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;margin-top:12px;margin-bottom:14px}
.colorgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
.togglegrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.route-note,.note{
  margin-top:12px;margin-bottom:8px;padding:11px 12px;border-radius:11px;
  border:1px solid rgba(94,162,255,.25);background:rgba(94,162,255,.07);color:#cfe3ff
}
.note.compact{display:flex;flex-wrap:wrap;gap:7px}
.note code,.help code{color:#b9d8ff;background:rgba(94,162,255,.08);border:1px solid rgba(94,162,255,.15);border-radius:6px;padding:2px 5px}
.help{display:block;margin-top:8px;margin-bottom:14px;color:var(--muted);font-size:11px;line-height:1.55}
.btn,.tab{
  appearance:none;border:1px solid var(--line);border-radius:10px;background:#14233a;color:#edf6ff;
  min-height:40px;padding:9px 13px;font-weight:800;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease
}
.btn:hover,.tab:hover{transform:translateY(-1px);border-color:#436087;background:#182a45}
.btn:active,.tab:active{transform:translateY(0) scale(.985)}
.btn.primary{border-color:transparent;background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:0 8px 22px rgba(94,162,255,.2)}
.btn.zip{border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.11);color:#b9f8df}
.btn.checkamp{border-color:rgba(56,189,248,.35);background:rgba(56,189,248,.10);color:#bdeeff}
.btn.history-next{border-color:rgba(52,211,153,.32);color:#b9f8df}
.btn.history-reset{border-color:rgba(251,113,133,.34);color:#ffc1cc;background:rgba(251,113,133,.08)}
.preview-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}
.tab.active{border-color:transparent;background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:0 8px 20px rgba(94,162,255,.18)}
.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.actions .btn.primary,.actions .btn.zip,.actions .btn.checkamp{grid-column:span 2}
.boiler-note{grid-column:1/-1;color:var(--muted);font-size:10px;text-align:center}
.model-info,.amp-check-result{
  margin-top:12px;padding:12px;border:1px solid rgba(148,168,194,.16);border-radius:12px;background:#091627;color:#cbd9ea;font-size:12px
}
.amp-check-result.pass{border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.08);color:#c7f9e3}
.amp-check-result.warn{border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.08);color:#ffe8a0}
.amp-check-result.fail{border-color:rgba(251,113,133,.38);background:rgba(251,113,133,.09);color:#ffd0d8}
.amp-check-result ul{margin:8px 0 0;padding-left:20px}
.preview-area{position:sticky;top:86px;overflow:hidden;min-height:calc(100vh - 112px)}
.preview-head{height:52px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(148,168,194,.16);background:#0c192b}
.preview-head strong{font-size:13px}
.preview-head span{max-width:62%;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#previewFrame{display:block;width:100%;height:calc(100vh - 165px);min-height:720px;border:0;background:#fff}
.history-group{border-color:rgba(94,162,255,.22)}
.history-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}
.history-summary>div{padding:12px;border-radius:11px;border:1px solid rgba(148,168,194,.15);background:#0a1729;text-align:center}
.history-summary strong{display:block;font-size:20px;color:#fff}
.history-summary span{display:block;margin-top:2px;color:var(--muted);font-size:10px}
.current-theme-usage{margin-top:9px;padding:10px;border-radius:10px;background:rgba(94,162,255,.07);color:#cfe3ff;font-size:11px}
.history-sync-status{margin-top:8px;font-size:11px;font-weight:750}
.history-sync-status.syncing{color:var(--amber)}
.history-sync-status.online,.history-sync-status.synced{color:var(--green)}
.history-sync-status.offline,.history-sync-status.error{color:var(--red)}
.history-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.history-tools select{grid-column:1/-1}
.theme-history-list{display:grid;gap:7px;max-height:330px;overflow:auto;margin-top:10px;margin-bottom:10px;padding-right:3px}
.theme-history-item,.history-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;
  padding:9px 10px;border:1px solid rgba(148,168,194,.14);border-radius:10px;background:#091627;color:#d8e6f7;font-size:11px
}
.theme-history-item.used,.history-item.used{border-color:rgba(52,211,153,.20);background:rgba(52,211,153,.05)}
.theme-history-item small,.history-item small{color:var(--muted)}
.editor-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.editor-row textarea{grid-column:1/-1}
.editor-row input{min-width:0}
#trustEditor,#specEditor,#reviewEditor,#faqEditor,#recEditor{margin-top:8px;margin-bottom:14px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#07111f}
::-webkit-scrollbar-thumb{background:#263b59;border-radius:999px;border:2px solid #07111f}
::-webkit-scrollbar-thumb:hover{background:#36527a}
@media(max-width:1200px){
  .app{grid-template-columns:minmax(380px,520px) minmax(0,1fr)}
  .colorgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .topbar{position:relative;align-items:flex-start}
  .app{display:block;width:calc(100% - 18px)}
  .preview-area{position:relative;top:auto;margin-top:12px;min-height:0}
  #previewFrame{height:780px;min-height:600px}
}
@media(max-width:600px){
  .topbar{padding:10px;flex-direction:column;align-items:stretch}
  .top-actions{display:grid;grid-template-columns:1fr 1fr}
  .app{width:calc(100% - 12px);margin-top:8px}
  .controls{padding:10px}
  .controls>h1{font-size:24px}
  .grid2,.colorgrid,.togglegrid,.history-summary{grid-template-columns:1fr}
  .actions{grid-template-columns:1fr}
  .actions .btn.primary,.actions .btn.zip,.actions .btn.checkamp{grid-column:auto}
  .history-tools{grid-template-columns:1fr}
  .history-tools select{grid-column:auto}
  .preview-head{height:auto;min-height:52px;align-items:flex-start;flex-direction:column;justify-content:center;padding:10px 12px}
  .preview-head span{max-width:100%}
  #previewFrame{height:700px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}