:root{
  --brand-x-color: #D4A017;
  --paper: #FAFAF7;
  --paper-dim: #F2F1EA;
  --ink: #1C1F26;
  --ink-soft: #5B5F6B;
  --ink-faint: #8B8E97;
  --rule: #DDD9CC;
  --rule-strong: #C9C4B3;
  --card: #FFFFFF;
  --stack: #EFEDE3;
  --ledger: #3D5A80;
  --ledger-deep: #2E4660;
  --ledger-tint: #E8EDF3;
  --stone: #9C8E72;
  --stone-tint: #F1EDE2;
  --archive-green: #2E7D5B;
  --archive-tint: #E7F1EC;
  --danger: #A23E3E;
  --danger-tint: #F5E9E9;
  --shadow-sm: 0 1px 2px rgba(28,31,38,0.06);
  --shadow-md: 0 4px 16px rgba(28,31,38,0.08);
  --shadow-lg: 0 16px 40px rgba(28,31,38,0.14);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  font-family:'Inter', sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  height:100vh;
  height:100dvh;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-tap-highlight-color:rgba(61,90,128,0.16);
  touch-action:pan-x pan-y;
}

.app{
  display:grid;
  grid-template-columns:240px 1fr;
  grid-template-rows:64px 1fr;
  height:100vh;
  height:100dvh;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

/* ===== TOP BAR ===== */
.topbar{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:20px;
  padding:0 24px;
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  z-index:50;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.brand-mark{
  width:30px; height:30px;
  border-radius:50%;
  background:var(--card);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
  border:1px solid var(--rule);
  box-shadow:var(--shadow-sm);
  flex-shrink:0;
}
.brand-mark img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}

.brand-name{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:17px;
  letter-spacing:0;
  display:flex;
  align-items:baseline;
  gap:0;
  line-height:1;
  white-space:nowrap;
}
.brand-name .brand-x{
  display:inline-block;
  font-family:'Yellowtail', cursive;
  font-weight:400;
  font-size:1.72em;
  line-height:1;
  color:var(--brand-x-color);
  margin:0 -0.07em 0 -0.02em;
  flex-shrink:0;
  transform:translateY(0.16em) rotate(-3deg);
  letter-spacing:0;
}
.brand-name .brand-pages{
  font-weight:600;
  color:var(--ink-soft);
  margin-left:0.22em;
}

.searchbar{
  flex:1;
  max-width:560px;
  min-width:0;
  position:relative;
}
.searchbar input{
  width:100%;
  height:38px;
  background:var(--paper-dim);
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  padding:0 14px 0 38px;
  font-size:15px;
  font-family:'Inter', sans-serif;
  color:var(--ink);
  transition:border-color .15s, background .15s;
}
.searchbar input:focus{
  outline:none;
  border-color:var(--ledger);
  background:var(--card);
  box-shadow:0 0 0 3px var(--ledger-tint);
}
.searchbar input::placeholder{ color:var(--ink-faint); }
.searchbar svg{
  position:absolute;
  left:12px; top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:var(--ink-faint);
}
.search-kbd{
  position:absolute;
  right:10px; top:50%;
  transform:translateY(-50%);
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--ink-faint);
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:2px 6px;
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  margin-left:auto;
  min-width:0;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:38px;
  padding:0 14px;
  border-radius:var(--radius-md);
  font-family:'Inter', sans-serif;
  font-size:13.5px;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
}
.btn-primary{
  background:var(--ledger);
  color:var(--paper);
}
.btn-primary:hover{ background:var(--ledger-deep); }
.btn-ghost{
  background:transparent;
  color:var(--ink-soft);
  border-color:var(--rule);
}
.btn-ghost:hover{ background:var(--paper-dim); color:var(--ink); }
.btn-danger{
  background:var(--danger);
  color:#fff;
  border:1px solid var(--danger);
}
.btn-danger:hover{ filter:brightness(0.92); }
.btn-full{ width:100%; justify-content:center; }
.btn-icon{
  width:38px; padding:0; justify-content:center;
}

.privacy-pill{
  display:flex;
  align-items:center;
  gap:6px;
  height:38px;
  padding:0 12px;
  border-radius:var(--radius-md);
  background:var(--archive-tint);
  color:var(--archive-green);
  font-size:12.5px;
  font-weight:600;
  flex-shrink:0;
  border:1px solid rgba(46,125,91,0.2);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.privacy-pill .dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--archive-green);
  box-shadow:0 0 0 3px rgba(46,125,91,0.18);
  animation:privacyPulse 2s ease-in-out infinite;
}
.privacy-pill:hover{
  background:rgba(46,125,91,0.2);
  box-shadow:0 4px 12px rgba(46,125,91,0.16);
  transform:translateY(-1px);
}
.privacy-pill:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(46,125,91,0.12);
}
@keyframes privacyPulse{
  0%, 100%{
    box-shadow:0 0 0 3px rgba(46,125,91,0.18);
    opacity:1;
  }
  50%{
    box-shadow:0 0 0 6px rgba(46,125,91,0.12);
    opacity:0.92;
  }
}

/* ===== SIDEBAR (the stacks) ===== */
.sidebar{
  border-right:1px solid var(--rule);
  background:var(--paper-dim);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  padding:18px 12px 18px;
}

.sidebar-section{ margin-bottom:22px; }
.sidebar-label{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  padding:0 10px;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.sidebar-label button{
  background:none; border:none; cursor:pointer;
  color:var(--ink-faint);
  display:flex; align-items:center;
  padding:2px;
  border-radius:4px;
}
.sidebar-label button:hover{ color:var(--ledger); background:var(--ledger-tint); }

.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  font-size:13.5px;
  font-weight:500;
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .12s, color .12s;
  margin-bottom:2px;
  position:relative;
}
.nav-item:hover{ background:var(--stack); color:var(--ink); }
.nav-item.active{
  background:var(--ledger-tint);
  color:var(--ledger-deep);
  font-weight:600;
}
.nav-item .ico{ display:flex; flex-shrink:0; opacity:0.85; }
.nav-item .count{
  margin-left:auto;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--ink-faint);
}
.nav-item.active .count{ color:var(--ledger); }

.cat-dot{
  width:8px; height:8px;
  border-radius:2px;
  flex-shrink:0;
}

.sidebar-footer{
  margin-top:auto;
  padding:10px;
  border-top:1px solid var(--rule-strong);
  font-size:11.5px;
  color:var(--ink-faint);
  line-height:1.5;
}
.sidebar-footer strong{ color:var(--ink-soft); display:block; margin-bottom:2px; font-weight:600;}

/* ===== MAIN ===== */
.main{
  overflow-y:auto;
  padding:24px 28px 40px;
  display:flex;
  flex-direction:column;
}

.main-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:18px;
  flex-wrap:wrap;
  gap:10px;
}
.main-title{
  font-family:'Space Grotesk', sans-serif;
  font-size:22px;
  font-weight:700;
  letter-spacing:0;
}
.main-sub{
  font-size:13px;
  color:var(--ink-faint);
  margin-top:3px;
}

.view-toggle{
  position:relative;
  display:flex;
  background:var(--paper-dim);
  border:1px solid var(--rule);
  border-radius:12px;
  padding:2px;
  gap:2px;
  overflow:hidden;
}
.view-toggle::before{
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:30px;
  height:26px;
  border-radius:10px;
  background:var(--card);
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease;
  pointer-events:none;
}
.view-toggle[data-view="list"]::before{
  transform:translateX(32px);
}
.view-toggle button{
  border:none; background:transparent;
  width:30px; height:26px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  color:var(--ink-faint);
  position:relative;
  z-index:1;
  transition:color .15s ease, transform .12s ease;
}
.view-toggle button:hover{ transform:translateY(-1px); }
.view-toggle button.active{ color:var(--ledger); }

.filter-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 12px 6px 10px;
  border-radius:20px;
  background:var(--stone-tint);
  color:var(--stone);
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(156,142,114,0.2);
  cursor:pointer;
  transition:transform .14s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.chip:hover{
  transform:translateY(-1px);
  border-color:var(--rule-strong);
  box-shadow:0 4px 10px rgba(28,31,38,0.08);
}
.chip:active{ transform:translateY(0); }
.chip.active{
  background:var(--ledger);
  color:var(--paper);
  border-color:var(--ledger);
  box-shadow:0 6px 14px rgba(46,70,96,0.24);
}
.chip svg{ opacity:0.7; }
.filter-toolbar{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.filter-toolbar .filter-row{
  flex:1;
  margin-bottom:0;
  min-width:0;
}

/* ===== SITE FOOTER ===== */
.site-footer{
  --footer-bg:#FFFFFF;
  --footer-border:#E8E6E0;
  --footer-heading:#1C1F26;
  --footer-text:#6B7078;
  --footer-muted:#8B8E97;
  --footer-link:#3D5A80;
  margin-top:28px;
  background:var(--footer-bg);
  border:1px solid var(--footer-border);
  border-radius:18px;
  padding:22px 24px 16px;
  box-shadow:0 1px 2px rgba(28,31,38,0.04), 0 8px 24px rgba(28,31,38,0.06);
  color:var(--footer-text);
}
.footer-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--footer-border);
}
.footer-brand{
  flex:1;
  min-width:0;
  max-width:420px;
  margin-left:-6px;
  margin-top:8px;
}
.footer-brand-head{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:8px;
}
.footer-brand .footer-slogan{
  margin-left:33px;
}
.footer-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
  object-position:center center;
  border:1px solid var(--footer-border);
  background:#fff;
  flex-shrink:0;
  margin-left:25px;
  margin-top:6px;
}
.footer-signature{
  font-family:'Yellowtail', cursive;
  font-size:33px;
  line-height:1;
  color:var(--footer-heading);
  transform:translateY(3px);
}
.footer-slogan{
  font-family:'Nunito Sans', sans-serif;
  font-size:12.5px;
  font-weight:600;
  line-height:1.45;
  color:#5C6168;
  margin:0;
}
.footer-slogan + .footer-slogan{ margin-top:3px; }
.footer-aside{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  flex-shrink:0;
  margin-right:18px;
  min-width:270px;
}
.footer-section{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
}
.footer-tools{
  margin-left:-14px;
}
.footer-connect{
  margin-left:-14px;
}
.footer-title{
  font-family:'Inter', sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--footer-heading);
  margin:0 0 10px;
}
.footer-social{
  display:flex;
  align-items:center;
  gap:10px;
}
.social-icon{
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid #E2E0DA;
  background:#F7F7F5;
  color:#2F3238;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:background .15s, border-color .15s, transform .12s;
}
.social-icon svg{
  width:19px;
  height:19px;
  display:block;
}
.social-icon:hover{
  background:#fff;
  border-color:#C9C4B3;
  transform:translateY(-1px);
}
.tool-link{
  position:relative;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.tool-link:focus-visible{
  outline:2px solid var(--ledger);
  outline-offset:3px;
}
.tool-link:hover{
  transform:translateY(-1px);
}
.writtenx-link{
  text-decoration:none;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin-left:0;
  padding:2px 2px 4px 2px;
  border-radius:10px;
}
.writtenx-link::after{
  content:"";
  width:clamp(62px, 38%, 98px);
  height:3px;
  background:#DED7CB;
  display:block;
  border-radius:999px;
  transition:width .2s ease, background-color .2s ease;
}
.writtenx-link:hover::after{
  width:100%;
  background:#D4C29D;
}
.writtenx-logo{
  font-family:'Bree Serif', serif;
  font-weight:700;
  font-size:20px;
  line-height:1;
  color:#7A3F19;
  white-space:nowrap;
}
.tool-sign-x{
  font-family:'Yellowtail', cursive;
  font-weight:400;
  font-size:1.08em;
  line-height:1;
  color:#D4A017;
  margin:0 -0.07em 0 -0.02em;
  display:inline-block;
  transform:translateY(0.16em) rotate(-3deg);
  letter-spacing:0;
  vertical-align:baseline;
}
.tabstackx-link{
  margin-top:6px;
  text-decoration:none;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  background:#162B67;
  border:1px solid #13245A;
  border-radius:12px;
  padding:11px 12px 9px;
  min-width:min(100%, 250px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 14px rgba(15,27,63,0.22);
  overflow:hidden;
  margin-left:0;
}
.tabstackx-logo{
  font-family:'Nunito Sans', sans-serif;
  font-size:20px;
  font-weight:800;
  line-height:1;
  color:#FFFFFF;
  white-space:nowrap;
  letter-spacing:0.01em;
  margin-left:-1px;
}
.tabstackx-sub{
  margin-top:4px;
  font-family:'Inter', sans-serif;
  font-size:11px;
  font-weight:600;
  color:#DCE5FF;
  letter-spacing:0.01em;
}
.tabstackx-link::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:2px;
  background:linear-gradient(90deg, rgba(212,160,23,0.2), rgba(212,160,23,0.92), rgba(212,160,23,0.2));
  transform:scaleX(0.4);
  transform-origin:left;
  transition:transform .2s ease;
}
.tabstackx-link:hover::after{
  transform:scaleX(1);
}
.tabstackx-link .tool-sign-x{
  color:#E7B122;
}
.footer-copyright{
  padding-top:12px;
  text-align:center;
}
.ad-placement,
.footer-legal{
  margin:0;
  font-size:11.5px;
  line-height:1.55;
  color:var(--footer-muted);
}
.footer-legal{ margin-top:4px; }
.footer-note-label,
.footer-note-muted{ color:var(--footer-muted); }
.footer-contact-link{
  color:var(--footer-link);
  text-decoration:underline;
  text-underline-offset:2px;
}
.footer-contact-link:hover{ color:#2E4660; }
.footer-license-link{
  background:none;
  border:none;
  padding:0;
  font:inherit;
  color:var(--footer-muted);
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.footer-license-link:hover{ color:var(--footer-text); }

.sort-select-wrap{
  flex-shrink:0;
  margin-left:auto;
  position:relative;
}
.sort-select-wrap select.sort-select,
.select-wrap select.sort-select,
.custom-select.sort-select-wrap .custom-select-trigger{
  font-size:12.5px;
  font-weight:700;
  color:var(--ink-soft);
  background:var(--card);
  padding:8px 36px 8px 12px;
  min-width:156px;
  width:auto;
  min-height:38px;
}
.sort-select-wrap:not(.custom-select)::after,
.select-wrap.sort-select-wrap:not(.custom-select)::after{
  right:12px;
}

/* ===== CARD GRID — "index card" signature ===== */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
}

.pcard{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--radius-lg);
  padding:16px 16px 14px;
  cursor:pointer;
  position:relative;
  transition:transform .15s, box-shadow .15s, border-color .15s;
  display:flex;
  flex-direction:column;
  min-height:168px;
  overflow:hidden;
}
.pcard::before{
  content:'';
  position:absolute;
  left:0; top:14px; bottom:14px;
  width:4px;
  border-radius:0 3px 3px 0;
  background:var(--cat-color, var(--stone));
}
.pcard:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:var(--rule-strong);
}
.pcard.selected{
  border-color:var(--ledger);
  box-shadow:0 0 0 3px var(--ledger-tint);
}

.pcard-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
  padding-left:6px;
}
.pcard-title{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:15px;
  line-height:1.3;
}
.pcard-menu{
  background:none; border:none; cursor:pointer;
  color:var(--ink-faint);
  flex-shrink:0;
  padding:2px;
  border-radius:4px;
  opacity:0;
  transition:opacity .12s;
}
.pcard:hover .pcard-menu{ opacity:1; }
.pcard-menu:hover{ background:var(--paper-dim); color:var(--ink);}

.pcard-desc{
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.5;
  padding-left:6px;
  margin-bottom:10px;
  flex:1;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.pcard-tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding-left:6px;
  margin-bottom:12px;
}
.tag{
  font-size:10.5px;
  font-weight:600;
  font-family:'JetBrains Mono', monospace;
  color:var(--ink-faint);
  background:var(--paper-dim);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:2px 6px;
}

.pcard-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-left:6px;
  padding-top:10px;
  border-top:1px solid var(--rule);
}
.pcard-cat{
  font-size:11px;
  font-weight:600;
  color:var(--cat-color, var(--stone));
}
.pcard-copy{
  display:flex;
  align-items:center;
  gap:5px;
  background:none;
  border:1px solid var(--rule);
  border-radius:6px;
  padding:4px 9px;
  font-size:11.5px;
  font-weight:600;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .12s;
}
.pcard-copy:hover{
  background:var(--ledger);
  color:var(--paper);
  border-color:var(--ledger);
}
.pcard-copy.copied{
  background:var(--archive-green);
  color:var(--paper);
  border-color:var(--archive-green);
}
.pcard-meta{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--ink-faint);
  padding-left:6px;
  margin-bottom:10px;
}
.pcard-fav{
  color:#B9892D;
}

.card-grid.list{
  grid-template-columns:1fr;
}
.card-grid.list .pcard{
  min-height:0;
}
.card-grid.list .pcard-desc{
  -webkit-line-clamp:1;
}

/* New prompt card */
.pcard-new{
  border:1.5px dashed var(--rule-strong);
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  color:var(--ink-faint);
  min-height:168px;
}
.pcard-new:hover{
  border-color:var(--ledger);
  color:var(--ledger);
  background:var(--ledger-tint);
  transform:none;
  box-shadow:none;
}
.pcard-new .plus-circle{
  width:34px; height:34px;
  border-radius:50%;
  border:1.5px dashed currentColor;
  display:flex; align-items:center; justify-content:center;
}
.pcard-new span{ font-size:13px; font-weight:600; }

/* ===== DETAIL DRAWER ===== */
.overlay{
  position:fixed; inset:0;
  background:rgba(28,31,38,0.32);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
  z-index:80;
}
.overlay.show{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed;
  top:0; right:0;
  height:100vh;
  height:100dvh;
  width:min(440px, 100vw);
  max-width:100%;
  background:var(--card);
  box-shadow:var(--shadow-lg);
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.32,.72,0,1);
  z-index:90;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.drawer.show{ transform:translateX(0); }
.drawer-view{ width:min(480px, 100vw); }
.settings-drawer{ z-index:95; width:min(400px, 100vw); }

.drawer-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:20px 20px 18px;
  border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg, var(--paper-dim) 0%, var(--card) 100%);
}
.drawer-cat-tab{
  width:4px;
  min-height:44px;
  align-self:stretch;
  border-radius:3px;
  background:var(--cat-color, var(--stone));
  flex-shrink:0;
}
.drawer-head-text{ flex:1; min-width:0; }
.drawer-eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:6px;
}
.drawer-title{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:19px;
  line-height:1.3;
  word-break:break-word;
}
.drawer-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--ink-faint);
  margin-top:8px;
}
.drawer-meta-sep{ opacity:0.5; }
.drawer-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 8px;
  border-radius:20px;
  font-size:11px;
  font-weight:600;
  background:var(--paper-dim);
  border:1px solid var(--rule);
  color:var(--ink-soft);
}
.drawer-badge.cat{
  background:color-mix(in srgb, var(--cat-color, var(--stone)) 12%, var(--card));
  border-color:color-mix(in srgb, var(--cat-color, var(--stone)) 28%, var(--rule));
  color:var(--cat-color, var(--stone));
}
.drawer-badge.fav{
  background:var(--stone-tint);
  border-color:var(--rule-strong);
  color:#B9892D;
}
.drawer-badge.archived{
  background:var(--paper-dim);
  color:var(--ink-faint);
}
.drawer-close{
  background:none; border:none; cursor:pointer;
  color:var(--ink-faint);
  padding:6px;
  border-radius:6px;
  flex-shrink:0;
}
.drawer-close:hover, .drawer-fav:hover{ background:var(--paper-dim); color:var(--ink); }
.drawer-fav{
  background:none; border:none; cursor:pointer;
  color:var(--ink-faint);
  padding:6px;
  border-radius:6px;
  flex-shrink:0;
  display:flex;
}
.drawer-fav.active{
  color:#B9892D;
}
.drawer-fav.active svg{ fill:currentColor; }

.drawer-body{
  flex:1;
  overflow-y:auto;
  padding:16px 20px 20px;
}

.drawer-section{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  padding:14px 14px 12px;
  margin-bottom:12px;
}
.drawer-section:last-child{ margin-bottom:0; }
.drawer-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.drawer-section-head .drawer-field-label{ margin-bottom:0; }

.drawer-field-label{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:6px;
  display:block;
}

.drawer-desc{
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.65;
  margin-bottom:0;
}
.drawer-desc.empty{
  color:var(--ink-faint);
  font-style:italic;
}

.drawer-tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:0;
}
.drawer-tags.empty::after{
  content:'No tags';
  font-size:12.5px;
  color:var(--ink-faint);
  font-style:italic;
}

.prompt-view-box{
  background:var(--paper-dim);
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.prompt-view-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 12px;
  border-bottom:1px solid var(--rule);
  background:var(--card);
}
.prompt-view-toolbar span{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.prompt-view-toolbar button{
  display:inline-flex;
  align-items:center;
  gap:4px;
  height:28px;
  padding:0 8px;
  border:1px solid var(--rule);
  border-radius:6px;
  background:var(--paper);
  font-size:11px;
  font-weight:600;
  color:var(--ink-soft);
  cursor:pointer;
}
.prompt-view-toolbar button:hover{
  background:var(--ledger);
  color:var(--paper);
  border-color:var(--ledger);
}
.prompt-view-box pre{
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  line-height:1.7;
  color:var(--ink);
  white-space:pre-wrap;
  word-break:break-word;
  padding:14px;
  margin:0;
  max-height:min(42vh, 360px);
  overflow-y:auto;
}

.drawer-stat-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.drawer-stat-card{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  padding:12px;
}
.drawer-stat-card .drawer-field-label{ margin-bottom:4px; }
.drawer-stat-card .v{
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
}
.drawer-stat-card .sub{
  font-size:11px;
  color:var(--ink-faint);
  margin-top:2px;
}

.drawer-actions{
  padding:14px 16px 16px;
  border-top:1px solid var(--rule);
  display:flex;
  flex-direction:column;
  gap:10px;
  flex-shrink:0;
}
.drawer-actions-secondary{
  display:grid;
  grid-template-columns:38px 1fr 1fr 1fr;
  gap:6px;
}
.drawer-actions .btn-sm{
  height:36px;
  padding:0 8px;
  font-size:12px;
  min-width:0;
  gap:4px;
}
.drawer-actions .btn-sm svg{ flex-shrink:0; }
.drawer-actions .btn-sm span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.drawer-copy-btn{
  width:100%;
  justify-content:center;
  height:40px;
}
.btn-danger-ghost{
  background:transparent;
  color:var(--danger);
  border:1px solid var(--rule);
  width:38px;
  height:36px;
  padding:0;
  justify-content:center;
}
.btn-danger-ghost.mini-btn{
  width:auto;
  height:30px;
  padding:0 9px;
}
.btn-danger-ghost:hover{ background:var(--danger-tint); border-color:var(--danger); }
.btn-warning-ghost{
  background:transparent;
  color:var(--stone);
  border:1px solid var(--rule);
}
.btn-warning-ghost:hover{ background:var(--stone-tint); border-color:var(--stone); }

/* ===== MODALS AND FORMS ===== */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(28,31,38,0.36);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
  z-index:120;
}
.modal-overlay.show{ opacity:1; pointer-events:auto; }
.modal-host{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:130;
}
.modal-host.show{ display:flex; }
.modal{
  width:min(720px, 100%);
  max-height:min(90vh, 860px);
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.modal-editor{ width:min(680px, 100%); }
.modal-sm{ width:min(460px, 100%); }
.modal-manual{ width:min(840px, 100%); }
.modal-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 20px;
  border-bottom:1px solid var(--rule);
}
.modal-title{
  font-family:'Space Grotesk', sans-serif;
  font-size:18px;
  font-weight:700;
  flex:1;
}
.modal-close{
  background:none;
  border:none;
  cursor:pointer;
  color:var(--ink-faint);
  padding:6px;
  border-radius:6px;
  display:flex;
  flex-shrink:0;
  margin-top:-2px;
}
.modal-close:hover{ background:var(--paper-dim); color:var(--ink); }
.modal-body{
  padding:18px 22px 22px;
  overflow-y:auto;
}
.manual-body{
  padding-top:12px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(61,90,128,0.08), transparent 60%),
    radial-gradient(120% 80% at 100% 100%, rgba(156,142,114,0.08), transparent 60%);
}
.manual-intro{
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.6;
  margin:0 0 12px;
  padding:12px 14px;
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  background:linear-gradient(180deg, var(--card), var(--paper));
  box-shadow:var(--shadow-sm);
}
.manual-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.manual-card{
  border:1px solid var(--rule);
  border-radius:12px;
  background:linear-gradient(180deg, var(--card), var(--paper));
  padding:12px 12px 11px;
  box-shadow:var(--shadow-sm);
  transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}
.manual-card:hover{
  transform:translateY(-1px);
  border-color:var(--rule-strong);
  box-shadow:var(--shadow-md);
}
.manual-card h4{
  margin:0 0 8px;
  font-family:'Space Grotesk', sans-serif;
  font-size:14px;
  letter-spacing:0.01em;
  color:var(--ink);
}
.manual-card ul{
  margin:0;
  padding-left:16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.manual-card li{
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.5;
}
.manual-card strong{
  color:var(--ink);
}
.modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:14px 22px 18px;
  border-top:1px solid var(--rule);
  background:var(--paper);
}
.modal-actions .btn-primary{ min-width:130px; justify-content:center; }

.form-section{
  margin-bottom:20px;
}
.form-section:last-child{ margin-bottom:0; }
.form-section-title{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--rule);
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.form-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:visible;
}
.custom-select.open{ z-index:30; }
.modal-body .custom-select-menu,
.settings-body .custom-select-menu{
  z-index:240;
}
.form-field.full{ grid-column:1 / -1; }
.form-field label{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.form-field input,
.form-field textarea,
.form-field select{
  width:100%;
  font-family:'Inter', sans-serif;
  font-size:13.5px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.form-field textarea{
  min-height:96px;
  resize:vertical;
  line-height:1.5;
}
.form-field textarea.prompt-text{
  min-height:220px;
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  line-height:1.65;
  border-radius:var(--radius-sm);
  border-top:1px solid var(--rule);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
  outline:none;
  border-color:var(--ledger);
  box-shadow:0 0 0 3px var(--ledger-tint);
  background:var(--card);
}
.form-field input::placeholder,
.form-field textarea::placeholder{ color:var(--ink-faint); }

.select-wrap{
  position:relative;
}
.native-select-hidden{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.custom-select-trigger{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:10px 38px 10px 12px;
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:13.5px;
  font-weight:700;
  text-align:left;
  cursor:pointer;
  touch-action:manipulation;
  transition:border-color .15s, box-shadow .15s, background .15s, transform .12s;
}
.custom-select.has-dot .custom-select-trigger{ padding-left:34px; }
.custom-select-trigger:hover{
  border-color:var(--ink-faint);
  background:var(--card);
}
.custom-select.open .custom-select-trigger,
.custom-select-trigger:focus-visible{
  outline:none;
  border-color:var(--ledger);
  box-shadow:0 0 0 3px var(--ledger-tint);
  background:var(--card);
}
.custom-select-value{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.custom-select-trigger::after{
  content:'';
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid var(--ink-faint);
  transition:transform .15s, border-top-color .15s;
}
.custom-select.open .custom-select-trigger::after{
  transform:translateY(-50%) rotate(180deg);
  border-top-color:var(--ledger);
}
.custom-select-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:220;
  display:none;
  padding:6px;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  max-height:min(280px, 52vh);
  overflow-y:auto;
}
.custom-select.open .custom-select-menu{ display:block; }
.custom-select-option{
  width:100%;
  display:block;
  border:none;
  background:transparent;
  color:var(--ink-soft);
  font-family:'Inter', sans-serif;
  font-size:13.5px;
  font-weight:500;
  text-align:left;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:background .12s, color .12s, font-weight .12s;
}
.custom-select-option:hover{
  background:var(--paper-dim);
  color:var(--ink);
}
.custom-select-option.active{
  background:var(--ledger-tint);
  color:var(--ledger-deep);
  font-weight:700;
}
.custom-select .select-dot{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:10px;
  height:10px;
  border-radius:3px;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08);
}
.select-wrap select{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  font-family:'Inter', sans-serif;
  font-size:13.5px;
  font-weight:700;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  min-height:42px;
  padding:10px 36px 10px 12px;
  cursor:pointer;
  touch-action:manipulation;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.select-wrap:not(.custom-select) select:hover{
  border-color:var(--ink-faint);
  background:var(--card);
}
.select-wrap:not(.custom-select) select:focus{
  outline:none;
  border-color:var(--ledger);
  box-shadow:0 0 0 3px var(--ledger-tint);
  background:var(--card);
}
.select-wrap:not(.custom-select)::after{
  content:'';
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid var(--ink-faint);
  pointer-events:none;
  transition:border-top-color .15s;
}
.select-wrap:not(.custom-select):hover::after,
.select-wrap:not(.custom-select):focus-within::after{
  border-top-color:var(--ink-soft);
}
.select-wrap.has-dot select{ padding-left:34px; }
.select-wrap .select-dot{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:10px;
  height:10px;
  border-radius:3px;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08);
}
.form-field .select-wrap select,
.form-field .custom-select-trigger{
  font-size:13.5px;
}
.select-wrap select option{
  font-size:14px;
  font-weight:600;
}

.prompt-editor-wrap{
  border:1px solid var(--rule);
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--paper);
}
.prompt-editor-wrap:focus-within{
  border-color:var(--ledger);
  box-shadow:0 0 0 3px var(--ledger-tint);
}
.prompt-editor-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  border-bottom:1px solid var(--rule);
  background:var(--card);
}
.prompt-editor-head span{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.prompt-editor-head .char-count{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--ink-faint);
}

.toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  background:var(--paper);
}
.toggle-row + .toggle-row{ margin-top:8px; }
.toggle-label{
  font-size:13px;
  font-weight:600;
  color:var(--ink);
}
.toggle-hint{
  font-size:11.5px;
  color:var(--ink-faint);
  margin-top:2px;
}
.toggle-switch{
  position:relative;
  width:44px;
  height:24px;
  flex-shrink:0;
}
.toggle-switch input{
  opacity:0;
  width:0;
  height:0;
  position:absolute;
}
.toggle-slider{
  position:absolute;
  inset:0;
  background:var(--rule-strong);
  border-radius:24px;
  cursor:pointer;
  transition:background .2s;
}
.toggle-slider::before{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  left:3px;
  top:3px;
  background:var(--card);
  border-radius:50%;
  transition:transform .2s;
  box-shadow:var(--shadow-sm);
}
.toggle-switch input:checked + .toggle-slider{
  background:var(--ledger);
}
.toggle-switch input:checked + .toggle-slider::before{
  transform:translateX(20px);
}
.toggle-switch input:focus-visible + .toggle-slider{
  outline:2px solid var(--ledger);
  outline-offset:2px;
}

.tag-input-wrap{ position:relative; }
.tag-preview{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
  min-height:0;
}
.tag-preview:empty{ display:none; }
.tag-preview .tag{ font-size:11px; }

.help-text{
  font-size:12px;
  color:var(--ink-faint);
  line-height:1.5;
  margin-top:4px;
}
.manager-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.manager-add-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-bottom:16px;
  margin-bottom:16px;
  border-bottom:1px solid var(--rule);
}
.manager-empty{
  padding:20px 14px;
  text-align:center;
  font-size:13px;
  line-height:1.55;
  color:var(--ink-faint);
  border:1px dashed var(--rule);
  border-radius:var(--radius-md);
  background:var(--paper);
}
.color-picker{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.color-swatches{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.color-swatch{
  width:28px;
  height:28px;
  border-radius:8px;
  border:2px solid transparent;
  cursor:pointer;
  padding:0;
  transition:transform .12s, box-shadow .12s, border-color .12s;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);
}
.color-swatch:hover{ transform:scale(1.08); }
.color-swatch.active{
  border-color:var(--ink);
  box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--ledger);
}
.color-custom{
  display:flex;
  align-items:center;
  gap:10px;
}
.color-native-wrap{
  display:block;
  width:40px;
  height:40px;
  border-radius:var(--radius-sm);
  border:1px solid var(--rule);
  overflow:hidden;
  cursor:pointer;
  flex-shrink:0;
  background:var(--paper);
}
.color-native-wrap input[type="color"]{
  width:150%;
  height:150%;
  margin:-25%;
  border:none;
  padding:0;
  cursor:pointer;
  background:transparent;
}
.color-hex{
  flex:1;
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  padding:10px 12px;
  border:1px solid var(--rule);
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--ink);
}
.color-hex:focus{
  outline:none;
  border-color:var(--ledger);
  box-shadow:0 0 0 3px var(--ledger-tint);
  background:var(--card);
}
.confirm-host{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(28,31,38,0.42);
  animation:confirmFadeIn .18s ease;
}
@keyframes confirmFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
.confirm-dialog{
  width:min(400px, 100%);
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:22px 22px 18px;
  animation:confirmSlideIn .2s ease;
}
@keyframes confirmSlideIn{
  from{ opacity:0; transform:translateY(8px) scale(0.98); }
  to{ opacity:1; transform:none; }
}
.confirm-title{
  font-family:'Fraunces', serif;
  font-size:18px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:8px;
}
.confirm-message{
  font-size:13.5px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0 0 18px;
}
.confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.confirm-actions .btn{ min-width:96px; justify-content:center; }
.manager-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  background:var(--paper);
}
.manager-row .name{
  font-weight:600;
  font-size:13.5px;
}
.manager-row .meta{
  color:var(--ink-faint);
  font-size:12px;
  margin-top:2px;
}
.manager-actions{
  display:flex;
  gap:6px;
}
.mini-btn{
  height:30px;
  padding:0 9px;
  font-size:12px;
}
.danger-note{
  border:1px solid var(--danger);
  background:var(--danger-tint);
  color:var(--danger);
  border-radius:var(--radius-md);
  padding:12px;
  font-size:13px;
  line-height:1.5;
}

/* ===== EMPTY STATE ===== */
.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:60px 20px;
  color:var(--ink-faint);
}
.empty-state .ico-wrap{
  width:56px; height:56px;
  border-radius:14px;
  background:var(--stack);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  color:var(--ink-soft);
}
.empty-state h3{
  font-family:'Space Grotesk', sans-serif;
  font-size:16px;
  color:var(--ink);
  margin-bottom:6px;
}
.empty-state p{ font-size:13px; max-width:280px; line-height:1.5; }

/* ===== TOAST ===== */
.toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(10px);
  background:var(--ink);
  color:var(--paper);
  padding:11px 18px;
  border-radius:var(--radius-md);
  font-size:13px;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:var(--shadow-lg);
  z-index:200;
  opacity:0;
  pointer-events:none;
  transition:all .22s;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .ico{ color:var(--archive-green); display:flex; }
.toast.toast-error .ico{ color:var(--danger); }

/* ===== SETTINGS PANEL ===== */
.settings-body{ padding:8px 20px 24px; }
.settings-section{
  padding:16px 0;
  border-bottom:1px solid var(--rule);
}
.settings-section:last-child{ border-bottom:none; }
.settings-heading{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:12px;
  font-weight:600;
}
.settings-desc{
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.5;
  margin-bottom:12px;
}
.theme-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.accent-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}
.theme-option, .accent-option{
  border:1.5px solid var(--rule);
  border-radius:var(--radius-md);
  padding:10px 8px;
  background:var(--paper);
  cursor:pointer;
  text-align:center;
  transition:border-color .15s, box-shadow .15s;
}
.theme-option:hover, .accent-option:hover{ border-color:var(--rule-strong); }
.theme-option.active, .accent-option.active{
  border-color:var(--ledger);
  box-shadow:0 0 0 3px var(--ledger-tint);
}
.theme-swatch{
  width:100%;
  height:28px;
  border-radius:6px;
  margin-bottom:6px;
  border:1px solid var(--rule);
}
.theme-option span, .accent-option span{
  font-size:11px;
  font-weight:600;
  color:var(--ink-soft);
}
.accent-dot{
  width:22px; height:22px;
  border-radius:50%;
  margin:0 auto 6px;
  border:2px solid var(--card);
  box-shadow:0 0 0 1px var(--rule);
}
.settings-stat{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0;
  font-size:13px;
}
.settings-stat .label{ color:var(--ink-soft); }
.settings-stat .value{ font-weight:600; color:var(--ink); }
.settings-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}
.settings-actions .btn{ justify-content:center; width:100%; }
.info-note{
  border:1px solid var(--rule);
  background:var(--paper-dim);
  color:var(--ink-soft);
  border-radius:var(--radius-md);
  padding:12px;
  font-size:12.5px;
  line-height:1.55;
}
.settings-bg-preview{
  margin-top:10px;
  border:1px dashed var(--rule-strong);
  border-radius:var(--radius-md);
  min-height:78px;
  background:var(--paper);
  color:var(--ink-faint);
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8px;
  overflow:hidden;
}
.settings-bg-preview.has-image{
  border-style:solid;
  border-color:var(--rule);
  min-height:92px;
}
.settings-bg-preview img{
  width:100%;
  max-height:180px;
  object-fit:cover;
  border-radius:8px;
  display:block;
}
.access-auth-card{
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  background:var(--paper-dim);
  padding:12px;
}
.access-auth-title{
  font-family:'Space Grotesk', sans-serif;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
}
.access-auth-desc{
  margin:2px 0 8px;
  font-size:12px;
  color:var(--ink-soft);
}
.access-auth-copy{
  margin:0 0 10px;
  font-size:12px;
  color:var(--ink-soft);
  line-height:1.5;
}
.access-slots-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid var(--rule);
  border-radius:var(--radius-sm);
  background:var(--paper);
  padding:8px 10px;
  margin-bottom:10px;
}
.access-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--ink-faint);
}
.access-slots-value{
  font-size:13px;
  color:var(--ink);
}
.access-step{
  display:grid;
  grid-template-columns:30px 1fr;
  gap:10px;
  padding:10px 0;
  border-top:1px dashed var(--rule);
}
.access-step:first-of-type{ border-top:none; }
.access-step-number{
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid var(--rule);
  background:var(--paper);
  color:var(--ink-soft);
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.access-step-content strong{
  display:block;
  font-size:13px;
  color:var(--ink);
  margin-bottom:4px;
}
.access-step-content p{
  margin:0 0 8px;
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.5;
}

/* ===== MOBILE SEARCH BAR ===== */
.mobile-search-bar{
  display:none;
  position:fixed;
  top:60px;
  left:0; right:0;
  padding:10px 12px;
  background:var(--card);
  border-bottom:1px solid var(--rule);
  z-index:65;
  box-shadow:var(--shadow-sm);
  align-items:center;
  gap:8px;
}
.mobile-search-bar.show{ display:flex; }
.mobile-search-bar input{
  width:100%;
  flex:1;
  height:40px;
  background:var(--paper-dim);
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  padding:0 14px;
  font-size:16px;
  font-family:'Inter', sans-serif;
  color:var(--ink);
}
.mobile-search-close{
  width:40px;
  height:40px;
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  background:var(--paper-dim);
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}
.mobile-search-close:hover{ background:var(--paper); color:var(--ink); }
.mobile-search-bar input:focus{
  outline:none;
  border-color:var(--ledger);
  box-shadow:0 0 0 3px var(--ledger-tint);
}

/* ===== MOBILE NAV ===== */
.mobile-tabbar{ display:none; }
.mobile-menu-btn{ display:none; }

/* ===== COLOR THEMES ===== */
[data-theme="midnight"]{
  --paper:#1A1D24;
  --brand-x-color: #5B9FD4;
  --paper-dim:#14171C;
  --ink:#E8EAED;
  --ink-soft:#A8ADB8;
  --ink-faint:#6E7380;
  --rule:#2E333D;
  --rule-strong:#3D4450;
  --card:#22262E;
  --stack:#2A2F38;
  --ledger-tint:rgba(61,90,128,0.22);
  --stone-tint:rgba(156,142,114,0.15);
  --archive-tint:rgba(46,125,91,0.18);
  --danger-tint:rgba(162,62,62,0.18);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:0 4px 16px rgba(0,0,0,0.28);
  --shadow-lg:0 16px 40px rgba(0,0,0,0.4);
}
[data-theme="sepia"]{
  --paper:#F5F0E6;
  --paper-dim:#EBE4D6;
  --ink:#2C2619;
  --ink-soft:#5C5345;
  --ink-faint:#8A8070;
  --rule:#D4C9B5;
  --rule-strong:#C0B39C;
  --card:#FDFAF4;
  --stack:#E8DFD0;
  --ledger:#6B5344;
  --ledger-deep:#523F33;
  --ledger-tint:#EDE4DB;
}
[data-accent="forest"]{
  --ledger:#2E7D5B;
  --ledger-deep:#236348;
  --ledger-tint:#E7F1EC;
}
[data-accent="violet"]{
  --ledger:#6B5B95;
  --ledger-deep:#554878;
  --ledger-tint:#EDE9F3;
}
[data-accent="rust"]{
  --ledger:#A2683D;
  --ledger-deep:#854F2E;
  --ledger-tint:#F1E8DF;
}

@media (max-width: 1100px){
  .topbar-actions .btn:not(.btn-primary):not(.btn-icon) span{ display:none; }
  .topbar-actions .btn:not(.btn-primary):not(.btn-icon){
    width:38px;
    padding:0;
    justify-content:center;
  }
  .privacy-pill > span:not(.dot){ display:none; }
  .privacy-pill{
    width:26px;
    min-width:26px;
    height:26px;
    padding:0;
    gap:0;
    border-radius:999px;
    justify-content:center;
  }
  .privacy-pill .dot{
    width:10px;
    height:10px;
    box-shadow:0 0 0 3px rgba(46,125,91,0.22);
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px){
  :root{
    --mobile-topbar-height:60px;
    --mobile-tabbar-height:64px;
    --mobile-safe-top:constant(safe-area-inset-top);
    --mobile-safe-top:env(safe-area-inset-top, 0px);
    --mobile-tabbar-safe:constant(safe-area-inset-bottom);
    --mobile-tabbar-safe:env(safe-area-inset-bottom, 0px);
    --mobile-topbar-total:calc(var(--mobile-topbar-height) + var(--mobile-safe-top));
    --mobile-tabbar-total:calc(var(--mobile-tabbar-height) + var(--mobile-tabbar-safe));
  }
  html, body{
    width:100%;
    max-width:100%;
    height:100%;
    height:-webkit-fill-available;
    overflow:hidden;
    overscroll-behavior:none;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  body{
    min-height:var(--app-height, 100vh);
    min-height:var(--app-height, 100dvh);
  }
  .app{
    position:fixed;
    inset:0;
    grid-template-columns:1fr;
    grid-template-rows:var(--mobile-topbar-total) minmax(0, 1fr);
    width:100%;
    max-width:100%;
    height:var(--app-height, 100vh);
    height:var(--app-height, 100dvh);
    min-height:0;
    overflow:hidden;
  }
  .sidebar{
    position:fixed;
    left:0;
    top:var(--mobile-topbar-total);
    bottom:var(--mobile-tabbar-total);
    width:240px;
    transform:translateX(-100%);
    transition:transform .22s;
    z-index:70;
    box-shadow:var(--shadow-lg);
    -webkit-overflow-scrolling:touch;
  }
  .sidebar.show{ transform:translateX(0); }
  .mobile-menu-btn{ display:flex; }
  .searchbar{ display:none; }
  #newPromptTopBtn,
  #settingsBtn,
  #manualBtn{ display:none; }
  .privacy-pill > span:not(.dot){ display:none; }
  .privacy-pill{
    width:26px;
    min-width:26px;
    height:26px;
    padding:0;
    gap:0;
    border-radius:999px;
    justify-content:center;
  }
  .privacy-pill .dot{
    width:10px;
    height:10px;
    box-shadow:0 0 0 3px rgba(46,125,91,0.22);
  }
  .topbar-actions .btn:not(.btn-icon) span{ display:none; }
  .topbar-actions .btn:not(.btn-icon){
    width:34px;
    min-width:34px;
    padding:0;
    justify-content:center;
  }
  .topbar{
    display:flex;
    align-items:center;
    gap:6px;
    padding:var(--mobile-safe-top) 10px 0;
    min-height:var(--mobile-topbar-total);
    width:100%;
    max-width:100%;
    overflow:hidden;
  }
  .mobile-menu-btn{
    width:34px;
    min-width:34px;
    height:34px;
    padding:0;
    flex:0 0 34px;
  }
  .brand{
    flex:1 1 auto;
    min-width:0;
    flex-shrink:1;
    overflow:hidden;
    gap:8px;
  }
  .brand-mark{
    width:28px;
    height:28px;
    flex:0 0 28px;
  }
  .brand-name{
    display:block;
    flex:1 1 auto;
    min-width:0;
    font-size:14px;
    max-width:none;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .brand-name .brand-x{
    font-size:1.55em;
  }
  .brand-name .brand-pages{
    margin-left:0.14em;
  }
  .topbar-actions{
    gap:4px;
    margin-left:0;
    flex:0 0 auto;
    max-width:none;
    overflow:visible;
  }
  .topbar-actions .btn{
    height:34px;
    flex:0 0 auto;
  }
  .topbar-actions .btn-icon{
    width:34px;
    min-width:34px;
  }
  .main{
    padding:14px 12px calc(20px + var(--mobile-tabbar-total));
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    min-height:0;
    width:100%;
    max-width:100%;
  }
  .mobile-search-bar{
    top:var(--mobile-topbar-total);
  }
  .main-title{ font-size:19px; }
  .main-sub{
    line-height:1.4;
    overflow-wrap:anywhere;
  }
  .pcard-title,
  .pcard-desc,
  .drawer-title,
  .drawer-desc,
  .settings-desc,
  .info-note{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .card-grid{ grid-template-columns:1fr; }
  .drawer, .settings-drawer, .drawer-view{
    width:100%;
    max-height:var(--app-height, 100dvh);
    max-height:var(--app-height, 100vh);
  }
  .prompt-view-box pre{ max-height:36vh; }
  .drawer-actions-secondary{
    grid-template-columns:38px 1fr 1fr;
  }
  .drawer-actions-secondary #drawerEdit{
    grid-column:2 / -1;
  }
  .drawer-actions .btn-sm span{ display:none; }
  .drawer-actions .btn-sm{ justify-content:center; padding:0; }
  .mobile-tabbar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    border-top:1px solid var(--rule);
    background:var(--card);
    align-items:center;
    justify-content:space-around;
    z-index:90;
    padding-bottom:var(--mobile-tabbar-safe);
    height:var(--mobile-tabbar-total);
    min-height:var(--mobile-tabbar-total);
    box-shadow:0 -4px 16px rgba(28,31,38,0.08);
    width:100%;
    max-width:100%;
    overflow:hidden;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .mtab{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    color:var(--ink-faint);
    font-size:10px; font-weight:600;
    background:none; border:none; cursor:pointer;
    min-height:48px;
    min-width:0;
    flex:1;
    padding:6px 4px;
    border-radius:10px;
    line-height:1.15;
    touch-action:manipulation;
  }
  .mtab svg{ flex-shrink:0; }
  .mtab.active{ color:var(--ledger); }
  .filter-toolbar{ flex-direction:column; align-items:stretch; }
  .accent-grid{ grid-template-columns:repeat(2, 1fr); }
  .sort-select-wrap{
    display:block;
    width:100%;
    margin-left:0;
  }
  .sort-select-wrap select.sort-select,
  .custom-select.sort-select-wrap .custom-select-trigger{
    width:100%;
    min-width:0;
  }
  .select-wrap select,
  .custom-select-trigger{
    min-height:44px;
    font-size:16px;
  }
  .form-field .select-wrap select,
  .form-field .custom-select-trigger,
  .sort-select-wrap select.sort-select,
  .custom-select.sort-select-wrap .custom-select-trigger{
    font-size:16px;
  }
  .custom-select-option{
    min-height:44px;
    font-size:16px;
    padding:11px 12px;
  }
  .site-footer{
    padding:18px 14px 14px;
    border-radius:16px;
    margin-top:22px;
  }
  .footer-top{
    flex-direction:column;
    gap:24px;
    align-items:stretch;
  }
  .footer-brand{
    max-width:none;
    margin-left:0;
    margin-top:2px;
  }
  .footer-signature{ font-size:30px; }
  .footer-slogan{
    font-size:12px;
    font-weight:600;
  }
  .footer-brand .footer-slogan{ margin-left:0; }
  .footer-aside{
    align-items:flex-start;
    width:100%;
    margin-right:0;
    min-width:0;
  }
  .footer-tools{ margin-left:0; }
  .footer-connect{ margin-left:0; }
  .footer-section{ align-items:flex-start; }
  .footer-title{ text-align:left; }
  .writtenx-logo{ font-size:18px; }
  .tabstackx-link{
    min-width:220px;
    border-radius:11px;
  }
  .tabstackx-logo{ font-size:18px; }
  .tabstackx-sub{ font-size:10px; }
  .modal-host{ padding:12px; align-items:flex-end; }
  .modal{
    max-height:calc(var(--app-height, 100vh) * 0.92);
    max-height:calc(var(--app-height, 100dvh) * 0.92);
    border-radius:16px 16px 0 0;
  }
  .settings-body{ padding-bottom:calc(24px + var(--mobile-tabbar-safe)); }
  .manual-grid{
    grid-template-columns:1fr;
  }
  .manual-intro{
    font-size:12.5px;
    padding:11px 12px;
  }
  .manual-card{
    padding:11px;
  }
  .manual-card h4{
    font-size:13.5px;
  }
  .manual-card li{
    font-size:12px;
  }
}

@media (max-width: 480px){
  .topbar{ gap:5px; padding:var(--mobile-safe-top) 8px 0; }
  .brand-mark{ display:none; }
  .brand-name{ font-size:13.5px; }
  .topbar-actions{ gap:3px; }
  .topbar-actions .btn:not(.btn-icon),
  .topbar-actions .btn-icon{
    width:32px;
    min-width:32px;
    height:32px;
  }
  .privacy-pill{
    width:24px;
    min-width:24px;
    height:24px;
  }
  .privacy-pill .dot{
    width:9px;
    height:9px;
  }
  .main{ padding:12px 10px calc(18px + var(--mobile-tabbar-total)); }
  .main-title{ font-size:18px; }
  .main-sub{ font-size:12.5px; }
  .filter-row{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .filter-row{
    scrollbar-width:thin;
    scroll-snap-type:x proximity;
  }
  .chip{ scroll-snap-align:start; }
  .drawer-grid{ grid-template-columns:1fr; }
  .drawer-stat-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .modal-actions{ flex-direction:column-reverse; }
  .modal-actions .btn{ justify-content:center; }
}

/* Focus visibility */
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .pcard:focus-visible, .nav-item:focus-visible, .toggle-switch input:focus-visible + .toggle-slider{
  outline:2px solid var(--ledger);
  outline-offset:2px;
}

/* Scrollbar */
.main::-webkit-scrollbar, .sidebar::-webkit-scrollbar, .drawer-body::-webkit-scrollbar, .settings-body::-webkit-scrollbar{ width:8px; }
.main::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb, .drawer-body::-webkit-scrollbar-thumb, .settings-body::-webkit-scrollbar-thumb{
  background:var(--rule-strong); border-radius:4px;
}
.main::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track, .drawer-body::-webkit-scrollbar-track, .settings-body::-webkit-scrollbar-track{ background:transparent; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}