:root{
  --bg:#0C091B; --surface:#120A24; --raised:#1B1232; --line:#2C2345;
  --gold:#D6B56D; --gold-bright:#E8C87E; --violet:#8D6BFF;
  --text:#F7F0E6; --text-2:#B8AFCB; --text-3:#7B7294;
  --danger:#E4664A; --ok:#57AD7B;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.6 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body[data-textsize="lg"]{font-size:17px}
body[data-textsize="sm"]{font-size:14px}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 15% 9%, color-mix(in srgb, var(--gold) 26%, transparent), transparent 62%),
    radial-gradient(circle at 85% 88%, color-mix(in srgb, var(--violet) 20%, transparent), transparent 55%);
}
a{color:var(--gold-bright)}
h1,h2,h3{font-family:Georgia,"Playfair Display",serif; margin:0 0 8px}
button{font:inherit}
img{max-width:100%}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

.app-shell{display:flex; min-height:100vh; width:100%; max-width:100vw}

/* ---- sidebar (desktop) ---- */
.sidebar{
  width:220px; flex:none; border-right:1px solid var(--line);
  padding:18px 12px; display:flex; flex-direction:column; gap:4px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .brand{display:flex;align-items:center;gap:8px;padding:8px 10px 18px;font-weight:700}
.sidebar .brand .dot{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.sidebar .brand small{display:block; font-weight:400; color:var(--text-3); font-size:11px}
.navlink{
  display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px;
  color:var(--text-2); text-decoration:none; cursor:pointer; border:1px solid transparent;
  background:none; font-size:14.5px; text-align:left;
}
.navlink .ic{width:20px;text-align:center;font-size:16px}
.navlink:hover{color:var(--text); background:var(--raised)}
.navlink.active{color:var(--gold-bright); background:var(--raised); border-color:var(--line)}
.sidebar-foot{margin-top:auto; padding-top:10px; border-top:1px solid var(--line)}

/* ---- bottom tabs (mobile) ---- */
.tabbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:rgba(18,10,36,.92); backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
.tabbar .row{display:flex}
.tabbtn{
  flex:1 1 0%; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 2px 8px; color:var(--text-3); background:none; border:none; font-size:10.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tabbtn .ic{font-size:19px}
.tabbtn.active{color:var(--gold-bright)}

main.content{flex:1 1 0%; min-width:0; width:100%; padding-bottom:90px}
.page{max-width:980px; margin:0 auto; padding:22px 18px 60px}
.page.wide{max-width:1180px}

.topbar{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.topbar h1{font-size:22px; margin:0}
.backbtn{background:var(--raised); border:1px solid var(--line); color:var(--text);
  width:36px;height:36px;border-radius:10px; cursor:pointer; font-size:16px}

.card-panel{
  background:linear-gradient(180deg,var(--raised),var(--surface));
  border:1px solid var(--line); border-radius:var(--radius); padding:18px;
}
.section-title{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3);
  margin:22px 0 10px; font-weight:600;
}
.section-title:first-child{margin-top:0}

.pill{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--raised); color:var(--text-2); cursor:pointer; font-size:13px}
.pill.active{color:var(--gold-bright); border-color:var(--gold); background:color-mix(in srgb,var(--gold) 12%, var(--raised))}
.pillrow{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}

.btn{background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#241705; border:none;
  padding:12px 20px; border-radius:12px; font-weight:700; cursor:pointer; font-size:14.5px}
.btn.secondary{background:var(--raised); color:var(--text); border:1px solid var(--line)}
.btn.ghost{background:none; color:var(--gold-bright); border:1px solid var(--line)}
.btn:disabled{opacity:.5; cursor:default}
.btn.block{width:100%}
.btn.danger{background:var(--danger); color:#fff}

/* profile header on Today tab */
.profile-header{display:flex; align-items:center; gap:14px; cursor:pointer;
  background:var(--raised); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:18px}
.profile-header .glyph{width:48px;height:48px;border-radius:50%;background:var(--surface);
  border:1px solid var(--gold); display:flex;align-items:center;justify-content:center;font-size:22px; flex:none}
.profile-header .name{font-weight:700}
.profile-header .sub{color:var(--text-3); font-size:13px}
.profile-header .chev{margin-left:auto; color:var(--text-3)}

.horo-tabs{display:flex; gap:6px; margin-bottom:14px; overflow-x:auto}
.spheres{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px}
.sphere-tile{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 6px; text-align:center}
.sphere-tile .v{font-size:18px; font-weight:700; color:var(--gold-bright)}
.sphere-tile .k{font-size:10.5px; color:var(--text-3); margin-top:2px}
.lucky-row{display:flex; gap:16px; margin-top:14px; font-size:13px; color:var(--text-2)}

/* daily card ritual */
.daily-draw{display:flex; flex-direction:column; align-items:center; gap:14px; padding:10px 0 4px}
.flip-card{width:150px; aspect-ratio:768/1344; perspective:1200px; cursor:pointer}
.flip-inner{position:relative; width:100%; height:100%; transition:transform .7s cubic-bezier(.2,.7,.3,1); transform-style:preserve-3d}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute; inset:0; backface-visibility:hidden; border-radius:10px; overflow:hidden;
  border:1px solid var(--gold); box-shadow:0 10px 30px rgba(0,0,0,.5)}
.flip-face img{width:100%;height:100%;object-fit:cover; display:block}
.flip-back{transform:rotateY(180deg)}
.flip-card.reversed .flip-back img{transform:rotate(180deg)}

/* card grid */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px}
.mini-card{cursor:pointer; text-align:center}
.mini-card .thumb{aspect-ratio:768/1344; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--surface)}
.mini-card .thumb img{width:100%;height:100%;object-fit:cover}
.mini-card .cap{font-size:11.5px; color:var(--text-2); margin-top:5px; line-height:1.3}

.filterbar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}

/* card detail */
.card-detail-head{display:flex; gap:20px; margin-bottom:20px; flex-wrap:wrap}
.card-detail-head .art{width:180px; flex:none}
.card-detail-head .art img{width:100%; border-radius:12px; border:1px solid var(--gold)}
.kw-row{font-size:13px; color:var(--text-2); margin:6px 0}
.kw-row b{color:var(--gold-bright)}
.acc-section{margin-top:18px; border-top:1px solid var(--line); padding-top:14px}
.acc-head{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:700}
.acc-body{margin-top:10px; color:var(--text-2); white-space:pre-line; display:none}
.acc-section.open .acc-body{display:block}
.acc-body .lbl{text-transform:uppercase; font-size:11px; letter-spacing:.06em; color:var(--text-3); margin:10px 0 4px}
.marginalia{border-left:2px solid var(--gold); padding-left:12px; margin-top:14px}
.marginalia .lbl{text-transform:uppercase; font-size:11px; color:var(--gold-bright); letter-spacing:.06em}

/* spreads catalog */
.spread-card{background:var(--raised); border:1px solid var(--line); border-radius:12px; padding:14px; cursor:pointer}
.spread-card h3{font-size:15.5px; margin:0 0 4px}
.spread-card .meta{font-size:12px; color:var(--text-3)}
.spread-card .intro{font-size:13px; color:var(--text-2); margin-top:6px}
.spread-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}

/* spread reading canvas */
.spread-canvas{position:relative; width:100%; max-width:520px; aspect-ratio:3/4; margin:0 auto 18px;
  background:radial-gradient(circle at 50% 40%, var(--raised), var(--surface)); border-radius:16px; border:1px solid var(--line)}
.spread-slot{position:absolute; width:15%; aspect-ratio:768/1344; transform:translate(-50%,-50%);
  border-radius:6px; overflow:hidden; cursor:pointer; border:1px solid var(--line); background:var(--surface)}
.spread-slot img{width:100%;height:100%;object-fit:cover}
.spread-slot.reversed img{transform:rotate(180deg)}
.spread-slot .num{position:absolute; top:2px; left:2px; background:rgba(0,0,0,.6); color:var(--gold-bright);
  font-size:9px; padding:1px 4px; border-radius:4px}
.position-detail{background:var(--raised); border:1px solid var(--line); border-radius:12px; padding:16px; margin-top:16px}
.position-detail h3{font-size:15px}
.position-detail .role{font-size:12px; color:var(--gold-bright); text-transform:uppercase; letter-spacing:.05em}

/* pair tab */
.sign-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.sign-tile{background:var(--raised); border:1px solid var(--line); border-radius:10px; padding:12px 4px;
  text-align:center; cursor:pointer; font-size:13px; color:var(--text-2)}
.sign-tile .g{font-size:20px; display:block; margin-bottom:4px}
.sign-tile.active{border-color:var(--gold); color:var(--gold-bright)}
.compat-score{text-align:center; margin:18px 0}
.compat-score .num{font-size:48px; font-weight:800; color:var(--gold-bright); font-family:Georgia,serif}
.cat-bars{display:grid; gap:10px; margin:16px 0}
.cat-bar .row{display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-2); margin-bottom:4px}
.cat-bar .track{height:7px; background:var(--surface); border-radius:99px; overflow:hidden}
.cat-bar .fill{height:100%; background:var(--gold)}

/* oracle */
.persona-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px}
.persona-tile{background:var(--raised); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; cursor:pointer}
.persona-tile img{width:64px;height:64px;border-radius:50%;object-fit:cover; border:1px solid var(--gold); margin-bottom:8px}
.persona-tile .meta{font-size:11px; color:var(--text-3); margin-top:2px}
.tone-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.tone-tile{background:var(--raised); border:1px solid var(--line); border-radius:10px; padding:12px; cursor:pointer}
.tone-tile b{color:var(--gold-bright)}
.tone-tile .d{font-size:12px; color:var(--text-3)}

.chip{display:inline-block; padding:7px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--raised); color:var(--text-2); font-size:12.5px; cursor:pointer; margin:0 6px 6px 0}
.chat-thread{display:flex; flex-direction:column; gap:14px; margin-bottom:16px; min-height:120px}
.bubble{max-width:88%; padding:12px 14px; border-radius:14px; font-size:14px; line-height:1.55}
.bubble.user{align-self:flex-end; background:var(--gold); color:#241705}
.bubble.bot{align-self:flex-start; background:var(--raised); border:1px solid var(--line)}
.bubble .cards{display:flex; gap:8px; margin-bottom:10px}
.bubble .cards img{width:52px; border-radius:5px; border:1px solid var(--line)}
.chat-input{display:flex; gap:8px; position:sticky; bottom:70px}
.chat-input input{flex:1; background:var(--raised); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; color:var(--text); font-size:14px}

/* onboarding modal */
.modal-overlay{position:fixed; inset:0; background:rgba(6,4,14,.75); z-index:50; display:flex;
  align-items:center; justify-content:center; padding:16px}
.modal{background:var(--raised); border:1px solid var(--line); border-radius:16px; padding:26px;
  max-width:420px; width:100%}
.field{margin-bottom:14px}
.field label{display:block; font-size:12.5px; color:var(--text-3); margin-bottom:5px}
.field input,.field select{width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; color:var(--text); font-size:14.5px}

.empty-state{text-align:center; padding:50px 20px; color:var(--text-3)}
.empty-state h3{color:var(--text)}

.journal-item{background:var(--raised); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:10px;
  display:flex; gap:12px; align-items:center; cursor:pointer}
.journal-item .thumbs{display:flex}
.journal-item .thumbs img{width:32px; border-radius:4px; margin-left:-10px; border:1px solid var(--line)}
.journal-item .thumbs img:first-child{margin-left:0}
.journal-item .meta{flex:1; min-width:0}
.journal-item .meta .t{font-weight:600; font-size:13.5px}
.journal-item .meta .d{font-size:11.5px; color:var(--text-3)}
.journal-item .del{background:none;border:none;color:var(--text-3); cursor:pointer; font-size:16px}

.switch-row{display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--raised); border:1px solid var(--line); border-radius:12px; padding:13px 14px; margin-bottom:8px}
.switch-row .t{font-weight:600; font-size:13.5px}
.switch-row .s{font-size:12px; color:var(--text-3); margin-top:2px}
.switch{position:relative; width:42px; height:24px; flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute; inset:0; background:var(--surface); border:1px solid var(--line); border-radius:99px; transition:.2s; cursor:pointer}
.switch .slider:before{content:""; position:absolute; width:18px; height:18px; left:2px; top:2px; background:var(--text-3);
  border-radius:50%; transition:.2s}
.switch input:checked + .slider{background:var(--gold)}
.switch input:checked + .slider:before{transform:translateX(18px); background:#241705}
.stepper{display:flex; align-items:center; gap:10px}
.stepper button{width:30px;height:30px;border-radius:50%; background:var(--surface); border:1px solid var(--line); color:var(--gold-bright)}

.readings-honest{text-align:center; padding:50px 24px}
.readings-honest .ic{font-size:40px; margin-bottom:12px}

.suit-badge{display:inline-block; padding:2px 8px; border-radius:6px; font-size:10.5px; font-weight:700; margin-left:6px}
.badge-MAJOR{background:#8D6BFF33;color:#c9b8ff}
.badge-WANDS{background:#E97B1C33;color:#f0a561}
.badge-CUPS{background:#488BF033;color:#8fb8f5}
.badge-SWORDS{background:#7B7294;color:#d9d5e8}
.badge-PENTACLES{background:#57AD7B33;color:#8fd4ac}

@media (max-width: 860px){
  .sidebar{display:none}
  .tabbar{display:block}
  main.content{padding-bottom:70px}
  .card-detail-head{flex-direction:column}
  .card-detail-head .art{width:140px}
}

/* Совместное чтение карт расклада. */
.combos{margin-top:22px}
.combos-sub{margin:2px 0 12px; font-size:12.5px; color:var(--text-3)}
.combo{background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:14px; margin-bottom:10px}
.combo.weaken{border-color:color-mix(in srgb, #E2603F 45%, transparent)}
.combo.amplify{border-color:color-mix(in srgb, var(--gold) 50%, transparent)}
.combo-head{display:flex; align-items:baseline; gap:12px; margin-bottom:6px}
.combo-head b{flex:1; font-size:14.5px}
.combo-head span{font-size:12px; color:var(--gold-bright); white-space:nowrap}
.combo.weaken .combo-head span{color:#E2603F}
.combo p{margin:0; font-size:14px; color:var(--text-2)}
.combo-src{display:inline-block; margin-top:6px; font-size:11.5px; color:var(--text-3)}