/* ===== StarGram: уровень-звезда, рейтинг, канал в профиле, платные сообщения, тёмная тема ===== */

/* --- значок уровня (звезда с цифрой) --- */
.sg-star{position:relative;display:inline-grid;place-items:center;width:var(--s,22px);height:var(--s,22px);vertical-align:middle;flex:none}
.sg-star svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 1px 2px #0003)}
.sg-star path{fill:#ffc72c;stroke:#e29a00;stroke-width:1;stroke-linejoin:round}
.sg-star b{position:relative;font-size:calc(var(--s,22px)*.42);font-weight:800;color:#5a3a00;line-height:1;margin-top:calc(var(--s,22px)*.07)}
.sg-star.two b{font-size:calc(var(--s,22px)*.34)}
.sg-lvl{border:0;background:none;padding:0;margin:0 6px 0 0;display:inline-flex;align-items:center;cursor:pointer;color:inherit;vertical-align:middle;-webkit-tap-highlight-color:transparent}
.sg-lvl:active{transform:scale(.9)}
.tg-hero-sub{gap:0}

/* --- нижнее окно «Рейтинг» --- */
.sg-bs-back{position:fixed;inset:0;z-index:400;background:#0008;display:flex;align-items:flex-end;justify-content:center;animation:sgFade .18s ease}
.sg-bs{position:relative;width:min(520px,100%);max-height:92vh;overflow-y:auto;background:var(--tg-card,#fff);color:var(--text,#222);border-radius:22px 22px 0 0;padding:14px 20px calc(18px + env(safe-area-inset-bottom));animation:sgUp .24s ease}
.sg-bs-track{position:relative;height:62px}
.sg-bs-bubble{position:absolute;bottom:10px;transform:translateX(-50%);display:inline-flex;align-items:baseline;gap:5px;padding:9px 18px;border-radius:999px;background:var(--accent,#f5b800);color:#3a2a00;white-space:nowrap;font-size:22px}
.sg-bs-bubble b{font-weight:800}
.sg-bs-bubble small{font-size:15px;opacity:.7;font-weight:600}
.sg-bs-bubble .sg-bs-st{font-size:20px}
.sg-bs-bubble::after{content:"";position:absolute;left:50%;bottom:-7px;width:16px;height:16px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:3px}
.sg-lv-bar{position:relative;height:44px;border-radius:12px;background:rgba(128,128,128,.2);overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-weight:700;font-size:16px}
.sg-lv-fill{position:absolute;inset:0 auto 0 0;background:var(--accent,#f5b800);border-radius:12px;transition:width .3s}
.sg-lv-bar span{position:relative}
.sg-lv-bar .l{color:#3a2a00}
.sg-bs-title{text-align:center;font-size:24px;margin:22px 0 6px}
.sg-bs-desc{text-align:center;color:var(--muted,#888);margin:0 0 16px;line-height:1.4}
.sg-bs-item{display:flex;gap:14px;align-items:flex-start;margin:0 0 16px}
.sg-bs-item .ico{font-size:26px;width:34px;text-align:center;flex:none}
.sg-bs-item b{font-size:16px}
.sg-bs-item p{margin:3px 0 0;color:var(--muted,#888);line-height:1.4;font-size:15px}
.sg-bs-item i.plus{font-style:normal;margin-left:8px;padding:2px 8px;border-radius:7px;background:#34c759;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;vertical-align:middle}
.sg-bs-h3{margin:20px 0 8px;font-size:16px}
.sg-bs-hist{border-radius:14px;overflow:hidden;background:rgba(128,128,128,.1)}
.sg-bs-hist>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid rgba(128,128,128,.15);font-size:14px}
.sg-bs-hist>div:last-child{border-bottom:0}
.sg-bs-hist small{display:block;color:var(--muted,#888);font-size:12px;margin-top:2px}
.sg-bs-hist b{white-space:nowrap}
.sg-bs-empty{padding:14px 16px;color:var(--muted,#888);font-size:14px;line-height:1.45}
.sg-bs-ok{width:100%;margin-top:18px;height:50px;border:0;border-radius:14px;background:var(--accent,#f5b800);color:#3a2a00;font-weight:800;font-size:16px}
@keyframes sgFade{from{opacity:0}to{opacity:1}}
@keyframes sgUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}

/* --- канал в профиле --- */
.sg-chcard{display:block;width:calc(100% - 24px);margin:12px;padding:12px 14px 14px;border:0;border-radius:16px;text-align:left;background:var(--tg-card,#fff);color:var(--text,#222);box-shadow:0 1px 0 var(--line,#0001)}
.sg-chcard:active{opacity:.85}
.sg-chc-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sg-chc-label{color:var(--accent-dark,#b38600);font-weight:700;font-size:15px}
.sg-chc-subs{padding:3px 10px;border-radius:999px;background:var(--accent-soft,#fff3cd);color:var(--accent-dark,#8a6a00);font-size:13px;font-weight:700}
.sg-chc-row{display:flex;gap:12px;align-items:center}
.sg-chc-row .avatar{width:54px;height:54px;flex:none}
.sg-chc-main{min-width:0;flex:1}
.sg-chc-title{display:flex;align-items:center;gap:6px}
.sg-chc-title b{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-chc-title time{margin-left:auto;color:var(--muted,#888);font-size:13px;flex:none}
.sg-chc-last{margin-top:3px;color:var(--muted,#888);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- платные сообщения --- */
.sg-opt .sg-rd{width:22px;height:22px;border-radius:50%;border:2px solid var(--muted,#999);flex:none;position:relative}
.sg-opt.on .sg-rd{border-color:var(--accent,#f5b800)}
.sg-opt.on .sg-rd::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--accent,#f5b800)}
.sg-price{padding:6px 16px 0}
.sg-price-val{font-size:32px;font-weight:800;text-align:center;margin:8px 0 12px}
.sg-price input[type=range]{width:100%;accent-color:var(--accent,#f5b800)}
.sg-price-scale{display:flex;justify-content:space-between;color:var(--muted,#888);font-size:12px;margin-top:4px}
.sg-pc{text-align:center}
.sg-pc-ic{font-size:46px;line-height:1}
.sg-pc h2{margin:8px 0}
.sg-pc p{margin:6px 0;line-height:1.45}
.sg-pc p.muted{color:var(--muted,#888);font-size:14px}
.sg-pc-rem{display:flex;gap:8px;align-items:center;justify-content:center;margin:14px 0;font-size:14px}
.sg-pc-back{z-index:450}
.sg-pc .btn[disabled]{opacity:.45}
.sg-paid-note{display:flex;justify-content:center;margin:12px 0 4px}
.sg-paid-note span{padding:5px 13px;border-radius:14px;background:rgba(70,55,20,.5);color:#fff;font-size:12.5px;font-weight:500;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* --- поиск: аватарки «Люди» и подписи --- */
.sr-person .avatar{width:58px;height:58px;font-size:24px}
.sr-person .avatar svg{width:28px;height:28px;fill:#fff}
.sr-person span{font-size:12.5px}

/* --- меню ⋮ в списке чатов --- */
.sg-top-mi{font-size:20px;line-height:1;width:28px}

/* --- тёмная тема: исправление нечитаемых подписей, бежевой полосы и рамки поля ввода --- */
:root[data-sg-theme="dark"] .chat-item .ci-title,
:root[data-sg-theme="dark"] .chat-header .title,
:root[data-sg-theme="dark"] .chat-header h2{color:#f1f1f1}
:root[data-sg-theme="dark"] .chat-item .ci-last,
:root[data-sg-theme="dark"] .chat-item .ci-time,
:root[data-sg-theme="dark"] .chat-header .sub{color:#9aa0a6}
:root[data-sg-theme="dark"] .chat-item.active .ci-title{color:#fff}
:root[data-sg-theme="dark"] .chat-item.active .ci-last,
:root[data-sg-theme="dark"] .chat-item.active .ci-time{color:#e4d8ad}
:root[data-sg-theme="dark"] .search-panel .sec-title,
:root[data-sg-theme="dark"] .sec-title{background:transparent;color:var(--accent-dark,#ffd34d)}
:root[data-sg-theme="dark"] .sr-person{color:var(--text,#f0f0f0)}
:root[data-sg-theme="dark"] .sr-chip{background:#3a3220;color:#ffd34d}
:root[data-sg-theme="dark"] .sr-clearall{color:#ffd34d}
:root[data-sg-theme="dark"] .sr-empty,
:root[data-sg-theme="dark"] .sr-empty small{color:var(--muted,#9aa0a6)}
:root[data-sg-theme="dark"] .sr-tab.active{color:#ffd34d;background:#403719}
:root[data-sg-theme="dark"] .chat-header,
:root[data-sg-theme="dark"] #mainPane .chat-header{background:#202124;border-bottom:1px solid var(--line,#303238);box-shadow:none}
:root[data-sg-theme="dark"] .main,
:root[data-sg-theme="dark"] .chat-bg{background:#17181a}
:root[data-sg-theme="dark"] .composer{background:transparent;border-top:0}
:root[data-sg-theme="dark"] #msgInput{color:#eee}
:root[data-sg-theme="dark"] #msgInput::placeholder{color:#8d9399}
:root[data-sg-theme="dark"] .modal{background:var(--tg-card,#222326);color:var(--text,#f0f0f0)}
:root[data-sg-theme="dark"] .sg-chcard,
:root[data-sg-theme="dark"] .sg-bs{background:var(--tg-card,#222326)}

/* поле ввода: без вложенной рамки/обводки */
#msgInput,#msgInput:focus,#msgInput:focus-visible{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important}
#mainPane .composer{margin:0}

/* --- панель эмодзи --- */
.emoji-picker{padding:10px 10px 12px;width:min(340px,calc(100% - 20px))}
.emoji-tabs{display:flex;gap:2px;margin-bottom:8px;border-bottom:1px solid var(--line,#0001);padding-bottom:6px}
.emoji-tabs button{flex:1;font-size:20px;padding:6px 0;border:0;border-radius:10px;background:none;opacity:.6}
.emoji-tabs button.on{opacity:1;background:var(--accent-soft,#fef8e8)}
.emoji-picker .emoji-grid{grid-template-columns:repeat(7,1fr);max-height:230px;overflow-y:auto;scrollbar-width:thin}
.emoji-picker .emoji-grid button{font-size:25px;padding:5px 0;border:0;background:none}
:root[data-sg-theme="dark"] .emoji-picker{background:var(--tg-card,#222326);border-color:var(--line,#303238);box-shadow:0 10px 40px #0008}
:root[data-sg-theme="dark"] .emoji-picker .emoji-grid button:hover,
:root[data-sg-theme="dark"] .emoji-picker .emoji-grid button:active{background:#303136}
:root[data-sg-theme="dark"] .emoji-tabs{border-color:var(--line,#303238)}
:root[data-sg-theme="dark"] .emoji-tabs button.on{background:#403719}