/* WingXAF — wing.tools house style (matches WingDNS exactly).
   Canonical reference: wingsite/webapp-house-style.css. Theme switcher is hidden. */
:root{
  --sky-top: oklch(0.74 0.06 240); --sky-mid: oklch(0.85 0.05 235); --sky-low: oklch(0.93 0.04 70);
  --ink: oklch(0.20 0.02 240); --ink-2: oklch(0.36 0.02 240); --ink-3: oklch(0.55 0.02 240);
  --paper: oklch(0.98 0.005 80); --acid: oklch(0.85 0.16 95); --red: oklch(0.58 0.18 28);
  --teal: oklch(0.52 0.10 200); --green: oklch(0.62 0.13 150); --rule: oklch(0.20 0.02 240 / 0.12);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ min-height:100%; }
body{
  font-family:"Space Grotesk", system-ui, sans-serif; color:var(--ink);
  -webkit-font-smoothing:antialiased; font-size:13px;
  background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 48%, var(--sky-low) 100%);
  background-attachment:fixed; padding:32px 20px 60px;
}
.topbar, main, .footer{ max-width:880px; margin-left:auto; margin-right:auto; }

/* header (was a dark bar → wing.tools header.app) */
.topbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:none; border:0; padding:0; margin-bottom:18px; }
.brand{ display:flex; align-items:center; gap:14px; }
.logo{ width:46px; height:46px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:24px; color:var(--paper); background:var(--ink); box-shadow:0 4px 14px oklch(0.20 0.02 240 / 0.25); }
.brand h1{ font-weight:700; font-size:30px; letter-spacing:-0.02em; line-height:1; }
.tagline{ font-family:"Newsreader", Georgia, serif; font-style:italic; font-size:17px; color:var(--ink-2); margin-top:3px; }
.controls{ flex-basis:100%; margin-left:0; justify-content:flex-end; display:flex; gap:14px; align-items:flex-end; }
.controls .ctl{ display:flex; flex-direction:column; gap:4px;
  font-family:"JetBrains Mono", monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-3); }
.controls label.ctl:has(#theme){ display:none; }   /* remove the theme switcher */

select, input[type=text], input[type=number]{
  font-family:"JetBrains Mono", monospace; font-size:13px; color:var(--ink);
  background:oklch(1 0 0 / 0.6); border:1px solid var(--rule); border-radius:10px; padding:8px 11px; outline:none;
}
select:focus, input:focus{ border-color:var(--teal); box-shadow:0 0 0 3px oklch(0.52 0.10 200 / 0.18); }

/* dropzone → card */
.dropzone{
  background:oklch(0.98 0.005 80 / 0.9); backdrop-filter:blur(14px) saturate(140%);
  border:2px dashed var(--rule); border-radius:16px; box-shadow:0 18px 44px -18px oklch(0.20 0.02 240 / 0.3);
  padding:48px 20px; text-align:center; transition:border-color .15s, background .15s; margin-bottom:18px;
}
.dropzone.dragging{ border-color:var(--teal); background:oklch(0.85 0.05 235 / 0.5); }
.drop-icon{ font-size:30px; color:var(--ink-3); margin-bottom:8px; }
.drop-title{ font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:18px; }
.drop-sub{ font-family:"JetBrains Mono",monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-3); margin:6px 0 16px; }
.privacy{ font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:13px; color:var(--ink-3); margin-top:14px; }

/* buttons */
.btn{
  font-family:"Space Grotesk", sans-serif; font-weight:600; font-size:14px;
  padding:10px 18px; border-radius:11px; cursor:pointer; border:1.5px solid var(--ink);
  background:transparent; color:var(--ink); transition:transform .1s, background .15s;
}
.btn:hover{ transform:translateY(-2px); }
.btn.primary{ background:var(--ink); color:var(--paper); }
.btn.ghost{ border-color:var(--rule); color:var(--ink-2); }

/* workspace */
.statusbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.status{ font-family:"JetBrains Mono",monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-3); }
.toolbar{ display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap; }
.tabs{ display:flex; gap:6px; }
.tab{
  font-family:"JetBrains Mono",monospace; font-size:13px; padding:8px 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--rule); background:oklch(1 0 0 / 0.45); color:var(--ink-2);
}
.tab.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.table-wrap{
  background:oklch(0.98 0.005 80 / 0.9); border:1px solid var(--rule); border-radius:14px;
  overflow:auto; max-height:70vh; box-shadow:0 18px 44px -18px oklch(0.20 0.02 240 / 0.3);
}
.tb-sheet{ background:oklch(0.98 0.005 80 / 0.9); border:1px solid var(--rule); border-radius:14px; padding:18px 20px; margin-bottom:18px; }
table{ width:100%; border-collapse:collapse; font-family:"JetBrains Mono",monospace; font-size:12px; }
thead th{ position:sticky; top:0; background:oklch(0.94 0.04 235 / 0.95); color:var(--ink-2);
  text-align:left; padding:9px 12px; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid var(--rule); }
tbody td{ padding:7px 12px; border-bottom:1px solid var(--rule); color:var(--ink); }
tbody tr:nth-child(even){ background:oklch(0.94 0.04 235 / 0.25); }
.note{ font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:13px; color:var(--ink-3); margin-top:10px; }
.error{ font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--red);
  background:oklch(0.98 0.005 80 / 0.9); border:1px solid var(--red); border-radius:10px; padding:12px 14px; margin-top:14px; white-space:pre-wrap; }
.hidden{ display:none; }

footer, .footer{ text-align:center; font-family:"JetBrains Mono",monospace; font-size:10.5px;
  color:var(--ink-3); letter-spacing:0.06em; margin-top:24px; line-height:1.8; }
.footer .dot{ margin:0 4px; }

@media (max-width:560px){ .brand h1{ font-size:24px; } table{ font-size:11px; } }