/* Обучение в CELLIO SMM: подсказки у полей, тур, «Что дальше». Цвета берутся из переменных страницы. */
.gq{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;min-height:20px;margin:0 0 0 6px;padding:0;border-radius:50%;background:var(--soft2);color:var(--mute);border:0;font:600 12px/1 var(--font);vertical-align:middle;cursor:pointer}
.gq::after{content:"";position:absolute;inset:-12px}
.gq[aria-expanded=true]{background:var(--mute);color:var(--card)}
.hq-pop{position:fixed;z-index:60;left:12px;top:12px;width:min(320px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;background:var(--card);border:0;border-radius:var(--r-m);padding:10px 12px;font-size:14px;line-height:1.45;color:var(--text);overflow-wrap:anywhere;box-shadow:var(--shadow-pop)}
.hq-pop b{display:block;color:var(--text);margin:0 0 3px}.hq-pop p{margin:0 0 4px}.hq-pop p:last-child{margin:0}.hq-pop .hq-ex{color:var(--mute)}
.gq{flex:none}.stat .gq,.kpi .gq{margin:0 0 0 5px}.meta .gq,.net .gq,.state .gq,.good .gq,.op-note .gq,.hc .gq,.warnbox .gq,.find .gq,.op-stat .gq,.chips .gq{margin:0 0 0 5px}
h2 .gq,h3 .gq{margin-left:8px}
.hc{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:14px;color:var(--mute);margin:4px 0}.hc>span{display:inline-flex;align-items:center}
#gdBar{display:flex;justify-content:flex-end;position:relative;margin:-6px 0 8px}
#gdBar>button{margin:0;min-height:40px;padding:6px 14px}
#gdMenu{position:absolute;right:0;top:44px;z-index:6;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px;min-width:250px;box-shadow:var(--shadow-pop)}
#gdMenu button{display:block;width:100%;text-align:left;margin:0;background:transparent;color:var(--text);border:0;border-radius:6px;font-weight:500;padding:10px 12px}
#gdMenu button:hover,#gdMenu button:focus-visible{background:var(--soft)}
#gdMenu .gm{font-size:13px;color:var(--mute);padding:6px 12px}
#gdNext{padding:10px 14px}#gdNext h2{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:15px;margin:0 0 4px}
#gdNext h2 small{font-size:13px;color:var(--mute);font-weight:400}#gdNext .gd-one{font-size:15px;margin:0}#gdNext .gd-one+.row button{margin:6px 8px 0 0;min-height:38px;padding:5px 11px;font-size:14px}
#gdNext ol{list-style:none;margin:0;padding:0}
#gdNext li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}
#gdNext li:first-child{border-top:0}
#gdNext .mk{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--mute)}
#gdNext li.done .mk{background:var(--ok);border-color:var(--ok-text);color:#FFFFFF}
#gdNext li.done .tt{color:var(--mute)}
#gdNext .tt{font-size:15px}.gd-sub{font-size:13px;color:var(--mute);margin-top:2px}
#gdNext li.next{background:var(--soft);border-radius:8px;padding:8px;margin:2px -8px;border-top-color:transparent}
#gdNext li button{margin:6px 0 0;min-height:40px;padding:6px 12px}
#gdNext .tg{margin:0;min-height:36px;padding:4px 10px;font-size:14px}
.gd-how{border:1px solid var(--line);border-radius:8px;padding:2px 12px;margin:8px 0;background:var(--soft)}
.gd-how summary{font-weight:600;padding:10px 0}
.gd-how ol{padding-left:20px;margin:6px 0}.gd-how li{margin:6px 0;font-size:14px}
.gd-how h4{margin:10px 0 4px;font-size:14px;color:var(--warn-text)}
.gd-how dl{margin:0 0 8px;font-size:14px}.gd-how dt{font-weight:600;margin-top:8px}.gd-how dd{margin:2px 0 0;color:var(--mute)}
.gd-note{font-size:14px;color:var(--warn-text);margin:6px 0}
.gd-empty{border:1px dashed var(--line);border-radius:8px;padding:12px;margin:4px 0;font-size:15px}
.gd-empty p{margin:0 0 6px}.gd-empty .row button{margin-top:6px}
.gd-flash{outline:3px solid var(--acc);outline-offset:3px;border-radius:7px;transition:outline-color 1s}
.gd-fix{margin-top:6px;font-size:14px;color:var(--text)}
#gdTour{position:fixed;inset:0;z-index:50}
#gdTour .gd-block{position:absolute;inset:0}
#gdTour .gd-hole{position:absolute;border-radius:10px;border:2px solid var(--acc);box-shadow:0 0 0 9999px var(--dim);pointer-events:none;transition:top .25s,left .25s,width .25s,height .25s}
#gdTour .gd-card{position:fixed;left:8px;right:8px;bottom:8px;max-width:600px;margin:0 auto;max-height:52vh;overflow:auto;background:var(--card);border:1px solid var(--acc);border-radius:12px;padding:14px 16px 12px;box-shadow:var(--shadow-pop)}
#gdTour .gd-card:focus{outline:none}
#gdTour h3{margin:0 0 6px;font-size:17px}#gdTour p{margin:0 0 8px;font-size:15px}
#gdTour .gd-n{font-size:13px;color:var(--mute);margin-bottom:4px}
#gdTour .gd-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#gdTour .gd-btns button{margin:4px 0 0}#gdTour .gd-btns .sp{flex:1}
@media (prefers-reduced-motion:reduce){#gdTour .gd-hole,.gd-flash{transition:none}}
/* Экран «Подключить соцсети»: спокойный список, как в настройках телефона */
#cnBox,#cnVideo,#cnService{background:transparent;box-shadow:none;padding:0;border-radius:0;margin:0 0 16px}#cnBox>h2{font-size:24px;letter-spacing:-.015em;margin:0 0 4px}
.cn-count{font-size:15px;color:var(--mute);margin:0 0 8px}.cn-bar{height:4px;border-radius:2px;background:var(--soft2);overflow:hidden;margin:0 0 12px}.cn-bar i{display:block;height:100%;background:var(--acc)}
.cn-congrats{background:var(--ok-soft);border-radius:var(--r-m);padding:12px 14px;margin:0 0 12px}
.cn-choose{margin:0 0 18px}.cn-choose>summary{font-size:15px;min-height:32px;padding:4px 0}.cn-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 12px;background:var(--card);border-radius:var(--r-m);box-shadow:var(--shadow);padding:10px 14px;margin:6px 0 0}
.cn-pick{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;color:var(--text);min-height:40px}.cn-pick input{width:20px;height:20px;flex:none;margin:0}
.cn-sub{margin:22px 0 4px;font-size:13px;font-weight:500;color:var(--mute);letter-spacing:.01em}.cn-note{font-size:13px;color:var(--mute);margin:0 0 8px}#cnVideo>h2{margin:22px 0 2px;font-size:19px}#cnVideo>.cn-d{margin:0 0 8px}
.cn-group{background:var(--card);border-radius:var(--r-l);box-shadow:var(--shadow);margin:6px 0 10px;overflow:hidden}
details.sv-more{margin:0 0 10px}details.sv-more>summary{font-size:15px;min-height:44px;padding:11px 0;box-sizing:border-box}details.sv-more .sv-nets{margin-top:2px}details.cn-more{margin:18px 0 10px}details.cn-more>summary{font-size:16px;font-weight:600;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:12px 16px;min-height:44px;box-sizing:border-box}details.cn-more[open]>summary{margin-bottom:6px}details.cn-more>.cn-sub:first-of-type{margin-top:16px}
.cn-card{padding:14px 16px;border-top:1px solid var(--hair)}.cn-card:first-child{border-top:0}
.cn-head{display:flex;align-items:center;gap:12px}.cn-title{flex:1 1 auto;min-width:0}.cn-title h3{margin:0;font-size:16px;font-weight:500;overflow-wrap:anywhere}.cn-line{font-size:14px;line-height:1.35;color:var(--mute);margin-top:2px;overflow-wrap:anywhere}.cn-side{flex:none;display:flex;align-items:center;gap:8px}
.cn-pill{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--mute);white-space:nowrap}.cn-pill.ok{color:var(--text)}.cn-pill.ok::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}.cn-pill.off{color:var(--mute)}
.cn-open{margin:0;padding:6px 14px;min-height:36px;font-size:14px;font-weight:500;background:var(--soft2);color:var(--text);border-radius:18px;white-space:nowrap;max-width:200px}@media(pointer:coarse){.cn-open{min-height:44px;border-radius:22px}}
.cn-foot{display:flex;flex-wrap:wrap;gap:0 14px;margin-top:2px}.cn-link{background:none!important;border:0;box-shadow:none;margin:0;padding:6px 0;min-height:28px;font-size:13px;font-weight:400;color:var(--link);text-align:left;white-space:normal}.cn-link:hover{text-decoration:underline}@media(pointer:coarse){.cn-link{min-height:44px;padding:12px 0}}
.cn-body{margin:12px 0 2px;padding:14px 16px;background:var(--soft);border-radius:var(--r-m)}.cn-body input,.cn-body textarea,.cn-body select{background:var(--field)}.cn-how{font-size:14px;font-weight:600;margin:0 0 4px;display:flex;align-items:center}
.cn-done{color:var(--mute);font-size:14px;overflow-wrap:anywhere}
.cn-steps{list-style:none;margin:8px 0 12px;padding:0}.cn-steps li{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px}.cn-steps li>div{min-width:0}.cn-num{flex:none;width:22px;height:22px;border-radius:50%;background:var(--soft2);color:var(--text);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px}.cn-steps b{font-weight:500}.cn-d{font-size:14px;color:var(--mute);margin-top:2px;overflow-wrap:anywhere}.cn-steps a{font-size:14px;display:inline-block;margin-top:3px}@media(pointer:coarse){.cn-steps a{padding:10px 0;margin:0}}
.cn-acts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}.cn-acts button{margin:0}.cn-go{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border-radius:var(--r-s);background:var(--soft2);color:var(--text);font-weight:500;text-decoration:none;overflow-wrap:anywhere}.cn-check{min-height:44px}
.cn-res{margin:10px 0 0;padding:10px 12px;border-radius:var(--r-s);font-size:14px;background:var(--soft);overflow-wrap:anywhere}.cn-res.ok{background:var(--ok-soft);color:var(--ok-text)}.cn-res.bad{background:var(--bad-soft);color:var(--bad-text)}.cn-res.warn{background:var(--warn-soft);color:var(--text)}
.cn-nogroup{margin-top:12px}.cn-help{margin:10px 0 0;border-top:1px solid var(--hair);padding:8px 0 0}.cn-help summary{font-size:15px;font-weight:500}
.cn-wait{margin:0 0 10px;overflow-wrap:anywhere}.cn-wait>b{display:block;font-size:15px;font-weight:500}.cn-own{margin:10px 0 0;border-top:1px solid var(--hair);padding-top:6px}.cn-own>summary{font-size:14px;min-height:32px}.cn-note2{font-size:14px;color:var(--mute);margin:6px 0}
.pf-help{margin:10px 0 0;font-size:14px}.pf-help form{border:0;padding:0;margin:6px 0 0}
/* Услуга «Подключим за вас» */
.sv-box{margin:22px 0 0;border-radius:var(--r-l);padding:20px;background:var(--card);box-shadow:var(--shadow)}.sv-box h2{margin:0 0 6px}.sv-price{font-size:16px;font-weight:500;margin:10px 0 2px;overflow-wrap:anywhere}.sv-limit{background:var(--soft);border-radius:var(--r-s);padding:10px 12px;font-size:14px;margin:8px 0;overflow-wrap:anywhere}.sv-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.sv-chip{display:inline-flex;align-items:center;min-height:24px;padding:2px 9px;border-radius:12px;background:var(--soft2);color:var(--text);font-size:13px}.sv-chip.us{background:var(--soft);color:var(--mute)}
.sv-only{margin:10px 0;font-size:14px}.sv-only>summary{font-size:14px;min-height:32px}.sv-only ul{margin:6px 0 0;padding-left:18px}.sv-only li{margin:4px 0}.sv-nets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 12px;margin:6px 0 10px}.sv-nets label{display:flex;align-items:center;gap:8px;min-height:40px;font-size:15px;margin:0;color:var(--text)}.sv-nets input{width:20px;height:20px;flex:none;margin:0}
.sv-net{border-top:1px solid var(--hair);margin-top:10px;padding-top:8px}.sv-net>summary{font-size:16px;font-weight:500;color:var(--text);min-height:32px}.sv-step{display:flex;gap:10px;align-items:flex-start;margin:10px 0}.sv-step input{width:20px;height:20px;flex:none;margin:2px 0 0}.sv-step>div{min-width:0;overflow-wrap:anywhere}.sv-step b{font-weight:500}.sv-hard{margin-top:6px}.sv-hint{margin:8px 0;padding:10px 12px;border-radius:var(--r-s);background:var(--soft);font-size:15px;overflow-wrap:anywhere}.sv-box textarea,.sv-box input[type=text]{width:100%;box-sizing:border-box}
/* Что нужно от вас: сверху кабинета после заявки */
#svTodo h2{margin:0 0 2px}#svTodo .td-sub{font-size:14px;color:var(--mute);margin:0 0 10px;overflow-wrap:anywhere}.td-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--hair)}.td-row .td-t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.td-row b{font-weight:500}.td-row .td-x{font-size:14px;color:var(--mute);margin-top:1px}.td-st{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--mute);white-space:nowrap;margin-left:8px}.td-st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--soft3)}.td-row.done .td-st::before{background:var(--ok)}.td-row.action .td-st{color:var(--text)}.td-row.action .td-st::before{background:var(--acc)}.td-row button{margin:0;flex:none;min-height:36px;padding:6px 14px;font-size:14px;border-radius:18px}@media(pointer:coarse){.td-row button{min-height:44px;border-radius:22px}}@media(max-width:480px){.td-st{display:flex;margin:2px 0 0}}
/* Телефон: кнопки и раскрывашки площадок не ниже 44px, даже если браузер не сообщает о сенсорном экране. */
@media(max-width:600px),(pointer:coarse){.cn-open,.td-row button{min-height:44px;border-radius:22px}.cn-link{min-height:44px}.cn-choose>summary,.cn-own>summary,.sv-only>summary,.sv-net>summary{min-height:44px;padding-top:11px;padding-bottom:11px}}
.cn-vku{margin:10px 0 4px}
.cn-allow{background:#0077ff;color:#fff;font-weight:600}.cn-allow:hover,.cn-allow:focus{background:#0069e0;color:#fff}.cn-renew{margin:4px 0 0}.cn-other .cn-steps{margin-top:8px}.cn-vku input{max-width:100%;box-sizing:border-box}.cn-paste{margin:0;min-height:44px;background:var(--soft2);color:var(--text)}.cn-ex{margin:4px 0 0}.cn-keyf,.cn-keyp{margin:0}.cn-appsave{margin:0;min-height:44px;background:var(--soft2);color:var(--text)}.cn-appsaved{margin:4px 0 6px}.cn-appsec{font-family:ui-monospace,monospace}.cn-appdel[hidden]{display:none}.cn-appkey{margin:8px 0 0}.cn-appkeyf{margin:6px 0 0}
/* Вход VK ID (smm_vkimg_0811): кнопка в цветах ВКонтакте, текст по правилам VK ID «Войти через ВКонтакте». */
.cn-vkid{background:#0077ff;color:#fff;font-weight:600;min-height:44px;padding:10px 18px;max-width:100%;white-space:normal}.cn-vkid:hover{background:#0069e0}.cn-vkid:disabled{background:#0077ff}
.cn-warn{margin:8px 0;padding:10px 12px;border-radius:var(--r-s);font-size:14px;background:var(--warn-soft);color:var(--text);overflow-wrap:anywhere}
.cn-msg{margin:10px 0 0;padding:10px 12px;border-radius:var(--r-s);font-size:14px;background:var(--soft);overflow-wrap:anywhere}
.cn-msg.ok{background:var(--ok-soft);color:var(--ok-text)}
.cn-msg.bad{background:var(--bad-soft);color:var(--bad-text)}
.cn-msg.warn{background:var(--warn-soft);color:var(--text)}