/* ===== polish layer — loaded after styles.css ===== */
:root{
  --hairline:rgba(255,255,255,0.06);
  --field-border:#2a343c;
}
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:rgba(88,196,255,0.35); }
button{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }

/* top bar */
.topbar{
  background:linear-gradient(180deg, #0d1013 0%, var(--topbar-bg) 100%);
  box-shadow:inset 0 -1px 0 var(--hairline);
}
.topbar .brand{ align-items:center; }
.topbar .brand .name{ display:inline-flex; align-items:center; gap:8px; }
.topbar .brand .name .logo-mark{ color:var(--accent); flex:0 0 auto; filter:drop-shadow(0 0 6px rgba(88,196,255,0.45)); }
.topbar .brand .sub{ padding-left:var(--space-3); border-left:1px solid var(--border); }
.btn-primary{ box-shadow:0 0 0 1px rgba(255,255,255,0.12) inset, 0 4px 14px -4px rgba(88,196,255,0.5); }
.btn-ghost, .btn-secondary{ border-color:var(--field-border); }
.btn-ghost{ color:var(--text-muted); }
@media (hover:hover) and (pointer:fine){
  .btn-ghost:hover, .btn-secondary:hover{ background:var(--accent-soft); }
  .btn-primary:hover{ box-shadow:0 0 0 1px rgba(255,255,255,0.2) inset, 0 6px 18px -4px rgba(88,196,255,0.65); }
}

/* viewport */
.viewport::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,0.45) 100%);
}
.viewport-tools, .stats, .brand-mark{ z-index:1; }
.tool-btn{
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,0.12);
  box-shadow:0 2px 10px rgba(0,0,0,0.35);
}
.tool-btn.active{ box-shadow:0 0 0 3px rgba(88,196,255,0.25), 0 2px 10px rgba(0,0,0,0.35); }
.stat-pill{
  font-variant-numeric:tabular-nums;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 2px 10px rgba(0,0,0,0.3);
  opacity:0; transform:translateY(6px);
  animation:rise 360ms var(--ease-out) forwards;
}
.stat-pill:nth-child(2){ animation-delay:50ms; }
.stat-pill:nth-child(3){ animation-delay:100ms; }
.stat-pill:nth-child(4){ animation-delay:150ms; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* panel */
.panel{ scrollbar-width:thin; scrollbar-color:#2a343c transparent; }
.panel::-webkit-scrollbar{ width:8px; }
.panel::-webkit-scrollbar-thumb{ background:#232c33; border-radius:var(--radius-pill); border:2px solid var(--panel-bg); }
.panel::-webkit-scrollbar-thumb:hover{ background:#34414b; }
.panel-header{ padding-top:18px; }
.panel-header p{ line-height:1.45; }

/* presets */
.preset-card{ padding:8px 4px; gap:5px; }
.preset-card .label{ font-size:10px; font-weight:500; letter-spacing:.01em; }
.preset-card.active{ box-shadow:0 6px 18px -6px rgba(88,196,255,0.6); }
@media (hover:hover) and (pointer:fine){
  .preset-card:hover:not(.active){ background:#171e24; transform:translateY(-1px); }
  .preset-card:hover:not(.active):active{ transform:scale(0.96); }
}

/* sections */
details{ padding:0; }
details[open]{ padding-bottom:16px; }
summary{ padding:14px 0; min-height:44px; transition:color 140ms ease; }
@media (hover:hover) and (pointer:fine){
  summary:hover{ color:var(--accent-strong); }
  summary:hover .chev{ color:var(--accent); }
}
summary .chev{
  width:22px; height:22px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--card-bg); font-size:14px; line-height:1;
  transition:transform 200ms var(--ease-out), background-color 140ms ease, color 140ms ease;
}
details[open] summary .chev{ background:var(--accent-soft); color:var(--accent); }
details[open] > :not(summary){ animation:section-in 240ms var(--ease-out) both; }
details[open] > .section-desc{ margin-top:-4px; }
@keyframes section-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.section-desc p{ line-height:1.45; }
.btn-link{ white-space:nowrap; text-decoration-color:rgba(159,180,194,0.4); }

/* fields */
.field-row label, .select-field label{ color:#dbe6ee; }
.field-row input[type="number"]{
  font-variant-numeric:tabular-nums; -moz-appearance:textfield; appearance:textfield;
  border-color:var(--field-border); border-radius:var(--radius-sm); width:64px;
}
.field-row input[type="number"]::-webkit-outer-spin-button,
.field-row input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.range-hints{ font-variant-numeric:tabular-nums; }

select{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  border-color:var(--field-border); padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%239fb4c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
select option{ background:var(--input-bg); color:var(--text); }
.holder-note{ padding:10px 12px; background:var(--card-bg); border-radius:var(--radius-sm); border:1px solid var(--hairline); }
.holder-warning{ border:1px solid rgba(255,138,128,0.2); }

/* export footer */
.panel-footer{
  background:linear-gradient(180deg, #0e1215 0%, var(--panel-bg) 100%);
  box-shadow:0 -12px 24px -8px rgba(0,0,0,0.55);
}
.export-list{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.export-row{
  align-items:center; gap:10px; padding:8px 10px;
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-md);
  transition:border-color 140ms ease, background-color 140ms ease, transform 140ms var(--ease-out);
}
.export-row:active{ transform:scale(0.98); }
.export-row:has(input:checked){ border-color:rgba(88,196,255,0.5); background:var(--accent-soft); }
.export-row:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){
  .export-row:hover{ border-color:var(--border-strong); }
  .export-row:has(input:checked):hover{ border-color:var(--accent); }
}
.export-row input[type="checkbox"]{
  -webkit-appearance:none; appearance:none; flex:0 0 auto; margin:0;
  width:16px; height:16px; border-radius:5px; border:1.5px solid var(--border-strong);
  background:transparent; display:grid; place-content:center; outline:none;
  transition:background-color 140ms ease, border-color 140ms ease;
}
.export-row input[type="checkbox"]::after{
  content:""; width:8px; height:4px; margin-top:-1px;
  border-left:2px solid var(--accent-contrast); border-bottom:2px solid var(--accent-contrast);
  transform:rotate(-45deg) scale(0.6); opacity:0;
  transition:opacity 120ms ease, transform 160ms var(--ease-out);
}
.export-row input[type="checkbox"]:checked{ background:var(--accent); border-color:var(--accent); }
.export-row input[type="checkbox"]:checked::after{ opacity:1; transform:rotate(-45deg) scale(1); }
.export-row .export-name{ line-height:1.2; }
.export-row .export-hint{ font-size:10.5px; line-height:1.3; margin-top:1px; }
.export-summary{ font-variant-numeric:tabular-nums; line-height:1.4; }
#btnExport{ padding:11px 14px; }
.toast{ line-height:1.4; border:1px solid rgba(255,138,128,0.2); }

@media (max-width: 480px){
  .export-list{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .stat-pill{ opacity:1; transform:none; animation:none; }
  details[open] > :not(summary){ animation:none; }
}