@font-face { font-family:Ubuntu; src:url('fonts/Ubuntu-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:Ubuntu; src:url('fonts/Ubuntu-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:Ubuntu; src:url('fonts/Ubuntu-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
:root {
  --canvas:#f4f0df;
  --surface:#fffdf4;
  --rail:#eae2c8;
  --ink:#393727;
  --muted:#77715c;
  --line:#d9d1b7;
  --frame-line:#afa171;
  --accent:#766225;
  --accent-soft:#eae1b9;
  --accent-hover:#4f4015;
  --hover-soft:#ded3a8;
  --on-accent:#fffdf1;
  --success:#52653b;
  --success-soft:#e6ebd8;
  --danger:#85502e;
  --danger-soft:#f0e3cd;
  --radius:7px;
  --button-radius:7px;
  --row-height:40px;
  --rail-width:198px;
  --space:6px;
  --space-tight:calc(var(--space) / 2);
  --content-padding:var(--space);
  --layout-gap:var(--space);
  --sidebar-gap:var(--space);
  --heading-padding:var(--space);
  --panel-heading-height:33px;
  --panel-heading-line-height:20px;
  --button-line-height:16px;
  font-family:Ubuntu,system-ui,sans-serif;
  font-size:13px;
  color:var(--ink);
  background:var(--canvas);
}
* { box-sizing:border-box; }
html { height:100%; overflow:hidden; }
body { margin:0; height:100dvh; overflow:hidden; display:grid; grid-template-rows:minmax(0,1fr); }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button,a,input,select,textarea { outline-offset:3px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--accent); }
[hidden] { display:none!important; }
button:disabled { opacity:.6; cursor:wait; }
small,.muted { color:var(--muted); }
.style-bar { display:flex; align-items:center; justify-content:space-between; padding:0 var(--space); gap:var(--space); background:var(--surface); border-bottom:1px solid var(--line); }
.style-label { display:flex; align-items:center; gap:var(--space); font-size:12px; }
.style-label strong { font-weight:500; }
.style-label>span { color:var(--muted); font-size:11px; }
.layout-chip { font-size:12px; color:var(--accent); background:var(--accent-soft); border:1px solid var(--line); border-radius:var(--radius); padding:var(--space) var(--space); }
.shell { display:grid; grid-template-columns:var(--rail-width) minmax(0,1fr); min-height:0; }
.sidebar { min-height:0; background:var(--rail); border-right:1px solid var(--line); padding:var(--space) var(--space) var(--space); display:flex; flex-direction:column; gap:var(--sidebar-gap); }
.brand { display:flex; align-items:center; gap:var(--space); padding:0; font-size:18px; font-weight:500; letter-spacing:-.5px; }
.brand-mark { display:grid; place-items:center; width:28px; height:28px; background:var(--accent); color:var(--on-accent); border-radius:4px; font-size:24px; }
.project-control { display:grid; gap:var(--space); padding:0; }
.project-control>span { font-size:11px; color:var(--muted); }
.project-control select { border:1px solid var(--line); color:var(--ink); background:var(--surface); border-radius:var(--button-radius); width:100%; height:32px; padding:0 var(--space); font-size:12px; }
.sidebar nav { display:grid; gap:var(--space); }
.sidebar nav a { display:flex; align-items:center; gap:var(--space); min-height:36px; padding:var(--space) var(--space); border-radius:var(--button-radius); color:var(--muted); font-size:12px; }
.sidebar nav a:hover { background:var(--accent-soft); }
.sidebar nav a.active { background:var(--surface); color:var(--accent); font-weight:500; }
.nav-icon { width:17px; font-size:17px; }
.sidebar nav small { margin-left:auto; font-size:10px; }
.help-link { margin-top:auto; text-align:left; background:none; border:0; padding:var(--space) var(--space); font-size:11px; color:var(--muted); }
.owner { display:flex; align-items:center; gap:var(--space); border-top:1px solid var(--line); padding:var(--space) 0 0; font-size:12px; }
.owner small { display:block; font-size:10px; margin-top:var(--space); }
.main-shell { min-width:0; min-height:0; display:grid; grid-template-rows:48px minmax(0,1fr) 32px; }
.header { display:flex; align-items:center; justify-content:space-between; padding:0 var(--content-padding); background:var(--surface); border-bottom:1px solid var(--line); }
.breadcrumb { display:flex; align-items:center; gap:var(--space); font-size:12px; color:var(--muted); }
.breadcrumb strong { color:var(--ink); font-weight:500; }
.header-right { display:flex; align-items:center; gap:var(--space); }
.prototype-label { font-size:10px; color:var(--muted); border-left:2px solid var(--line); padding-left:var(--space); }
main { min-height:0; min-width:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:0 var(--content-padding) var(--content-padding); }
footer { display:flex; align-items:center; justify-content:space-between; gap:var(--space); padding:0 var(--content-padding); background:var(--surface); border-top:1px solid var(--line); font-size:10px; color:var(--muted); }
footer button { color:var(--muted); background:none; border:0; font-size:10px; }
.status-dot { display:inline-block; width:5px; height:5px; margin-right:6px; background:var(--success); border-radius:50%; }
h1 { line-height:32px; font-size:21px; font-weight:500; letter-spacing:-.5px; margin:0; }
h2 { line-height:var(--panel-heading-line-height); font-size:13px; font-weight:500; margin:0; }
h3 { font-size:12px; font-weight:500; margin:0; }
p { line-height:1.5; }
.page-title { display:flex; align-items:center; justify-content:space-between; gap:var(--space); padding-block:var(--heading-padding); margin:0; }
.page-title .page-meta { font-size:11px; color:var(--muted); margin-top:var(--space); }
.toolbar { display:flex; align-items:center; gap:var(--space); }
.button { position:relative; min-height:32px; display:inline-flex; align-items:center; justify-content:center; gap:var(--space); padding:var(--space) var(--space); border:1px solid var(--line); border-radius:var(--button-radius); background:var(--surface); color:var(--ink); font-size:12px; line-height:var(--button-line-height); font-weight:400; white-space:nowrap; }
.button.small { min-height:30px; padding:var(--space) var(--space); font-size:11px; }
.button:hover:not(:disabled) { background:var(--hover-soft); border-color:var(--accent); }
.button.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.button.primary:hover:not(:disabled) { background:var(--accent-hover); border-color:var(--accent-hover); }
.button.danger { color:var(--danger); }
.button-labels { display:grid; }
.button-size-label,.button-current-label { grid-area:1 / 1; }
.button-size-label { visibility:hidden; pointer-events:none; }
.button.busy .button-current-label { opacity:.35; }
.button.busy:disabled { filter:grayscale(.6); }
.button.busy:after { content:''; position:absolute; width:8px; height:8px; top:50%; left:50%; margin-top:-4px; margin-left:-4px; z-index:1; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.avatar { display:inline-grid; place-items:center; flex-shrink:0; width:27px; height:27px; background:var(--accent-soft); color:var(--accent); border:1px solid var(--line); border-radius:var(--button-radius); font-size:10px; font-weight:500; }
.badge { display:inline-flex; align-items:center; gap:var(--space); min-height:21px; padding:var(--space) var(--space); border:1px solid var(--line); border-radius:var(--button-radius); color:var(--muted); background:var(--canvas); font-size:10px; white-space:nowrap; }
.badge.good { background:var(--success-soft); color:var(--success); border-color:transparent; }
.badge.bad { background:var(--danger-soft); color:var(--danger); border-color:transparent; }
.panel { min-width:0; background:var(--surface); border:1px solid var(--frame-line); border-radius:var(--radius); overflow:hidden; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space); min-height:var(--panel-heading-height); padding:var(--space) var(--space); border-bottom:1px solid var(--line); }
.panel-head small { font-size:10px; }
.text-button { border:0; background:none; color:var(--accent); padding:0; font-size:11px; line-height:var(--panel-heading-line-height); text-align:left; }
.summary-strip { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--frame-line); border-radius:var(--radius); overflow:hidden; background:var(--surface); margin-bottom:var(--layout-gap); }
.summary-item { min-height:40px; padding:var(--space) var(--space); border-right:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:var(--space); }
.summary-item:last-child { border-right:0; }
.summary-item span { font-size:11px; color:var(--muted); }
.summary-item strong { font-size:19px; font-weight:500; }
.workspace-layout { display:grid; grid-template-columns:205px minmax(0,1fr); gap:var(--layout-gap); align-items:start; }
.workspace-main { min-width:0; }
.table-tools { display:flex; align-items:center; justify-content:space-between; gap:var(--space); padding:var(--space) var(--space); border-bottom:1px solid var(--line); }
.search,input[type=text] { color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--button-radius); padding:var(--space) var(--space); min-height:30px; font-size:12px; }
.search { min-width:210px; }
.filters { display:flex; gap:var(--space); }
.filters button { border:1px solid transparent; border-radius:var(--button-radius); padding:var(--space) var(--space); background:none; font-size:11px; color:var(--muted); }
.filters button.active { color:var(--accent); background:var(--accent-soft); border-color:var(--line); }
.table-wrap { overflow-x:auto; }
.data-table { border-collapse:collapse; width:100%; table-layout:fixed; text-align:left; font-size:12px; }
.data-table th { height:32px; padding:0 var(--space); color:var(--muted); background:var(--canvas); font-size:10px; font-weight:400; border-bottom:1px solid var(--line); }
.data-table tbody tr { height:var(--row-height); }
.data-table tbody td { height:var(--row-height); padding:0 var(--space); border-bottom:1px solid var(--line); overflow:hidden; }
.data-table tbody tr:last-child td { border-bottom:0; }
.data-table tbody tr:hover { background:var(--hover-soft); }
.cell { height:calc(var(--row-height) - 1px); min-height:0; display:flex; align-items:center; gap:var(--space); overflow:hidden; white-space:nowrap; }
.cell.end { justify-content:flex-end; }
.identity-wrap { display:flex; align-items:center; gap:var(--space); min-width:0; max-width:100%; }
.identity { min-width:0; }
.identity strong { font-size:12px; font-weight:500; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.identity small { display:block; margin-top:var(--space-tight); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-link { display:flex; min-width:0; max-width:100%; padding:0; border:0; background:transparent; color:var(--ink); text-align:left; }
.profile-link:hover .identity strong { color:var(--accent); }
.table-note { min-height:31px; display:flex; align-items:center; padding:var(--space) var(--space); font-size:10px; color:var(--muted); border-top:1px solid var(--line); }
.data-row { height:var(--row-height); display:flex; gap:var(--space); align-items:center; padding:0 var(--space); border-bottom:1px solid var(--line); overflow:hidden; }
.data-row:last-child { border-bottom:0; }
.data-row .row-end { margin-left:auto; display:flex; align-items:center; gap:var(--space); flex-shrink:0; }
.event-row { display:grid; gap:var(--space); padding:var(--space) var(--space); border-bottom:1px solid var(--line); font-size:11px; }
.event-row:last-child { border:0; }
.event-row small { font-size:10px; }
.side-stack { display:grid; gap:var(--layout-gap); }
.stat-lines { padding:0 var(--space); }
.stat-line { display:flex; justify-content:space-between; gap:var(--space); padding:var(--space) 0; border-bottom:1px solid var(--line); font-size:11px; }
.stat-line:last-child { border:0; }
.stat-line span { color:var(--muted); }
.stat-line strong { font-weight:500; }
.empty { padding:var(--space) var(--space); color:var(--muted); text-align:center; font-size:12px; }
.operation-result { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.settings-grid { display:grid; grid-template-columns:320px minmax(0,1fr); gap:var(--layout-gap); align-items:start; }
.setting-body { padding:var(--space); display:grid; gap:var(--space); }
.field { display:grid; gap:var(--space); padding:0; margin:0; border:0; font-size:12px; }
.field:last-child { border-bottom:0; margin-bottom:0; }
.field small { font-size:10px; }
.field select { color:var(--ink); background:var(--surface); padding:var(--space) var(--space); border:1px solid var(--line); border-radius:var(--button-radius); font-size:12px; width:100%; }
.field input[type=range] { accent-color:var(--accent); width:100%; }
.sample-actions { display:flex; gap:var(--space); align-items:center; flex-wrap:wrap; margin:0; }
.preview-note { display:flex; justify-content:space-between; padding:var(--space) var(--space); gap:var(--space); border-bottom:1px solid var(--line); font-size:11px; color:var(--muted); }
.preview-note strong { color:var(--ink); font-weight:500; }
.settings-secondary { margin-top:var(--layout-gap); }
.toast { position:fixed; bottom:calc(32px + var(--space)); right:var(--space); max-width:450px; padding:var(--space) var(--space); background:var(--surface); color:var(--ink); border:1px solid var(--line); border-left:3px solid var(--success); border-radius:var(--radius); box-shadow:0 5px 20px #302b1918; font-size:12px; z-index:10; }
.toast.error { border-left-color:var(--danger); }
dialog { position:fixed; width:440px; max-width:calc(100vw - var(--space) - var(--space)); max-height:calc(100dvh - var(--space) - var(--space)); padding:0; overflow:auto; border:1px solid var(--frame-line); border-radius:var(--radius); background:var(--surface); color:var(--ink); box-shadow:0 12px 40px #302b1930; }
dialog::backdrop { background:#302b1955; }
.dialog-header { position:relative; min-height:var(--panel-heading-height); display:flex; align-items:center; justify-content:space-between; gap:var(--space); padding:var(--space) var(--space); border-bottom:1px solid var(--line); background:var(--accent-soft); padding-right:calc(28px + var(--space)); cursor:grab; touch-action:none; user-select:none; }
.dialog-header.dragging { cursor:grabbing; }
.dialog-header h2 { font-size:13px; line-height:var(--panel-heading-line-height); margin:0; }
.dialog-close { position:absolute; right:var(--space-tight); top:50%; transform:translateY(-50%); width:28px; height:28px; flex-shrink:0; padding:0; display:grid; place-items:center; border:0; border-radius:var(--button-radius); background:transparent; color:var(--ink); font-size:21px; line-height:1; cursor:pointer; }
.dialog-close:hover { background:var(--hover-soft); }
#dialog-body { padding:var(--space); display:grid; gap:var(--space); }
#dialog-body form { display:grid; gap:var(--space); }
#dialog-body .button { justify-self:start; }
#dialog-body p { font-size:12px; line-height:16px; color:var(--muted); margin:0; }
#dialog-body p:last-child { margin-bottom:0; }
#dialog-body label { display:block; font-size:12px; margin:0; }
#dialog-body input[type=text] { width:100%; margin:0; }
.dialog-details { border:1px solid var(--line); border-radius:var(--radius); padding:var(--space); margin:0; font-size:12px; display:grid; gap:var(--space); }
.dialog-details:last-child { margin-bottom:0; }
.dialog-details div { display:flex; justify-content:space-between; gap:var(--space); padding:0; line-height:16px; }
.dialog-details strong { font-weight:500; }
.popup { position:fixed; z-index:8; width:200px; padding:0; overflow:hidden; border:1px solid var(--frame-line); border-radius:var(--radius); background:var(--surface); box-shadow:0 5px 20px #302b1920; }
.popup-heading { padding:var(--space); font-size:13px; font-weight:500; line-height:var(--panel-heading-line-height); color:var(--ink); border-bottom:1px solid var(--line); margin:0; }
.popup button { display:block; width:100%; text-align:left; color:var(--ink); border:0; border-radius:0; outline-offset:-2px; background:transparent; padding:var(--space) var(--space); font-size:12px; line-height:16px; }
.popup button:hover { background:var(--hover-soft); }
@media (prefers-reduced-motion:reduce) { .button.busy:after { animation:none; } }

/* Shared form components use the same controls, surfaces and spacing tokens. */
.field input[type=password],.field input[type=number],.field input[type=time],.field textarea {
  width:100%; min-width:0; color:var(--ink); background:var(--surface);
  padding:var(--space); border:1px solid var(--line); border-radius:var(--button-radius);
  font-size:12px; min-height:32px;
}
.field textarea { resize:vertical; line-height:16px; }
.check-field { display:flex; align-items:center; gap:var(--space); font-size:12px; }
.check-field input { accent-color:var(--accent); margin:0; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space); }
.form-section { display:grid; gap:var(--space); }
.form-section + .form-section { border-top:1px solid var(--line); padding-top:var(--space); }
.form-hint,.page-note { margin:0; color:var(--muted); font-size:11px; line-height:16px; }
.page-note { margin-bottom:var(--space); }
.form-fields { padding:0; margin:0; border:0; min-width:0; }
.form-fields:disabled { opacity:.6; }
.preferences-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--layout-gap); align-items:start; }
#preferences-status { padding-top:var(--space); }

main:has(#preferences-form) { padding-top:var(--content-padding); }

.dependent-fields { display:grid; gap:var(--space); border:0; padding:0; margin:0; min-width:0; }
.dependent-fields:disabled { opacity:.5; }
.dependent-fields:disabled .dependent-fields:disabled { opacity:1; }
.owner { margin-top:auto; justify-content:space-between; }
.login-screen { display:grid; place-items:center; padding:var(--space); }
.login-panel { width:320px; max-width:100%; }

.form-grid > .check-field { grid-column:1 / -1; }

.avatar { position:relative; }
.avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.selection-column { width:calc(27px + var(--space) + var(--space)); }
.table-tools > .toolbar { flex-wrap:wrap; }
.data-table td input[type=checkbox],.data-table th input[type=checkbox] { accent-color:var(--accent); }