:root { --bg:#0b0f14; --card:#111821; --muted:#8aa0b6; --text:#e8f0fa; --pri:#3b82f6; --ok:#22c55e; --err:#ef4444; --line:#1f2937; }
* { box-sizing:border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji"; background:var(--bg); color:var(--text); }
a { color: var(--text); text-decoration: none; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); background:#0c1420; position:sticky; top:0; z-index:10; }
.container { max-width:1100px; margin: 20px auto; padding: 0 16px; }
.narrow { max-width:480px; margin: 60px auto; }
h1, h2, h3 { margin: 0 0 12px 0; }
.card { background: var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:16px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.grow { flex:1; }
.right { text-align:right; }
.btn { display:inline-block; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:#0e1726; }
.btn.primary { background: var(--pri); border-color: transparent; color:#fff; }
.btn.danger { background: var(--err); border-color: transparent; color:#fff; }
.form label { display:block; font-size:14px; color:var(--muted); margin:8px 0 6px; }
.form input { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:#0e1726; color:#fff; }
.w8 { width:90px; }
.inline { display:inline-block; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:8px 10px; border-top:1px solid var(--line); }
.table thead th { text-align:left; color: var(--muted); border-top:none; }
.muted { color: var(--muted); }
.alert { padding:10px 12px; border-radius:10px; margin-bottom:12px; }
.alert.ok { background: rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); }
.alert.error { background: rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); }
.footer { text-align:center; color:var(--muted); padding:16px; }


/* --- Enhanced Inputs & Input Groups --- */
.input { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:#0f1a2a; color:#fff; transition: box-shadow .15s ease, border-color .15s ease; }
.input:focus { outline:none; border-color: var(--pri); box-shadow: 0 0 0 4px rgba(59,130,246,.25); }
.input::placeholder { color: #9db2c7; }

/* Hide number spinners */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.input-group { display:inline-flex; align-items:stretch; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#0f1a2a; }
.input-group .input { border:none; border-radius:0; background:transparent; min-width:84px; text-align:center; }
.input-group .btn { border:none; border-left:1px solid var(--line); background:#132035; padding:8px 12px; border-radius:0; }
.input-group .btn:hover { filter: brightness(1.1); }

.form .rowline { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.form .rowline label { margin-bottom:0; }
.form .rowline .input, .form .rowline input[type=number] { width:auto; }

/* Header logo */
.topbar .brand { display:flex; align-items:center; gap:10px; }
.topbar .brand img.logo { width:36px; height:36px; object-fit:contain; border-radius:8px; box-shadow: 0 2px 10px rgba(0,0,0,.35); }


/* Quick Buttons (Chips) */
.chips { display:inline-flex; gap:6px; margin-left:8px; flex-wrap:wrap; vertical-align:middle; }
.chip { display:inline-block; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#111d2f; cursor:pointer; font-size:12px; }
.chip:hover { filter: brightness(1.1); }


/* --- Refined Layout & Controls v2 --- */
.table td { vertical-align: middle; }
.actions { display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.toolbar { display:inline-flex; align-items:center; gap:6px; }
.btn.sm { padding:6px 10px; font-size:13px; border-radius:10px; }
.btn.ghost { background: transparent; border:1px solid var(--line); }
.btn.ghost:hover { background:#0f1726; }
.btn.ghost.danger { border-color: rgba(239,68,68,.35); color:#fecaca; }
.btn.ghost.danger:hover { background: rgba(239,68,68,.12); color:#fff; }

.input-group.slim { height:36px; border-radius:12px; }
.input-group.slim .btn { padding:6px 10px; }
.input-group.slim .input { min-width:70px; height:36px; line-height:36px; }

.chips.compact { gap:6px; }
.chip { background: transparent; border:1px dashed var(--line); }
.chip:hover { background:#0e1726; }
.chip:active { transform: translateY(1px); }

/* Table row hover */
.table tbody tr:hover td { background: rgba(255,255,255,.015); }

/* Form block spacing */
.form-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.form-row .chips { margin-left:0; }

/* Make delete button not "bleed" into row */
.actions .btn.danger { border-radius:10px; }

/* Headings spacing */
.card h2 { margin-bottom:10px; }


/* ===== v7 Visual Overhaul ===== */
:root{
  --radius:12px;
  --radius-lg:16px;
  --shadow: 0 6px 20px rgba(0,0,0,.25);
  --pri-hi:#60a5fa;
  --pri-lo:#2563eb;
}
body { line-height:1.45; }
/* Cards */
.card { border-radius: var(--radius-lg); box-shadow: var(--shadow); background: linear-gradient(180deg,#0f1826 0%, #0c1420 100%); }
/* Headings */
.card h2{ font-weight:700; letter-spacing:.2px; }
h3{ margin-top:6px; margin-bottom:8px; font-weight:600; letter-spacing:.2px; }
/* Table */
.table thead th{ text-transform:uppercase; font-size:12px; letter-spacing:.08em; color:#9db2c7; }
.table td, .table th{ border-top-color: rgba(255,255,255,.06); }
.table tbody tr:hover td{ background: rgba(96,165,250,.06); }
/* Inputs */
.input{ border-radius: var(--radius); background:#0e1a2b; border:1px solid rgba(255,255,255,.06); }
.input:focus{ border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,.18); }
/* Segmented input group */
.input-group{ border: none; background: transparent; }
.segment{
  display:inline-flex; align-items:center; gap:0;
  background:#0e1726; border:1px solid rgba(255,255,255,.08);
  border-radius: 999px; overflow:hidden;
}
.segment .seg-btn{
  appearance:none; border:none; background:transparent; color:#cfe1ff;
  padding:8px 12px; cursor:pointer;
}
.segment .seg-field{
  width:86px; text-align:center; border:none; background:transparent; color:#fff; padding:8px 8px;
}
.segment .seg-btn:hover{ background: rgba(255,255,255,.06); }
.segment .seg-btn:active{ transform: translateY(1px); }
/* Primary */
.btn.primary{ background: linear-gradient(180deg, var(--pri-hi), var(--pri-lo)); box-shadow: 0 8px 16px rgba(37,99,235,.35); }
.btn.primary:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.btn{ border-radius: 999px; }
/* Ghost buttons */
.btn.ghost{ background: transparent; border:1px solid rgba(255,255,255,.12); }
.btn.ghost:hover{ background: rgba(255,255,255,.06); }
/* Danger */
.btn.danger{ background:#ef4444; }
.btn.ghost.danger{ color:#ffb4b4; border-color:rgba(239,68,68,.45); }
/* Chips */
.chips{ gap:8px; }
.chip{
  padding:6px 10px; border-radius:999px; border:1px dashed rgba(255,255,255,.12);
  background: rgba(255,255,255,.02); color:#cfe1ff; font-weight:500;
}
.chip:hover{ background: rgba(96,165,250,.12); }
.chip.filled{ border-style:solid; border-color: transparent; background: rgba(96,165,250,.18); }
/* Action bar */
.actions{ display:flex; align-items:center; gap:12px; justify-content:flex-end; }
.toolbar{ display:flex; align-items:center; gap:10px; }
.btn.sm{ padding:6px 12px; font-size:13px; }
/* New item row */
.form-row{ display:grid; grid-template-columns: 1fr 220px auto auto; gap:12px; align-items:center; }
.form-row label{ margin:0; }
.form-row .chips{ justify-self:start; }
.form-row .btn{ justify-self:start; }
/* Inputs height consistent */
.segment .seg-field, .seg-btn, .btn.sm{ height:36px; line-height:20px; }