:root {
  --bg:#f6f7fb; --panel:#fff; --text:#222; --muted:#6b7280;
  --brand:#2563eb; --ring:rgba(37,99,235,.25); --border:#e5e7eb;

  --nav-bg:#ffffff; --nav-border:#e4e7f0;
  --nav-active-bg:#e8efff; --nav-active-border:#c7d7ff; --nav-active-text:#0b3d91;

  --blue-bg:#eef5ff; --blue-border:#cfe0ff; --blue-text:#0b3d91;
  --green-bg:#ecfdf5; --green-border:#a7f3d0; --green-text:#065f46;
  --yellow-bg:#fffbeb; --yellow-border:#fde68a; --yellow-text:#92400e;

  --pos:#0f766e; --neg:#b91c1c; --zero:#6b7280;
  --pill-zero-bg:#eef2f7; --pill-zero-fg:#4b5563;
  --pill-pos-bg:#e8fff3; --pill-pos-fg:#0f766e;
  --pill-neg-bg:#ffefef; --pill-neg-fg:#b91c1c;

  --radius-lg:14px; --radius-md:10px; --radius-sm:8px;
  --shadow-sm:0 1px 0 rgba(0,0,0,.02),0 10px 30px -20px rgba(0,0,0,.2);
}

* { box-sizing: border-box; }
html, body { height:100%; }
body {
  margin:0;
  font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
}
.wrap { max-width:1200px; margin:24px auto 80px; padding:0 16px; }

/* Header / Nav */
header {
  display:flex; align-items:center; justify-content:space-between;
  margin:20px 0 12px;
}
.title { font-size:18px; font-weight:700; }
.nav { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.nav a {
  padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius-md);
  text-decoration:none; color:inherit; background:#fff;
}
.nav a.active {
  background:var(--nav-active-bg); border-color:var(--nav-active-border); color:var(--nav-active-text);
}

/* Brand */
.brand { display:flex; align-items:center; gap:10px; }
.brand .logo {
  height:28px; width:auto;
  background:transparent; border:none; border-radius:0; display:block;
}

/* Panels & Sections */
.panel {
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-sm);
}
.section + .section { margin-top:16px; }
.section h2 { font-size:16px; margin:0 0 10px; }

/* Stacks / Layout utilities */
.stack-xs > * + * { margin-top:6px; }
.stack-sm > * + * { margin-top:8px; }
.stack-md > * + * { margin-top:12px; }
.stack-lg > * + * { margin-top:16px; }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 800px) { .grid-2 { grid-template-columns:1fr; } }

.muted { color:var(--muted); }
.sep { border:0; border-top:1px solid var(--border); margin:16px 0; }

/* Forms */
.form { display:flex; flex-direction:column; gap:10px; }
label.small { font-size:12px; color:var(--muted); }
input[type="text"], input[type="email"], input[type="password"], select {
  width:100%; padding:10px 12px; border:1px solid var(--border);
  border-radius:var(--radius-md); background:#fff; font-size:14px;
  outline:none;
}
input:focus, select:focus {
  border-color:var(--brand); box-shadow:0 0 0 3px var(--ring);
}

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:var(--radius-md); border:1px solid var(--border);
  background:#fff; cursor:pointer; line-height:1; text-decoration:none; color:inherit;
}
.btn.primary { border-color:var(--brand); background:var(--brand); color:#fff; }
.btn.ghost { background:#fff; }
.btn.warning { border-color:#f59e0b; background:#f59e0b; color:#fff; }
.btn.danger  { border-color:#ef4444; background:#ef4444; color:#fff; }
.btn.small { padding:8px 10px; font-size:12px; border-radius:var(--radius-sm); }
.btn[disabled] { opacity:.6; cursor:not-allowed; }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; }

/* Alerts / Badges */
.alert { padding:10px 12px; border-radius:var(--radius-md); border:1px solid transparent; }
.alert-blue   { background:var(--blue-bg);   color:var(--blue-text);   border-color:var(--blue-border); }
.alert-green  { background:var(--green-bg);  color:var(--green-text);  border-color:var(--green-border); }
.alert-yellow { background:var(--yellow-bg); color:var(--yellow-text); border-color:var(--yellow-border); }

.badge { display:inline-block; padding:4px 8px; border-radius:9999px; font-size:12px; font-weight:600; }
.badge.green { background:var(--pill-pos-bg); color:var(--pill-pos-fg); }
.badge.yellow{ background:var(--pill-zero-bg); color:var(--pill-zero-fg); }

/* Tables (mobile-friendly) */
.table-wrap {
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:#fff;
  overflow:auto;                    /* allow horizontal scroll on mobile */
  -webkit-overflow-scrolling:touch; /* momentum scroll on iOS */
  width:100%;
  max-width:100%;
}
.table {
  width:100%; border-collapse:collapse;
  min-width:720px;                  /* prevent column collapse; enables scrolling */
}
.table-wide  { min-width:1000px; }  /* for 6–7 columns */
.table-wider { min-width:1200px; }  /* for very dense admin tables */

.table thead th {
  text-align:left; font-size:12px; font-weight:600; color:#374151;
  background:#f9fafb; border-bottom:1px solid var(--border); padding:10px;
}
.table tbody td { padding:12px 10px; border-bottom:1px solid #f2f2f3; vertical-align:middle; }
.table tbody tr:hover { background:#fcfcff; }

/* Optional soft scroll hint on small screens */
@media (max-width: 900px) {
  .table-wrap {
    background:
      linear-gradient(to right, rgba(246,247,251,0), rgba(246,247,251,1) 92%) no-repeat 100% 0/36px 100%,
      #fff;
  }
}

/* details/summary (drawers) */
details { display:block; }
details > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-md);
  background:#fff;
}
details[open] > summary {
  background:var(--nav-active-bg); border-color:var(--nav-active-border); color:var(--nav-active-text);
}
details > summary::-webkit-details-marker { display:none; }
details .drawer {
  margin-top:10px; padding:12px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
}

/* Cells with action buttons */
.cell-actions { white-space:nowrap; }
.cell-actions .btn-row { align-items:center; }

/* Login page */
.login-wrap { max-width:420px; margin:80px auto; padding:0 16px; }
h1 { font-size:20px; margin:0 0 12px; }

/* Code / inline */
code { background:#f8fafc; border:1px solid var(--border); padding:2px 6px; border-radius:6px; }

/* Footer */
.footer-note { margin-top:24px; color:var(--muted); font-size:12px; text-align:left; }

/* ===== Tool layout with left sidebar ===== */
.tool-layout { display:flex; gap:16px; }
.tool-sidebar {
  width:260px; flex:0 0 260px;
  background:var(--nav-bg);
  border:1px solid var(--nav-border);
  border-radius:12px;
  padding:10px;
  align-self:flex-start;
  position:sticky; top:12px;
}
.tool-sidebar-header {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:8px;
}
.tool-sidebar-header .label {
  font-size:12px; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); font-weight:700;
}
.tool-menu { display:flex; flex-direction:column; gap:6px; }
.tool-link {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%;
  text-decoration:none; color:inherit;
  padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#fff;
}
.tool-link.active {
  background:var(--nav-active-bg); border-color:var(--nav-active-border); color:var(--nav-active-text); font-weight:600;
}
.tool-link .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tool-sidebar-footer { margin-top:10px; }
.tool-main { flex:1 1 auto; min-width:0; }

@media (max-width: 900px) {
  .tool-layout { flex-direction:column; }
  .tool-sidebar { position:static; width:100%; flex:0 0 auto; }
}

/* Settings preview boxes */
.preview { display:flex; align-items:center; justify-content:center; min-height:100px; }
.preview-img { max-width:220px; max-height:60px; object-fit:contain; }
.preview-ico { width:48px; height:48px; object-fit:contain; }

/* Header right cluster */
.header-right { display:flex; align-items:center; gap:8px; }

/* User menu */
.user-menu { position:relative; }
.avatar-btn {
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 8px;
  border:1px solid var(--nav-active-border); border-radius:9999px;
  background:var(--nav-active-bg); color:var(--nav-active-text);
  cursor:pointer;
}
.avatar-btn:focus { outline:none; box-shadow:0 0 0 3px var(--ring); }
.avatar-initial {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; background:#fff; color:var(--nav-active-text);
}
.avatar-btn .caret { opacity:.7; }

.user-menu .menu {
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:230px;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-sm); padding:8px; z-index:100;
  display:none;
}
.user-menu:hover .menu,
.user-menu.open .menu { display:block; }

.user-menu .user-meta {
  padding:8px 10px 10px; border-bottom:1px solid var(--border); margin-bottom:6px;
}
.user-menu .user-meta .name { font-weight:700; }

.user-menu .item {
  display:block; padding:10px 12px; border-radius:10px;
  text-decoration:none; color:inherit; border:1px solid transparent;
}
.user-menu .item:hover {
  background:var(--nav-active-bg); color:var(--nav-active-text);
  border-color:var(--nav-active-border);
}

/* Rounded select with custom caret */
.select-wrap { position: relative; }
.select-wrap select.select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.select-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -3px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #9aa3b2;
  pointer-events: none;
}
.select-wrap select.select:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}
/* --- Rounded, themed select (strong specificity) --- */
.panel .section .select-wrap { position: relative; }
.panel .section .select-wrap select.select {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  color: inherit;
  line-height: 1.4;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-clip: padding-box;
}
.panel .section .select-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -3px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #9aa3b2;
  pointer-events: none;
}
.panel .section .select-wrap select.select:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

/* Hide default arrow in old IE/Edge (harmless elsewhere) */
.panel .section .select-wrap select.select::-ms-expand { display: none; }

/* --- Make a button visually match an input’s height/padding --- */
.btn.input-like {
  padding: 10px 12px;              /* match input padding */
  border-radius: 10px;             /* match input radius */
  height: 42px;                    /* consistent height across browsers */
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}
.btn.wide { min-width: 140px; }    /* a bit wider as requested */
.btn.danger {
  border-color: #ef4444;
  color: #fff;
  background: #ef4444;
}
.btn.danger:hover { filter: brightness(0.98); }

/* Keep table headers left-aligned globally (mobile looks cleaner) */
table thead th { text-align: left; }