/* ============ ✨ MAGIC — Dark Premium Mystical ============ */
#page-magic{--mg-gold:#d9b45b;--mg-gold2:#f0d998;--mg-purple:#a878ff;--mg-bg:#0b0e1a}
.mg-back{background:none;border:1px solid rgba(217,180,91,.35);color:var(--mg-gold);border-radius:12px;padding:9px 16px;font-size:13px;font-weight:700;margin-bottom:14px}
.mg-hero{text-align:center;padding:26px 0 20px}
.mg-hero-e{font-size:52px;filter:drop-shadow(0 0 22px rgba(168,120,255,.6))}
.mg-title{font-size:30px;font-weight:900;letter-spacing:.14em;color:var(--mg-gold2);text-shadow:0 0 26px rgba(217,180,91,.45);margin:8px 0 4px}
.mg-sub{font-size:13.5px;color:rgba(238,243,248,.6)}
.mg-entry{display:flex;align-items:center;gap:13px;width:100%;min-height:74px;padding:15px 17px;margin-bottom:20px;background:radial-gradient(120% 160% at 100% 0%,rgba(168,120,255,.22),transparent 55%),linear-gradient(115deg,rgba(217,180,91,.14),var(--card) 60%);border:1px solid rgba(217,180,91,.45);border-radius:18px;color:var(--text);text-align:left;box-shadow:0 8px 26px rgba(168,120,255,.12)}
.mg-entry:active{transform:scale(.97)}
.mg-entry-e{font-size:30px}.mg-entry-t{flex:1}.mg-entry-t b{font-size:16px;letter-spacing:.08em}.mg-entry-t span{display:block;font-size:12px;color:var(--muted);margin-top:2px}.mg-entry-arr{color:var(--mg-gold);font-size:20px}
.mg-cards2,.mg-readings{display:flex;flex-direction:column;gap:12px}
.mg-big{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:110px;padding:18px;background:linear-gradient(140deg,rgba(168,120,255,.14),rgba(217,180,91,.07) 55%,var(--card));border:1px solid rgba(217,180,91,.3);border-radius:20px;color:var(--text);text-align:left;backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(217,180,91,.15)}
.mg-big:active{transform:scale(.97);border-color:rgba(217,180,91,.6)}
.mg-big-e{font-size:34px;filter:drop-shadow(0 0 14px rgba(168,120,255,.5))}
.mg-big b{font-size:18px}.mg-big-s{font-size:12.5px;color:var(--muted)}
.mg-link{display:block;width:100%;padding:14px;margin-top:6px;background:var(--card);border:1px dashed rgba(217,180,91,.4);border-radius:14px;color:var(--mg-gold);font-size:14px;font-weight:700}
.mg-disclaimer{text-align:center;font-size:10.5px;color:var(--muted);margin-top:18px;opacity:.7}
.mg-signs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.mg-sign{display:flex;align-items:center;gap:10px;padding:13px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(217,180,91,.22);border-radius:14px;color:var(--text);backdrop-filter:blur(8px)}
.mg-sign:active{border-color:var(--mg-gold);transform:scale(.96)}
.mg-sign span{font-size:22px}.mg-sign b{font-size:14px;font-weight:700}
.mg-sign .mg-sign-t{display:flex;flex-direction:column;align-items:flex-start;font-size:inherit;text-align:left}
.mg-sign small{font-size:10.5px;color:var(--muted);margin-top:2px}
.mg-sign.mine{border-color:var(--mg-gold);background:rgba(217,180,91,.1)}
.mg-question{width:100%;margin:6px 0 4px;box-sizing:border-box}
.mg-horo-extra + .mg-horo-extra{margin-top:8px}
.mg-face-front.rev .mg-face-fallback{transform:rotate(180deg)}
/* --- AI-толкование --- */
.mg-ai-btn{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;margin-top:14px;padding:15px 16px;border:1px solid rgba(217,180,91,.6);border-radius:16px;background:linear-gradient(135deg,rgba(168,120,255,.32),rgba(217,180,91,.22));color:var(--mg-gold2);font-size:15px;font-weight:800;letter-spacing:.02em;box-shadow:0 8px 26px rgba(168,120,255,.22)}
.mg-ai-btn:active{transform:scale(.97)}
.mg-ai-btn small{font-size:11.5px;font-weight:600;color:rgba(238,243,248,.65);letter-spacing:0}
.mg-ai-loading{margin-top:14px;padding:18px;text-align:center;font-size:13.5px;color:var(--mg-gold2);border:1px dashed rgba(217,180,91,.45);border-radius:16px;animation:mgPulse 1.6s ease-in-out infinite}
.mg-ai-loading span{display:inline-block;animation:mgSpin 2.4s linear infinite}
@keyframes mgPulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes mgSpin{to{transform:rotate(360deg)}}
.mg-ai{border-color:rgba(168,120,255,.55)}
.mg-ai-text{font-size:13.5px;line-height:1.65}
.mg-ai-left{text-align:center;font-size:11px;color:var(--muted);margin-top:8px}
.mg-ai-err{margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(229,72,77,.1);border:1px solid rgba(229,72,77,.35);font-size:13px;line-height:1.5}
.mg-hist-ai{margin-top:8px;border-top:1px dashed rgba(217,180,91,.3);padding-top:8px}
.mg-hist-ai summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--mg-purple)}
.mg-hist-ai div{font-size:12.5px;line-height:1.6;margin-top:6px;color:rgba(238,243,248,.85)}
.mg-hist-msg.user{color:var(--mg-gold2)}
/* --- чат по раскладу --- */
.mg-chat{margin-top:14px;padding:14px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(168,120,255,.35)}
.mg-chat-t{font-size:15px;font-weight:900;color:var(--mg-gold2);letter-spacing:.03em;margin-bottom:8px}
.mg-chat-hint{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:10px}
.mg-chat-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.mg-msg{max-width:86%;padding:9px 12px;border-radius:16px;font-size:13.5px;line-height:1.55;word-wrap:break-word;animation:mgFade .35s ease}
.mg-msg.user{align-self:flex-end;background:linear-gradient(135deg,rgba(168,120,255,.45),rgba(130,90,230,.35));border-bottom-right-radius:5px}
.mg-msg.ai{align-self:flex-start;background:rgba(217,180,91,.09);border:1px solid rgba(217,180,91,.3);border-bottom-left-radius:5px}
.mg-msg.typing{display:flex;gap:5px;padding:12px 14px}
.mg-msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--mg-gold);animation:mgDot 1.2s infinite ease-in-out}
.mg-msg.typing i:nth-child(2){animation-delay:.15s}.mg-msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes mgDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.mg-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.mg-chip{padding:7px 11px;border-radius:99px;border:1px solid rgba(217,180,91,.4);background:rgba(217,180,91,.07);color:var(--mg-gold2);font-size:12px;font-weight:650;text-align:left}
.mg-chip:active{transform:scale(.96);background:rgba(217,180,91,.18)}
.mg-chat-row{display:flex;gap:8px;align-items:flex-end}
.mg-chat-input{flex:1;min-height:42px;max-height:110px;resize:none;padding:10px 12px;border-radius:14px;border:1px solid rgba(217,180,91,.35);background:rgba(0,0,0,.25);color:var(--text);font:inherit;font-size:14px;line-height:1.4;outline:none}
.mg-chat-input:focus{border-color:var(--mg-gold)}
.mg-chat-send{width:42px;height:42px;flex:none;border-radius:14px;border:0;background:linear-gradient(135deg,#a878ff,#d9b45b);color:#fff;font-size:17px;font-weight:900}
.mg-chat-send:disabled,.mg-chat-input:disabled{opacity:.5}
.mg-chat-left{font-size:11px;color:var(--muted);text-align:center;margin-top:8px}
.mg-chat-end{font-size:12.5px;color:var(--mg-purple);text-align:center;padding:6px 0}
/* при автопрокрутке не прятать поле ввода под нижним меню */
#mgChat .mg-msg,#mgChat .mg-chat-left,#mgChat .mg-chat-end{scroll-margin-bottom:96px}
.mg-horo-block{background:rgba(255,255,255,.045);border:1px solid rgba(217,180,91,.2);border-radius:16px;padding:14px 15px;margin-bottom:11px;backdrop-filter:blur(8px)}
.mg-horo-cat{font-size:13px;font-weight:800;color:var(--mg-gold);margin-bottom:6px}
.mg-horo-block p{font-size:14px;line-height:1.55;margin:0}
.mg-horo-extra{display:flex;justify-content:space-between;padding:12px 15px;background:rgba(168,120,255,.1);border:1px solid rgba(168,120,255,.3);border-radius:14px;font-size:13px;margin-top:4px}
/* --- карты таро --- */
.mg-spread{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:18px 0}
.mg-spread-3 .mg-slot{width:31%;min-width:104px}
.mg-spread-1 .mg-slot{width:62%}
.mg-slot{display:flex;flex-direction:column;align-items:center}
.mg-slot-label{font-size:9.5px;font-weight:800;letter-spacing:.1em;color:var(--mg-gold);margin-bottom:8px;text-align:center}
.mg-flip{width:100%;aspect-ratio:2/3.2;perspective:900px;cursor:pointer;transition:transform .2s}
.mg-flip.glow{transform:scale(1.06)}
.mg-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,.1,.2,1)}
.mg-flip.flipped .mg-flip-inner{transform:rotateY(180deg)}
/* свечение — на внешнем блоке: filter на .mg-flip-inner ломает 3D-переворот (видна рубашка) */
.mg-flip.flipped.glow{filter:drop-shadow(0 0 18px rgba(217,180,91,.55))}
.mg-face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.mg-face-back{background:linear-gradient(150deg,#1b1440,#2a1b5e 45%,#141033);display:grid;place-items:center;border:1px solid rgba(217,180,91,.5)}
.mg-back-pattern span{font-size:42px;color:var(--mg-gold);opacity:.85;text-shadow:0 0 20px rgba(217,180,91,.6)}
.mg-face-front{transform:rotateY(180deg);background:#151226;border:1px solid rgba(217,180,91,.55);display:grid;place-items:center}
.mg-face-front.rev .mg-face-img{transform:rotate(180deg)}
.mg-face-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .4s}
.mg-face-img.loaded{opacity:1}
.mg-face-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(circle at 50% 35%,#2c2258,#161130 70%)}
.mg-face-fallback span{font-size:52px;filter:drop-shadow(0 0 16px rgba(217,180,91,.5))}
.mg-face-fallback b{font-size:12px;color:var(--mg-gold2);text-align:center;padding:0 8px;letter-spacing:.04em}
.mg-hint{font-size:11px;color:var(--muted);text-align:center;padding:8px 0}
.mg-meaning{width:100%;background:rgba(255,255,255,.045);border:1px solid rgba(217,180,91,.25);border-radius:14px;padding:12px 13px;margin-top:8px;animation:mgFade .5s ease}
@keyframes mgFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mg-card-name{font-size:15px;font-weight:900;letter-spacing:.06em;color:var(--mg-gold2);text-transform:uppercase;text-align:center}
.mg-card-pos{font-size:11px;font-weight:800;text-align:center;color:var(--mg-purple);margin-top:3px}
.mg-q{font-size:11px;font-weight:700;color:var(--muted);margin:9px 0 4px;text-align:center}
.mg-meaning p{font-size:13.5px;line-height:1.55;margin:0 0 8px}
.mg-kw,.mg-role{border-top:1px dashed rgba(217,180,91,.3);padding-top:8px;margin-top:4px;font-size:12px;line-height:1.5}
.mg-kw b,.mg-role b{display:block;color:var(--mg-gold);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.mg-role{color:rgba(238,243,248,.85)}
.mg-syn{margin-top:16px;background:linear-gradient(140deg,rgba(168,120,255,.14),rgba(217,180,91,.08));border:1px solid rgba(217,180,91,.45);border-radius:18px;padding:16px;animation:mgFade .6s ease}
.mg-syn-t{font-size:16px;font-weight:900;color:var(--mg-gold2);margin-bottom:8px;letter-spacing:.04em}
.mg-syn p{font-size:13.5px;line-height:1.6;margin:0 0 8px}
.mg-syn.yesno{text-align:center}
.mg-yn{font-size:44px;font-weight:900;letter-spacing:.1em;margin:6px 0 10px}
.mg-yn.yes{color:#4cd98a;text-shadow:0 0 24px rgba(76,217,138,.5)}
.mg-yn.no{color:#e5484d;text-shadow:0 0 24px rgba(229,72,77,.5)}
.mg-yn.maybe{color:var(--mg-gold);text-shadow:0 0 24px rgba(217,180,91,.5)}
.mg-saved-note{text-align:center;font-size:12px;color:var(--mg-purple);margin-bottom:10px}
.mg-hist-item{background:var(--card);border:1px solid rgba(217,180,91,.25);border-radius:14px;padding:12px 14px;margin-bottom:9px}
.mg-hist-date{font-size:11px;color:var(--muted)}
.mg-hist-type{font-size:14px;font-weight:800;color:var(--mg-gold);margin:3px 0 6px}
.mg-hist-card{font-size:13px;line-height:1.6}
.mg-empty{padding:24px;text-align:center;color:var(--muted);background:var(--card);border:1px dashed rgba(217,180,91,.3);border-radius:14px}