@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Raleway:wght@300;400;500;600&display=swap');

/* ============================================================
   DREAMTIME DECODER — Design System v2
   ============================================================ */
:root {
    --bg-deep:        #080d1a;
    --bg-base:        #0c1220;
    --glass-bg:       rgba(255,255,255,.028);
    --glass-bg-h:     rgba(255,255,255,.048);
    --glass-border:   rgba(255,255,255,.07);
    --glass-border-h: rgba(255,255,255,.13);
    --accent-violet:  #a855f7;
    --accent-cyan:    #22d3ee;
    --accent-glow:    #a855f7;
    --accent-pop:     #22d3ee;
    --text-main:      #eef2ff;
    --text-body:      #c8d3e8;
    --text-muted:     #6b7fa3;
    --text-faint:     #3d4f6e;
    --danger:         #f87171;
    --font-heading:   'Cinzel', 'Georgia', serif;
    --font-body:      'Cormorant Garamond', 'Georgia', serif;
    --font-ui:        'Raleway', sans-serif;
    --ease:           cubic-bezier(0.25,0.46,0.45,0.94);
    --ease-out:       cubic-bezier(0.16,1,0.3,1);
}

/* ============================================================ RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

body {
    font-family: var(--font-body);
    color: var(--text-main);
    background: var(--bg-deep);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 2rem 0;
    overflow-x: hidden;
    position: relative;
}

/* ============================================================ BACKGROUND */
.portal-background {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
    background: linear-gradient(180deg,#080d1a 0%,#0a1020 25%,#0f1530 55%,#13183d 100%);
}
.portal-background::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 80% 45% at 18% 50%,rgba(168,85,247,.09) 0%,transparent 65%),
        radial-gradient(ellipse 60% 35% at 82% 28%,rgba(34,211,238,.06) 0%,transparent 65%),
        radial-gradient(ellipse 70% 55% at 50% 85%,rgba(109,40,217,.08) 0%,transparent 65%);
}
.portal-background::after {
    content:''; position:absolute; inset:0;
    background-image:
        radial-gradient(1px 1px at 15% 18%,rgba(255,255,255,.35) 0%,transparent 100%),
        radial-gradient(1px 1px at 38% 8%,rgba(255,255,255,.25) 0%,transparent 100%),
        radial-gradient(1.5px 1.5px at 62% 14%,rgba(255,255,255,.4) 0%,transparent 100%),
        radial-gradient(1px 1px at 82% 23%,rgba(255,255,255,.25) 0%,transparent 100%),
        radial-gradient(1px 1px at 92% 6%,rgba(255,255,255,.3) 0%,transparent 100%),
        radial-gradient(1px 1px at 48% 42%,rgba(255,255,255,.15) 0%,transparent 100%),
        radial-gradient(1.5px 1.5px at 6% 67%,rgba(255,255,255,.3) 0%,transparent 100%),
        radial-gradient(1px 1px at 74% 57%,rgba(255,255,255,.2) 0%,transparent 100%),
        radial-gradient(1px 1px at 26% 78%,rgba(255,255,255,.25) 0%,transparent 100%),
        radial-gradient(1.5px 1.5px at 89% 82%,rgba(255,255,255,.35) 0%,transparent 100%);
}

/* Clouds */
.cloud{position:absolute;border-radius:50%;pointer-events:none;}
.cloud-1{width:900px;height:280px;top:-60px;left:-200px;background:radial-gradient(ellipse 60% 50% at 40% 50%,rgba(200,190,255,.13) 0%,rgba(168,85,247,.08) 45%,transparent 80%);filter:blur(40px);animation:cloud-drift-1 55s ease-in-out infinite;}
.cloud-2{width:700px;height:220px;top:40px;right:-150px;background:radial-gradient(ellipse 55% 45% at 55% 50%,rgba(190,245,255,.1) 0%,rgba(34,211,238,.07) 48%,transparent 80%);filter:blur(45px);animation:cloud-drift-2 70s ease-in-out infinite;}
.cloud-3{width:650px;height:200px;top:25%;left:-100px;background:radial-gradient(ellipse 65% 50% at 45% 50%,rgba(230,225,255,.12) 0%,rgba(196,162,251,.09) 42%,transparent 80%);filter:blur(32px);animation:cloud-drift-3 48s ease-in-out infinite;}
.cloud-4{width:750px;height:180px;top:35%;right:-180px;background:radial-gradient(ellipse 70% 40% at 60% 50%,rgba(176,230,253,.09) 0%,rgba(34,211,238,.05) 52%,transparent 78%);filter:blur(48px);animation:cloud-drift-4 65s ease-in-out infinite;}
.cloud-5{width:1000px;height:300px;bottom:20%;left:-100px;background:radial-gradient(ellipse 55% 55% at 40% 50%,rgba(167,139,250,.1) 0%,rgba(124,58,237,.06) 48%,transparent 80%);filter:blur(55px);animation:cloud-drift-5 75s ease-in-out infinite;}
.cloud-6{width:500px;height:160px;top:18%;left:30%;background:radial-gradient(ellipse 60% 50% at 50% 45%,rgba(255,255,255,.07) 0%,rgba(216,180,254,.06) 42%,transparent 80%);filter:blur(30px);animation:cloud-drift-6 40s ease-in-out infinite;}
.cloud-7{width:800px;height:250px;bottom:5%;right:-200px;background:radial-gradient(ellipse 60% 50% at 55% 50%,rgba(196,162,251,.08) 0%,rgba(109,40,217,.05) 52%,transparent 78%);filter:blur(58px);animation:cloud-drift-7 80s ease-in-out infinite reverse;}
.cloud-8{width:400px;height:130px;top:8%;left:40%;background:radial-gradient(ellipse 65% 55% at 50% 50%,rgba(224,242,255,.09) 0%,rgba(125,211,252,.05) 48%,transparent 78%);filter:blur(26px);animation:cloud-drift-8 35s ease-in-out infinite;}

@keyframes cloud-drift-1{0%{transform:translate(0,0) scaleX(1);opacity:.9;}30%{transform:translate(180px,30px) scaleX(1.06);opacity:1;}60%{transform:translate(320px,-20px) scaleX(.97);opacity:.85;}100%{transform:translate(0,0) scaleX(1);opacity:.9;}}
@keyframes cloud-drift-2{0%{transform:translate(0,0) scaleX(1);opacity:.8;}40%{transform:translate(-200px,40px) scaleX(1.08);opacity:.95;}70%{transform:translate(-100px,-30px) scaleX(.95);opacity:.75;}100%{transform:translate(0,0) scaleX(1);opacity:.8;}}
@keyframes cloud-drift-3{0%{transform:translate(0,0) scaleY(1);opacity:.85;}25%{transform:translate(150px,-25px) scaleY(1.1);opacity:1;}50%{transform:translate(280px,15px) scaleY(.95);opacity:.8;}75%{transform:translate(120px,40px) scaleY(1.05);opacity:.9;}100%{transform:translate(0,0) scaleY(1);opacity:.85;}}
@keyframes cloud-drift-4{0%{transform:translate(0,0);opacity:.75;}35%{transform:translate(-160px,-35px);opacity:.9;}65%{transform:translate(-240px,20px);opacity:.7;}100%{transform:translate(0,0);opacity:.75;}}
@keyframes cloud-drift-5{0%{transform:translate(0,0) scale(1);opacity:.8;}50%{transform:translate(200px,-50px) scale(1.04);opacity:.95;}100%{transform:translate(0,0) scale(1);opacity:.8;}}
@keyframes cloud-drift-6{0%{transform:translate(0,0);opacity:.7;}20%{transform:translate(60px,-20px);opacity:.9;}50%{transform:translate(110px,10px);opacity:.75;}80%{transform:translate(40px,25px);opacity:.85;}100%{transform:translate(0,0);opacity:.7;}}
@keyframes cloud-drift-7{0%{transform:translate(0,0) scaleX(1);opacity:.7;}40%{transform:translate(-180px,-40px) scaleX(1.07);opacity:.85;}100%{transform:translate(0,0) scaleX(1);opacity:.7;}}
@keyframes cloud-drift-8{0%{transform:translate(0,0) scale(1);opacity:.65;}33%{transform:translate(-80px,-15px) scale(1.1);opacity:.85;}66%{transform:translate(60px,10px) scale(.92);opacity:.7;}100%{transform:translate(0,0) scale(1);opacity:.65;}}

@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes shimmer{0%{background-position:-200% center;}100%{background-position:200% center;}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 20px rgba(34,211,238,.4),0 0 40px rgba(168,85,247,.2);}50%{box-shadow:0 0 40px rgba(34,211,238,.6),0 0 60px rgba(168,85,247,.4);}}
@keyframes watermark-pulse{0%,100%{filter:drop-shadow(0 0 8px rgba(168,85,247,.4)) drop-shadow(0 0 16px rgba(168,85,247,.2));}50%{filter:drop-shadow(0 0 20px rgba(168,85,247,.7)) drop-shadow(0 0 35px rgba(168,85,247,.4));}}
@keyframes fadeIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes slideInRight{from{transform:translateX(100%);}to{transform:translateX(0);}}

/* ============================================================ LAYOUT */
.app-container {
    width:100%; max-width:1200px;
    display:flex; flex-direction:column; gap:1rem;
    position:relative; z-index:2; padding-bottom:100px;
}

/* ============================================================ HEADER */
header {
    text-align:center; margin-bottom:0.2rem;
    animation:float 7s ease-in-out infinite;
    position:relative; z-index:2;
}
h1 {
    font-size:2.6rem; font-family:var(--font-heading); font-weight:600;
    letter-spacing:4px; line-height:1.15;
    background:linear-gradient(120deg,#fff 0%,var(--accent-cyan) 48%,var(--accent-violet) 100%);
    background-size:220% auto;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    animation:shimmer 3.5s linear infinite;
}
.subtitle {
    font-family:var(--font-ui); font-weight:400;
    color:var(--text-muted); letter-spacing:3px;
    text-transform:uppercase; font-size:0.72rem; margin-top:0.5rem;
}

/* ============================================================ NAV TABS */
.main-nav {
    display:flex; gap:4px;
    background:rgba(0,0,0,.3);
    border:1px solid var(--glass-border);
    border-radius:16px; padding:5px;
    position:relative; z-index:2;
    width:100%; max-width:1200px;
}
.nav-tab {
    flex:1; padding:0.65rem 0.5rem;
    background:transparent; border:1px solid transparent; border-radius:12px;
    color:var(--text-muted); font-family:var(--font-ui);
    font-size:0.75rem; font-weight:500;
    letter-spacing:0.8px; text-transform:uppercase;
    cursor:pointer; transition:all 0.22s var(--ease);
    display:flex; align-items:center; justify-content:center; gap:0.4rem;
    white-space:nowrap;
}
.nav-tab svg{width:15px;height:15px;flex-shrink:0;}
.nav-tab:hover{color:var(--text-main);background:rgba(255,255,255,.04);}
.nav-tab.active{background:rgba(168,85,247,.12);border-color:rgba(168,85,247,.22);color:#c4b5fd;}
.nav-tab.nav-journal:hover,.nav-tab.nav-journal.active{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.2);color:var(--accent-cyan);}

/* ============================================================ SECTION PANES */
.section-pane{display:none;flex-direction:column;gap:1rem;}
.section-pane.active{display:flex;animation:fadeIn 0.4s var(--ease-out);}

/* ============================================================ CARDS */
.card {
    background:var(--glass-bg);
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border:1px solid var(--glass-border);
    border-radius:20px; padding:2rem;
    box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04);
    transition:border-color 0.3s var(--ease),box-shadow 0.3s var(--ease);
    position:relative; overflow:hidden;
}
.card:hover{border-color:var(--glass-border-h);box-shadow:0 12px 40px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.06);}
.card::after{
    content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
    background:linear-gradient(90deg,transparent,rgba(168,85,247,.22),rgba(34,211,238,.18),transparent);
    pointer-events:none;
}

/* ============================================================ INSTALL BTN */
.btn-install {
    padding:.55rem 1.1rem;
    background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.25);
    border-radius:10px; color:var(--accent-pop);
    font-family:var(--font-ui); font-size:.75rem; font-weight:500;
    letter-spacing:1px; text-transform:uppercase;
    cursor:pointer; transition:all .25s var(--ease);
    display:inline-flex; align-items:center; gap:.4rem;
}
.btn-install:hover{background:rgba(34,211,238,.16);border-color:rgba(34,211,238,.4);box-shadow:0 4px 18px rgba(34,211,238,.2);transform:translateY(-1px);}

/* ============================================================ TEXTAREA */
textarea {
    width:100%; height:260px;
    background:rgba(0,0,0,.22) url('dreamtime-icon.png') no-repeat center bottom 20px;
    background-size:90px 90px;
    border:1px solid var(--glass-border); border-radius:14px;
    padding:1.4rem; padding-bottom:130px;
    color:var(--text-main); font-size:1.1rem;
    font-family:var(--font-body); line-height:1.7;
    resize:none; transition:all .3s var(--ease); cursor:pointer;
}
@media(min-width:640px){
    textarea{background-size:130px 130px;padding-bottom:165px;}
    textarea:not(:placeholder-shown){padding-bottom:1.4rem;}
}
textarea:focus{outline:none;border-color:rgba(34,211,238,.4);background-color:rgba(0,0,0,.35);box-shadow:0 0 0 1px rgba(34,211,238,.12),0 0 24px rgba(34,211,238,.12);cursor:text;}
textarea:not(:placeholder-shown){background-image:none;padding-bottom:1.4rem;}
textarea::placeholder{color:var(--text-muted);}
textarea:empty{animation:watermark-pulse 3s ease-in-out infinite;}

/* ============================================================ BUTTONS */
.btn-main {
    width:100%; margin-top:1.4rem; padding:1.1rem;
    background:rgba(168,85,247,.12); backdrop-filter:blur(10px);
    border:1px solid rgba(168,85,247,.28); border-radius:12px;
    color:#e2d9f3; font-family:var(--font-ui); font-weight:600;
    font-size:.82rem; letter-spacing:2.5px; text-transform:uppercase;
    cursor:pointer; transition:all .28s var(--ease);
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
    box-shadow:0 2px 16px rgba(168,85,247,.15),inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-main::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transition:left .55s ease;}
.btn-main:hover::before{left:100%;}
.btn-main:hover{background:rgba(168,85,247,.22);border-color:rgba(168,85,247,.45);box-shadow:0 6px 26px rgba(168,85,247,.35),inset 0 1px 0 rgba(255,255,255,.12);transform:translateY(-2px);color:#fff;}
.btn-main:active{transform:translateY(0);}

.btn-secondary {
    padding:.7rem 1.3rem;
    background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.25);
    border-radius:10px; color:var(--accent-pop);
    font-family:var(--font-ui); font-weight:500;
    font-size:.75rem; letter-spacing:1px; text-transform:uppercase;
    cursor:pointer; transition:all .25s var(--ease);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-secondary:hover{background:rgba(34,211,238,.16);border-color:rgba(34,211,238,.4);box-shadow:0 4px 18px rgba(34,211,238,.2);transform:translateY(-1px);}

.btn-icon {
    padding:.55rem .7rem;
    background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.25);
    border-radius:8px; color:var(--accent-pop);
    cursor:pointer; transition:all .25s var(--ease);
    display:flex; align-items:center; gap:.4rem;
    font-family:var(--font-ui); font-size:.75rem; letter-spacing:.5px;
}
.btn-icon:hover{background:rgba(34,211,238,.16);border-color:var(--accent-pop);transform:translateY(-1px);}

.btn-cache{padding:.5rem 1rem;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.22);border-radius:8px;color:var(--danger);font-family:var(--font-ui);font-weight:500;font-size:.72rem;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;transition:all .25s var(--ease);}
.btn-cache:hover{background:rgba(248,113,113,.16);border-color:rgba(248,113,113,.4);box-shadow:0 4px 14px rgba(248,113,113,.2);transform:translateY(-1px);}
.btn-clear{background:none;border:none;color:var(--text-muted);font-family:var(--font-ui);font-size:.8rem;cursor:pointer;transition:color .2s ease;padding:.4rem .8rem;}
.btn-clear:hover{color:var(--danger);text-decoration:underline;}

/* ============================================================ LOADING */
.orb{width:56px;height:56px;margin:0 auto 1rem;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--accent-cyan),var(--accent-violet));filter:blur(4px);animation:pulse-glow 2s ease-in-out infinite;}

/* ============================================================ RESULTS */
.hidden{display:none!important;}
.fade-in{animation:fadeIn .9s var(--ease-out) forwards;}
.result-content{font-size:1.05rem;line-height:1.85;color:var(--text-body);}
.highlight{color:var(--accent-pop);font-weight:600;padding:0 2px;border-bottom:1px solid rgba(34,211,238,.3);}

/* ============================================================ JOURNAL ENTRIES */
.journal-entry {
    border:1px solid var(--glass-border); border-radius:14px;
    padding:1.1rem 1.3rem; margin-bottom:.75rem;
    background:rgba(255,255,255,.02);
    transition:all .22s var(--ease); position:relative; overflow:hidden;
}
.journal-entry::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent-violet),var(--accent-pop));border-radius:3px 0 0 3px;opacity:.45;transition:opacity .2s ease;}
.journal-entry:hover{background:rgba(255,255,255,.04);border-color:var(--glass-border-h);box-shadow:0 4px 18px rgba(0,0,0,.25);}
.journal-entry:hover::before{opacity:1;}
.journal-date{font-family:var(--font-ui);font-size:.7rem;color:var(--accent-pop);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:.45rem;}
.journal-text{font-style:italic;color:var(--text-body);margin-bottom:.55rem;opacity:.9;line-height:1.6;font-size:1rem;}
.journal-preview{overflow:hidden;}
.journal-actions{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end;}
#journal-preview-list{max-height:300px;overflow-y:auto;}

/* ============================================================ SYMBOL LIBRARY */
.library-card{padding:1.8rem 2rem;}
.library-header{margin-bottom:1.4rem;}
.library-header h2{font-family:var(--font-heading);font-size:1.5rem;font-weight:600;color:var(--text-main);letter-spacing:1.5px;margin-bottom:.3rem;}
.library-header p{font-family:var(--font-ui);font-size:.72rem;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;}

/* Search */
.library-search-wrap{position:relative;margin-bottom:1rem;}
.library-search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;width:15px;height:15px;}
.library-search{width:100%;padding:.85rem 1rem .85rem 2.8rem;background:rgba(0,0,0,.22);border:1px solid var(--glass-border);border-radius:12px;color:var(--text-main);font-size:.95rem;font-family:var(--font-body);transition:all .25s var(--ease);}
.library-search:focus{outline:none;border-color:rgba(34,211,238,.35);box-shadow:0 0 0 1px rgba(34,211,238,.1),0 0 20px rgba(34,211,238,.1);}
.library-search::placeholder{color:var(--text-muted);}

/* Category pills */
.category-pills-wrap {
    position: relative;
    margin-bottom: .8rem;
}

/* Fade hints — show when content overflows left or right */
.category-pills-wrap::before,
.category-pills-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 6px;
    width: 28px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity .25s ease;
}
.category-pills-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-deep), transparent);
}
.category-pills-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-deep), transparent);
}
.category-pills-wrap.can-scroll-left::before  { opacity: 1; }
.category-pills-wrap.can-scroll-right::after  { opacity: 1; }

.category-pills{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.6rem;scrollbar-width:none;-ms-overflow-style:none;}
.category-pills::-webkit-scrollbar{display:none;}

/* Desktop (hover-capable): show a subtle thin scrollbar */
@media(hover:hover){
    .category-pills{
        scrollbar-width: thin;
        scrollbar-color: rgba(168,85,247,.22) transparent;
        padding-bottom: .5rem;
    }
    .category-pills::-webkit-scrollbar{display:block;height:3px;}
    .category-pills::-webkit-scrollbar-track{background:transparent;}
    .category-pills::-webkit-scrollbar-thumb{background:rgba(168,85,247,.22);border-radius:3px;}
    .category-pills::-webkit-scrollbar-thumb:hover{background:rgba(168,85,247,.5);}
}
.cat-pill{flex-shrink:0;padding:.38rem .9rem;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:20px;color:var(--text-muted);font-family:var(--font-ui);font-size:.72rem;font-weight:500;letter-spacing:.4px;cursor:pointer;transition:all .2s var(--ease);white-space:nowrap;}
.cat-pill:hover{background:rgba(168,85,247,.1);border-color:rgba(168,85,247,.28);color:#c4b5fd;}
.cat-pill.active{background:rgba(168,85,247,.14);border-color:rgba(168,85,247,.35);color:#d8b4fe;}

/* Meta */
.library-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.1rem;font-family:var(--font-ui);font-size:.72rem;color:var(--text-muted);letter-spacing:.5px;}

/* Grid */
.symbol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;}
@media(max-width:480px){.symbol-grid{grid-template-columns:repeat(2,1fr);}}

.symbol-card {
    background:rgba(255,255,255,.022);
    border:1px solid rgba(255,255,255,.055);
    border-radius:12px; padding:.9rem;
    cursor:pointer; transition:all .22s var(--ease);
    position:relative; overflow:hidden;
}
.symbol-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:transparent;transition:background .22s ease;}
.symbol-card:hover{background:rgba(255,255,255,.048);border-color:rgba(168,85,247,.3);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3);}
.symbol-card:hover::before{background:linear-gradient(90deg,var(--accent-violet),var(--accent-cyan));}

.symbol-card-name{font-family:var(--font-heading);font-size:.78rem;font-weight:600;color:var(--text-main);margin-bottom:.35rem;letter-spacing:.6px;text-transform:capitalize;}
.symbol-card-preview{font-size:.74rem;color:var(--text-muted);line-height:1.42;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.symbol-card-cat{display:block;margin-top:.55rem;font-family:var(--font-ui);font-size:.6rem;letter-spacing:.3px;color:var(--text-faint);text-transform:uppercase;}
.symbol-empty{grid-column:1/-1;text-align:center;padding:2.5rem 1rem;color:var(--text-muted);font-family:var(--font-ui);font-size:.85rem;}

/* ============================================================ SYMBOL DETAIL DRAWER */
#symbol-detail-drawer{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);z-index:1100;display:none;opacity:0;transition:opacity .3s ease;}
#symbol-detail-drawer.active{display:flex;justify-content:flex-end;align-items:stretch;opacity:1;}

.symbol-detail-panel {
    width:92%; max-width:560px;
    background:linear-gradient(145deg,rgba(12,18,32,.99),rgba(20,15,50,.99));
    backdrop-filter:blur(24px);
    border-left:1px solid var(--glass-border);
    display:flex; flex-direction:column;
    box-shadow:-10px 0 50px rgba(0,0,0,.5);
    animation:slideInRight .38s var(--ease-out); overflow:hidden;
}
.symbol-detail-header{padding:1.8rem 2rem;border-bottom:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:flex-start;background:rgba(168,85,247,.04);flex-shrink:0;}
.symbol-detail-title-block{flex:1;min-width:0;}
.symbol-detail-cat{font-family:var(--font-ui);font-size:.65rem;font-weight:500;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);margin-bottom:.4rem;}
.symbol-detail-name{font-family:var(--font-heading);font-size:1.75rem;font-weight:600;letter-spacing:1.5px;background:linear-gradient(120deg,#fff 0%,var(--accent-cyan) 60%,var(--accent-violet) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2;}

.symbol-detail-body{flex:1;overflow-y:auto;padding:1.8rem 2rem;display:flex;flex-direction:column;gap:1.4rem;}

.detail-section-label{font-family:var(--font-ui);font-size:.64rem;font-weight:600;text-transform:uppercase;letter-spacing:2.2px;color:var(--accent-pop);margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem;}
.detail-section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(34,211,238,.25),transparent);}

.detail-meaning-text{font-family:var(--font-body);font-size:1.05rem;line-height:1.85;color:var(--text-body);}

.detail-reflection{background:rgba(168,85,247,.07);border:1px solid rgba(168,85,247,.18);border-radius:12px;padding:1.1rem 1.3rem;}
.detail-reflection-label{font-family:var(--font-ui);font-size:.62rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--accent-violet);margin-bottom:.55rem;display:block;}
.detail-reflection p{font-family:var(--font-body);font-size:1rem;font-style:italic;line-height:1.7;color:#d8b4fe;}

.expanded-tabs{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.9rem;}
.exp-tab{padding:.35rem .85rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:var(--text-muted);font-family:var(--font-ui);font-size:.7rem;font-weight:500;letter-spacing:.4px;cursor:pointer;transition:all .2s ease;}
.exp-tab:hover{color:var(--text-main);background:rgba(255,255,255,.07);}
.exp-tab.active{background:rgba(168,85,247,.14);border-color:rgba(168,85,247,.3);color:#d8b4fe;}

.expanded-content{font-family:var(--font-body);font-size:1rem;line-height:1.82;color:var(--text-body);animation:fadeIn .3s ease;}

.archetype-badges{display:flex;flex-wrap:wrap;gap:.4rem;}
.archetype-badge{padding:.3rem .8rem;background:rgba(34,211,238,.06);border:1px solid rgba(34,211,238,.18);border-radius:20px;font-family:var(--font-ui);font-size:.68rem;color:rgba(34,211,238,.85);letter-spacing:.3px;}

/* ============================================================ WELCOME MODAL */
.welcome-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(12px);z-index:2000;display:none;justify-content:center;align-items:center;padding:1rem;opacity:0;transition:opacity .3s ease;}
.welcome-overlay.active{display:flex;opacity:1;}
.welcome-container{width:100%;max-width:820px;max-height:92vh;background:linear-gradient(145deg,rgba(12,18,32,.99),rgba(20,15,50,.99));border:1px solid var(--glass-border);border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.65),0 0 40px rgba(168,85,247,.15);overflow-y:auto;display:flex;flex-direction:column;animation:fadeIn .4s var(--ease-out);}
.welcome-header{padding:2rem 2.5rem;background:rgba(168,85,247,.07);border-bottom:1px solid var(--glass-border);flex-shrink:0;}
.welcome-header-inner{display:flex;align-items:center;gap:1.5rem;}
.welcome-icon{width:86px;height:86px;flex-shrink:0;filter:drop-shadow(0 0 14px rgba(168,85,247,.6));animation:watermark-pulse 3s ease-in-out infinite;}
.welcome-title-block{display:flex;flex-direction:column;gap:.45rem;}
.welcome-title-block h2{font-family:var(--font-heading);font-size:1.6rem;font-weight:600;margin:0;background:linear-gradient(120deg,#fff 0%,var(--accent-cyan) 50%,var(--accent-violet) 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.25;}
.welcome-tagline{font-family:var(--font-ui);color:var(--text-muted);font-size:.78rem;letter-spacing:.5px;font-style:italic;margin:0;}
.welcome-body{padding:2rem 2.5rem;flex:1;display:flex;flex-direction:column;gap:0;}
.welcome-sections-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:0;}
.privacy-section{background:rgba(168,85,247,.04);border-left:3px solid rgba(168,85,247,.3);border-radius:0 12px 12px 0;padding:1.1rem 1.3rem;}
.privacy-section h3{font-family:var(--font-ui);color:var(--accent-pop);font-size:1rem;font-weight:500;margin:0 0 .7rem 0;}
.privacy-section p{color:var(--text-body);line-height:1.75;margin:0;font-size:.92rem;}
.welcome-checkbox{display:flex;align-items:center;gap:.7rem;cursor:pointer;color:var(--text-muted);font-family:var(--font-ui);font-size:.88rem;justify-content:center;}
.welcome-checkbox input[type="checkbox"]{width:16px;height:16px;cursor:pointer;}
.welcome-footer{padding:1rem 2.5rem;border-top:1px solid var(--glass-border);background:rgba(0,0,0,.2);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;flex-shrink:0;}
.btn-cache-small{padding:.38rem .75rem;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.25);border-radius:7px;color:var(--danger);font-family:var(--font-ui);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:all .2s ease;}
.btn-cache-small:hover{background:rgba(248,113,113,.18);border-color:rgba(248,113,113,.45);}

/* ============================================================ DRAWERS */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);z-index:1000;display:none;opacity:0;transition:opacity .3s ease;}
.drawer-overlay.active{display:flex;justify-content:flex-end;align-items:stretch;opacity:1;}
.drawer-container{width:90%;max-width:580px;background:linear-gradient(145deg,rgba(12,18,32,.97),rgba(18,12,42,.97));backdrop-filter:blur(24px);border-left:1px solid var(--glass-border);display:flex;flex-direction:column;box-shadow:-10px 0 50px rgba(0,0,0,.5);animation:slideInRight .38s var(--ease-out);}
.drawer-header{padding:1.8rem 2rem;border-bottom:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.02);flex-shrink:0;}
.drawer-header h2{font-family:var(--font-heading);font-size:1.5rem;font-weight:600;color:var(--accent-pop);margin:0;letter-spacing:.5px;}
.btn-close{background:none;border:none;color:var(--text-muted);font-size:2.2rem;cursor:pointer;transition:all .25s ease;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;line-height:1;}
.btn-close:hover{color:var(--accent-pop);background:rgba(255,255,255,.05);transform:rotate(90deg);}
.drawer-body{flex:1;padding:1.8rem 2rem;overflow-y:auto;}
.drawer-footer{padding:1.3rem 2rem;border-top:1px solid var(--glass-border);display:flex;gap:.8rem;justify-content:space-between;background:rgba(255,255,255,.02);flex-shrink:0;}

/* ============================================================ JOURNAL CONTROLS */
.journal-controls{margin-bottom:1.5rem;display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;}
.search-input{flex:1;min-width:180px;padding:.7rem 1.1rem;background:rgba(0,0,0,.3);border:1px solid var(--glass-border);border-radius:10px;color:var(--text-main);font-family:var(--font-body);font-size:.92rem;transition:all .25s ease;}
.search-input:focus{outline:none;border-color:rgba(34,211,238,.35);box-shadow:0 0 14px rgba(34,211,238,.15);}
.journal-stats{font-family:var(--font-ui);color:var(--text-muted);font-size:.8rem;display:flex;align-items:center;gap:.8rem;}

/* ============================================================ FORMS */
.form-group{margin-bottom:1.3rem;}
.form-group label{display:block;font-family:var(--font-ui);color:var(--accent-pop);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.45rem;}
.form-group input[type="datetime-local"],.form-group input[type="text"],.form-group textarea{width:100%;padding:.75rem 1rem;background:rgba(0,0,0,.28);border:1px solid var(--glass-border);border-radius:10px;color:var(--text-main);font-size:.97rem;font-family:var(--font-body);transition:all .25s ease;}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:rgba(34,211,238,.35);box-shadow:0 0 14px rgba(34,211,238,.12);}
.form-group textarea{resize:vertical;line-height:1.6;}
.form-actions{display:flex;gap:.8rem;margin-top:1.8rem;}
.form-actions button{flex:1;}

/* ============================================================ FOOTER */
footer{position:fixed;bottom:0;left:0;right:0;padding:1.2rem 2rem;background:linear-gradient(180deg,transparent 0%,rgba(8,13,26,.92) 20%,rgba(8,13,26,.98) 100%);backdrop-filter:blur(20px);border-top:1px solid var(--glass-border);z-index:100;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;}
.footer-text{font-family:var(--font-ui);color:var(--text-muted);font-size:.72rem;letter-spacing:.4px;text-align:center;flex:1;}
.footer-text a{color:rgba(34,211,238,.7);text-decoration:none;transition:color .2s ease;}
.footer-text a:hover{color:var(--accent-cyan);}

/* ============================================================ SCROLLBARS */
.drawer-body::-webkit-scrollbar,#journal-preview-list::-webkit-scrollbar,.symbol-detail-body::-webkit-scrollbar{width:5px;}
.drawer-body::-webkit-scrollbar-track,#journal-preview-list::-webkit-scrollbar-track,.symbol-detail-body::-webkit-scrollbar-track{background:transparent;}
.drawer-body::-webkit-scrollbar-thumb,#journal-preview-list::-webkit-scrollbar-thumb,.symbol-detail-body::-webkit-scrollbar-thumb{background:rgba(168,85,247,.3);border-radius:10px;}
.drawer-body::-webkit-scrollbar-thumb:hover,.symbol-detail-body::-webkit-scrollbar-thumb:hover{background:rgba(168,85,247,.5);}

/* ============================================================
   INFO PILL BUTTON (header)
   ============================================================ */
.btn-info-pill {
    display:inline-flex; align-items:center; gap:.4rem;
    margin-top:.7rem; padding:.42rem 1.1rem;
    background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(34,211,238,.12));
    border:1px solid rgba(168,85,247,.38);
    border-radius:20px; color:#d8b4fe;
    font-family:var(--font-ui); font-size:.7rem; font-weight:500;
    letter-spacing:.8px; cursor:pointer; transition:all .25s var(--ease);
    box-shadow:0 0 14px rgba(168,85,247,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-info-pill:hover{
    background:linear-gradient(135deg,rgba(168,85,247,.3),rgba(34,211,238,.2));
    border-color:rgba(168,85,247,.6);
    color:#fff;
    box-shadow:0 0 22px rgba(168,85,247,.35), inset 0 1px 0 rgba(255,255,255,.12);
    transform:translateY(-1px);
}

/* ============================================================
   INFO DRAWER CONTENT
   ============================================================ */
.info-drawer-body{padding:0!important;}

.info-section{padding:1.5rem 2rem;border-bottom:1px solid var(--glass-border);}
.info-section-last{border-bottom:none;}
.info-section-icon{font-size:1.25rem;margin-bottom:.5rem;line-height:1;}
.info-section-title{font-family:var(--font-heading);font-size:1rem;font-weight:600;color:var(--text-main);letter-spacing:.8px;margin:0 0 .8rem 0;}
.info-section-body{font-family:var(--font-body);font-size:.97rem;line-height:1.78;color:var(--text-body);margin:0;}
.info-link{color:rgba(34,211,238,.75);text-decoration:none;transition:color .2s ease;}
.info-link:hover{color:var(--accent-cyan);}

.info-how-item{margin-bottom:.9rem;padding:.9rem 1.1rem;background:rgba(255,255,255,.022);border:1px solid var(--glass-border);border-radius:12px;}
.info-how-item:last-child{margin-bottom:0;}
.info-how-label{display:flex;align-items:center;gap:.45rem;font-family:var(--font-ui);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--accent-pop);margin-bottom:.5rem;}
.info-how-item p{font-family:var(--font-body);font-size:.95rem;line-height:1.75;color:var(--text-body);margin:0;}
.info-how-item strong{color:var(--text-main);font-weight:600;}
.info-how-item em{color:rgba(168,85,247,.85);font-style:italic;}

.info-framework-grid{display:flex;flex-direction:column;gap:.55rem;margin-top:.85rem;}
.info-framework-item{padding:.8rem 1rem;background:rgba(168,85,247,.04);border-left:2px solid rgba(168,85,247,.28);border-radius:0 10px 10px 0;}
.info-framework-label{display:block;font-family:var(--font-ui);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--accent-pop);margin-bottom:.28rem;}
.info-framework-desc{display:block;font-family:var(--font-body);font-size:.9rem;line-height:1.65;color:var(--text-body);}


/* ============================================================
   CHAT UI
   ============================================================ */

/* Chat window — the scrollable message pane */
.chat-window {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    max-height: 62vh;
    flex: 1;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.4rem 1.4rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scroll-behavior: smooth;
}

/* Scrollbar for chat */
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(168,85,247,.25); border-radius: 4px; }

/* Message row */
.chat-msg {
    display: flex;
    gap: 0.7rem;
    align-items: flex-end;
    max-width: 100%;
}
.chat-msg.user {
    flex-direction: row-reverse;
    align-self: flex-end;
    max-width: 88%;
}
.chat-msg.ai { align-self: flex-start; max-width: 100%; }

/* Avatar — user side only (AI moon is now inline in meta) */
.chat-avatar--user {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; flex-shrink: 0;
    background: rgba(34,211,238,.08);
    border: 1px solid rgba(34,211,238,.18);
    align-self: flex-end;
}

/* Message body wrapper */
.chat-msg-body { flex: 1; min-width: 0; }
.chat-msg-body--user { text-align: right; }

/* Timestamp */
.chat-meta {
    font-family: var(--font-ui);
    font-size: 0.64rem;
    color: rgba(255,255,255,.75);
    margin-bottom: 0.32rem;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.chat-meta--user {
    text-align: right;
    justify-content: flex-end;
}
.chat-meta-moon {
    font-size: 0.72rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Bubbles */
.chat-bubble {
    display: block;
    padding: 1rem 1.25rem;
    border-radius: 18px 18px 18px 4px;
    background: rgba(255,255,255,.028);
    border: 1px solid var(--glass-border);
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.78;
    color: var(--text-body);
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}
.chat-bubble--user {
    display: inline-block;
    border-radius: 18px 18px 4px 18px;
    background: rgba(168,85,247,.12);
    border-color: rgba(168,85,247,.22);
    color: var(--text-main);
    font-style: italic;
    width: auto;
    max-width: 100%;
}

/* Typing indicator */
.chat-typing {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.4rem;
    border-top: 1px solid var(--glass-border);
    flex-shrink: 0;
}
.chat-typing-avatar { font-size: 0.85rem; }
.chat-typing-text {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    font-style: italic;
}
.chat-typing-dots {
    display: flex; gap: 0.28rem; align-items: center;
}
.chat-typing-dots span {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent-violet); opacity: .4;
    animation: typing-dot 1.4s ease-in-out infinite;
}
.chat-typing-dots span:nth-child(2) { animation-delay: .22s; }
.chat-typing-dots span:nth-child(3) { animation-delay: .44s; }
@keyframes typing-dot {
    0%,60%,100% { opacity:.3; transform:translateY(0); }
    30%          { opacity:1;  transform:translateY(-4px); }
}

/* Chat input bar */
.chat-input-bar {
    display: flex;
    gap: 0.6rem;
    align-items: flex-end;
    background: rgba(8,6,24,.55);
    border: 1px solid rgba(168,85,247,.28);
    border-radius: 16px;
    padding: 0.65rem 0.65rem 0.65rem 1rem;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
    box-shadow:
        0 0 0 1px rgba(168,85,247,.08),
        0 4px 24px rgba(0,0,0,.35),
        0 0 32px rgba(168,85,247,.07),
        inset 0 1px 0 rgba(255,255,255,.05);
}
.chat-input-bar:focus-within {
    border-color: rgba(168,85,247,.55);
    box-shadow:
        0 0 0 1px rgba(168,85,247,.18),
        0 4px 28px rgba(0,0,0,.4),
        0 0 40px rgba(168,85,247,.18),
        inset 0 1px 0 rgba(255,255,255,.07);
}

/* Override the base textarea rule for the chat textarea */
.chat-textarea {
    flex: 1;
    height: auto !important;
    min-height: 44px;
    max-height: 160px;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0.3rem 0.2rem !important;
    padding-bottom: 0.3rem !important;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.6;
    resize: none;
    overflow-y: auto;
    cursor: text;
}
.chat-textarea::placeholder { color: rgba(168,85,247,.55); font-style: italic; letter-spacing: 0.2px; }

/* Send button */
.btn-send {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 12px;
    background: rgba(168,85,247,.14);
    border: 1px solid rgba(168,85,247,.28);
    color: #c4b5fd;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .22s var(--ease);
}
.btn-send:hover {
    background: rgba(168,85,247,.26);
    border-color: rgba(168,85,247,.48);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(168,85,247,.28);
}
.btn-send:active { transform: translateY(0); }


/* ============================================================
   JOURNAL OPEN BAR
   ============================================================ */
.journal-open-bar {
    display: flex;
    gap: .6rem;
    align-items: center;
}

.btn-journal-open {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85rem 1.2rem;
    background: rgba(34,211,238,.07);
    border: 1px solid rgba(34,211,238,.2);
    border-radius: 14px;
    color: var(--accent-pop);
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .25s var(--ease);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.btn-journal-open:hover {
    background: rgba(34,211,238,.14);
    border-color: rgba(34,211,238,.38);
    box-shadow: 0 4px 18px rgba(34,211,238,.18);
    transform: translateY(-1px);
}

.btn-journal-add {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .85rem 1rem;
    background: rgba(168,85,247,.08);
    border: 1px solid rgba(168,85,247,.2);
    border-radius: 14px;
    color: #c4b5fd;
    font-family: var(--font-ui);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .6px;
    cursor: pointer;
    transition: all .25s var(--ease);
    white-space: nowrap;
}
.btn-journal-add:hover {
    background: rgba(168,85,247,.16);
    border-color: rgba(168,85,247,.38);
    transform: translateY(-1px);
}

/* ============================================================ RESPONSIVE */
@media(max-width:640px){
    body{padding:1rem .8rem 0;}
    h1{font-size:2rem;letter-spacing:2.5px;}
    .card,.library-card{padding:1.4rem;}
    .main-nav{border-radius:13px;}
    .nav-tab{font-size:.68rem;padding:.6rem .3rem;}
    .drawer-container,.symbol-detail-panel{width:100%;}
    .form-actions{flex-direction:column;}
    footer{flex-direction:column;padding:.9rem 1rem;}
    .welcome-container{border-radius:16px;}
    .welcome-header{padding:1.2rem;}
    .welcome-icon{width:60px;height:60px;}
    .welcome-title-block h2{font-size:1.25rem;}
    .welcome-body{padding:1.2rem;}
    .welcome-sections-grid{grid-template-columns:1fr;gap:.7rem;}
    .welcome-footer{padding:.8rem 1.2rem;}
    .symbol-detail-header{padding:1.3rem 1.4rem;}
    .symbol-detail-body{padding:1.3rem 1.4rem;}
}

/* ============================================================
   RESULTS HEADER
   ============================================================ */
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--glass-border);
}
.results-label {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-pop);
    letter-spacing: 0.8px;
}
.results-time {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    color: rgba(255,255,255,.5);
    letter-spacing: 0.4px;
}

/* Short dream prompt (prepended inside results card) */
.short-dream-prompt {
    padding: .85rem 1rem;
    background: rgba(168,85,247,.06);
    border: 1px solid rgba(168,85,247,.15);
    border-radius: 10px;
    margin-bottom: 1.4rem;
}
.short-dream-label {
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--accent-violet);
    margin-bottom: .5rem;
}
.short-dream-prompt p {
    font-family: var(--font-body);
    font-size: .95rem;
    line-height: 1.72;
    color: var(--text-body);
    margin: 0;
}

/* ============================================================
   DESKTOP LAYOUT — ≥ 860px
   ============================================================ */
@media(min-width:860px){
    body { padding: 1.25rem 3rem 0; }

    .app-container,
    .main-nav { max-width: 1160px; }

    h1 { font-size: 2.9rem; letter-spacing: 5px; }
    .nav-tab { font-size: .8rem; padding: .7rem 1rem; }

    /* Chat window — taller on desktop */
    .chat-window { max-height: 52vh; min-height: 280px; }

    /* Textarea taller */
    textarea { height: 300px; }

    /* Symbol grid — 4 columns */
    .symbol-grid { grid-template-columns: repeat(4, 1fr); gap: .75rem; }

    /* Library wider padding */
    .library-card { padding: 2.2rem 2.4rem; }

    /* Drawers wider */
    .drawer-container { max-width: 680px; }
    .symbol-detail-panel { max-width: 640px; }
}

@media(min-width:1160px){
    body { padding: 1.25rem 5rem 0; }
    .symbol-grid { grid-template-columns: repeat(5, 1fr); }
}