/* Cockpit — matches the Homebase estate design language.
   Appearance system: switch via <html data-appearance="…">. Default = slate (like Homebase). */
:root, :root[data-appearance="slate"]{
  --bg:#f4f6f8; --bg-grad:none; --bg-elev:#e9edf1; --bg-card:#ffffff; --ink:#1f2933; --muted:#64748b; --line:#e2e8f0;
  --accent:#3a6ea5; --accent-ink:#ffffff; --accent-2:#7a8aa0; --accent-soft:#e7eef7;
  --good:#2f855a; --bad:#c0392b; --warn:#b7862e;
  --radius:9px; --btn-r:8px; --shadow:0 1px 3px rgba(15,23,42,.06);
  --ui-font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color-scheme:light;
}
:root[data-appearance="paper"]{
  --bg:#fbfbfa; --bg-grad:none; --bg-elev:#f0f0ee; --bg-card:#ffffff; --ink:#191919; --muted:#6b6b6b; --line:#e6e6e4;
  --accent:#1a1a1a; --accent-ink:#ffffff; --accent-2:#8a8a8a; --accent-soft:#efefee;
  --radius:5px; --btn-r:5px; --shadow:0 1px 0 rgba(0,0,0,.05); --ui-font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color-scheme:light;
}
:root[data-appearance="forest"]{
  --bg:#f2f5f0; --bg-grad:radial-gradient(1000px 460px at 100% -10%, #e6efe4 0%, transparent 56%); --bg-elev:#e7ece2; --bg-card:#ffffff; --ink:#232a24; --muted:#6d766a; --line:#dde3d7;
  --accent:#2f7d5b; --accent-ink:#ffffff; --accent-2:#7f9a6f; --accent-soft:#e3efe8;
  --radius:11px; --btn-r:9px; --shadow:0 1px 3px rgba(35,55,40,.07); --ui-font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color-scheme:light;
}
:root[data-appearance="azure"]{
  --bg:#ffffff; --bg-grad:radial-gradient(1000px 460px at 100% -10%, #e9f8fc 0%, transparent 56%); --bg-elev:#eef6f9; --bg-card:#ffffff; --ink:#14181b; --muted:#5b6266; --line:#e7edf0;
  --accent:#12a7c9; --accent-ink:#ffffff; --accent-2:#7abed0; --accent-soft:#e3f7fc;
  --radius:12px; --btn-r:999px; --shadow:0 1px 3px rgba(20,60,70,.07); --ui-font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color-scheme:light;
}
:root[data-appearance="warm"]{
  --bg:#faf5ef; --bg-grad:radial-gradient(1100px 520px at 0% -12%, #ffeede 0%, transparent 60%),radial-gradient(900px 480px at 100% 0%, #fff2e0 0%, transparent 58%); --bg-elev:#f4ede3; --bg-card:#ffffff; --ink:#43392f; --muted:#9a8d7d; --line:#efe6d9;
  --accent:#e8714b; --accent-ink:#ffffff; --accent-2:#f2a65a; --accent-soft:#ffe7dc;
  --radius:16px; --btn-r:999px; --shadow:0 2px 8px rgba(80,55,30,.08); --ui-font:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif; color-scheme:light;
}
:root[data-appearance="midnight"]{
  --bg:#0f1216; --bg-grad:none; --bg-elev:#1a1f26; --bg-card:#171b21; --ink:#e6eaef; --muted:#8b95a1; --line:#2a313a;
  --accent:#6ea8fe; --accent-ink:#0f1216; --accent-2:#7f9ad0; --accent-soft:#1e2a3b;
  --radius:8px; --btn-r:8px; --shadow:0 2px 10px rgba(0,0,0,.4); --ui-font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--ui-font);background-color:var(--bg);background-image:var(--bg-grad);color:var(--ink);min-height:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
h1,h2,h3{font-weight:800;letter-spacing:-.01em}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Topbar */
.topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--line);background:var(--bg-card);position:sticky;top:0;z-index:20;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.brand{font-size:1.25rem;font-weight:800;letter-spacing:.01em;line-height:1.1}
.brand span{color:var(--accent)}
.brand small{display:block;font:700 .64rem/1 var(--ui-font);color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.spacer{flex:1}

/* Buttons */
button,.quiet{border:0;border-radius:var(--btn-r);padding:10px 16px;min-height:40px;background:var(--accent);color:var(--accent-ink);font-weight:700}
button:hover{filter:brightness(.96)}
button:disabled{opacity:.5;cursor:default}
.quiet,.ghost{background:var(--bg-elev);color:var(--ink);border:1px solid var(--line);font-weight:600}
.quiet:hover,.ghost:hover{background:var(--accent-soft);color:var(--accent)}
.linklike{background:transparent;border:0;color:var(--accent);min-height:auto;padding:4px 6px;font-weight:600}

/* Layout */
.main{max-width:1040px;margin:0 auto;width:100%;padding:24px 22px 90px}
.card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:20px}
.card h2{font-size:1.05rem;margin-bottom:4px}
.card .sub{color:var(--muted);font-size:.85rem;margin-bottom:16px}
.eyebrow{font-size:11px;letter-spacing:.15em;color:var(--accent);font-weight:800;text-transform:uppercase}

/* Create form */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:grid;gap:6px}
.field label{font-size:.78rem;font-weight:700;color:var(--muted)}
.field .withhint{display:flex;align-items:center;gap:6px}
.field input,.field select{width:100%;border:1px solid var(--line);background:var(--bg-card);color:var(--ink);border-radius:8px;padding:10px 12px}
.form-actions{margin-top:16px}
.info{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--bg-elev);color:var(--muted);font-size:11px;font-weight:800;cursor:help;border:1px solid var(--line)}

/* Plan legend */
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.legend .pill{font-size:.74rem}
.legend .pill b{text-transform:capitalize}

/* Table */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:800;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--bg-elev)}
.addr a{overflow-wrap:anywhere}
.addr .pending{color:var(--muted);font-size:.82rem}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--bg-elev);color:var(--muted);border:1px solid var(--line);cursor:help;white-space:nowrap}
.badge.plan-private{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.badge.plan-standard{background:var(--bg-elev);color:var(--ink)}
.badge.plan-trial{background:transparent}
.badge.st-active{color:var(--good)}
.badge.st-active::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--good)}
.badge.st-db_ready{color:var(--warn)}
.badge.st-db_ready::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--warn)}
.badge.st-pending::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}
.owner-tag{font-size:.7rem;color:var(--muted);margin-left:6px}

/* Dialog */
dialog{border:1px solid var(--line);border-radius:var(--radius);max-width:640px;width:calc(100% - 32px);max-height:90vh;padding:0;background:var(--bg-card);color:var(--ink);box-shadow:0 24px 70px rgba(0,0,0,.28)}
dialog::backdrop{background:rgba(15,23,42,.42)}
.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--line)}
.dialog-body{padding:20px}
.dialog-body p{line-height:1.6;margin:6px 0;font-size:.92rem}
.dialog-body strong{font-weight:700}
.dialog-body pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg-elev);border-radius:8px;padding:12px;font-size:.8rem;margin-top:8px}

/* Login */
.login-wrap{max-width:420px;margin:16vh auto 0;padding:0 24px}
.login-wrap h1{font-size:2rem;margin:8px 0}
.login-wrap p{color:var(--muted);line-height:1.6;margin-bottom:20px}
#gbtn{margin:14px 0}

#message{font-size:.85rem;color:var(--accent);min-height:20px;margin:4px 2px}

/* Appearance picker (floating, bottom-right) */
.appearance{position:fixed;right:18px;bottom:18px;z-index:40}
.appearance-btn{width:44px;height:44px;border-radius:50%;background:var(--bg-card);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow);font-size:1.2rem;display:grid;place-items:center;padding:0}
.appearance-menu{position:absolute;right:0;bottom:54px;background:var(--bg-card);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.18);padding:6px;display:grid;gap:2px;min-width:150px}
.appearance-menu button{background:transparent;color:var(--ink);border:0;text-align:left;padding:8px 12px;border-radius:8px;min-height:auto;font-weight:600;display:flex;align-items:center;gap:8px}
.appearance-menu button:hover{background:var(--accent-soft);color:var(--accent)}
.appearance-menu button.on{background:var(--accent-soft);color:var(--accent)}
.swatch{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.1)}

@media(max-width:640px){.form-grid{grid-template-columns:1fr}.main{padding:18px 14px 90px}}