/* Общие стили веб-версий приложений PascualLabs. Цвета задаются
   переменными в index.html каждого приложения. */
: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) 24%, transparent), transparent 62%),
    radial-gradient(circle at 85% 88%, color-mix(in srgb, var(--violet) 18%, 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%}
p{margin:0 0 10px}
::-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{
  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:10px;padding:8px 10px 18px;font-weight:700}
.sidebar .brand img{width:34px;height:34px;border-radius:9px}
.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); cursor:pointer; border:1px solid transparent;
  background:none; font-size:14.5px; text-align:left; width:100%;
}
.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)}
.sidebar-foot a{display:block; font-size:11.5px; color:var(--text-3); text-decoration:none; padding:8px 12px 0}

.tabbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:color-mix(in srgb, var(--surface) 92%, transparent); 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; flex:none}

.card-panel{
  background:linear-gradient(180deg,var(--raised),var(--surface));
  border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:12px;
}
.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}
.muted{color:var(--text-3); font-size:12.5px}
.sub{color:var(--text-2)}

.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}
.pillrow.scroll{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px}

.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}
.btnrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

.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; overflow:hidden}
.profile-header .glyph img{width:100%;height:100%;object-fit:cover}
.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)}

.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}
.advice{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
.advice .col{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px}
.advice .col b{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px}
.advice .do b{color:var(--ok)} .advice .avoid b{color:var(--danger)}
.advice ul{margin:0; padding-left:18px; font-size:13.5px; color:var(--text-2)}
.advice li{margin-bottom:4px}

.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px}
.tile{background:var(--raised); border:1px solid var(--line); border-radius:12px; padding:14px; cursor:pointer; display:flex; gap:12px; align-items:center}
.tile:hover{border-color:var(--gold)}
.tile .ic{width:44px;height:44px;border-radius:10px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:22px;flex:none;overflow:hidden}
.tile .ic img{width:100%;height:100%;object-fit:cover}
.tile b{display:block; font-size:14px}
.tile span{font-size:12px; color:var(--text-3)}

.item-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px}
.item-grid.small{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.item-card{cursor:pointer; text-align:center}
.item-card .art{aspect-ratio:2/3; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--surface);
  display:flex; align-items:center; justify-content:center}
.item-card .art.square{aspect-ratio:1}
.item-card .art.wide{aspect-ratio:3/4}
.item-card .art img{width:100%;height:100%;object-fit:cover}
.item-card .art .glyph{font-size:44px; color:var(--gold-bright); font-family:Georgia,serif}
.item-card .art .glyph.small{font-size:28px}
.item-card .cap{font-size:11.5px; color:var(--text-2); margin-top:5px; line-height:1.3}
.item-card .cap small{display:block; color:var(--text-3)}
.item-card.reversed .art img,.item-card.reversed .art .glyph{transform:rotate(180deg)}

.list-item{background:var(--raised); border:1px solid var(--line); border-radius:12px; padding:13px 14px; margin-bottom:8px; cursor:pointer; display:flex; gap:12px; align-items:center}
.list-item:hover{border-color:var(--gold)}
.list-item .n{width:34px; flex:none; text-align:center; color:var(--gold-bright); font-family:Georgia,serif; font-size:17px}
.list-item .n img{width:34px;height:34px;border-radius:8px;object-fit:cover}
.list-item b{display:block; font-size:14px}
.list-item span{font-size:12.5px; color:var(--text-3)}

.detail-head{display:flex; gap:20px; margin-bottom:20px; flex-wrap:wrap; align-items:flex-start}
.detail-head .art{width:180px; flex:none; border-radius:12px; overflow:hidden; border:1px solid var(--gold); background:var(--surface);
  display:flex; align-items:center; justify-content:center; aspect-ratio:2/3}
.detail-head .art.square{aspect-ratio:1} .detail-head .art.wide{aspect-ratio:3/4}
.detail-head .art img{width:100%;height:100%;object-fit:cover;display:block}
.detail-head .art .glyph{font-size:96px; color:var(--gold-bright); font-family:Georgia,serif; line-height:1}
.detail-head .art.reversed img,.detail-head .art.reversed .glyph{transform:rotate(180deg)}
.detail-head .info{flex:1; min-width:220px}
.kw-row{font-size:13px; color:var(--text-2); margin:6px 0}
.kw-row b{color:var(--gold-bright)}
.sec{margin-top:16px; border-top:1px solid var(--line); padding-top:12px}
.sec .lbl{text-transform:uppercase; font-size:11px; letter-spacing:.06em; color:var(--gold-bright); margin-bottom:4px; font-weight:700}
.sec p{color:var(--text-2); white-space:pre-line}
.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}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{display:inline-block; padding:5px 10px; border-radius:999px; border:1px solid var(--line);
  background:var(--raised); color:var(--text-2); font-size:12px}

.spread-card{background:var(--raised); border:1px solid var(--line); border-radius:12px; padding:14px; cursor:pointer}
.spread-card:hover{border-color:var(--gold)}
.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-canvas{position:relative; width:100%; max-width:560px; aspect-ratio:4/3; margin:0 auto 18px;
  background:radial-gradient(circle at 50% 40%, var(--raised), var(--surface)); border-radius:16px; border:1px solid var(--line)}
.spread-canvas.tall{aspect-ratio:3/4}
.spread-slot{position:absolute; width:14%; aspect-ratio:2/3; transform:translate(-50%,-50%);
  border-radius:6px; overflow:hidden; cursor:pointer; border:1px solid var(--line); background:var(--surface);
  display:flex; align-items:center; justify-content:center}
.spread-slot.square{aspect-ratio:1}
.spread-slot img{width:100%;height:100%;object-fit:cover}
.spread-slot .glyph{font-size:26px; color:var(--gold-bright); font-family:Georgia,serif}
.spread-slot.reversed img,.spread-slot.reversed .glyph{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}
.spread-slot.empty{border-style:dashed}
.spread-slot.empty .num{display:none}
.position-list{display:grid; gap:12px}
.position-detail{background:var(--raised); border:1px solid var(--line); border-radius:12px; padding:16px; display:flex; gap:14px}
.position-detail .thumb{width:72px; flex:none; border-radius:6px; overflow:hidden; border:1px solid var(--line); background:var(--surface); aspect-ratio:2/3; display:flex; align-items:center; justify-content:center}
.position-detail .thumb.square{aspect-ratio:1}
.position-detail .thumb img{width:100%;height:100%;object-fit:cover}
.position-detail .thumb .glyph{font-size:30px; color:var(--gold-bright); font-family:Georgia,serif}
.position-detail .thumb.reversed img,.position-detail .thumb.reversed .glyph{transform:rotate(180deg)}
.position-detail h3{font-size:15px; margin-bottom:2px}
.position-detail .role{font-size:11.5px; color:var(--gold-bright); text-transform:uppercase; letter-spacing:.05em}
.position-detail p{color:var(--text-2); font-size:13.5px; margin:6px 0 0}
.position-detail .more{font-size:12.5px; margin-top:6px}

.combo{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:13px; margin-bottom:8px}
.combo b{display:block; font-size:13.5px; margin-bottom:4px}
.combo p{margin:0; font-size:13.5px; color:var(--text-2)}

.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:440px; width:100%; max-height:90vh; overflow-y:auto}
.field{margin-bottom:14px}
.field label{display:block; font-size:12.5px; color:var(--text-3); margin-bottom:5px}
.field input,.field select,.field textarea{width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; color:var(--text); font-size:14.5px; font:inherit}
.field textarea{min-height:80px; resize:vertical}

.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; flex:none}
.journal-item .thumbs .th{width:30px;height:44px; border-radius:4px; margin-left:-10px; border:1px solid var(--line); background:var(--surface); overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--gold-bright)}
.journal-item .thumbs .th:first-child{margin-left:0}
.journal-item .thumbs .th img{width:100%;height:100%;object-fit:cover}
.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}

.guide-body p{color:var(--text-2)}
.guide-item{background:var(--raised); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:10px; cursor:pointer}
.guide-item:hover{border-color:var(--gold)}
.guide-item b{display:block; font-size:15px; font-family:Georgia,serif}
.guide-item span{font-size:12.5px; color:var(--text-2)}
.guide-item .m{font-size:11px; color:var(--text-3); margin-top:4px}

.big-glyph{font-size:120px; line-height:1; text-align:center; color:var(--gold-bright); font-family:Georgia,serif; margin:10px 0}
.flip{width:150px; aspect-ratio:2/3; margin:0 auto; perspective:1200px; cursor:pointer}
.flip.square{aspect-ratio:1}
.flip .inner{position:relative; width:100%; height:100%; transition:transform .7s cubic-bezier(.2,.7,.3,1); transform-style:preserve-3d}
.flip.flipped .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); display:flex; align-items:center; justify-content:center; background:var(--surface)}
.flip .face img{width:100%;height:100%;object-fit:cover; display:block}
.flip .face.back{transform:rotateY(180deg)}
.flip .face .glyph{font-size:64px; color:var(--gold-bright); font-family:Georgia,serif}
.flip.reversed .face.back img,.flip.reversed .face.back .glyph{transform:rotate(180deg)}
.face.cover{background:
  repeating-linear-gradient(45deg, color-mix(in srgb, var(--gold) 18%, transparent) 0 6px, transparent 6px 14px),
  linear-gradient(160deg, var(--raised), var(--surface))}

.hex{display:inline-flex; flex-direction:column-reverse; gap:5px; width:64px}
.hex .ln{height:7px; display:flex; gap:8px}
.hex .ln i{flex:1; background:var(--gold-bright); border-radius:2px}
.hex .ln.yin i:nth-child(2){opacity:1}
.hex .ln.changing i{background:var(--danger)}
.hex.big{width:120px} .hex.big .ln{height:12px; gap:14px}
.coins{display:flex; gap:10px; justify-content:center; margin:10px 0}
.coin{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 35%, #f0d48a, #8a6a1e);
  display:flex;align-items:center;justify-content:center;color:#3a2a06;font-weight:700; box-shadow:0 4px 12px rgba(0,0,0,.4)}

.num-big{font-size:54px; font-family:Georgia,serif; color:var(--gold-bright); line-height:1}
.steps{font-size:12.5px; color:var(--text-3); white-space:pre-line; margin-top:8px}
.tablo{display:grid; gap:6px}
.tablo .cell{aspect-ratio:2/3; border-radius:6px; overflow:hidden; border:1px solid var(--line); background:var(--surface); cursor:pointer; position:relative}
.tablo .cell img{width:100%;height:100%;object-fit:cover}
.tablo .cell .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}

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:360px; margin:0 auto 14px}
.grid3 .cell{aspect-ratio:1; border-radius:10px; border:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; padding:4px}
.grid3 .cell .g{font-size:32px; color:var(--gold-bright); font-family:Georgia,serif; line-height:1}
.grid3 .cell small{font-size:10px; color:var(--text-3); margin-top:4px; text-align:center}
.mj{display:inline-flex; flex-direction:column; align-items:center; justify-content:center; background:#F3ECD9; color:#1c2a22; border-radius:8px; border:2px solid #cbbd98; box-shadow:inset 0 -4px 0 #b9ab85; font-family:Georgia,serif; padding:4px}
.mj .g{font-size:1.9em; line-height:1}
.mj small{font-size:.55em; color:#4a5d51; font-weight:700; margin-top:2px}
.mj.characters .g{color:#8a1f1f} .mj.bamboo .g{color:#1f6a3a} .mj.circles .g{color:#1f3f8a}
.mj.winds .g,.mj.dragons .g{color:#222} .mj.flowers .g,.mj.seasons .g{color:#7a3a8a}

.orb{width:160px;height:160px;border-radius:50%;margin:16px auto; display:flex;align-items:center;justify-content:center; text-align:center; padding:14px; font-family:Georgia,serif; font-size:16px; cursor:pointer; user-select:none;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--violet) 70%, white), var(--violet) 40%, #150a2e 90%); box-shadow:0 0 40px color-mix(in srgb, var(--violet) 50%, transparent)}
.orb.fog{color:transparent; filter:blur(0px)}
.orb.fog::after{content:"Удерживайте"; color:var(--text-2); font-size:13px; position:absolute}
.pendulum{height:170px; display:flex; justify-content:center; align-items:flex-start; position:relative; margin:10px 0}
.pendulum .string{width:2px; height:120px; background:var(--gold); transform-origin:top center; transition:transform .6s; display:flex; flex-direction:column; align-items:center}
.pendulum .bob{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 35%, var(--gold-bright), #6a4d12); margin-top:120px; box-shadow:0 4px 12px rgba(0,0,0,.5)}
.pendulum .lbl{position:absolute; bottom:0; font-size:12px; color:var(--text-3)}
.pendulum .lbl.l{left:10%} .pendulum .lbl.c{left:50%; transform:translateX(-50%)} .pendulum .lbl.r{right:10%}
.compass{width:170px;height:170px;border-radius:50%;border:2px solid var(--line);margin:10px auto;position:relative;background:var(--surface)}
.compass .needle{position:absolute; left:50%; top:50%; width:4px; height:70px; background:var(--gold-bright); transform-origin:50% 100%; transform:translate(-50%,-100%) rotate(0deg); transition:transform 1.2s cubic-bezier(.2,.8,.3,1); border-radius:2px}
.compass span{position:absolute; font-size:11px; color:var(--text-3)}
.compass .n{top:6px;left:50%;transform:translateX(-50%)} .compass .s{bottom:6px;left:50%;transform:translateX(-50%)} .compass .e{right:8px;top:50%;transform:translateY(-50%)} .compass .w{left:8px;top:50%;transform:translateY(-50%)}
.answer-big{text-align:center; margin:14px 0}
.answer-big .l{font-size:26px; font-family:Georgia,serif; color:var(--gold-bright)}
.answer-big .p{color:var(--text-2); margin-top:6px}
.answer-big .q{color:var(--text-3); font-size:13px; margin-top:10px; font-style:italic}
.signals{display:flex; gap:8px; justify-content:center; margin:10px 0}
.signals .s{padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface); font-size:13px}
.honest{background:var(--surface); border:1px dashed var(--line); border-radius:10px; padding:10px 12px; font-size:12.5px; color:var(--text-3); margin-top:14px}

.book{max-width:340px; margin:0 auto 14px; aspect-ratio:3/4; border-radius:12px; overflow:hidden; border:1px solid var(--gold); cursor:pointer; position:relative}
.book img{width:100%;height:100%;object-fit:cover; display:block}
.book .hint{position:absolute; bottom:0; left:0; right:0; padding:10px; background:linear-gradient(transparent, rgba(0,0,0,.7)); text-align:center; font-size:13px; color:var(--text)}
.passage{font-family:Georgia,serif; font-size:17px; line-height:1.55; color:var(--text)}

.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:10px 4px; text-align:center; cursor:pointer; font-size:12px; color:var(--text-2)}
.sign-tile .g{font-size:22px; display:block; margin-bottom:2px}
.sign-tile.active{border-color:var(--gold); color:var(--gold-bright)}
.score-row{display:flex; align-items:center; gap:14px; margin:12px 0}
.score-row .stars{font-size:22px; color:var(--gold-bright); letter-spacing:2px}

@media (max-width: 860px){
  .sidebar{display:none}
  .tabbar{display:block}
  main.content{padding-bottom:70px}
  .detail-head{flex-direction:column}
  .detail-head .art{width:140px}
  .advice{grid-template-columns:1fr}
  .spheres{grid-template-columns:repeat(4,1fr)}
}