@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Unbounded:wght@500;600;700;800&display=swap');
:root {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  color: #292036;
  background: #f8f4fc;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
a { color: #6940bf; }
:focus-visible { outline: 3px solid #a675ff; outline-offset: 3px; }
#app { min-height: 100vh; }
.container { width: min(1140px, calc(100% - 40px)); margin-inline: auto; }
.topbar { background: #f8f4fcf0; backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 15; border-bottom: 1px solid #e9e1f2; }
.topbar-inner { min-height: 78px; display:flex; align-items:center; justify-content:space-between; gap: 18px; }
.brand { display:flex; gap: 11px; align-items:center; white-space:nowrap; font: 800 21px 'Unbounded', system-ui; letter-spacing: -.07em; }
.brand-mark { width: 45px; height: 45px; background:#d2baff; border-radius:15px; display:grid; place-items:center; font-size:27px; transform:rotate(-7deg); box-shadow:inset 0 -4px #00000008; }
.brand > span:last-child span { color:#855acb; }
.top-actions { display:flex; align-items:center; gap: 12px; }
.status { display:flex; align-items:center; gap:8px; background:white; border:1px solid #e6ddf0; border-radius:40px; padding:10px 14px; color:#685c77; font-weight:800; font-size:12px; }
.dot { width:8px; height:8px; border-radius:50%; background:#7acaaf; flex:none; }
.dot.demo { background:#f3bb76; }
.btn { appearance:none; border:0; border-radius:15px; padding:14px 20px; font-size:13px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition: transform .16s ease, box-shadow .16s ease; }
.btn:hover:not(:disabled) { transform:translateY(-1px); }
.btn-primary { background:#302241; color:white; box-shadow:0 5px 0 #1d132a; }
.btn-primary:hover { box-shadow:0 6px 0 #1d132a; }
.btn-purple { background:#8f63dc; color:white; box-shadow:0 5px 0 #7444bd; }
.btn-white { background:white; color:#4d3c62; border:1px solid #e7dbf1; }
.btn-light { background:#efe5ff; color:#6843a0; }
.btn-sm { padding:10px 15px; font-size:12px; border-radius:12px; }
.hero { padding:45px 0 28px; display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:center; }
.kicker { text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.17em; color:#966aca; }
h1, h2, h3, p { margin-top:0; }
h1,h2,h3 { letter-spacing: -.05em; }
h1 { font: 800 clamp(35px,4.8vw,60px)/1.15 'Unbounded',system-ui; letter-spacing:-.075em; margin:13px 0 20px; }
h1 em { font-style:normal; color:#9b6eeb; }
.hero-lead { font-size:15px; line-height:1.8; color:#73677e; max-width:470px; margin-bottom:20px; }
.hero-tags { display:flex; flex-wrap:wrap; gap:9px; }
.pill { border-radius:40px; padding:8px 13px; font-size:11px; font-weight:800; background:white; border:1px solid #e8ddef; color:#705d7d; }
.hero-illustration { min-height:260px; background:#e6d6fb; border:2px solid #dbc2f8; border-radius:38px; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; overflow:hidden; transform:rotate(1.3deg); }
.hero-illustration::before { content:''; background:#f8e7c3; border-radius:50%; width:290px; height:290px; position:absolute; left:50%; top:51%; transform:translate(-50%,-50%); }
.hero-illustration::after { content:'✦'; position:absolute; top:26px; left:34px; font-size:37px; color:#b88ce9; }
.hero-toilet { font-size:130px; z-index:2; transform:rotate(-9deg); filter:drop-shadow(0 13px 0 #71539824); line-height:1.4; }
.hero-sticker { z-index:3; position:absolute; bottom:25px; right:24px; transform:rotate(-8deg); background:#ffed78; color:#44324c; padding:12px 15px; border:2px solid #34263e; border-radius:9px; font:700 12px 'Unbounded',system-ui; }
.grid-main { display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(280px, .95fr); gap:22px; padding-bottom:80px; align-items:start; }
.column { min-width:0; display:flex; flex-direction:column; gap:20px; }
.panel { background:white; border:1px solid #eee8f4; border-radius:25px; padding:25px; box-shadow:0 7px 30px #3d245706; }
.panel-title { display:flex; align-items:start; justify-content:space-between; gap:10px; margin-bottom:16px; }
.panel-title h2 { font:800 19px 'Unbounded',system-ui; letter-spacing:-.045em; margin-bottom:8px; }
.subtle { font-size:12px; color:#968b9f; line-height:1.6; margin-bottom:0; }
.ribbon { background:#f5effd; border-radius:8px; color:#875cc2; padding:6px 9px; font-size:10px; font-weight:800; white-space:nowrap; }
.type-grid { display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap:7px; margin:23px 0 14px; }
.type-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; border:1.5px solid #e9e0ef; background:#fcfaff; color:#776a80; border-radius:14px; min-height:105px; padding:7px 2px; transition:all .16s ease; }
.type-card:hover { border-color:#cdb0ec; background:#f6eefe; }
.type-card.active { background:#eee1ff; border:2px solid #9565dc; box-shadow:0 3px 0 #b797db; color:#4e3472; }
.type-number { font:800 10px 'Unbounded',system-ui; }
.type-emoji { font-size:26px; line-height:1.3; }
.type-label { font-size:9px; font-weight:800; }
.type-details { background:#f9f5ff; border:1px solid #ecdefb; border-radius:13px; padding:13px 14px; display:flex; justify-content:space-between; gap:10px; align-items:start; min-height:64px; }
.type-details b { display:block; color:#5e4283; font-size:13px; margin-bottom:3px; }
.type-details span { display:block; font-size:11px; color:#8a799b; line-height:1.5; }
.tiny-tag { font-size:10px; background:white; color:#8a65bf; padding:6px 8px; white-space:nowrap; border-radius:8px; font-weight:800; }
.section-mini { font-size:12px; font-weight:800; color:#655770; margin:23px 0 11px; }
.mood-list { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mood { border:1px solid #e9e3ed; border-radius:12px; background:white; padding:11px 8px; font-weight:800; font-size:11px; color:#766a80; }
.mood.active { color:#603e9c; background:#f1e7ff; border-color:#b995ec; }
.field-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:12px; margin-top:20px; }
.field label { font-size:11px; display:block; font-weight:800; color:#6c5f79; margin-bottom:8px; }
.input, .textarea { width:100%; background:#fdfbff; border:1px solid #e8e1ef; border-radius:12px; padding:13px; color:#34273e; font-size:12px; outline:none; min-height:46px; }
.input:focus,.textarea:focus { border-color:#a77ce1; }
.textarea { height:46px; resize:vertical; max-height:130px; }
.submit-wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }
.hint { font-size:10px; color:#a093ae; line-height:1.6; max-width:210px; }
.feed-toolbar { display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; }
.tabs, .filters { display:flex; gap:5px; background:#f6f1fb; padding:5px; border-radius:12px; }
.tab { background:transparent; color:#8c8097; border:0; border-radius:9px; font-size:11px; font-weight:800; padding:9px 13px; }
.tab.active { background:white; color:#6646a3; box-shadow:0 2px 9px #2f1d4211; }
.entries { display:flex; flex-direction:column; margin-top:17px; }
.entry { display:flex; gap:13px; padding:17px 0; border-bottom:1px solid #f0ebf4; }
.entry:last-child { border-bottom:0; padding-bottom:0; }
.avatar { flex:none; height:37px; width:37px; border-radius:12px; background:#ecdcff; display:grid; place-items:center; font-size:16px; }
.avatar.other { background:#ffe2d7; }
.entry-content { flex:1; min-width:0; }
.entry-top { display:flex; justify-content:space-between; gap:6px; align-items:center; margin-bottom:7px; }
.entry-who { font-weight:800; font-size:12px; }
.entry-date { color:#ad9eb8; font-size:10px; white-space:nowrap; }
.entry-title { display:flex; gap:8px; align-items:center; font-size:13px; font-weight:800; margin:0 0 4px; }
.entry-title .badge-type { font-size:10px; color:#8d5ac6; border-radius:7px; background:#f5edff; padding:5px 7px; }
.entry-note { color:#86788e; font-size:11px; line-height:1.6; margin:7px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.entry-footer { display:flex; gap:13px; align-items:center; font-size:10px; color:#9c8da9; font-weight:700; }
.link-btn { border:0; background:transparent; color:#ab789b; font-size:10px; padding:0; text-decoration:underline; text-underline-offset:2px; }
.stats-head { display:flex; justify-content:space-between; gap:10px; margin-bottom:17px; }
.stats-head h2 { font:800 18px 'Unbounded',system-ui; margin-bottom:5px; }
.stats-grid { display:grid; grid-template-columns: 1fr 1fr; gap:11px; }
.stat { background:#f6effd; padding:16px; border-radius:16px; }
.stat.peach { background:#fff1e8; }
.stat-number { font:800 31px 'Unbounded',system-ui; letter-spacing:-.07em; color:#7955b7; line-height:1.3; }
.stat.peach .stat-number { color:#d68b63; }
.stat-label { font-size:10px; font-weight:800; color:#9487a2; margin-top:6px; }
.chart-title { margin:23px 0 13px; font-size:12px; font-weight:800; }
.bars { display:flex; align-items:end; height:98px; gap:9px; border-bottom:1px solid #e9e2ed; }
.bar-column { height:100%; flex:1; display:flex; flex-direction:column; justify-content:end; align-items:center; gap:5px; }
.bar { width:min(100%,24px); background:#d7b8ff; border-radius:6px 6px 0 0; min-height:3px; }
.bar.on { background:#9d70e0; }
.bar-label { font-size:10px; font-weight:800; color:#9484a6; padding-top:4px; }
.bar-caption { font-size:10px; color:#a393ad; margin-top:12px; line-height:1.5; }
.achievement { padding:14px; display:flex; align-items:center; gap:12px; border-radius:15px; background:#fff7e7; border:1px solid #f5ead1; margin-top:12px; }
.achievement-icon { font-size:25px; width:36px; text-align:center; }
.achievement b { font-size:12px; display:block; }
.achievement span { font-size:10px; color:#a29588; line-height:1.5; }
.pair-card { background:#322543; color:white; border-radius:25px; padding:24px; position:relative; overflow:hidden; }
.pair-card::after { content:'✳'; position:absolute; font-size:120px; color:#9273b52e; right:-20px; top:-40px; }
.pair-card h2 { font:800 18px 'Unbounded',system-ui; margin-bottom:8px; }
.pair-card p { font-size:12px; line-height:1.7; color:#d6c8e5; max-width:265px; }
.pair-card .btn { background:#e6c7ff; color:#4c2c6b; position:relative; z-index:2; }
.pair-pill { background:#564068; color:#e2d3f1; padding:7px 10px; font-size:10px; font-weight:800; border-radius:9px; display:inline-block; margin-bottom:18px; }
.pair-card .pair-small { color:#bcaace; font-size:10px; margin:16px 0 0; }
.privacy { font-size:11px; line-height:1.7; color:#9b90a4; padding:0 8px; }
.footer { border-top:1px solid #e9e1f1; padding:24px 0 42px; font-size:11px; color:#a195ab; text-align:center; }
.empty { text-align:center; padding:34px 16px; color:#9486a1; }
.empty-icon { display:block; font-size:40px; margin-bottom:12px; }
.empty b { display:block; font-size:13px; color:#6b5979; margin-bottom:6px; }
.empty p { font-size:11px; line-height:1.6; max-width:290px; margin-inline:auto; }
.onboard { max-width:600px; margin:70px auto 100px; padding:40px; border-radius:30px; background:white; border:1px solid #ece0f7; box-shadow:0 20px 80px #56347315; }
.onboard-emoji { font-size:80px; text-align:center; display:block; }
.onboard h1 { text-align:center; font-size:31px; margin-top:10px; }
.onboard > p { color:#8d809c; text-align:center; font-size:13px; line-height:1.7; }
.onboard label { font-size:12px; font-weight:800; display:block; margin:26px 0 9px; }
.onboard .btn { width:100%; margin-top:15px; }
.onboard .hint-box { margin-top:20px; background:#faf5ff; color:#9b87ab; padding:15px; font-size:11px; line-height:1.7; border-radius:12px; }
.loading { min-height:70vh; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:15px; font-size:68px; }
.loading p { font-size:14px; font-weight:700; color:#9078a6; }
.toast { position:fixed; bottom:22px; left:50%; z-index:50; transform:translate(-50%,100px); opacity:0; background:#30233e; color:white; padding:14px 23px; border-radius:13px; font-size:12px; font-weight:800; pointer-events:none; transition:.2s ease; max-width:calc(100% - 24px); text-align:center; }
.toast.show { transform:translate(-50%,0); opacity:1; }
.demo-banner { background:#fff7de; border:1px solid #f2dfae; border-radius:13px; padding:11px 13px; color:#8e773e; font-size:11px; line-height:1.6; margin-bottom:0; }
.demo-switch { border:0; font-weight:800; background:#fff8e7; padding:6px 8px; border-radius:8px; color:#8064a7; text-decoration:underline; }
@media(max-width:900px) {
 .type-label { font-size:8px; }
 .type-grid { gap:4px; }
 .type-card { min-height:95px; }
 .grid-main { grid-template-columns: 1.3fr .9fr; gap:14px; }
 .panel { padding:20px; }
 .hero-illustration { min-height:230px; }
}
@media(max-width:700px) {
 .container { width:min(100% - 28px, 520px); }
 .topbar-inner { min-height:66px; }
 .brand { font-size:15px; }
 .brand-mark { width:37px; height:37px; font-size:22px; border-radius:12px; }
 .top-actions { gap:7px; }
 .status { padding:9px; font-size:10px; }
 .top-actions .btn { padding:10px 12px; font-size:10px; }
 .hero { padding:27px 0 22px; gap:16px; grid-template-columns:1fr; }
 .hero h1 { font-size:clamp(33px,9vw,48px); margin-bottom:11px; }
 .hero-lead { font-size:13px; margin-bottom:14px; }
 .hero-illustration { display:none; }
 .grid-main { grid-template-columns: 1fr; gap:18px; }
 .column { gap:18px; }
 .panel { border-radius:20px; padding:20px; }
 .type-grid { gap:5px; }
 .type-card { min-height:93px; padding:5px 1px; }
 .type-emoji { font-size:24px; }
 .type-label { font-size:8px; }
 .field-grid { grid-template-columns:1fr; gap:12px; }
 .submit-wrap .hint { max-width:125px; }
 .mood { font-size:10px; padding:11px 5px; }
 .onboard { margin:35px auto 60px; padding:24px; }
}
@media(max-width:365px) {
 .top-actions .status { display:none; }
 .panel-title h2 { font-size:17px; }
 .type-label { font-size:7px; }
 .type-emoji { font-size:21px; }
 .type-card { min-height:85px; }
 .btn { padding:12px 14px; }
}