:root .app-shell .feelings-page {
    box-sizing:border-box;
    display:grid;
    width:min(calc(100% - 48px),1120px);
    max-width:1120px;
    gap:16px;
    margin:0 auto;
    padding:16px 0 calc(126px + env(safe-area-inset-bottom));
}
.feelings-intro h1 { margin:0 0 6px; color:var(--h-text); font:400 clamp(25px,3vw,34px)/1.2 var(--h-serif); }
.feelings-intro p { margin:0; color:var(--h-muted); font-size:14px; line-height:1.6; }
.feelings-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.feelings-tabs { display:flex; align-items:center; gap:8px; }
.feeling-tab { display:inline-flex; min-height:44px; align-items:center; gap:8px; padding:8px 13px; border:1px solid var(--h-border); border-radius:15px; color:var(--h-text); background:var(--h-surface); font:600 13px/1.25 var(--font-inter); cursor:pointer; }
.feeling-tab.active { border-color:color-mix(in srgb,var(--h-accent) 62%,var(--h-border)); color:var(--h-accent); background:var(--h-soft); }
.feeling-tab-count { display:grid; min-width:22px; height:22px; place-items:center; padding:0 5px; border-radius:11px; color:var(--h-muted); background:var(--h-bg); font-size:11px; font-variant-numeric:tabular-nums; }
.feeling-tab.active .feeling-tab-count { color:var(--h-accent); background:color-mix(in srgb,var(--h-accent) 12%,var(--h-surface)); }
.feelings-create { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 16px; border-radius:15px; white-space:nowrap; }
.feelings-list { display:grid; gap:10px; }
.feelings-entry-card {
    display:grid;
    width:100%;
    min-width:0;
    grid-template-columns:42px minmax(0,1fr) 18px;
    align-items:center;
    gap:12px;
    padding:14px 15px;
    border:1px solid var(--h-border);
    border-radius:17px;
    color:var(--h-text);
    background:var(--h-surface);
    box-shadow:var(--h-shadow);
    text-align:left;
    cursor:pointer;
    transition:border-color .16s ease,transform .16s ease,background-color .16s ease;
}
.feelings-entry-card:hover { border-color:color-mix(in srgb,var(--h-accent) 55%,var(--h-border)); background:color-mix(in srgb,var(--h-surface) 88%,var(--h-soft)); }
.feelings-entry-card:active { transform:scale(.995); }
.feelings-entry-card:focus-visible { outline:2px solid var(--h-accent); outline-offset:3px; }
.feelings-entry-avatar { display:grid; width:42px; height:42px; place-items:center; border:1px solid var(--h-border); border-radius:14px; background:var(--h-soft); font-size:20px; }
.feelings-vacilo-avatar { color:#bd6075; }
.feelings-elogio-avatar { color:var(--h-accent); }
.feelings-entry-content { display:grid; min-width:0; gap:5px; }
.feelings-entry-topline { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:10px; }
.feelings-entry-people { display:flex; min-width:0; align-items:center; gap:5px; overflow:hidden; color:var(--h-accent); font-size:11px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.feelings-entry-people i { flex:0 0 auto; color:var(--h-muted); font-size:9px; }
.feelings-entry-state { flex:0 0 auto; padding:4px 8px; border:1px solid var(--h-border); border-radius:999px; color:var(--h-muted); background:var(--h-bg); font-size:10px; font-weight:650; white-space:nowrap; }
.feelings-entry-state.is-done,.feelings-entry-state.is-read { color:#3a9b6e; border-color:color-mix(in srgb,#3a9b6e 28%,var(--h-border)); background:color-mix(in srgb,#3a9b6e 9%,var(--h-surface)); }
.feelings-entry-state.is-open,.feelings-entry-state.is-unread { color:var(--h-accent); }
.feelings-entry-title { overflow:hidden; color:var(--h-text); font-size:15px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.feelings-entry-description { display:-webkit-box; overflow:hidden; color:var(--h-muted); font-size:12px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.feelings-entry-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; color:var(--h-muted); font-size:10px; }
.feelings-entry-chevron { color:var(--h-muted); font-size:12px; }
.feelings-empty { display:grid; justify-items:center; gap:10px; padding:36px 20px; text-align:center; }
.feelings-empty > span { font-size:36px; }
.feelings-empty h2 { margin:0; color:var(--h-text); font:400 25px/1.2 var(--h-serif); }
.feelings-empty p { max-width:460px; margin:0 0 7px; color:var(--h-muted); line-height:1.6; }
.feelings-entry-skeleton { display:flex; align-items:center; gap:12px; min-height:80px; padding:14px; border:1px solid var(--h-border); border-radius:17px; background:var(--h-surface); }
.feelings-skeleton-avatar { width:42px; height:42px; flex:0 0 42px; border-radius:14px; }
.feelings-skeleton-copy { display:grid; flex:1; gap:8px; }
.feelings-skeleton-copy .skeleton { display:block; height:12px; width:76%; }
.feelings-skeleton-copy .skeleton:first-child { height:15px; width:48%; }
.feelings-skeleton-copy .skeleton:last-child { width:34%; }
.feelings-page-status { margin:0; padding:12px 14px; border:1px solid var(--h-border); border-radius:13px; color:var(--h-muted); background:var(--h-surface); font-size:13px; }
.feelings-form { display:grid; gap:12px; }
.feelings-form .field { margin:0; }
.feelings-detail { display:grid; gap:15px; color:var(--h-text); }
.feeling-detail-byline { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; color:var(--h-muted); font-size:12px; }
.feeling-detail-photo { display:block; width:100%; max-height:360px; object-fit:cover; border-radius:17px; background:var(--h-raised); }
.feeling-detail-quote { position:relative; padding:21px 23px; border:1px solid var(--h-border); border-radius:21px; color:var(--h-text); background:var(--h-surface); }
.feeling-detail-quote::before { content:"“"; display:block; margin-bottom:-5px; color:var(--h-accent); font:400 42px/.8 var(--h-serif); }
.feeling-detail-quote > span,.feeling-detail-sentiment > span,.feeling-ai-explanation > span { display:block; margin:0 0 8px; color:var(--h-accent); font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; }
.feeling-detail-quote p { margin:0; color:var(--h-text); font:400 clamp(18px,4vw,23px)/1.5 var(--h-serif); white-space:pre-wrap; overflow-wrap:anywhere; }
.feeling-detail-sentiment,.feeling-ai-explanation { display:grid; gap:7px; padding:14px 16px; border:1px solid var(--h-border); border-radius:16px; background:var(--h-bg); }
.feeling-detail-sentiment strong { color:var(--h-text); font-size:15px; }
.feeling-detail-sentiment p,.feeling-ai-explanation p { margin:0; color:var(--h-muted); font-size:13px; line-height:1.6; white-space:pre-wrap; }
.feeling-detail-facts { display:flex; flex-wrap:wrap; align-items:center; gap:8px 13px; color:var(--h-muted); font-size:11px; }
.feeling-detail-facts strong { color:var(--h-text); font-weight:600; }
.feeling-ai-explanation small { color:var(--h-muted); font-size:10px; line-height:1.5; }
.elogio-quote { border-color:color-mix(in srgb,var(--h-accent) 30%,var(--h-border)); background:color-mix(in srgb,var(--h-soft) 42%,var(--h-surface)); }
.elogio-quote::before { content:"💜"; margin:0 0 8px; font:400 21px/1 var(--font-inter); }
.elogio-quote > span { color:var(--h-rose); }
.elogio-reactions,.elogio-comments { display:grid; gap:10px; }
.elogio-reactions h3,.elogio-comments h3 { display:flex; align-items:center; gap:8px; margin:0; color:var(--h-text); font-size:14px; }
.elogio-comments h3 span { color:var(--h-muted); font-size:12px; }
.elogio-reactions > div { display:flex; flex-wrap:wrap; gap:8px; }
.elogio-reaction { display:inline-flex; min-width:54px; min-height:42px; align-items:center; justify-content:center; gap:6px; padding:6px 10px; border:1px solid var(--h-border); border-radius:14px; color:var(--h-text); background:var(--h-surface); font-size:18px; cursor:pointer; }
.elogio-reaction.is-selected { border-color:var(--h-accent); background:var(--h-soft); }
.elogio-reaction small { color:var(--h-muted); font-size:11px; }
.elogio-reactions-summary { margin:0; color:var(--h-muted); font-size:12px; }
.elogio-comment-list { display:grid; gap:9px; max-height:220px; overflow-y:auto; }
.elogio-comment { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:start; gap:9px; }
.elogio-comment-avatar { display:grid; width:32px; height:32px; place-items:center; border-radius:50%; color:var(--h-accent); background:var(--h-soft); font-size:12px; font-weight:700; }
.elogio-comment > div { min-width:0; padding:9px 11px; border:1px solid var(--h-border); border-radius:14px; background:var(--h-bg); }
.elogio-comment-byline { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.elogio-comment-byline strong { color:var(--h-text); font-size:11px; }
.elogio-comment-byline time { color:var(--h-muted); font-size:10px; }
.elogio-comment p { margin:4px 0 0; color:var(--h-muted); font-size:12px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.elogio-no-comments { margin:0; color:var(--h-muted); font-size:12px; }
.elogio-comment-composer { display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:end; gap:8px; }
.elogio-comment-composer textarea { box-sizing:border-box; width:100%; min-height:44px; max-height:100px; padding:10px 12px; border:1px solid var(--h-border); border-radius:14px; color:var(--h-text); background:var(--h-bg); font:400 13px/1.5 var(--font-inter); resize:vertical; }
.elogio-comment-composer .btn { display:grid; width:44px; height:44px; place-items:center; padding:0; }
@media (max-width:640px) {
    :root .app-shell .feelings-page { width:calc(100% - 32px); gap:13px; padding:13px 0 calc(114px + env(safe-area-inset-bottom)); }
    .feelings-toolbar { align-items:stretch; }
    .feelings-tabs { flex:1 1 auto; }
    .feeling-tab { flex:1 1 auto; justify-content:center; padding:7px 9px; font-size:12px; }
    .feelings-create { flex:0 0 44px; width:44px; min-width:44px; padding:0; overflow:hidden; font-size:0; }
    .feelings-create i { font-size:15px; }
    .feelings-entry-card { grid-template-columns:36px minmax(0,1fr) 12px; gap:9px; padding:12px 11px; }
    .feelings-entry-avatar { width:36px; height:36px; border-radius:12px; font-size:18px; }
    .feelings-entry-people { font-size:10px; }
    .feelings-entry-title { font-size:13px; }
    .feelings-entry-description { font-size:11px; }
    .feelings-entry-state { padding:3px 6px; font-size:9px; }
}