:root {
    --bg:        oklch(0.985 0.002 250);
    --surface:   oklch(1 0 0);
    --surface-2: oklch(0.975 0.003 250);
    --surface-3: oklch(0.955 0.004 250);
    --border:    oklch(0.915 0.005 250);
    --border-2:  oklch(0.875 0.006 250);
    --text:      oklch(0.28 0.012 255);
    --text-2:    oklch(0.50 0.012 255);
    --text-3:    oklch(0.64 0.012 255);
    --accent:    oklch(0.55 0.15 255);
    --accent-2:  oklch(0.55 0.15 255 / 0.10);
    --accent-3:  oklch(0.55 0.15 255 / 0.16);
    --row-hover: oklch(0.965 0.006 255);
    --sel:       oklch(0.55 0.15 255 / 0.07);
    --shadow:    0 1px 2px oklch(0.4 0.02 255 / 0.06), 0 2px 8px oklch(0.4 0.02 255 / 0.05);
    --shadow-lg: 0 8px 30px oklch(0.35 0.02 255 / 0.14);
    --ok:    oklch(0.58 0.12 155);
    --ok-bg: oklch(0.58 0.12 155 / 0.12);
    --warn:    oklch(0.66 0.13 75);
    --warn-bg: oklch(0.66 0.13 75 / 0.14);
    --draft:    oklch(0.60 0.012 255);
    --draft-bg: oklch(0.60 0.012 255 / 0.12);
    --hold:    oklch(0.62 0.13 35);
    --hold-bg: oklch(0.62 0.13 35 / 0.12);
    --danger:    oklch(0.55 0.20 25);
    --danger-bg: oklch(0.55 0.20 25 / 0.10);
  }
  [data-theme="dark"] {
    --bg:        oklch(0.185 0.008 255);
    --surface:   oklch(0.225 0.009 255);
    --surface-2: oklch(0.255 0.010 255);
    --surface-3: oklch(0.295 0.011 255);
    --border:    oklch(0.330 0.012 255);
    --border-2:  oklch(0.400 0.013 255);
    --text:      oklch(0.95 0.006 255);
    --text-2:    oklch(0.80 0.012 255);
    --text-3:    oklch(0.66 0.013 255);
    --accent:    oklch(0.74 0.13 255);
    --accent-2:  oklch(0.74 0.13 255 / 0.18);
    --accent-3:  oklch(0.74 0.13 255 / 0.26);
    --row-hover: oklch(0.275 0.011 255);
    --sel:       oklch(0.74 0.13 255 / 0.14);
    --shadow:    0 1px 2px oklch(0 0 0 / 0.3), 0 2px 8px oklch(0 0 0 / 0.25);
    --shadow-lg: 0 8px 30px oklch(0 0 0 / 0.45);
    --ok:    oklch(0.82 0.13 155);
    --ok-bg: oklch(0.82 0.13 155 / 0.18);
    --warn:    oklch(0.85 0.13 80);
    --warn-bg: oklch(0.85 0.13 80 / 0.18);
    --draft:    oklch(0.78 0.012 255);
    --draft-bg: oklch(0.78 0.012 255 / 0.16);
    --hold:    oklch(0.80 0.14 35);
    --hold-bg: oklch(0.80 0.14 35 / 0.18);
    --danger:    oklch(0.78 0.16 25);
    --danger-bg: oklch(0.78 0.16 25 / 0.18);
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  #root { height: 100%; }
  .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-feature-settings: "tnum" 1; }
  ::selection { background: var(--accent-3); }
  *::-webkit-scrollbar { width: 11px; height: 11px; }
  *::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 6px; border: 3px solid var(--bg); }
  *::-webkit-scrollbar-track { background: transparent; }
  button { font-family: inherit; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @keyframes slideIn { from { transform: translateX(20px); opacity: 0.4; } to { transform: none; opacity: 1; } }
  @keyframes popIn { from { transform: scale(0.96) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
  .screen-enter { animation: fadeIn 0.22s ease both; }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto;
    width: 16px; height: 16px; border-radius: 50%; background: var(--surface);
    border: 2px solid var(--accent); box-shadow: var(--shadow); cursor: grab; margin-top: 0;
  }
  input[type="range"]::-moz-range-thumb {
    pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--surface);
    border: 2px solid var(--accent); box-shadow: var(--shadow); cursor: grab;
  }
  input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
  input[type="range"] { background: transparent; }
  .sched-wrap { flex: 1; overflow: auto; position: relative; }
  .sched { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 860px; }
  .sched th, .sched td { white-space: nowrap; }
  .sched thead th {
    position: sticky; top: 0; z-index: 3; background: var(--surface-2);
    border-bottom: 1px solid var(--border); height: 38px; padding: 0 14px;
    font-size: 11px; font-weight: 600; color: var(--text-3); letter-spacing: 0.03em; text-transform: uppercase;
  }
  .sched td { border-bottom: 1px solid var(--border); padding: 0 14px; height: 40px; }
  .sched .frz { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: 1px 0 0 var(--border); }
  .sched thead th.frz { z-index: 4; background: var(--surface-2); }
  .sched tr.room td { background: var(--surface); }
  .sched tr.room:hover td { background: var(--row-hover); }
  .sched tr.room.sel td { background: var(--sel); }
  .sched tr.dept td { background: var(--surface-2); height: 36px; }
  .sched tr.dept .frz { background: var(--surface-2); }
  .sched tr.total td { background: var(--surface-3); height: 42px; border-top: 2px solid var(--border-2); }
  .sched tr.total .frz { background: var(--surface-3); }
  .sched tr.room { cursor: pointer; }
  .sched .editable { cursor: text; position: relative; border-radius: 5px; }
  .sched .editable:hover { box-shadow: inset 0 0 0 1.5px var(--border-2); background: var(--surface-2) !important; }
  .sched .editable::after {
    content: ""; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
    opacity: 0; transition: opacity 0.12s;
    background: var(--text-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .sched .editable:hover::after { opacity: 0.55; }

  /* sub-room child rows — lighter, indented breakdown under their parent room */
  .sched tr.subroom td { background: color-mix(in oklch, var(--surface-2) 60%, transparent); }
  .sched tr.subroom:hover td { background: var(--row-hover); }

  /* ---- narrow viewport (tablet): sidebar becomes an off-canvas drawer ---- */
  .sidebar-backdrop { display: none; }
  @media (max-width: 900px) {
    .app-sidebar {
      position: fixed; left: 0; top: 0; bottom: 0; z-index: 130;
      transform: translateX(-105%); transition: transform 0.2s ease;
      box-shadow: var(--shadow-lg);
    }
    .app-sidebar.open { transform: translateX(0); }
    .sidebar-toggle { display: inline-flex !important; }
    .sidebar-backdrop {
      display: block; position: fixed; inset: 0; z-index: 125;
      background: oklch(0.2 0.02 255 / 0.4); animation: fadeIn 0.16s ease both;
    }
  }

  /* ---- auth / landing (Iterate Renderer v3 pattern) ---- */
  .auth-page {
    min-height: 100%;
    background: #000;
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  .auth-page--centered {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .auth-bg { position: absolute; inset: 0; pointer-events: none; }
  .auth-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(120px);
  }
  .auth-glow-a {
    top: -8rem;
    left: 25%;
    width: 520px;
    height: 520px;
    background: oklch(0.78 0.16 75 / 0.10);
  }
  .auth-glow-b {
    right: 0;
    bottom: 0;
    width: 420px;
    height: 420px;
    background: oklch(0.70 0.14 65 / 0.05);
    filter: blur(100px);
  }
  .auth-shell {
    position: relative;
    z-index: 1;
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  .auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
  }
  .auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .auth-brand-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, oklch(0.82 0.16 75), oklch(0.72 0.15 65));
    display: grid;
    place-items: center;
    box-shadow: 0 8px 24px oklch(0.72 0.15 65 / 0.20);
  }
  .auth-brand-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5px;
  }
  .auth-brand-grid span {
    width: 5px;
    height: 5px;
    border-radius: 1.5px;
    background: #000;
  }
  .auth-brand-text {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .auth-brand-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .auth-brand-org {
    font-size: 10px;
    font-weight: 600;
    color: oklch(0.82 0.16 75 / 0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    color: oklch(1 0 0 / 0.60);
    background: linear-gradient(135deg, oklch(0.25 0.01 255 / 0.65), oklch(0.15 0.01 255 / 0.55));
    backdrop-filter: blur(50px) saturate(200%);
    -webkit-backdrop-filter: blur(50px) saturate(200%);
    border: 1px solid oklch(1 0 0 / 0.08);
  }
  .auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px 64px;
  }
  .auth-grid {
    width: 100%;
    max-width: 1120px;
    display: grid;
    gap: 40px;
    align-items: center;
  }
  @media (min-width: 1024px) {
    .auth-grid { grid-template-columns: 1.1fr 0.9fr; }
  }
  .auth-hero { display: flex; flex-direction: column; gap: 24px; }
  .auth-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid oklch(0.82 0.16 75 / 0.20);
    background: oklch(0.82 0.16 75 / 0.10);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: oklch(0.88 0.12 80);
  }
  .auth-title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
  .auth-title span {
    display: block;
    color: oklch(1 0 0 / 0.55);
  }
  .auth-lead {
    margin: 0;
    max-width: 36rem;
    font-size: 16px;
    line-height: 1.6;
    color: oklch(1 0 0 / 0.60);
  }
  .auth-features {
    display: grid;
    gap: 12px;
    padding-top: 8px;
  }
  @media (min-width: 640px) {
    .auth-features { grid-template-columns: repeat(3, 1fr); }
  }
  .auth-feature-card {
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, oklch(0.25 0.01 255 / 0.65), oklch(0.15 0.01 255 / 0.55));
    backdrop-filter: blur(50px) saturate(200%);
    -webkit-backdrop-filter: blur(50px) saturate(200%);
    border: 1px solid oklch(1 0 0 / 0.08);
  }
  .auth-feature-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: oklch(0.82 0.16 75);
    margin-bottom: 6px;
  }
  .auth-feature-card p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: oklch(1 0 0 / 0.55);
  }
  .auth-card {
    border-radius: 24px;
    background: linear-gradient(135deg, oklch(0.30 0.01 255 / 0.75), oklch(0.20 0.01 255 / 0.65));
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid oklch(1 0 0 / 0.12);
    box-shadow: 0 8px 32px oklch(0 0 0 / 0.40), inset 0 1px 0 oklch(1 0 0 / 0.10);
  }
  .auth-card-inner {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .auth-card-inner h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .auth-card-inner > div > p {
    margin: 8px 0 0;
    font-size: 14px;
    color: oklch(1 0 0 / 0.55);
  }
  .auth-card-inner > div > p span {
    color: oklch(0.88 0.12 80);
  }
  .auth-form { display: flex; flex-direction: column; gap: 16px; }
  .auth-field { display: flex; flex-direction: column; gap: 8px; }
  .auth-field > span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: oklch(1 0 0 / 0.45);
  }
  .auth-field input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid oklch(1 0 0 / 0.10);
    background: oklch(0 0 0 / 0.30);
    color: #fff;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .auth-field input::placeholder { color: oklch(1 0 0 / 0.25); }
  .auth-field input:focus {
    border-color: oklch(0.82 0.16 75 / 0.40);
    box-shadow: 0 0 0 3px oklch(0.82 0.16 75 / 0.15);
  }
  .auth-error {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid oklch(0.65 0.18 25 / 0.20);
    background: oklch(0.55 0.20 25 / 0.10);
    color: oklch(0.88 0.08 25);
    font-size: 14px;
  }
  .auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(90deg, oklch(0.82 0.16 75), oklch(0.76 0.15 70));
    color: #000;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, filter 0.15s;
  }
  .auth-submit:hover:not(:disabled) { filter: brightness(1.05); }
  .auth-submit:disabled { opacity: 0.6; cursor: default; }
  .auth-footnote {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    color: oklch(1 0 0 / 0.35);
  }
  .auth-loading {
    padding: 16px 20px;
    border-radius: 16px;
    font-size: 14px;
    color: oklch(1 0 0 / 0.70);
    background: linear-gradient(135deg, oklch(0.25 0.01 255 / 0.65), oklch(0.15 0.01 255 / 0.55));
    backdrop-filter: blur(50px) saturate(200%);
    border: 1px solid oklch(1 0 0 / 0.08);
  }
  .auth-toast {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    color: oklch(0.88 0.10 155);
    border: 1px solid oklch(0.70 0.12 155 / 0.20);
    background: linear-gradient(135deg, oklch(0.25 0.01 255 / 0.65), oklch(0.15 0.01 255 / 0.55));
    backdrop-filter: blur(50px) saturate(200%);
  }