.view { display: grid; gap: 16px; }
.page-title h1 { margin: 4px 0 5px; font-size: 24px; line-height: 1.15; }.page-title p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.hero { padding: 20px; border-radius: 22px; color: white; overflow: hidden; position: relative; }.hero::after { content:""; position:absolute; width:150px; height:150px; right:-55px; bottom:-80px; border-radius:50%; background:rgba(255,255,255,.13); }.hero h1 { margin: 7px 0; max-width: 280px; font-size: 25px; line-height:1.12; }.hero p { position: relative; z-index:1; margin:0; max-width:290px; line-height:1.45; }.hero--coral { background: linear-gradient(135deg,#b84d4a,var(--coral)); }.hero--mint { background: linear-gradient(135deg,#257c69,var(--mint)); }.hero--cobalt { background: linear-gradient(135deg,#3247ad,var(--cobalt)); }.hero--violet { background: linear-gradient(135deg,#6845a5,var(--violet)); }.hero--amber { background: linear-gradient(135deg,#8a631b,var(--amber)); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:10px; }.section-heading h2 { margin:0; font-size:18px; }.section-heading button { min-height:44px; background:transparent; color:#293f95; font-weight:800; }
.message-preview { padding:15px; border:1px solid var(--line); border-radius:16px; background:#f2f5fb; }.message-preview h2 { margin:4px 0; font-size:16px; }.message-preview p { margin:0 0 10px; color:var(--muted); line-height:1.45; }.message-preview button { background:transparent; color:#293f95; font-weight:800; }
.week-strip { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }.week-strip button { min-width:0; min-height:46px; padding:5px 2px; border-radius:10px; background:#eff1f6; color:var(--muted); font-size:11px; }.week-strip button[aria-pressed="true"] { background:#293f95; color:#fff; }
.filter-row { display:flex; gap:6px; overflow-x:auto; }
.advanced-card { padding:14px; border:1px dashed #a9b3c8; border-radius:15px; background:#f6f7fa; }.advanced-card h2 { margin:8px 0 4px; font-size:15px; }.advanced-card p { margin:0 0 10px; color:var(--muted); font-size:13px; }
.space-grid { display:grid; gap:9px; }.space-card { width:100%; display:grid; grid-template-columns:44px 1fr; gap:11px; align-items:center; padding:11px; border:1px solid var(--line); border-radius:15px; background:#fff; color:var(--text); text-align:left; }.space-card > span:last-child { display:grid; }.space-card small { color:var(--muted); }
.chart-card { padding:14px; border:1px solid var(--line); border-radius:16px; background:#fff; }.chart-card h2 { margin:0 0 12px; }.bar-row { display:grid; grid-template-columns:105px 1fr 24px; gap:8px; align-items:center; margin:8px 0; font-size:12px; }.bar-row > div { height:9px; border-radius:999px; overflow:hidden; background:#e7eaf0; }.bar-row i { display:block; height:100%; border-radius:inherit; background:#5269d7; }
.quality-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.quality-grid article { display:grid; gap:3px; padding:12px; border-radius:14px; background:#fff; border:1px solid var(--line); }.quality-grid strong { font-size:24px; color:#334aa7; }.quality-grid span { color:var(--muted); font-size:12px; }.calculation-note { color:var(--muted); font-size:12px; line-height:1.5; }
.simulation-banner { padding:9px 11px; border-radius:11px; background:#fff3d9; color:#71490c; border:1px solid #ead29e; font-size:12px; font-weight:750; }
.chat-card { padding:13px; border:1px solid var(--line); border-radius:16px; background:#fff; }.chat-card h2 { margin:0 0 8px; }.chat-log { display:grid; gap:7px; max-height:220px; overflow:auto; }.chat-log p { margin:0; padding:9px; border-radius:11px; background:#eef1f7; font-size:13px; }.chat-card form { display:grid; grid-template-columns:1fr auto; gap:7px; margin-top:10px; }.chat-card form button { padding:0 12px; border-radius:11px; background:#293f95; color:#fff; font-weight:800; }
.document-card { display:grid; grid-template-columns:44px 1fr; gap:11px; padding:13px; border:1px solid var(--line); border-radius:16px; background:#fff; }.document-card > span { width:42px; height:48px; display:grid; place-items:center; border-radius:10px; background:#edf0f7; color:#4055b1; }.document-card h2 { margin:0 0 3px; font-size:16px; }.document-card p { margin:0; color:var(--muted); font-size:12px; }.document-card button { padding:6px 8px; border-radius:9px; background:#eef1f8; color:#33499f; }
.person-card { display:grid; grid-template-columns:42px 1fr; gap:10px; align-items:center; padding:11px; border:1px solid var(--line); border-radius:14px; background:#fff; }.person-card h2 { margin:0; font-size:15px; }.person-card p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.monitor-view { min-height:100%; padding:18px; background:linear-gradient(135deg,#18233b,#26365c); color:#fff; }.monitor-view header { display:flex; justify-content:space-between; align-items:center; }.monitor-view header button { padding:7px 10px; border-radius:10px; background:rgba(255,255,255,.14); color:#fff; }.monitor-view h1 { margin:28px 0 6px; }.monitor-view > p { color:rgba(255,255,255,.75); }.monitor-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:20px; }.monitor-grid .object-card { color:var(--text); }
.privacy-flow { display:grid; justify-items:center; gap:6px; padding:15px; border-radius:18px; background:linear-gradient(#eaf0ff,#edf6f2); }.privacy-flow div { width:min(100%,260px); padding:10px; border-radius:11px; background:#fff; border:1px solid var(--line); text-align:center; font-weight:800; }.privacy-flow span { color:var(--muted); font-size:12px; }.prototype-boundary { padding:15px; border-radius:16px; background:#fff5e8; border:1px solid #e8d2aa; }.prototype-boundary h2 { margin:0 0 6px; }.prototype-boundary p { margin:0; color:#6f5a36; line-height:1.5; }
.scenario-list { display:grid; gap:9px; }.scenario-list article { padding:13px; border:1px solid var(--line); border-radius:15px; background:#fff; }.scenario-list h2 { margin:0 0 4px; font-size:15px; }.scenario-list p { margin:0 0 9px; color:var(--muted); font-size:13px; }.scenario-list button { padding:7px 10px; border-radius:9px; background:#edf0f7; color:#33499f; font-weight:800; }.scenario-result { padding:13px; border-radius:14px; background:#e5f3ed; color:#1c674f; }
.shopping-list { display:grid; gap:8px; }.shopping-item { display:grid; grid-template-columns:42px 1fr; gap:10px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:14px; background:#fff; }.shopping-item > button { width:44px; min-width:44px; border:2px solid #b2bac9; border-radius:10px; background:#fff; color:var(--success); font-weight:900; }.shopping-item h2 { margin:0; font-size:15px; }.shopping-item p { margin:3px 0 0; color:var(--muted); font-size:12px; }.shopping-item.is-checked { opacity:.62; }.shopping-item.is-checked h2 { text-decoration:line-through; }
.note-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.note-grid article { min-height:130px; padding:13px; border-radius:14px; background:#fff6ca; border:1px solid #e4d594; transform:rotate(-.3deg); }.note-grid article:nth-child(even) { background:#e8f2ff; border-color:#c5d8ef; transform:rotate(.3deg); }.note-grid span { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; }.note-grid h2 { margin:7px 0; font-size:15px; }.note-grid p { margin:0; font-size:13px; }
.context-inner { padding:64px 20px 20px; color:var(--text-inverse); }.context-inner h2 { margin:6px 0; }.context-inner p,.context-inner li { color:#b8c0d2; line-height:1.55; font-size:14px; }.context-inner ul { padding-left:20px; }.context-inner .prototype-boundary { color:var(--text); }

.settings-card { padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.settings-card h2 { margin: 0 0 6px; }
.settings-card p { margin: 0 0 12px; color: var(--muted); line-height: 1.5; }