:root {
    /* Light — Ramos: off-white, white cards, ink, yellow, orange-red, green */
    --bg: #f4f3f0; --card: #ffffff; --text: #141414; --muted: #6f6d66;
    --line: #e9e8e3; --accent: #141414; --accent-soft: #f9d966;
    --btn-on-accent: #ffffff;
    --green: #1f8a4c; --green-soft: #e6f4ea; --amber: #9a6b00; --amber-soft: #fbedc4;
    --red: #ef4a1f; --red-soft: #fde3da; --radius: 18px;
    --shadow: 0 2px 10px rgba(20,20,20,.06);
    --chart1: #f7c847; --chart2: #f84f22; --chart3: #2fa95c; --chart4: #2a2a28;
    --field: #f4f3f0; --field-border: #e2e0d8;
    --detail: #faf5e2;
    color-scheme: light;
  }
:root[data-theme="dark"] {
      --bg: #131312; --card: #1e1d1a; --text: #f4f3ef; --muted: #a3a196;
      --line: #2d2c27; --accent: #f7c847; --accent-soft: #3a3212;
      --btn-on-accent: #141414;
      --green: #3fca6f; --green-soft: #1b2f21; --amber: #f7c847; --amber-soft: #3a3212;
      --red: #ff5c33; --red-soft: #3b1d14; --shadow: none;
      --chart1: #f7c847; --chart2: #ff5c33; --chart3: #3fca6f; --chart4: #f4f3ef;
      --field: #2b2a25; --field-border: #47443c;
      --detail: #262419;
      color-scheme: dark;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #131312; --card: #1e1d1a; --text: #f4f3ef; --muted: #a3a196;
      --line: #2d2c27; --accent: #f7c847; --accent-soft: #3a3212;
      --btn-on-accent: #141414;
      --green: #3fca6f; --green-soft: #1b2f21; --amber: #f7c847; --amber-soft: #3a3212;
      --red: #ff5c33; --red-soft: #3b1d14; --shadow: none;
      --chart1: #f7c847; --chart2: #ff5c33; --chart3: #3fca6f; --chart4: #f4f3ef;
      --field: #2b2a25; --field-border: #47443c;
      --detail: #262419;
      color-scheme: dark;
    }
  }
  * { box-sizing: border-box; margin: 0; }
  body {
    background: var(--bg); color: var(--text);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--accent); text-decoration: none; cursor: pointer; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px 96px; }
  @media (min-width: 900px) {
    #llist { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; align-items: start; }
    #llist .card { margin-bottom: 0; }
  }
  .tbl { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
  .tblhead { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .tblhead input { max-width: 220px; padding: 8px 12px; }
  .tblfoot { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--line); }
  .tblfoot select { width: auto; padding: 6px 30px 6px 10px; font-size: 13px; }
  .fab {
    display: none; position: fixed; right: 18px; bottom: 22px; z-index: 30;
    width: 56px; height: 56px; border-radius: 50%; border: 0;
    background: var(--accent); color: var(--btn-on-accent); font-size: 28px; line-height: 1;
    box-shadow: 0 6px 16px rgba(30,28,18,.3); cursor: pointer;
  }
  @media (max-width: 720px) { .fab { display: block; } }
  .tblhead select { width: auto; padding: 8px 12px; }
  .sheetwrap { overflow-x: auto; }
  table.sheet { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 780px; }
  .sheet th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--muted); font-weight: 700; padding: 10px 14px;
    border-bottom: 1px solid var(--line); background: var(--bg); white-space: nowrap;
  }
  .sheet td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .sheet th + th, .sheet td + td { border-left: 1px solid var(--line); }
  .sheet tr.expandable { cursor: pointer; }
  .sheet tr.rowmain:hover td { background: var(--bg); }
  .sheet td.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .caret {
    display: inline-block; width: 12px; color: var(--muted);
    font-size: 10px; transition: transform .15s ease; flex-shrink: 0;
  }
  tr.rowmain.open .caret, .mrow.open .caret { transform: rotate(90deg); color: var(--text); }
  .sheet tr.rowmain.open td { background: var(--detail); }
  .sheet tr.rowdetail > td { background: var(--detail); padding: 4px 16px 14px; color: var(--text); }
  .mrow.open { background: var(--detail); }
  .mdetail { background: var(--detail); padding: 2px 18px 14px; }
  .subrow { position: relative; padding-left: 28px !important; }
  .subrow::before { content: "↳"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; }
  .sheet tr.rowdetail .listrow { border-bottom-color: var(--line); }
  .dgrid { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; padding-top: 10px; font-size: 13.5px; }
  .dgrid .k { color: var(--muted); }

  /* Phone-width card view replacing the sheet (tablets keep the sheet) */
  .cards { display: none; }
  .mcard {
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    padding: 12px 14px; margin: 10px 12px; cursor: pointer;
  }
  .mcard .mnums { display: flex; margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
  .mcard .mnums > div { flex: 1; }
  .mnums .k {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); font-weight: 700;
  }
  .xclose {
    background: none; border: 0; font-size: 26px; color: var(--muted);
    cursor: pointer; line-height: 1; padding: 2px 6px;
  }
  @media (max-width: 640px) {
    .sheetwrap { display: none; }
    .cards { display: block; padding-bottom: 10px; }
    .tblhead .title { flex-basis: 100%; }
    .tblhead input { flex: 1; max-width: none; min-width: 0; }
  }
  .dgrid a { color: var(--accent); text-decoration: none; }
  .dgrid a:hover { text-decoration: underline; }
  input:disabled { opacity: .65; cursor: not-allowed; }
  .sheet tbody tr:last-child > td { border-bottom: 0; }
  .schip { display: inline-flex; align-items: center; gap: 7px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; white-space: nowrap; }
  .sdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .dots { background: none; border: 0; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
  .dots:hover { background: var(--line); color: var(--text); }
  .pin { background: none; border: 0; cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 6px; line-height: 1; }
  .pin:disabled { opacity: .25; filter: grayscale(1); cursor: default; }
  .pin:not(:disabled):hover { background: var(--line); }
  .menu {
    position: absolute; z-index: 70; background: var(--card);
    border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 6px; min-width: 170px;
  }
  .menu button {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    padding: 9px 12px; border-radius: 8px; font: inherit; font-weight: 600;
    color: var(--text); cursor: pointer; white-space: nowrap;
  }
  .menu button:hover { background: var(--bg); }

  header.top { position: sticky; top: 10px; z-index: 20; padding: 0 16px; margin-bottom: 20px; }
  .top-inner {
    max-width: 1180px; margin: 0 auto; padding: 9px 10px 9px 20px;
    display: flex; align-items: center; gap: 12px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 999px; box-shadow: var(--shadow);
    transition: padding .2s ease, background-color .2s ease;
  }
  .logo { font-weight: 800; font-size: 20px; letter-spacing: -.5px; transition: font-size .2s ease; }
  .logo span { color: var(--text); }  /* single-tone wordmark: ink in light, off-white in dark */
  .top-nav { display: flex; gap: 4px; margin: 0 auto; }
  @media (max-width: 620px) {
    .top-inner { flex-wrap: wrap; border-radius: 22px; justify-content: space-between; }
    .top-nav { order: 3; width: 100%; justify-content: center; margin: 2px 0 0; }

    /* Scrolled state: shrink into a thin, translucent, blurred strip and
       collapse the username down to a colored initial avatar. */
    header.top.scrolled .top-inner {
      padding: 5px 12px;
      background: color-mix(in srgb, var(--card) 78%, transparent);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    header.top.scrolled .logo { font-size: 16px; }
    header.top.scrolled .top-nav { margin-top: 1px; }
    header.top.scrolled .top-nav a { padding: 4px 10px; font-size: 13px; }
  }
  .top-nav a { padding: 6px 12px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 14px; transition: padding .2s ease, font-size .2s ease; }
  .top-nav a.on { background: var(--accent-soft); color: var(--accent); }
  .userbtn {
    background: transparent; color: var(--text); border: 1.5px solid var(--line);
    border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px;
    font-weight: 700; white-space: nowrap; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: padding .2s ease, border-color .2s ease;
  }
  .userbtn:hover { border-color: var(--accent); color: var(--accent); }
  .userbtn .uinitial {
    display: none; width: 26px; height: 26px; border-radius: 50%;
    align-items: center; justify-content: center;
    background: var(--accent); color: var(--btn-on-accent);
    font-weight: 800; font-size: 12px; line-height: 1;
  }
  @media (max-width: 620px) {
    header.top.scrolled .userbtn { padding: 0; border: 0; background: none; }
    header.top.scrolled .userbtn .uname { display: none; }
    header.top.scrolled .userbtn .uinitial { display: flex; }
  }

  .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 12px; }
  .card.tap { cursor: pointer; transition: border-color .15s; }
  .card.tap:hover { border-color: var(--accent); }
  .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .grow { flex: 1; min-width: 0; }
  .title { font-weight: 700; font-size: 16px; }
  .sub { color: var(--muted); font-size: 13px; }
  .num { font-variant-numeric: tabular-nums; font-weight: 700; }
  .muted { color: var(--muted); }
  h2 { font-size: 18px; margin: 20px 0 10px; letter-spacing: -.3px; }

  .chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
  .chip.green { background: var(--green-soft); color: var(--green); }
  .chip.amber { background: var(--amber-soft); color: var(--amber); }
  .chip.gray  { background: var(--accent-soft); color: var(--accent); }
  .chip.red   { background: var(--red-soft); color: var(--red); }
  .chip.plain { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--accent); color: var(--btn-on-accent); border: 0; border-radius: 10px;
    padding: 10px 16px; font-weight: 600; font-size: 14px; cursor: pointer;
  }
  .btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }
  .btn.small { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
  .btn.danger { background: transparent; color: var(--red); border: 1px solid var(--line); }
  .btn:disabled { opacity: .5; cursor: default; }

  .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
  .tabs a { padding: 10px 14px; font-weight: 600; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
  .tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }

  .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
  .bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 8px; }
  .bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
  .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
  .stat .sub { font-size: 12px; }
  .stat .num { font-size: 17px; }

  input, select, textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--field-border); border-radius: 10px;
    background: var(--field); color: var(--text); font: inherit;
  }
  ::placeholder { color: var(--muted); opacity: .9; }
  select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23949086' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
  }
  input:focus, select:focus { outline: 2px solid var(--accent); border-color: transparent; }
  label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; color: var(--muted); }
  label.req::after { content: " *"; color: var(--red); font-weight: 700; }

  .fab {
    position: fixed; right: 20px; bottom: 24px; z-index: 30;
    width: 56px; height: 56px; border-radius: 50%; border: 0;
    background: var(--accent); color: #fff; font-size: 28px; line-height: 1;
    box-shadow: 0 6px 16px rgba(30,28,18,.3); cursor: pointer;
  }

  .modal-bg { position: fixed; inset: 0; background: rgba(16,24,40,.5); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
  .modal { background: var(--card); border-radius: 18px 18px 0 0; width: 100%; max-width: 480px; padding: 20px 20px 28px; max-height: 88vh; overflow-y: auto; }
  @media (min-width: 560px) { .modal-bg { align-items: center; } .modal { border-radius: 18px; } }
  /* Card-expansion popup: centered on every screen, enters with a card twist */
  .modal-bg.center { align-items: center; perspective: 900px; padding: 0 14px; }
  .modal-bg.center .modal { border-radius: 18px; animation: cardtwist .38s cubic-bezier(.2, .7, .3, 1.15); }
  @keyframes cardtwist {
    from { transform: rotateY(-14deg) rotateX(7deg) scale(.86); opacity: 0; }
    60%  { transform: rotateY(3deg) rotateX(-1.5deg) scale(1.01); opacity: 1; }
    to   { transform: none; }
  }
  .modal h3 { margin-bottom: 4px; }

  .toast {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 90px; z-index: 60;
    background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 10px;
    font-size: 14px; font-weight: 600; max-width: 90vw;
  }
  /* Login — split panel: form left, brand/illustration right (hidden <900px) */
  .authpage {
    max-width: 1000px; margin: 40px auto; min-height: 600px;
    display: flex; background: var(--card); border: 1px solid var(--line);
    border-radius: 26px; overflow: hidden; box-shadow: var(--shadow);
  }
  .authpanel { flex: 1 1 420px; padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
  .authform-wrap { width: 100%; max-width: 340px; margin: 0 auto; }
  .authform-wrap .logo { margin-bottom: 28px; }
  .authform-wrap h1 { font-size: 28px; letter-spacing: -.5px; }
  .authform-wrap .lead { margin: 6px 0 24px; }
  .sso-btn { padding: 11px 16px; font-size: 14px; }
  .divider {
    display: flex; align-items: center; gap: 10px; margin: 18px 0;
    color: var(--muted); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
  }
  .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  .field-icon { position: relative; }
  .field-icon .ficon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--muted); display: flex; pointer-events: none;
  }
  .field-icon input { padding-left: 38px; }
  .field-icon.haseye input { padding-right: 40px; }
  .field-icon .eyebtn {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: var(--muted); cursor: pointer;
    padding: 6px; display: flex; border-radius: 8px;
  }
  .field-icon .eyebtn:hover { color: var(--text); background: var(--bg); }
  .authart {
    flex: 1 1 420px; background: var(--detail); padding: 48px 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
  }
  .authquote { font-size: 22px; font-weight: 700; letter-spacing: -.3px; line-height: 1.35; max-width: 320px; }
  .authart-graphic { margin-top: 36px; display: flex; justify-content: center; }
  @media (max-width: 900px) {
    .authart { display: none; }
    .authpage { margin: 0; border-radius: 0; box-shadow: none; border: 0; min-height: 100vh; }
    .authpanel { padding: 32px 20px; }
  }
  .switch { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); cursor: pointer; }
  .switch input { width: auto; }
  .empty { text-align: center; color: var(--muted); padding: 40px 12px; }
  .listrow { padding: 12px 0; border-bottom: 1px solid var(--line); }
  /* Admin user rows: identity + actions, stacking cleanly on phones */
  .urow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .urow .uid { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
  .urow .uactions { display: flex; gap: 8px; flex-wrap: wrap; }
  @media (max-width: 640px) {
    .urow .uactions { flex-basis: 100%; }
  }
  .listrow:last-child { border-bottom: 0; }
  .right { text-align: right; }
  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; }