/* ============================================================
   META-STUDIO DASHBOARD READABLE PRO v1.0
   UI-only additive layer. No generator/template structure changes.
============================================================ */

:root{
  --control-h:46px;
  --control-h-lg:50px;
  --dashboard-font:15px;
  --dashboard-small:12px;
  --dashboard-label:12px;
  --dashboard-pad:18px;
  --dashboard-pad-lg:22px;
  --dashboard-gap:16px;
  --dashboard-card-radius:var(--theme-radius,12px);
}

html{font-size:16px}
body{
  font-size:var(--dashboard-font)!important;
  line-height:1.58!important;
  letter-spacing:-.003em!important;
}
button,input,select,textarea{font:inherit}

/* ---------- shell ---------- */
.side{
  padding:16px 14px!important;
}
.side-head{
  min-height:50px!important;
  padding:4px 5px 16px!important;
}
.brand{font-size:13px!important;gap:11px!important}
.brand>div>span{font-size:10px!important;letter-spacing:.075em!important}
.brand-mark{width:34px!important;height:34px!important;flex-basis:34px!important;font-size:14px!important;border-radius:calc(var(--theme-radius,10px) * .68)!important}
.side-search{
  min-height:44px!important;
  height:auto!important;
  padding:9px 11px!important;
  margin-bottom:10px!important;
  border-radius:calc(var(--theme-radius,10px) * .75)!important;
}
.side-search input{font-size:13px!important}
.grp{font-size:10px!important;padding:20px 10px 8px!important;letter-spacing:.12em!important}
.side-nav{gap:4px!important}
.side-nav button{
  min-height:54px!important;
  padding:9px 10px!important;
  gap:11px!important;
  border-radius:calc(var(--theme-radius,10px) * .8)!important;
}
.nav-icon{
  width:32px!important;height:32px!important;flex-basis:32px!important;
  border-radius:calc(var(--theme-radius,10px) * .66)!important;
  font-size:12px!important;
}
.nav-copy{gap:3px!important}
.nav-copy b{font-size:13px!important;font-weight:650!important;line-height:1.28!important}
.nav-copy small{font-size:11px!important;line-height:1.3!important}
.side-nav kbd,.side-search kbd{font-size:9px!important;padding:4px 6px!important}
.side-foot{padding-top:14px!important}
.mini-health b{font-size:12px!important}.mini-health small{font-size:10.5px!important}

/* ---------- topbar ---------- */
.top{
  min-height:66px!important;
  padding:10px 28px!important;
}
.t{font-size:14px!important}.crumb{font-size:10px!important}
.top-actions{gap:9px!important}
.tool-pill,.icon-btn{
  min-height:42px!important;
  border-radius:calc(var(--theme-radius,10px) * .78)!important;
}
.tool-pill{padding:9px 14px!important;font-size:12px!important}
.icon-btn{width:42px!important;height:42px!important}
.stat{font-size:11px!important;padding:6px 9px!important;line-height:1.2!important}
.theme-switcher{gap:7px!important}
.theme-switcher>.stat{cursor:pointer;min-height:36px;display:inline-flex;align-items:center;gap:7px}

/* ---------- workspace header ---------- */
.workspace-head{
  max-width:var(--workspace-max,1400px)!important;
  padding:32px 32px 18px!important;
  gap:24px!important;
}
.workspace-head .eyebrow{font-size:10px!important;letter-spacing:.12em!important}
.workspace-head h2{
  margin-top:6px!important;
  font-size:clamp(30px,3.3vw,43px)!important;
  line-height:1.04!important;
  letter-spacing:-.045em!important;
}
.workspace-metrics{gap:9px!important}
.workspace-metrics span{
  min-width:118px!important;
  padding:11px 13px!important;
  border-radius:calc(var(--theme-radius,10px) * .85)!important;
}
.workspace-metrics b{font-size:14px!important}.workspace-metrics small{font-size:10px!important}
.work{padding:10px 32px 64px!important}
.wrap{max-width:var(--workspace-max,1400px)!important}

/* ---------- typography ---------- */
#view h1{
  font-size:clamp(29px,3vw,40px)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
  margin-bottom:8px!important;
}
#view h2{font-size:21px!important;line-height:1.2!important;letter-spacing:-.02em!important}
#view h3{font-size:16px!important;line-height:1.3!important}
.lead{
  font-size:14px!important;
  line-height:1.65!important;
  max-width:900px!important;
  color:var(--theme-muted)!important;
}
.eyebrow{font-size:10px!important;letter-spacing:.11em!important}

/* ---------- panels/cards ---------- */
.panel,.card,.pro-card,.ref-card,.code-shell,.seo-score,.website-template-selector,.deep-ref-pro{
  border-radius:var(--dashboard-card-radius)!important;
}
.panel,.card,.pro-card{
  padding:var(--dashboard-pad)!important;
}
.panel h2,.card h2,.pro-card h2{margin-bottom:8px!important}
.panel p,.card p,.pro-card p{font-size:13px!important;line-height:1.58!important}
.split,.grid2,.prompt-layout,.html-pro-layout,.seo-dashboard{gap:var(--dashboard-gap)!important}

/* ---------- controls ---------- */
.field{gap:7px!important;margin-bottom:14px!important}
.field label,
.ref-field label,
.control-label{
  font-size:var(--dashboard-label)!important;
  line-height:1.35!important;
  font-weight:650!important;
  letter-spacing:.015em!important;
  color:var(--theme-ink-soft,var(--theme-ink))!important;
}
input:not([type="range"]),select,textarea{
  min-height:var(--control-h)!important;
  padding:10px 13px!important;
  border:1px solid var(--theme-border-strong,var(--theme-border))!important;
  border-radius:calc(var(--theme-radius,10px) * .72)!important;
  background:var(--theme-input,var(--theme-surface))!important;
  color:var(--theme-ink)!important;
  font-size:14px!important;
  line-height:1.45!important;
  box-shadow:none!important;
}
textarea{min-height:108px!important;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--theme-muted)!important;opacity:.78}
input:focus,select:focus,textarea:focus{
  outline:0!important;
  border-color:color-mix(in srgb,var(--theme-accent) 58%,var(--theme-border))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent) 12%,transparent)!important;
}
select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:42px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%23767A80' d='M5.6 7.4 10 11.8l4.4-4.4 1.2 1.2-5.6 5.6-5.6-5.6z'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
  background-size:15px 15px!important;
  cursor:pointer;
}
select:hover{border-color:var(--theme-border-strong,var(--theme-border))!important;background-color:var(--theme-surface-2)!important}

/* ---------- buttons ---------- */
.btn,.tool-pill{
  min-height:44px!important;
  padding:10px 17px!important;
  border-radius:calc(var(--theme-radius,10px) * .76)!important;
  font-size:13px!important;
  font-weight:650!important;
  line-height:1.1!important;
  gap:8px!important;
}
.btn-p{
  background:var(--theme-accent)!important;
  color:var(--theme-surface)!important;
  border-color:var(--theme-accent)!important;
}
.btn:hover,.tool-pill:hover{transform:translateY(-1px)}
.btn:active,.tool-pill:active{transform:translateY(0) scale(.99)}
.row{gap:10px!important}
.chip,.kw,.tabs-h button{font-size:11px!important;min-height:34px!important;padding:7px 10px!important}

/* ---------- reference / website generator ---------- */
.ref-card{margin-bottom:20px!important}
.ref-head{
  padding:20px 22px!important;
  gap:18px!important;
}
.ref-head h2{font-size:23px!important;margin-top:5px!important}
.ref-head p{font-size:13.5px!important;line-height:1.62!important;max-width:940px!important}
.ref-body{padding:20px 22px!important}
.ref-grid{gap:13px!important}
.ref-field{gap:7px!important}
.ref-field label{font-family:var(--font)!important}
.ref-token{font-size:10.5px!important;line-height:1.4!important}
.ref-field textarea{min-height:94px!important}
.ref-object{
  padding:15px 16px!important;
  margin-bottom:18px!important;
  font-size:12px!important;
  line-height:1.62!important;
  border-radius:calc(var(--theme-radius,10px) * .8)!important;
}
.ref-actions{gap:10px!important;margin-top:18px!important;padding-top:18px!important}
.ref-generate{min-width:290px!important;min-height:48px!important}
.ref-status{font-size:12px!important;min-height:24px!important;margin-top:12px!important}
.engine-chip{font-size:10px!important;padding:7px 9px!important}

.website-template-selector{
  margin-bottom:18px!important;
  padding:17px!important;
  border:1px solid var(--theme-border-strong,var(--theme-border))!important;
  background:var(--theme-surface-2)!important;
}
.website-template-selector .wts-head{margin-bottom:12px!important;gap:14px!important}
.website-template-selector .wts-head b{font-size:14px!important}
.website-template-selector .wts-head p{font-size:12px!important;line-height:1.55!important;margin-top:5px!important}
.website-template-selector select{min-height:50px!important;font-size:14px!important;font-weight:600!important;background-color:var(--theme-surface)!important}
.website-template-selector .wts-foot{font-size:11.5px!important;gap:10px!important;margin-top:10px!important}

.deep-ref-pro{
  margin-top:14px!important;
  padding:15px!important;
  background:var(--theme-surface)!important;
}
.deep-ref-pro-head{margin-bottom:12px!important}.deep-ref-pro-head b{font-size:13px!important}.deep-ref-pro-head span{font-size:11px!important}
.deep-ref-grid{gap:8px!important}.deep-ref-row{padding:9px 10px!important;font-size:11px!important;min-height:38px!important}.deep-ref-row b{font-size:10px!important}
.deep-ref-key{padding:5px 8px!important;font-size:9.5px!important}
.deep-ref-audit{font-size:11px!important;line-height:1.5!important;padding-top:10px!important;margin-top:10px!important}

/* ---------- editor / code ---------- */
.pre,.code-editor,.html-source,.amp-source,.prompt-output{
  font-size:12.5px!important;
  line-height:1.62!important;
}
.meta-summary small{font-size:9.5px!important}.meta-summary b,.meta-summary span{font-size:12px!important}
.seo-check b{font-size:13px!important}.seo-check p{font-size:12px!important}

/* ============================================================
   THEME STUDIO PRO
============================================================ */
.theme-settings-pro{display:grid;gap:18px}
.theme-settings-hero{
  display:flex;align-items:flex-start;justify-content:space-between;gap:22px;
  padding:22px;
  border:1px solid var(--theme-border);
  border-radius:var(--dashboard-card-radius);
  background:var(--theme-surface);
}
.theme-settings-hero h1{margin:0!important}
.theme-settings-hero p{margin:7px 0 0!important;max-width:780px}
.theme-settings-actions{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end}
.theme-section{
  padding:20px 22px;
  border:1px solid var(--theme-border);
  border-radius:var(--dashboard-card-radius);
  background:var(--theme-surface);
}
.theme-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:15px}
.theme-section-head h2{margin:0!important}
.theme-section-head p{margin:4px 0 0;font-size:12.5px;color:var(--theme-muted)}
.theme-count{font-size:11px;color:var(--theme-muted);padding:6px 9px;border:1px solid var(--theme-border);border-radius:999px;background:var(--theme-surface-2)}
.theme-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.theme-card{
  display:grid;gap:10px;text-align:left;min-width:0;
  padding:12px;
  border:1px solid var(--theme-border);
  border-radius:var(--card-shape,12px);
  background:var(--theme-surface-2);
  color:var(--theme-ink);
  cursor:pointer;
  transition:border-color .16s ease,transform .16s ease,background .16s ease,border-radius .2s ease;
}
.theme-card:hover{transform:translateY(-2px);border-color:var(--theme-border-strong,var(--theme-border));background:var(--theme-surface)}
.theme-card.active{border-color:var(--theme-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-accent) 10%,transparent)}
.theme-preview{
  height:92px;
  padding:10px;
  border:1px solid var(--pv-border);
  border-radius:var(--card-shape,12px);
  background:var(--pv-bg);
  overflow:hidden;
  transition:border-radius .2s ease;
}
.theme-preview-top{height:13px;border-radius:6px;background:var(--pv-surface);margin-bottom:8px}
.theme-preview-layout{display:grid;grid-template-columns:28% 1fr;gap:7px;height:52px}
.theme-preview-side,.theme-preview-main{border-radius:calc(var(--card-shape,12px) * .55);background:var(--pv-surface)}
.theme-preview-main{display:grid;grid-template-columns:1fr 34%;gap:6px;padding:7px}
.theme-preview-main:before,.theme-preview-main:after{content:"";display:block;border-radius:5px;background:var(--pv-accent)}
.theme-preview-main:after{background:var(--pv-soft)}
.theme-card-copy{display:flex;align-items:center;justify-content:space-between;gap:8px}
.theme-card-copy b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.theme-card-copy small{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--theme-muted)}
.theme-swatches{display:flex;gap:5px}.theme-swatches i{width:13px;height:13px;border-radius:50%;border:1px solid color-mix(in srgb,var(--theme-border) 80%,transparent)}

.theme-control-grid{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);gap:16px}
.theme-control-card{padding:16px;border:1px solid var(--theme-border);border-radius:calc(var(--theme-radius,10px) * .9);background:var(--theme-surface-2)}
.theme-control-card h3{margin:0 0 6px!important}.theme-control-card>p{margin:0 0 14px;font-size:12px;color:var(--theme-muted)}
.shape-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.shape-choice{
  min-height:72px;padding:8px 6px;border:1px solid var(--theme-border);background:var(--theme-surface);color:var(--theme-ink);cursor:pointer;
  display:grid;place-items:center;gap:5px;font-size:10px;font-weight:650;
}
.shape-choice i{display:block;width:33px;height:27px;background:var(--theme-accent);border-radius:var(--shape-radius);transition:border-radius .18s ease}
.shape-choice.active{border-color:var(--theme-accent);background:color-mix(in srgb,var(--theme-accent) 6%,var(--theme-surface))}
.range-row{display:grid;grid-template-columns:150px 1fr 64px;gap:12px;align-items:center;margin-top:12px}
.range-row label{font-size:12px;font-weight:650}.range-row output{font:11px/1 var(--mono);color:var(--theme-muted);text-align:right}
input[type="range"]{width:100%;accent-color:var(--theme-accent)}
.theme-system-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.theme-system-item{padding:14px;border:1px solid var(--theme-border);border-radius:calc(var(--theme-radius,10px) * .8);background:var(--theme-surface-2)}
.theme-system-item b{display:block;font-size:12.5px}.theme-system-item p{font-size:11.5px;color:var(--theme-muted);margin:5px 0 12px}

/* shape propagates visibly through the dashboard */
.panel,.card,.pro-card,.ref-card,.website-template-selector,.deep-ref-pro,.theme-section,.theme-settings-hero,.theme-control-card,
input:not([type="range"]),select,textarea,.btn,.icon-btn,.tool-pill,.side-nav button,.side-search{
  transition:border-radius .2s ease,background-color .18s ease,border-color .18s ease,color .18s ease!important;
}

@media(max-width:1180px){
  .theme-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
  .theme-control-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .theme-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .theme-settings-hero{flex-direction:column}
  .theme-settings-actions{justify-content:flex-start}
  .theme-system-row{grid-template-columns:1fr}
  .shape-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  :root{--dashboard-font:14px;--dashboard-pad:15px}
  .workspace-head{padding:24px 15px 12px!important}
  .work{padding:8px 14px 54px!important}
  .ref-head,.ref-body,.theme-section,.theme-settings-hero{padding:16px!important}
  .ref-generate{min-width:0!important;width:100%}
  .theme-gallery{grid-template-columns:1fr}
  .range-row{grid-template-columns:1fr;gap:6px}
  .range-row output{text-align:left}
  .shape-grid{grid-template-columns:repeat(3,1fr)}
}