/* TRONOLOGIYA × RITUAL — pop editorial / PEACH MODE visual language */
:root {
  --ink: #1c1820;
  --muted: #635d69;
  --paper: #fbf8f0;
  --pink: #ffadd9;
  --hotpink: #fd82c1;
  --lime: #ddff56;
  --lavender: #c9b4ff;
  --peach: #ffc8af;
  --line: #1c1820;
  --shadow: 5px 6px 0 var(--ink);
  --radius: 23px;
  color-scheme: light;
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
html { scroll-behavior: smooth; }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 90% 5%, #fbd1e9 0, #fbd1e900 30%),
    radial-gradient(circle at -12% 30%, #e7d7ffb5 0, #e7d7ff00 28%),
    var(--paper);
}
a { color: #5e3696; }
:focus-visible { outline: 3px solid #803fff; outline-offset: 4px; }
.container { width:min(1160px, calc(100% - 48px)); }
.topbar {
  background: #ffadd9f2;
  border-bottom: 2.5px solid var(--ink);
  backdrop-filter: blur(12px);
}
.topbar-inner { min-height:75px; }
.brand { font-size: 21px; letter-spacing: -.075em; gap: 10px; }
.brand-mark {
  width:49px; height:49px; border-radius:13px;
  background:var(--lime); border:2.5px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink); transform:rotate(-7deg); font-size:25px;
}
.brand > span:last-child span { color:var(--ink); }
.status {
  color:var(--ink); background:#fff9ff; border:2px solid var(--ink);
  border-radius:100px; padding:10px 14px; font-size:11px;
  box-shadow: 2px 2px 0 var(--ink);
}
.dot { background:#59d98e; border:1px solid var(--ink); width:10px; height:10px; }
.dot.demo { background:#ffb63d; }
.marquee {
  background:var(--lime); border-bottom:2.5px solid var(--ink);
  overflow:hidden; height:33px; display:flex; align-items:center;
}
.marquee-track {
  width:100%; display:flex; justify-content:space-between;
  gap:20px; white-space:nowrap; overflow:hidden;
  font: 800 10px/1.2 'Unbounded', system-ui, sans-serif;
  letter-spacing:.055em; padding-inline: 5%;
}
.marquee-track span { flex-shrink:0; }
.marquee-track b { font-size:14px; vertical-align:-1px; padding:0 7px; }
.btn {
  border:2.5px solid var(--ink); border-radius:14px;
  font-size:12px; font-weight:800; min-height:45px;
  box-shadow: 3px 4px 0 var(--ink);
  color:var(--ink);
}
.btn:hover:not(:disabled) { transform:translate(-1px,-2px); box-shadow:4px 6px 0 var(--ink); }
.btn:active:not(:disabled) { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.btn-primary { background:var(--lime); color:var(--ink); box-shadow:3px 4px 0 var(--ink); }
.btn-purple { background:var(--pink); color:var(--ink); box-shadow:3px 4px 0 var(--ink); }
.btn-white { background:#fff; color:var(--ink); border:2.5px solid var(--ink); }
.btn-light { background:var(--lavender); color:var(--ink); }
.btn-sm { min-height:40px; }
.hero {
  position:relative; overflow:hidden;
  background:var(--pink); border:2.5px solid var(--ink);
  border-radius:34px; box-shadow: var(--shadow);
  margin:30px 0 22px; padding:38px 43px 37px;
  gap:12px; grid-template-columns: 1.16fr .84fr;
}
.hero::before { content:'✳'; position:absolute; top:20px; right:45%; font-size:43px; color:#ab54ac; transform:rotate(14deg); }
.kicker {
  color:var(--ink); display:inline-block; font:800 10px/1.4 'Unbounded', system-ui;
  text-transform:uppercase; letter-spacing:.07em;
  background:var(--lime); padding:8px 11px; border:2px solid var(--ink);
  border-radius:8px; transform:rotate(-2deg);
}
h1, h2, h3 { color:var(--ink); }
h1 { font-size:clamp(38px, 5.3vw, 66px); line-height:1.08; letter-spacing:-.083em; margin:22px 0 16px; }
h1 em { color:#fffefa; font-style:normal; -webkit-text-stroke:1px var(--ink); text-shadow:3px 3px 0 var(--ink); }
.hero-lead { font-size:14px; line-height:1.65; color:#332334; max-width:440px; font-weight:650; margin-bottom:16px; }
.hero-tags { gap:7px; }
.pill { background:#fffcef; border:1.5px solid var(--ink); border-radius:8px; color:var(--ink); font-size:10px; padding:7px 10px; }
.pill:nth-child(2) { background:var(--lime); transform:rotate(-2deg); }
.hero-illustration {
  min-height:265px; border:0; border-radius:0; transform:none;
  background:transparent; overflow:visible;
}
.hero-illustration::before {
  width:min(310px, 87%); height:90%; background:var(--lavender);
  border:3px solid var(--ink); border-radius:42% 58% 50% 50%; transform: translate(-50%, -50%) rotate(-12deg);
  top:50%; left:50%; box-shadow:5px 7px 0 var(--ink);
}
.hero-illustration::after { content:'✴'; font-size:50px; color:var(--lime); top:-5px; left:12%; filter:drop-shadow(2px 2px 0 var(--ink)); }
.hero-toilet { font-size:116px; transform:rotate(-10deg); filter:drop-shadow(4px 7px 0 #3b204f44); }
.hero-sticker {
  color:var(--ink); background:var(--lime); border:2.5px solid var(--ink); border-radius:8px;
  bottom:10px; right:3px; box-shadow:3px 4px 0 var(--ink);
  font-size:12px; transform:rotate(8deg); padding:12px;
}
.grid-main { gap:25px; }
.column { gap:23px; }
.panel {
  border:2.5px solid var(--ink); border-radius:var(--radius);
  background:#fffefa; padding:26px; box-shadow:var(--shadow);
}
.panel-title { gap:8px; margin-bottom:16px; }
.panel-title h2,.stats-head h2 {
  font:800 19px/1.25 'Unbounded',system-ui;
  letter-spacing:-.065em; margin-bottom:9px;
}
.subtle { color:var(--muted); font-size:12px; line-height:1.5; }
.ribbon, .tiny-tag {
  border:1.5px solid var(--ink); background:var(--lime); color:var(--ink);
  font:800 9px 'Unbounded',system-ui; border-radius:7px;
  box-shadow:2px 2px 0 var(--ink); padding:8px 9px;
}
.type-grid { grid-template-columns:repeat(7, minmax(0,1fr)); gap:7px; margin:16px 0; }
.type-card {
  border:2px solid var(--ink); border-radius:12px; min-height:104px;
  background:#fff; color:var(--ink); gap:8px; box-shadow:2px 3px 0 var(--ink);
}
.type-card:nth-child(4) { background:#e9ffac; }
.type-card:hover { border-color:var(--ink); background:#f4e9ff; transform:translateY(-2px); }
.type-card.active { color:var(--ink); border:2.5px solid var(--ink); background:var(--lavender); box-shadow:3px 4px 0 var(--ink); transform:translateY(-2px); }
.type-card:nth-child(4).active { background:var(--lime); }
.type-number { font-size:10px; }
.type-emoji { font-size:25px; }
.type-label { font-size:9px; }
.type-details {
  background:#f1eaff; border:2px solid var(--ink); border-radius:13px;
  padding:14px; gap:8px;
}
.type-details b { color:var(--ink); font-size:12px; }
.type-details span { color:#50445d; }
.section-mini {
  display:flex; align-items:center; gap:10px;
  font:800 11px/1.5 'Unbounded',system-ui;
  color:var(--ink); margin:24px 0 11px;
}
.section-mini:after { content:''; height:2px; flex:1; background:var(--ink); opacity:.2; }
.mood-list { gap:9px; }
.mood {
  border:2px solid var(--ink); border-radius:11px; padding:12px 5px;
  background:#fff; color:var(--ink); font-size:10px;
  box-shadow:2px 3px 0 var(--ink);
}
.mood.active { border-color:var(--ink); background:var(--peach); color:var(--ink); }
.field label { color:var(--ink); font-size:11px; }
.input,.textarea {
  background:#fffefa; border:2px solid var(--ink); color:var(--ink);
  border-radius:11px; min-height:48px; font-size:12px;
}
.input:focus,.textarea:focus { border-color:#713cba; outline:2px solid #d0b2ff; outline-offset:1px; }
.hint { color:#645969; }
.feed-toolbar { margin-top:5px; }
.filters { background:#e9d9ff; border:1.5px solid var(--ink); padding:4px; }
.tab { color:var(--ink); border-radius:7px; padding:9px 12px; }
.tab.active { background:var(--lime); color:var(--ink); box-shadow:1px 2px 0 var(--ink); }
.entry { border-bottom:1.5px dashed #9986a4; gap:14px; }
.avatar { background:var(--lavender); border:2px solid var(--ink); border-radius:12px; width:41px; height:41px; }
.avatar.other { background:var(--peach); }
.entry-who,.entry-title { color:var(--ink); }
.entry-date,.entry-footer { color:#746777; }
.entry-title { flex-wrap:wrap; }
.entry-title .badge-type { background:var(--lime); color:var(--ink); border:1.5px solid var(--ink); }
.entry-note { color:#544c59; }
.link-btn { color:#642a83; font-weight:800; }
.stats-grid { gap:10px; }
.stat {
  border:2px solid var(--ink); border-radius:14px; background:var(--lavender);
  color:var(--ink); box-shadow:2px 3px 0 var(--ink);
}
.stat.peach { background:var(--peach); }
.stat-number,.stat-label { color:var(--ink); }
.stat-number { font-family:'Unbounded',system-ui; }
.chart-title { color:var(--ink); }
.bars { border-color:var(--ink); }
.bar { background:var(--lavender); border:1.5px solid var(--ink); border-bottom:0; }
.bar.on { background:var(--lime); }
.bar-label,.bar-caption { color:#685c6c; }
.achievement { border:2px solid var(--ink); background:#f8e9ff; border-radius:14px; }
.achievement:nth-of-type(2n) { background:#efffbf; }
.achievement b { color:var(--ink); }
.achievement span { color:#554d5a; }
.pair-card {
  background:var(--peach); color:var(--ink); border:2.5px solid var(--ink);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:25px;
}
.pair-card::after { content:'✳'; color:#ec9ab8; font-size:150px; right:-35px; top:-55px; }
.pair-card h2 { color:var(--ink); }
.pair-card p,.pair-card .pair-small { color:#4b3744; }
.pair-card .btn { background:var(--lime); color:var(--ink); }
.pair-pill { background:#fffdf1; border:1.5px solid var(--ink); color:var(--ink); font:800 10px 'Unbounded', system-ui; }
.pair-card .btn + .btn { background:#fff8fa !important; color:var(--ink) !important; }
.privacy { color:#554e56; background:#f9edff; border:2px dashed var(--ink); border-radius:15px; padding:14px; }
.footer { border-top:2px solid var(--ink); color:var(--ink); background:var(--lime); font-weight:800; }
.onboard {
  background:#fffefa; border:2.5px solid var(--ink);
  box-shadow:7px 8px 0 var(--ink); border-radius:30px;
  margin-top:55px;
}
.onboard h1 { font-size:33px; }
.onboard > p { color:#544957; }
.onboard label { color:var(--ink); }
.onboard .hint-box { background:#edddff; border:1.5px dashed var(--ink); color:#413249; }
.onboard-emoji { display:block; padding:15px; margin:0 auto 5px; width:max-content; border-radius:30px; background:var(--peach); border:2px solid var(--ink); transform:rotate(-5deg); box-shadow:4px 4px 0 var(--ink); }
.empty { color:#625567; }
.empty b { color:var(--ink); }
.demo-banner { border:2px solid var(--ink); background:#fff4cb; color:#4b3c26; box-shadow:3px 3px 0 var(--ink); }
.toast { background:var(--ink); color:#fff; border:2px solid var(--lime); border-radius:11px; box-shadow:4px 4px 0 #0007; }
.bottom-nav { display:none; }
@media(max-width:900px) {
  .hero { padding:30px 29px; }
  .hero-illustration { min-height:222px; }
  .panel { padding:20px; }
  .type-grid { gap:5px; }
  .type-card { min-height:94px; }
}
@media(max-width:700px) {
  .container { width:min(100% - 30px, 540px); }
  .topbar-inner { min-height:64px; }
  .brand { font-size:15px; }
  .brand-mark { height:39px; width:39px; font-size:21px; border-radius:10px; }
  .top-actions .btn { min-height:36px; padding:8px 9px; }
  .status { padding:8px; font-size:9px; }
  .marquee { height:29px; }
  .marquee-track { font-size:9px; gap:12px; padding-inline:12px; }
  .hero { padding:26px 22px; margin:19px 0 17px; border-radius:24px; }
  .hero::before { font-size:35px; right:20px; top:15px; }
  .hero h1 { font-size:clamp(36px, 9vw, 52px); }
  .hero-lead { font-size:12px; }
  .hero-tags { gap:6px; }
  .pill { padding:6px 8px; font-size:9px; }
  .grid-main { gap:19px; padding-bottom:28px; }
  .column { gap:19px; }
  .panel { padding:19px 16px; border-radius:20px; }
  .panel-title h2,.stats-head h2 { font-size:16px; }
  .ribbon { font-size:8px; white-space:nowrap; }
  .type-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .type-card { min-height:97px; padding:6px 1px; }
  .type-label { font-size:9px; }
  .type-emoji { font-size:27px; }
  .type-details { padding:11px; }
  .mood-list { gap:6px; }
  .mood { font-size:9px; padding:10px 2px; }
  .submit-wrap { gap:7px; }
  .submit-wrap .btn { flex-shrink:0; padding:10px 13px; }
  .onboard { margin:30px auto 45px; padding:24px 18px; }
  .onboard h1 { font-size:28px; }
  .footer { padding-bottom:95px; }
  .bottom-nav {
    display:grid; grid-template-columns:repeat(3,1fr); gap:5px;
    position:fixed; z-index:20; bottom:0; left:0; right:0;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));
    background:#fef8ff; border-top:2.5px solid var(--ink);
    box-shadow:0 -4px 12px #27172e11;
  }
  .bottom-nav a {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-decoration:none; color:var(--ink); font-weight:800; font-size:10px;
    border-radius:10px; min-height:49px; gap:2px;
  }
  .bottom-nav a:first-child { background:var(--lime); border:1.5px solid var(--ink); }
  .bottom-nav a span { font-size:18px; line-height:1; }
  .toast { bottom:90px; }
  #diary, #log-form, #statistics { scroll-margin-top:112px; }
}
@media(max-width:370px) {
  .top-actions .status { display:none; }
  .panel-title { flex-wrap:wrap; }
  .hero { padding:21px 17px; }
  .type-grid { gap:6px; }
  .type-card { min-height:91px; }
  .type-label { font-size:8px; }
  .btn { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; }
}