@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* =========================================================
   CUBIFLOW — Task-like Minimal (Notion x Apple)
   - All styling moved to CSS (no inline <style> blocks needed)
   - Hover: subtle shadow, minimalist
   - Fav: clear active state (fill/solid)
   - Includes: admin modal editor styles + tag dropdown styles
========================================================= */

/* =========================
   TOKENS
========================= */
:root{
  --bg:#f4f5f7;
  --panel:#ffffff;
  --panel-2:rgba(255,255,255,.92);

  --text:#101114;
  --muted:rgba(16,17,20,.58);

  --line:rgba(16,17,20,.10);
  --line-soft:rgba(16,17,20,.08);
  --line-strong:rgba(16,17,20,.14);

  --r-10:10px;
  --r-12:12px;
  --r-14:14px;
  --r-16:16px;
  --r-18:18px;
  --r-20:20px;
  --r-pill:999px;

  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:20px;
  --s-6:24px;

  --font-ui:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;

  --fs-11:11px;
  --fs-12:12px;
  --fs-13:13px;
  --fs-14:14px;
  --fs-15:15px;
  --fs-16:16px;
  --lh:1.45;

  --sidebar-w:292px;
  --sidebar-w-m:268px;
  --inspector-w:360px;

  --control-h:44px;

  --shadow-1: 0 1px 0 rgba(16,17,20,.04), 0 10px 30px rgba(16,17,20,.06);
  --shadow-2: 0 1px 0 rgba(16,17,20,.05), 0 16px 40px rgba(16,17,20,.10);

  --ease: cubic-bezier(.2,.9,.2,1);
  --t: 140ms;

  --focus: 0 0 0 3px rgba(16,17,20,.10);
}

/* =========================
   RESET / BASE
========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family:var(--font-ui);
  color:var(--text);
  background:var(--bg);
  overflow:hidden;
}

a{ color:inherit; text-decoration:none; }
.muted{ color:var(--muted); }

p{ margin: 0 0 10px; line-height: var(--lh); }
small{ font-size: var(--fs-12); color: var(--muted); }

ul,ol{ margin: 10px 0; padding-left: 20px; }
li{ margin: 6px 0; line-height: var(--lh); }
hr{ border:0; border-top:1px solid var(--line-soft); margin: 14px 0; }

code,kbd,pre{ font-family: var(--font-mono); font-size: 12px; }
pre{
  background: rgba(16,17,20,.03);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-14);
  padding: 12px;
  overflow:auto;
}

/* safe wrap */
p,h1,h2,h3,h4,h5,h6,li,td,th,.card-desc,.tool-slug,.user-badge,.pill,.badge{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* scrollbars */
*::-webkit-scrollbar{ width:12px; height:12px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:rgba(16,17,20,.18);
  border:3px solid transparent;
  background-clip:padding-box;
  border-radius:999px;
}

/* =========================
   APP SHELL
========================= */
.app{
  height:100vh;
  display:flex;
  overflow:hidden;
}

/* =========================
   SIDEBAR
========================= */
.sidebar{
  width:var(--sidebar-w);
  height:100vh;
  overflow:auto;

  background:#efeff1;
  border-right:1px solid rgba(16,17,20,.06);

  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:6px 6px 0;
}
.logo{
  font-weight:800;
  letter-spacing:.02em;
  font-size:16px;
}
.brand small{
  font-size:var(--fs-12);
  color:var(--muted);
}

/* nav */
.nav{ display:flex; flex-direction:column; gap:14px; }
.nav-section{ display:flex; flex-direction:column; gap:6px; }

.nav-section-title,
.nav-section h6{
  margin:10px 6px 4px;
  font-size:var(--fs-11);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(16,17,20,.50);
}

.nav-link,
.nav-item,
.ms2-nav-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;

  padding:10px 12px;
  border-radius:var(--r-14);
  border:1px solid transparent;
  background:transparent;

  cursor:pointer;
  font-size:var(--fs-14);
  color:rgba(16,17,20,.78);
  font-weight:600;

  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.nav-link:hover,
.nav-item:hover,
.ms2-nav-link:hover{
  background:rgba(255,255,255,.55);
  border-color:rgba(16,17,20,.06);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.nav-link.active,
.nav-item.active,
.ms2-nav-link.w--current,
.nav-link[aria-current="page"],
.nav-item[aria-current="page"]{
  background:rgba(255,255,255,.85);
  border-color:rgba(16,17,20,.08);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  color:rgba(16,17,20,.92);
}

.nav-sub{
  display:none;
  padding-left:14px;
  gap:6px;
  flex-direction:column;
  overflow:visible;
}
.nav-sub.open{ display:flex; }

.badge{
  font-size:var(--fs-12);
  padding:4px 10px;
  border-radius:var(--r-pill);
  border:1px solid rgba(16,17,20,.10);
  background:rgba(255,255,255,.75);
  color:rgba(16,17,20,.70);
  font-weight:600;
}

.nav-auth{
  margin-top:8px;
  height:var(--control-h);
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:var(--r-14);
  border:1px solid rgba(16,17,20,.10);
  background:rgba(255,255,255,.92);

  font-size:var(--fs-13);
  font-weight:700;
  cursor:pointer;

  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav-auth:hover{
  border-color: rgba(16,17,20,.14);
  box-shadow: var(--shadow-1);
  background: rgba(255,255,255,.96);
}

.kbd-help{
  margin-top:10px;
  padding:12px;
  border-radius:var(--r-14);
  border:1px solid rgba(16,17,20,.08);
  background:rgba(255,255,255,.62);
  font-size:var(--fs-12);
  line-height:var(--lh);
  color:var(--muted);
}

/* =========================
   MAIN
========================= */
.main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* =========================
   TOPBAR
========================= */
.topbar{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(16,17,20,.08);
  padding:16px 18px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;

  position:sticky;
  top:0;
  z-index:50;
}

.top-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}

.plan-pill{
  font-size:var(--fs-12);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;

  padding:6px 10px;
  border-radius:var(--r-pill);
  border:1px solid rgba(16,17,20,.10);
  background:rgba(255,255,255,.96);
}

.search-bar{
  height:var(--control-h);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;

  border-radius:var(--r-14);
  border:1px solid rgba(16,17,20,.10);
  background:rgba(255,255,255,.96);

  width:clamp(360px,40vw,640px);
  max-width:100%;
  min-width:0;

  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.search-bar:focus-within{
  border-color: rgba(16,17,20,.18);
  box-shadow: var(--focus);
}
.search-bar input{
  width:100%;
  min-width:0;
  border:none;
  outline:none;
  background:transparent;
  font-size:var(--fs-14);
}

.user-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.user-badge{
  font-size:var(--fs-13);
  font-weight:700;
  padding:6px 10px;
  border-radius:var(--r-pill);
  border:1px solid rgba(16,17,20,.10);
  background:rgba(255,255,255,.96);
  max-width:320px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   CONTENT
========================= */
.content{
  flex:1;
  overflow:auto;
  min-width:0;
  min-height:0;

  padding:18px;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

body.has-selection .content{
  grid-template-columns:minmax(0,1fr) minmax(0,var(--inspector-w));
  gap:14px;
}
#right-inspector,.inspector{ display:none; }
body.has-selection #right-inspector,
body.has-selection .inspector{ display:block; }

@media (max-width:1100px){
  body.has-selection .content{ grid-template-columns:1fr; }
  body.has-selection #right-inspector{ display:none; }
}

/* =========================
   CONTROLS / FILTERS
========================= */
.controls{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(16,17,20,.08);
  border-radius:var(--r-18);
  padding:12px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}

.filters{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr)) auto;
  gap:12px;
  align-items:center;
}
@media (max-width:900px){
  .filters{ grid-template-columns:1fr; }
}

/* =========================
   INPUTS / SELECTS / TEXTAREA
========================= */
input,textarea,select,option{ font-family:var(--font-ui); }

.text-field.w-input,
.text-area-dom.w-input,
input.w-input,
textarea.w-input,
select.w-input,
.search input,
.form-row input,
.search-bar input,
select,
.form-row select,
.filters select,
.input{
  width:100%;
  min-width:0;

  height:var(--control-h);
  padding:0 12px;

  border-radius:var(--r-14);
  border:1px solid rgba(16,17,20,.12);
  background:rgba(255,255,255,.98);
  outline:none;

  font-size:var(--fs-14);
  line-height:var(--lh);

  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.text-field.w-input:focus,
.text-area-dom.w-input:focus,
input.w-input:focus,
textarea.w-input:focus,
select.w-input:focus,
.search input:focus,
.form-row input:focus,
select:focus,
.form-row select:focus,
.filters select:focus,
.input:focus{
  border-color: rgba(16,17,20,.18);
  box-shadow: var(--focus);
  background: #fff;
}

textarea,
.text-area-dom.w-input,
textarea.w-input{
  height:auto;
  min-height:140px;
  padding:12px;
  resize:vertical;
}

/* select arrow */
select,
select.w-input,
.w-select select,
.form-row select,
.filters select,
.dom-element-wrapper select,
.viewer-body select{
  padding-right:44px;
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(16,17,20,.7) 50%),
    linear-gradient(135deg, rgba(16,17,20,.7) 50%, transparent 50%),
    linear-gradient(to right, rgba(16,17,20,.12), rgba(16,17,20,.12));
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    calc(100% - 34px) 50%;
  background-size:
    6px 6px,
    6px 6px,
    1px 16px;
  background-repeat:no-repeat;
}

/* =========================
   TITLES
========================= */
.section-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;

  margin:8px 2px 2px;
  font-size:var(--fs-14);
  font-weight:800;
  color:rgba(16,17,20,.92);
}

/* h2/h3 used in your HTML */
.h2{ margin: 0; font-size: 18px; font-weight: 800; }
h3{ margin: 0; font-size: 16px; font-weight: 800; }

/* =========================
   GRID
========================= */
.grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}
@media (max-width:1280px){
  .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:720px){
  .grid{ grid-template-columns:1fr; }
}

/* =========================
   CARDS
========================= */
.card-item,
.dom-card,
.card{
  background:rgba(255,255,255,.98);
  border:1px solid rgba(16,17,20,.08);
  border-radius:var(--r-18);
  padding:14px;
  box-shadow:var(--shadow-1);
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.card-item:hover,
.dom-card:hover,
.card:hover{
  border-color: rgba(16,17,20,.12);
  box-shadow: var(--shadow-2);
}

.card-item{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
}

.card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:0;
}
.card-title{
  font-size:var(--fs-15);
  font-weight:800;
  margin:0;
}
.card-desc{
  font-size:var(--fs-13);
  color:rgba(16,17,20,.58);
  line-height:var(--lh);
  margin:0;
}

.thumb{
  border-radius:var(--r-16);
  border:1px solid rgba(16,17,20,.08);
  background:rgba(16,17,20,.02);
  padding:12px;
}
.thumb img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  border-radius:12px;
  border:1px solid rgba(16,17,20,.10);
}

/* pill */
.pill{
  font-size:var(--fs-11);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;

  padding:5px 10px;
  border-radius:var(--r-pill);
  border:1px solid rgba(16,17,20,.10);
  background:rgba(255,255,255,.96);
  color:rgba(16,17,20,.78);
}

/* =========================
   BUTTONS + GAPS
========================= */
.btn,
.button,
.w-button{
  height:40px;
  padding:0 14px;

  border-radius:var(--r-pill);
  border:1px solid rgba(16,17,20,.12);
  background:rgba(255,255,255,.96);

  font-size:var(--fs-12);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;

  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.btn:hover,
.button:hover,
.w-button:hover{
  border-color: rgba(16,17,20,.16);
  box-shadow: var(--shadow-1);
  background: #fff;
}

.btn:active,
.button:active,
.w-button:active{
  box-shadow: none;
  background: rgba(255,255,255,.92);
}

.btn.ghost,
.button.ghost{
  background: transparent;
}

/* smaller buttons inside cards */
.card-item .btn,
.card-item .button{
  height:34px;
  padding:0 12px;
}

/* gap between sibling buttons (works even without wrappers) */
.btn + .btn,
.btn + .button,
.button + .btn,
.button + .button{
  margin-left: 10px;
}

/* wrappers (preferred) */
.modal-actions,
.form-actions,
.tool-actions,
.header-actions,
.inline-actions,
.row-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* nav icon button */
.nav-btn{
  height:40px;
  width:40px;
  border-radius:var(--r-pill);
  border:1px solid rgba(16,17,20,.12);
  background:rgba(255,255,255,.96);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav-btn:hover{
  border-color: rgba(16,17,20,.16);
  box-shadow: var(--shadow-1);
  background:#fff;
}

/* =========================
   FAVORITE (HEART) — CLEAR STATE
========================= */
.fav-btn{
  border:1px solid rgba(16,17,20,.12);
  background:rgba(255,255,255,.96);
  border-radius:var(--r-pill);
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;

  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.fav-btn:hover{
  border-color: rgba(16,17,20,.16);
  box-shadow: var(--shadow-1);
  background:#fff;
}

.fav-btn .heart{ font-size: 15px; line-height: 1; opacity: .70; }

/* ON */
.fav-btn.is-on{
  background: rgba(16,17,20,.08);
  border-color: rgba(16,17,20,.18);
  box-shadow: var(--focus);
}
.fav-btn.is-on .heart{ opacity: 1; }

/* SVG hearts support */
.fav-btn svg{ fill: transparent !important; stroke: rgba(16,17,20,.75) !important; }
.fav-btn.is-on svg{ fill: rgba(16,17,20,.90) !important; stroke: rgba(16,17,20,.90) !important; }

/* =========================
   PANELS / VIEWERS
========================= */
.panel{
  display:none;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(16,17,20,.08);
  border-radius:var(--r-18);
  box-shadow:var(--shadow-1);
  overflow:visible;
}
.panel.show{ display:block; }

.tool-top{
  padding:14px;
  border-bottom:1px solid rgba(16,17,20,.08);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.tool-title{
  font-size:var(--fs-12);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.tool-slug{
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  color:var(--muted);
}
.viewer-body{ padding:14px; overflow:visible; }

.inspector .card{
  position:sticky;
  top:12px;
}

/* =========================
   TAG MULTISELECT DROPDOWN (index)
========================= */
.filter-tags{ position: relative; }

.tag-dd-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(360px, 86vw);
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(16,17,20,.10);
  border-radius: 16px;
  box-shadow: var(--shadow-2);
  overflow: hidden;
  z-index: 100;
}

.tag-dd-head{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 12px;
  border-bottom: 1px solid rgba(16,17,20,.08);
}

.tag-dd-all{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(16,17,20,.06);
}

.tag-dd-list{
  max-height: 320px;
  overflow:auto;
  padding: 6px;
}

.tag-dd-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
}
.tag-dd-item:hover{
  background: rgba(16,17,20,.03);
}
.tag-dd-item input{ width: 16px; height: 16px; }

/* =========================
   MODALS (shared) + ADMIN EDITOR
========================= */
.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:200;
}
.modal.show,
.modal.open{ display:block; }

.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(16,17,20,.45);
}

.modal-card{
  position: relative;
  width: min(980px, 92vw);
  margin: 8vh auto 0;

  background: rgba(255,255,255,.98);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 20px;
  box-shadow: var(--shadow-2);

  overflow: hidden;
  max-height: 84vh;
  display:flex;
  flex-direction:column;
}

.modal-head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(16,17,20,.08);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.modal-title{
  font-size: var(--fs-12);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.modal-body{
  padding: 14px 16px;
  overflow:auto;
  min-height:0;
}

.modal-foot{
  padding: 12px 16px;
  border-top: 1px solid rgba(16,17,20,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

/* ADMIN editor specifics */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px){
  .form-grid{ grid-template-columns: 1fr; }
}
.field label{
  display:block;
  font-size: var(--fs-12);
  font-weight: 700;
  color: rgba(16,17,20,.70);
  margin-bottom: 6px;
}

.field input,
.field select,
.field textarea{
  width:100%;
  border:1px solid rgba(16,17,20,.12);
  border-radius: 14px;
  padding: 10px 12px;
  outline:none;
  font: inherit;
  background: rgba(255,255,255,.98);
}
.field textarea{ min-height: 160px; resize: vertical; }

.code-tabs{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.code-tab{
  border: 1px solid rgba(16,17,20,.12);
  background: rgba(255,255,255,.96);
  border-radius: var(--r-pill);
  padding: 8px 10px;
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor:pointer;

  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.code-tab:hover{
  border-color: rgba(16,17,20,.16);
  box-shadow: var(--shadow-1);
  background:#fff;
}
.code-tab.is-on{
  background: rgba(16,17,20,.06);
  border-color: rgba(16,17,20,.22);
}

.code-pane{ display:none; }
.code-pane.is-on{ display:block; }

.mono{
  font-family: var(--font-mono);
  font-size: 12px;
}

/* =========================
   TOASTS
========================= */
.toast-host{
  position:fixed;
  right:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:300;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  min-width:260px;
  max-width:380px;

  padding:12px;
  border-radius:16px;
  border:1px solid rgba(16,17,20,.08);
  background:rgba(255,255,255,.98);
  box-shadow:var(--shadow-2);
}
.toast .t-title{
  font-size:var(--fs-11);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.toast .t-msg{
  margin-top:6px;
  font-size:var(--fs-13);
  color:var(--muted);
  line-height:var(--lh);
}
.toast .t-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.toast .t-x{
  height:32px;
  width:32px;
  border-radius:var(--r-pill);
  border:1px solid rgba(16,17,20,.10);
  background:rgba(255,255,255,.96);
  cursor:pointer;
}

/* =========================
   TABLES
========================= */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid rgba(16,17,20,.08);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.98);
  box-shadow:var(--shadow-1);
}
.table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid rgba(16,17,20,.08);
  padding:12px;
  font-size:var(--fs-12);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(16,17,20,.65);
  white-space:nowrap;
}
.table tbody td{
  padding:12px;
  border-bottom:1px solid rgba(16,17,20,.06);
  font-size:var(--fs-13);
  white-space:normal;
}
.table tbody tr:last-child td{ border-bottom:none; }
.table tbody tr:hover{ background: rgba(16,17,20,.02); }
th{ text-align:left; }

/* =========================
   MOBILE NAV
========================= */
.hamburger{ display:none; }
.nav-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:80;
}
@media (max-width:900px){
  .hamburger{ display:inline-flex; align-items:center; justify-content:center; }
  .sidebar{
    position:fixed;
    left:0; top:0; bottom:0;
    width:var(--sidebar-w-m);
    max-width:86vw;
    z-index:90;
    transform:translateX(-105%);
    box-shadow:var(--shadow-2);
    transition: transform var(--t) var(--ease);
  }
  body.nav-open .sidebar{ transform:translateX(0); }
  body.nav-open .nav-backdrop{ display:block; }
  .search-bar{ width:100%; }
}

/* =========================
   UTILITIES (replacing inline styles)
========================= */
.u-mt-18{ margin-top: 18px; }
.u-ml-10{ margin-left: 10px; }
.u-mt-10{ margin-top: 10px; }
.u-mt-12{ margin-top: 12px; }
.u-mt-14{ margin-top: 14px; }

.u-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.u-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.u-scroll{ overflow:auto; }
.u-muted{ color: var(--muted); }
.u-hidden{ display:none !important; }

.u-h3{ margin: 10px 0 12px; }
.u-h3-tight{ margin: 12px 0; }

/* selection */
.component.is-selected{
  outline:2px solid rgba(17,17,17,.14);
  border-radius:var(--r-18);
}

/* safety */
.panel,.viewer-body,.content,.main,.sidebar{ min-width:0; }