/* VIP-кабинет nelvoicard.com: общий каркас (боковое меню, фон, панели). 07.09.2026 */
:root{--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--side:300px;--panel:rgba(12,10,18,.78);--line:rgba(255,255,255,.09);--muted:rgba(255,255,255,.55);--green:#7dd87d;--red:#ff7b7b}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:var(--font);font-size:16px;line-height:1.5;color:#fff;background:#0a0a0f;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button,select,input{-webkit-tap-highlight-color:transparent}
/* отклик на нажатие как в приложениях Apple: лёгкое сжатие и мгновенный возврат */
.btn,.tile,.mobile-nav a,.mobile-top a,.nav a{transition:transform .18s cubic-bezier(.2,.8,.3,1),background-color .18s ease,color .18s ease,opacity .18s ease}
.btn:active,.tile:active,.mobile-nav a:active,.mobile-top a:active{transform:scale(.96)}
:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.btn:active,.tile:active,.mobile-nav a:active,.mobile-top a:active{transform:none}}
.app{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:26px 18px;background:#0e0d13;border-right:1px solid var(--line)}
.side .mark{display:flex;align-items:center;gap:10px;padding:6px 10px 26px;font-weight:600;letter-spacing:-.02em;font-size:1.05rem}
.side .mark i{font-size:22px;color:#d6b9ff}
.nav a{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;font-size:1rem;color:rgba(255,255,255,.8);margin-bottom:4px}
.nav a i{font-size:20px}
.nav a.active{background:#fff;color:#111}
.nav a:not(.active):hover{background:rgba(255,255,255,.06);color:#fff}
.side .grow{flex:1}
.side .vip{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(125,216,125,.08);color:var(--green);font-weight:600;margin-bottom:6px}
/* не подтверждённая личность: янтарный статус, кликабельный (ведёт на проверку) */
.side .vip.off{background:rgba(255,196,120,.10);color:#ffd08a}
.side .vip.off:hover{background:rgba(255,196,120,.16)}
.side .user{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--muted);font-size:.9rem;overflow:hidden}
.side .user .av{flex:none;width:32px;height:32px;border-radius:50%;background:#1f1d28;display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff}
.side .user span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.main{position:relative;padding:44px 48px 60px;background:radial-gradient(60% 55% at 30% 15%,rgba(120,40,140,.55),transparent 62%),radial-gradient(55% 60% at 100% 100%,rgba(255,255,255,.85),transparent 55%),radial-gradient(70% 70% at 70% 50%,rgba(150,50,160,.45),transparent 60%),#12101a;background-attachment:fixed}
.content{max-width:1120px;margin:0 auto}
.h1{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:600;letter-spacing:-.025em;margin-bottom:6px}
.lead{color:rgba(255,255,255,.7);margin-bottom:26px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:26px 28px;backdrop-filter:blur(14px);margin-bottom:22px}
.panel h3{font-size:1.15rem;font-weight:600;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center}
.panel h3 a,.panel h3 span{color:var(--muted);font-weight:400;font-size:.9rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:22px}
.row{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .ic{flex:none;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:20px}
.row .t{flex:1;min-width:0}
.row .t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t span{color:var(--muted);font-size:.85rem}
.row .amt{font-weight:600;white-space:nowrap}
.row .amt.in{color:var(--green)}
.row .amt.dec{color:var(--red)}
.empty{color:var(--muted);padding:12px 0}
.kv{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted)}
.kv b{font-weight:600;text-align:right;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:100px;background:rgba(125,216,125,.15);color:var(--green);font-size:.78rem;font-weight:600}
.badge.off{background:rgba(255,255,255,.08);color:var(--muted)}
.field{margin-bottom:14px}
.field label{display:block;margin-bottom:7px;font-size:.8125rem;font-weight:600;color:rgba(255,255,255,.85)}
.field input,.field select{width:100%;min-height:52px;padding:12px 16px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:#14161d;font:inherit;color:#fff;outline:none;appearance:none}
.field input:focus,.field select:focus{border-color:rgba(255,255,255,.6);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border:0;border-radius:100px;background:#fff;color:#0d0f14;font:inherit;font-weight:600;cursor:pointer}
.btn.w{width:100%}
.btn.ghost{background:rgba(255,255,255,.1);color:#fff}
.btn[disabled]{opacity:.45;cursor:default}
.msg{margin-top:14px;padding:14px 18px;border-radius:14px;font-size:.95rem;display:none}
.msg.err{display:block;background:#fdecec;color:#9b1c1c}
.msg.ok{display:block;background:rgba(125,216,125,.15);color:var(--green)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:14px}
.tile{padding:14px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.05);cursor:pointer;display:flex;align-items:center;gap:12px}
.tile.active{border-color:#fff;background:rgba(255,255,255,.12)}
.tile .ico{position:relative;width:36px;height:36px;flex:none}
.tile .ico img{width:100%;height:100%;border-radius:50%;object-fit:contain}
.tile .ico .b{position:absolute;bottom:-2px;left:-4px;width:15px;height:15px;border-radius:50%;border:2px solid #14161d;background:#14161d}
.tile b{display:block;font-size:.95rem}
.tile span{font-size:.78rem;color:var(--muted)}
.pager{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.mobile-top,.mobile-nav{display:none}
@media (max-width:900px){
  .app{display:block}
  .side{display:none}
  /* место снизу под панель вкладок + «домашняя полоска» iPhone */
  .main{padding:0 16px calc(104px + env(safe-area-inset-bottom));min-height:100vh;min-height:100dvh;background-attachment:scroll}
  /* шапка прилипает и размывает фон при прокрутке */
  .mobile-top{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:12px;
    margin:0 -16px 16px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
    background:rgba(10,10,15,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid rgba(255,255,255,.07)}
  .mobile-top a{flex:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:20px}
  .mobile-title{flex:1;min-width:0;text-align:center;font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* нижние вкладки: во всю ширину (кнопки чата больше нет), активная подсвечена */
  .mobile-nav{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;
    display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:8px 6px;border-radius:24px;
    background:rgba(18,17,24,.82);border:1px solid rgba(255,255,255,.1);
    backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);
    box-shadow:0 18px 40px rgba(0,0,0,.45)}
  .mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:52px;padding:6px 2px;border-radius:18px;font-size:.6875rem;line-height:1.1;text-align:center;
    color:rgba(255,255,255,.55)}
  .mobile-nav a i{font-size:21px;line-height:1}
  .mobile-nav a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .mobile-nav a.active{color:#fff;background:rgba(255,255,255,.14);font-weight:600}
  .mobile-nav a.active i{transform:scale(1.06)}
  /* на телефоне все двухколоночные блоки в одну колонку, даже если колонки заданы в самой странице */
  .grid2{grid-template-columns:1fr!important;gap:16px}
  .panel{padding:20px;border-radius:22px;margin-bottom:16px}
  .h1{margin-bottom:4px}
  .lead{margin-bottom:18px}
  .row .ic{width:42px;height:42px;font-size:18px}
  .kv{padding:12px 0}
  .kv b{text-align:right}
  .btn{min-height:50px}
  .pager{justify-content:center}
  /* широкое содержимое (таблицы, длинные строки) прокручивается внутри себя, а не тянет страницу */
  .panel table,.scroll-x{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:560px){
  .main{padding-left:14px;padding-right:14px}
  .mobile-top{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .panel{padding:18px 16px}
  .tiles{grid-template-columns:1fr}
  .kv{flex-direction:row;align-items:baseline}
  .kv span{flex:1;min-width:0}
}
@media (max-width:380px){
  .mobile-nav a{font-size:.625rem}
  .mobile-nav a i{font-size:19px}
  .h1{font-size:1.6rem}
}
/* горизонтальная ориентация телефона: панель вкладок ниже, шапка компактнее */
@media (max-width:900px) and (max-height:480px){
  .mobile-top{position:static}
  .mobile-nav{padding:4px}
  .mobile-nav a{min-height:44px;font-size:.625rem}
  .main{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}