:root {
  --ink: #171912;
  --paper: #f5f3ed;
  --panel: #fffef9;
  --line: #d8d6cd;
  --lime: #caff36;
  --blue: #5267ff;
  --coral: #ff6c45;
  --muted: #74766d;
}

* { box-sizing: border-box; }
html { background: #deddd6; }
body {
  margin: 0;
  background:
    linear-gradient(90deg, rgba(23,25,18,.035) 1px, transparent 1px),
    linear-gradient(rgba(23,25,18,.035) 1px, transparent 1px),
    #e9e7e0;
  background-size: 26px 26px;
  color: var(--ink);
  font-family: "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { color: inherit; }

.stage { min-height: 100svh; padding: 18px 0 44px; }
.phone-shell {
  position: relative;
  width: min(100%, 440px);
  min-height: calc(100svh - 62px);
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid #cccbc4;
  box-shadow: 0 22px 70px rgba(35, 36, 29, .16);
}
.prototype-note {
  margin: 12px auto 0;
  text-align: center;
  font: 700 9px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .15em;
  color: #77786f;
}

.app-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 25px 22px 16px;
  background: var(--paper);
}
.eyebrow {
  margin: 0 0 4px;
  font: 800 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .16em;
  color: var(--muted);
}
.app-header h1 { margin: 0; font-size: 30px; line-height: 1; letter-spacing: -.06em; }
.round-button {
  width: 42px; height: 42px; border: 1.5px solid var(--ink); border-radius: 50%;
  background: var(--lime); cursor: pointer; font-size: 32px; line-height: 0;
}
.round-button span { position: relative; top: -7px; }
.screen {
  min-height: calc(100svh - 164px);
  padding: 0 0 108px;
  animation: enter .24s ease-out;
}
@keyframes enter { from { opacity: 0; transform: translateY(4px); } }

.search-box {
  display: flex; align-items: center; gap: 10px; margin: 2px 18px 10px; padding: 0 12px;
  height: 50px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--panel);
  box-shadow: 3px 3px 0 var(--ink);
}
.search-box > span { font-size: 24px; transform: rotate(-15deg); }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 14px; }
.search-box kbd { padding: 5px 7px; border-radius: 6px; background: #e8e6df; font-size: 10px; white-space: nowrap; }
.filter-row { display: flex; gap: 7px; padding: 4px 18px 17px; overflow-x: auto; scrollbar-width: none; }
.filter-row::-webkit-scrollbar, .horizontal-rail::-webkit-scrollbar { display: none; }
.filter-row button {
  flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; font-size: 12px; font-weight: 700; cursor: pointer;
}
.filter-row button.active { border-color: var(--ink); background: var(--ink); color: white; }

.rail-section { margin-top: 17px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 18px 10px; }
.section-heading h2 { margin: 0; font-size: 20px; line-height: 1.1; letter-spacing: -.04em; }
.section-heading > button { padding: 3px 0; border: 0; border-bottom: 1px solid; background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.horizontal-rail { display: flex; gap: 11px; padding: 0 18px 6px; overflow-x: auto; scroll-padding-inline: 18px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.horizontal-rail::after { flex: 0 0 7px; content: ""; }
.data-card, .policy-card { flex: 0 0 82%; min-height: 246px; scroll-snap-align: start; border: 1.5px solid var(--ink); border-radius: 18px; overflow: hidden; }
.data-card { background: var(--panel); box-shadow: 4px 4px 0 var(--ink); }
.card-art { position: relative; height: 93px; overflow: hidden; border-bottom: 1.5px solid var(--ink); background: var(--lime); }
.data-card.blue .card-art { background: var(--blue); }
.data-card.coral .card-art { background: var(--coral); }
.card-art span { position: absolute; border: 1.5px solid var(--ink); background: rgba(255,255,255,.65); transform: rotate(-10deg); }
.card-art span:nth-child(1) { width: 124px; height: 46px; left: -12px; top: 25px; }
.card-art span:nth-child(2) { width: 95px; height: 95px; right: 37px; top: -42px; border-radius: 50%; background: transparent; }
.card-art span:nth-child(3) { width: 84px; height: 34px; right: -13px; bottom: 9px; transform: rotate(18deg); }
.data-card-body { padding: 14px 15px 15px; }
.status-label, .policy-card > span, .principle-card > span, .profile-copy > span {
  font: 800 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .13em; color: var(--muted);
}
.data-card h3 { margin: 7px 0 5px; font-size: 17px; letter-spacing: -.03em; }
.data-card p { margin: 0; min-height: 38px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.data-card button { display: flex; justify-content: space-between; width: 100%; margin-top: 12px; padding: 9px 11px; border: 1px solid var(--ink); border-radius: 9px; background: var(--ink); color: white; font-size: 12px; font-weight: 800; cursor: pointer; }
.policy-card { display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; background: #ebe9e2; }
.policy-card strong { margin: 8px 0; font-size: 20px; line-height: 1.35; letter-spacing: -.04em; }
.policy-card p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }

.segmented-control { display: grid; grid-template-columns: 1fr 1fr; margin: 4px 18px 18px; padding: 4px; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--panel); }
.segmented-control button { padding: 9px; border: 0; border-radius: 8px; background: transparent; font-size: 13px; font-weight: 800; cursor: pointer; }
.segmented-control .active { background: var(--ink); color: white; }
.date-hero { margin: 0 18px 22px; padding: 21px; border: 1.5px solid var(--ink); border-radius: 18px; background: var(--lime); box-shadow: 4px 4px 0 var(--ink); }
.date-hero h2 { max-width: 290px; margin: 10px 0 8px; font-size: 27px; line-height: 1.16; letter-spacing: -.06em; }
.date-hero > p:last-child { margin: 0; font-size: 12px; line-height: 1.65; }
.timeline-section { padding-top: 5px; }
.empty-timeline { position: relative; display: flex; align-items: center; gap: 15px; min-height: 100px; margin: 0 18px; padding: 18px 10px 18px 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.timeline-line { position: absolute; left: 12px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.empty-dot { position: absolute; left: 7px; top: 41px; width: 11px; height: 11px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); }
.empty-timeline strong { font-size: 14px; }
.empty-timeline p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.primary-action { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 36px); margin: 24px 18px 0; padding: 15px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--ink); color: white; box-shadow: 4px 4px 0 var(--lime); font-weight: 800; cursor: pointer; }
.primary-action span { font-size: 20px; line-height: 1; }
.primary-action.compact { margin-top: 15px; background: var(--lime); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }

.attention-card { display: flex; align-items: center; justify-content: space-between; margin: 4px 18px 0; padding: 20px; border: 1.5px solid var(--ink); border-radius: 18px; background: var(--panel); }
.attention-card h2 { margin: 6px 0; font-size: 24px; letter-spacing: -.04em; }
.attention-card h2 span { font-weight: 400; }
.attention-card p:last-child { max-width: 225px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.attention-orb { display: grid; place-items: center; width: 68px; height: 68px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--coral); font: 800 24px/1 ui-monospace, monospace; }
.people-section { margin-top: 30px; }
.list-empty { display: flex; align-items: center; gap: 12px; width: calc(100% - 36px); margin: 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); text-align: left; cursor: pointer; }
.list-empty-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 50%; background: #e5e3dc; font-size: 22px; }
.list-empty > span:nth-child(2) { flex: 1; }
.list-empty strong, .list-empty small { display: block; }
.list-empty strong { font-size: 13px; }
.list-empty small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.principle-card { margin: 18px; padding: 18px; border: 1px dashed #999a91; border-radius: 14px; }
.principle-card strong { display: block; margin: 7px 0; font-size: 15px; }
.principle-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }

.profile-card { display: flex; gap: 15px; margin: 4px 18px 15px; padding: 17px; border: 1.5px solid var(--ink); border-radius: 18px; background: var(--lime); box-shadow: 4px 4px 0 var(--ink); }
.avatar { display: grid; place-items: center; flex: 0 0 72px; height: 72px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--panel); font: 700 27px/1 ui-monospace, monospace; }
.profile-copy { align-self: center; }
.profile-copy h2 { margin: 5px 0 7px; font-size: 18px; }
.profile-copy button { padding: 0; border: 0; border-bottom: 1px solid; background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.favorite-card { display: flex; align-items: center; justify-content: space-between; margin: 20px 18px 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.favorite-card h2 { margin: 4px 0; font-size: 17px; }
.favorite-card p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.favorite-card button { width: 42px; height: 42px; border: 1.5px solid var(--ink); border-radius: 50%; background: transparent; font-size: 23px; cursor: pointer; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 18px 18px; }
.stats-grid button { padding: 12px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-align: left; cursor: pointer; }
.stats-grid span, .stats-grid small { display: block; color: var(--muted); font-size: 9px; }
.stats-grid strong { display: block; margin: 7px 0 3px; font: 800 25px/1 ui-monospace, monospace; }
.my-links { margin: 0 18px; border-top: 1px solid var(--line); }
.my-links button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 8px 3px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.my-link-icon { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); }
.my-links strong { flex: 1; font-size: 13px; }
.my-links small { color: var(--muted); font-size: 10px; }

.bottom-nav {
  position: absolute; z-index: 20; left: 12px; right: 12px; bottom: 12px; display: grid;
  grid-template-columns: repeat(5, 1fr); padding: 7px; border: 1.5px solid var(--ink); border-radius: 19px;
  background: rgba(255, 254, 249, .94); box-shadow: 0 8px 25px rgba(23,25,18,.18); backdrop-filter: blur(15px);
}
.bottom-nav button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 3px; border: 0; border-radius: 12px; background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }
.bottom-nav button.active { background: var(--ink); color: white; }
.nav-icon { font-size: 21px; line-height: 1; }
.bottom-nav button.active .nav-icon { color: var(--lime); }

.sheet-backdrop { position: absolute; z-index: 50; inset: 0; display: flex; align-items: flex-end; background: rgba(23,25,18,.45); backdrop-filter: blur(2px); }
.action-sheet { width: 100%; padding: 8px 16px 23px; border-top: 1.5px solid var(--ink); border-radius: 24px 24px 0 0; background: var(--paper); animation: sheet-up .25s ease-out; }
@keyframes sheet-up { from { transform: translateY(100%); } }
.sheet-handle { width: 46px; height: 4px; margin: 2px auto 16px; border-radius: 9px; background: #b1b0a8; }
.sheet-heading { display: flex; align-items: flex-start; justify-content: space-between; margin: 0 3px 13px; }
.sheet-heading h2 { margin: 2px 0 0; font-size: 23px; }
.sheet-heading button { width: 35px; height: 35px; border: 1px solid var(--ink); border-radius: 50%; background: transparent; font-size: 21px; cursor: pointer; }
.sheet-options { display: grid; gap: 8px; }
.sheet-options button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); text-align: left; cursor: pointer; }
.sheet-options button > span:nth-child(2) { flex: 1; }
.sheet-options strong, .sheet-options small { display: block; }
.sheet-options strong { font-size: 13px; }
.sheet-options small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.option-icon { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border: 1px solid var(--ink); border-radius: 10px; background: var(--lime); font-size: 19px; }
.toast { position: absolute; z-index: 80; left: 24px; right: 24px; bottom: 95px; padding: 12px 14px; border: 1px solid var(--ink); border-radius: 11px; background: var(--ink); color: white; box-shadow: 3px 3px 0 var(--lime); font-size: 11px; line-height: 1.4; text-align: center; animation: enter .2s ease-out; }
.view[hidden], .toast[hidden], .sheet-backdrop[hidden] { display: none; }

@media (max-width: 480px) {
  .stage { padding: 0; }
  .phone-shell { min-height: 100svh; border: 0; box-shadow: none; }
  .prototype-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; }
}

/* Interactive demo extension */
.demo-ribbon {
  padding: 7px 12px;
  background: var(--ink);
  color: white;
  text-align: center;
  font: 700 9px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .04em;
}
.demo-ribbon strong { margin-right: 5px; color: var(--lime); letter-spacing: .13em; }
.app-header { align-items: center; min-height: 82px; }
.header-copy { flex: 1; }
.back-button {
  flex: 0 0 38px; width: 38px; height: 38px; margin-right: 9px; border: 1.5px solid var(--ink);
  border-radius: 50%; background: var(--panel); font-size: 20px; font-weight: 800; cursor: pointer;
}
.notice-button {
  display: flex; align-items: center; gap: 5px; padding: 8px 9px 8px 11px; border: 1.5px solid var(--ink);
  border-radius: 999px; background: var(--panel); font-size: 10px; font-weight: 800; cursor: pointer;
}
.notice-button b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--coral); }
.screen { min-height: calc(100svh - 200px); }
.bottom-nav {
  position: fixed; left: 50%; right: auto; bottom: 12px; width: min(calc(100% - 24px), 416px);
  transform: translateX(-50%);
}
.demo-badge {
  display: inline-flex; padding: 5px 8px; border: 1px solid var(--ink); border-radius: 999px;
  background: var(--lime); font: 800 9px/1 ui-monospace, monospace; letter-spacing: .08em;
}
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.chips span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 9px; font-weight: 700; }

.demo-art { position: relative; height: 125px; overflow: hidden; border-bottom: 1.5px solid var(--ink); background: var(--lime); }
.demo-art.blue { background: var(--blue); color: white; }
.demo-art.coral { background: var(--coral); }
.demo-art > span { position: absolute; z-index: 2; left: 13px; top: 12px; padding: 5px 7px; border: 1px solid currentColor; background: var(--panel); color: var(--ink); font: 900 9px/1 ui-monospace, monospace; letter-spacing: .12em; }
.demo-art i { position: absolute; display: block; border: 1.5px solid var(--ink); background: rgba(255,255,255,.55); transform: rotate(-9deg); }
.demo-art i:nth-of-type(1) { width: 145px; height: 51px; left: -25px; bottom: 13px; }
.demo-art i:nth-of-type(2) { width: 107px; height: 107px; right: 35px; top: -53px; border-radius: 50%; background: transparent; }
.demo-art i:nth-of-type(3) { width: 94px; height: 38px; right: -15px; bottom: 18px; transform: rotate(17deg); }

.content-card {
  display: block; width: 100%; padding: 0; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 16px;
  background: var(--panel); box-shadow: 3px 3px 0 var(--ink); text-align: left; cursor: pointer;
}
.horizontal-rail .content-card { flex: 0 0 77%; scroll-snap-align: start; }
.card-content { display: block; padding: 13px 14px 14px; }
.card-content small, .card-content strong, .card-content > span, .card-content em { display: block; }
.card-content small { color: var(--muted); font: 800 9px/1.3 ui-monospace, monospace; }
.card-content strong { margin: 7px 0 6px; font-size: 16px; line-height: 1.35; letter-spacing: -.025em; }
.card-content > span { color: var(--muted); font-size: 10px; }
.card-content em { width: max-content; margin-top: 9px; padding: 4px 6px; border-radius: 4px; background: #e8e6de; font-size: 9px; font-style: normal; font-weight: 800; }
.good-card .demo-art { height: 105px; }
.stack-list { display: grid; gap: 13px; padding: 0 18px 20px; }
.stack-list .content-card { display: grid; grid-template-columns: 112px 1fr; box-shadow: none; }
.stack-list .content-card .demo-art { height: 100%; min-height: 136px; border-right: 1.5px solid var(--ink); border-bottom: 0; }
.stack-list .content-card .demo-art i:nth-of-type(1) { width: 90px; }
.list-filters { padding-top: 3px; }

.activity-card {
  display: flex; align-items: center; gap: 12px; flex: 0 0 86%; min-height: 102px; padding: 15px;
  border: 1.5px solid var(--ink); border-radius: 15px; background: var(--panel); text-align: left; scroll-snap-align: start; cursor: pointer;
}
.activity-card > span:nth-child(2) { flex: 1; }
.activity-card small, .activity-card strong, .activity-card em { display: block; }
.activity-card small { color: var(--muted); font-size: 9px; }
.activity-card strong { margin: 5px 0; font-size: 13px; }
.activity-card em { color: var(--muted); font-size: 9px; font-style: normal; }
.demo-avatar {
  display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1.5px solid var(--ink);
  border-radius: 50%; background: var(--panel); font-size: 13px; font-style: normal; font-weight: 900;
}
.demo-avatar.lime { background: var(--lime); }.demo-avatar.blue { background: var(--blue); color: white; }.demo-avatar.coral { background: var(--coral); }

.detail-page { padding-bottom: 15px; }
.detail-page > .demo-art { height: 210px; border-top: 1.5px solid var(--ink); }
.detail-title { padding: 18px 19px 13px; }
.detail-title > p { margin: 10px 0 4px; color: var(--muted); font: 800 10px/1.3 ui-monospace, monospace; }
.detail-title h2 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.055em; }
.facts { margin: 0 18px; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 65px 1fr; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: 10px; font-weight: 800; }
.facts dd { margin: 0; font-size: 12px; font-weight: 700; }
.save-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 18px; }
.save-actions button { padding: 10px 6px; border: 1px solid var(--ink); border-radius: 10px; background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.save-actions button.selected { background: var(--ink); color: white; }
.detail-section { margin: 22px 18px 0; padding: 17px; border: 1px dashed #999a91; border-radius: 13px; }
.detail-section h3 { margin: 5px 0 8px; font-size: 17px; }
.detail-section p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.text-link { margin-top: 10px; padding: 0 0 3px; border: 0; border-bottom: 1px solid; background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.secondary-action { display: block; width: calc(100% - 36px); margin: 11px 18px 0; padding: 13px; border: 1.5px solid var(--ink); border-radius: 13px; background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; }

.plan-card {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 36px); margin: 0 18px 13px; padding: 14px;
  border: 1.5px solid var(--ink); border-radius: 15px; background: var(--panel); box-shadow: 3px 3px 0 var(--ink); text-align: left; cursor: pointer;
}
.plan-card > span:nth-child(2) { flex: 1; }.plan-card > span:nth-child(2) > * { display: block; }
.plan-card strong { margin: 4px 0 6px; font-size: 14px; }.plan-card small, .plan-card em { color: var(--muted); font-size: 9px; font-style: normal; line-height: 1.45; }
.plan-card.muted { box-shadow: none; opacity: .67; }
.plan-date { display: grid; place-items: center; flex: 0 0 57px; height: 65px; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--lime); }
.plan-date b { font: 900 25px/1 ui-monospace, monospace; }.plan-date small { color: var(--ink); font: 800 9px/1 ui-monospace, monospace; }
.segmented-control button b { margin-left: 4px; padding: 2px 5px; border-radius: 999px; background: var(--coral); color: var(--ink); font-size: 9px; }
.task-list { display: grid; gap: 9px; margin: 0 18px; }
.task-list button { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-align: left; cursor: pointer; }
.task-list button > span:nth-child(2) { flex: 1; }.task-list strong, .task-list small { display: block; }.task-list strong { font-size: 12px; }.task-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.task-list .done { opacity: .55; }.task-state { display: grid; place-items: center; flex: 0 0 35px; height: 35px; border: 1px solid var(--ink); border-radius: 50%; font-weight: 900; }.task-state.urgent { background: var(--coral); }

.plan-hero { margin: 0 18px 15px; padding: 20px; border: 1.5px solid var(--ink); border-radius: 18px; background: var(--lime); box-shadow: 4px 4px 0 var(--ink); }
.plan-hero h2 { margin: 7px 0 16px; font-size: 25px; line-height: 1.2; letter-spacing: -.05em; }
.member-row { display: flex; align-items: center; }
.member-row .demo-avatar { margin-right: -7px; }.member-row button { display: grid; place-items: center; width: 42px; height: 42px; margin-left: 8px; border: 1.5px dashed var(--ink); border-radius: 50%; background: var(--panel); cursor: pointer; }
.plan-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 0 18px 24px; }
.plan-status div { padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }.plan-status span, .plan-status strong { display: block; }.plan-status span { color: var(--muted); font-size: 9px; }.plan-status strong { margin-top: 5px; font: 800 21px/1 ui-monospace, monospace; }
.day-timeline { position: relative; margin: 0 18px; padding-left: 13px; border-left: 1px solid var(--ink); }
.day-timeline button { position: relative; display: grid; grid-template-columns: 50px 1fr 12px; gap: 8px; width: 100%; margin-bottom: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); text-align: left; cursor: pointer; }
.day-timeline button::before { position: absolute; left: -19px; top: 19px; width: 9px; height: 9px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); content: ""; }
.day-timeline time { font: 800 12px/1.4 ui-monospace, monospace; }.day-timeline strong, .day-timeline small, .day-timeline em { display: block; }.day-timeline strong { font-size: 12px; }.day-timeline small { margin-top: 3px; color: var(--muted); font-size: 9px; }.day-timeline em { width: max-content; margin-top: 6px; padding: 3px 5px; border-radius: 3px; background: #ebe9e2; font-size: 8px; font-style: normal; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px; }.action-grid button { padding: 12px 5px; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--lime); font-size: 10px; font-weight: 800; cursor: pointer; }

.form-page { padding: 3px 18px 25px; }.form-page > h2 { margin: 8px 0 20px; font-size: 27px; letter-spacing: -.05em; }
.stepper { display: flex; align-items: center; margin: 0 0 19px; }.stepper b, .stepper i { display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--ink); border-radius: 50%; font-size: 11px; font-style: normal; }.stepper b { background: var(--lime); }.stepper i { color: var(--muted); }.stepper span { flex: 1; height: 1px; background: var(--ink); }
.choice-list { display: grid; gap: 9px; }.choice-list button { display: grid; grid-template-columns: 42px 1fr 12px; align-items: center; gap: 10px; padding: 12px; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--panel); text-align: left; cursor: pointer; }.choice-list button > span { grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--ink); border-radius: 10px; background: var(--lime); font-size: 18px; }.choice-list button > strong { align-self: end; font-size: 12px; }.choice-list button > small { align-self: start; color: var(--muted); font-size: 9px; }.choice-list button > b { grid-column: 3; grid-row: 1 / span 2; }

.inbox-list { display: grid; gap: 9px; margin: 14px 18px 28px; }.inbox-list button, .person-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-align: left; cursor: pointer; }.inbox-list button > span:nth-child(2), .person-row > span:nth-child(2) { flex: 1; }.inbox-list small, .inbox-list strong, .inbox-list em, .person-row small, .person-row strong { display: block; }.inbox-list small, .person-row small { color: var(--muted); font-size: 9px; }.inbox-list strong, .person-row strong { margin: 4px 0; font-size: 11px; }.inbox-list em { color: var(--coral); font-size: 9px; font-style: normal; font-weight: 800; }
.group-card { display: flex; align-items: center; gap: 12px; width: calc(100% - 36px); margin: 0 18px 9px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-align: left; cursor: pointer; }.group-card > span:nth-child(2) { flex: 1; }.group-card strong, .group-card small { display: block; }.group-card strong { font-size: 12px; }.group-card small { margin-top: 3px; color: var(--muted); font-size: 9px; }.group-card > b { padding: 6px 8px; border-radius: 7px; background: var(--lime); font-size: 9px; }
.avatar-stack { display: flex; width: 66px; }.avatar-stack i { display: grid; place-items: center; width: 31px; height: 31px; margin-right: -9px; border: 1px solid var(--ink); border-radius: 50%; background: var(--lime); font-size: 9px; font-style: normal; font-weight: 800; }.avatar-stack i:nth-child(2) { background: var(--blue); color: white; }.avatar-stack i:nth-child(3) { background: var(--coral); }

.profile-copy p { margin: 0 0 5px; font-size: 10px; }.list-title-note { padding: 2px 18px 18px; }.list-title-note h2 { margin: 5px 0; font-size: 25px; }.list-title-note > p:last-child { margin: 0; color: var(--muted); font-size: 10px; }
.field { margin: 18px 0; }.field > label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }.result-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.result-toggle button { padding: 13px; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--panel); font-weight: 800; cursor: pointer; }.result-toggle button.active { background: var(--lime); box-shadow: 3px 3px 0 var(--ink); }
.input-like { display: flex; justify-content: space-between; width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); text-align: left; }.input-like span { text-decoration: underline; }.time-input { display: flex; align-items: center; gap: 8px; }.time-input b { padding: 11px 15px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--panel); font: 800 23px/1 ui-monospace, monospace; }.check-row { display: flex; align-items: center; gap: 8px; margin: 22px 0 5px; font-size: 11px; }.check-row input { accent-color: var(--ink); }
.settings-list { display: grid; gap: 13px; padding: 0 18px 20px; }.settings-list section { padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }.settings-list h2 { margin: 5px 0 10px; font-size: 18px; }.settings-list label, .settings-list button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }.settings-list label:last-child, .settings-list button:last-child { border-bottom: 0; }.settings-list strong, .settings-list small { display: block; }.settings-list strong { font-size: 11px; }.settings-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }.settings-list input { width: 37px; height: 20px; accent-color: var(--ink); }

/* NAZOMATE review iteration */
.header-actions { display: flex; align-items: center; gap: 6px; }
.header-icon-button {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1.5px solid var(--ink);
  border-radius: 50%; background: var(--lime); cursor: pointer;
}
.ui-icon { display: inline-grid; place-items: center; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 800; font-style: normal; }
.header-icon-button .ui-icon { font-size: 21px; transform: rotate(-10deg); }
.screen { padding-bottom: 148px; }
.global-fab {
  position: fixed; z-index: 24; left: 50%; bottom: 88px; display: flex; align-items: center; gap: 7px;
  max-width: calc(100% - 42px); padding: 11px 16px 11px 11px; border: 1.5px solid var(--ink); border-radius: 999px;
  background: var(--lime); box-shadow: 3px 3px 0 var(--ink); transform: translateX(-50%); cursor: pointer;
}
.global-fab[hidden] { display: none; }
.global-fab .ui-icon { width: 25px; height: 25px; border: 1px solid var(--ink); border-radius: 50%; background: var(--panel); font-size: 17px; }
.global-fab strong { overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.search-page { padding-top: 2px; }
.search-history { padding-top: 10px; }
.search-history > h2, .search-history > .eyebrow { margin-left: 18px; margin-right: 18px; }
.search-history > h2 { margin-top: 4px; margin-bottom: 13px; font-size: 20px; }
.text-input { width: 100%; padding: 13px; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--panel); outline: 0; }
.text-input:focus { box-shadow: 3px 3px 0 var(--lime); }
.check-row.boxed { margin: 0 0 7px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.primary-action.flush { width: 100%; margin-right: 0; margin-left: 0; }
.form-note { margin: 12px 3px 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.record-summary { margin: 0 18px 16px; padding: 18px; border: 1.5px solid var(--ink); border-radius: 17px; background: var(--lime); box-shadow: 3px 3px 0 var(--ink); }
.record-summary > span { font: 800 9px/1 ui-monospace, monospace; letter-spacing: .12em; }
.record-summary strong { display: block; margin: 8px 0 4px; font: 900 34px/1 ui-monospace, monospace; }
.record-summary p { margin: 0; font-size: 10px; }
.record-list { display: grid; gap: 9px; padding: 0 18px 20px; }
.record-card { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-align: left; cursor: pointer; }
.record-card > span:nth-child(2) { flex: 1; min-width: 0; }
.record-card small, .record-card strong, .record-card em { display: block; }
.record-card small { color: var(--muted); font: 800 9px/1.2 ui-monospace, monospace; }
.record-card strong { margin: 4px 0; overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.record-card em { color: var(--muted); font-size: 9px; font-style: normal; }
.record-mark { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--panel); font-weight: 900; }
.record-mark.lime { background: var(--lime); }.record-mark.blue { background: var(--blue); color: white; }.record-mark.coral { background: var(--coral); }
.account-page { padding-bottom: 20px; }
.account-state { margin: 0 18px; padding: 22px 18px; border: 1.5px solid var(--ink); border-radius: 18px; background: var(--panel); text-align: center; }
.account-orb { width: 64px; height: 64px; margin: 0 auto 14px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--lime); font-size: 28px; }
.account-state h2 { margin: 6px 0 9px; font-size: 21px; }
.account-state > p:last-child { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.principle-card.warning { border-style: solid; border-color: var(--coral); background: #fff6f2; }

@media (max-width: 480px) {
  .bottom-nav { bottom: max(9px, env(safe-area-inset-bottom)); }
  .global-fab { bottom: calc(max(9px, env(safe-area-inset-bottom)) + 76px); }
  .demo-ribbon { padding-top: max(7px, env(safe-area-inset-top)); }
}