@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

  :root{
    --bg:#0D0D11;
    --bg-elevated:#13131a;
    --cyan:#00E5FF;
    --pink:#FF3B6B;
    --emerald:#00FFA3;
    --amber:#FFD166;
    --text:#EDEFF5;
    --text-dim:#8A8C9A;
    --text-faint:#56586a;
    --glass-border:rgba(255,255,255,0.07);
    --glass-bg:rgba(255,255,255,0.032);
    --glass-bg-hover:rgba(255,255,255,0.05);

    /* Radius — единая шкала */
    --radius-xs:8px;
    --radius-sm:10px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:20px;
    --radius-pill:999px;

    /* Spacing — 4pt grid */
    --space-xs:4px;
    --space-sm:8px;
    --space-md:12px;
    --space-lg:16px;
    --space-xl:20px;
    --space-2xl:24px;
    --space-card:var(--space-lg);
    --space-gap:var(--space-md);

    /* Typography */
    --text-xs:11px;
    --text-sm:12px;
    --text-base:14px;
    --text-lg:16px;
    --text-xl:20px;
    --text-2xl:24px;
    --leading-tight:1.25;
    --leading-normal:1.45;
    --leading-relaxed:1.55;

    /* Touch targets — one-hand friendly */
    --touch-min:44px;
    --tabbar-h:56px;

    /* Focus ring */
    --focus-ring:0 0 0 2px var(--bg), 0 0 0 4px rgba(0,229,255,0.45);

    /* Motion — Linear/Vercel easing */
    --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:0.15s;
    --duration-normal:0.28s;
    --duration-slow:0.45s;

    /* Elevation */
    --shadow-sm:0 1px 2px rgba(0,0,0,0.24);
    --shadow-md:0 4px 16px rgba(0,0,0,0.32);
    --surface-inset:inset 0 1px 0 rgba(255,255,255,0.045);
  }

  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

  html,body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    font-size:var(--text-base);
    line-height:var(--leading-normal);
    overflow-x:hidden;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  body{
    position:relative;
  }

  /* --- Signature ambient background: hex-grid + traveling pulse --- */
  .bg-grid{
    position:fixed;inset:0;z-index:0;
    background-image:
      linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px);
    background-size:40px 40px;
    mask-image:radial-gradient(ellipse 75% 55% at 50% 0%, black 0%, transparent 70%);
    pointer-events:none;
  }
  .bg-glow{
    position:fixed;top:-220px;left:50%;
    width:520px;height:520px;
    transform:translateX(-50%);
    background:radial-gradient(circle, rgba(0,229,255,0.07) 0%, transparent 68%);
    z-index:0;pointer-events:none;
  }
  .pulse-dot{
    position:fixed;width:3px;height:3px;border-radius:50%;
    background:var(--cyan);opacity:0.5;
    z-index:0;pointer-events:none;
    offset-path:path('M -50 80 Q 200 20 500 90 T 1000 60');
    animation:travel 9s linear infinite;
  }
  @keyframes travel{
    0%{offset-distance:0%; opacity:0;}
    8%{opacity:0.85;}
    92%{opacity:0.85;}
    100%{offset-distance:100%; opacity:0;}
  }

  .app{
    position:relative;z-index:1;max-width:560px;margin:0 auto;
    padding:max(var(--space-lg), env(safe-area-inset-top)) var(--space-lg) calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom));
  }

  .view-header{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:var(--space-md);margin-bottom:var(--space-lg);
  }
  .view-header .page-title{
    margin:0;
    font-size:var(--text-xl);
    letter-spacing:-0.02em;
  }
  .view-badge{
    font-size:var(--text-xs);font-weight:600;color:var(--text-dim);
    padding:6px 10px;border-radius:var(--radius-pill);
    background:rgba(255,255,255,0.04);border:1px solid var(--glass-border);
    white-space:nowrap;flex-shrink:0;
  }

  /* --- Header --- */
  .topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:var(--space-xs) 0 var(--space-lg);
    margin-bottom:var(--space-xs);
    border-bottom:1px solid rgba(255,255,255,0.04);
  }
  .brand{display:flex;align-items:center;gap:var(--space-md);}
  .brand-mark{
    width:36px;height:36px;border-radius:var(--radius-sm);
    background:linear-gradient(135deg, rgba(0,229,255,0.14), rgba(0,255,163,0.08));
    border:1px solid var(--glass-border);
    box-shadow:var(--surface-inset);
    display:flex;align-items:center;justify-content:center;
    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--text-base);
    color:var(--cyan);
  }
  .brand-text{
    font-family:'Space Grotesk',sans-serif;font-weight:600;
    font-size:var(--text-base);letter-spacing:-0.01em;line-height:var(--leading-tight);
  }
  .brand-sub{font-size:var(--text-xs);color:var(--text-faint);margin-top:2px;}
  .status-pill{
    display:flex;align-items:center;gap:6px;
    font-size:var(--text-xs);color:var(--text-dim);
    padding:6px 11px;border-radius:var(--radius-pill);
    background:var(--glass-bg);border:1px solid var(--glass-border);
  }
  .status-pill .dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--emerald);box-shadow:0 0 4px rgba(0,255,163,0.45);
  }

  /* --- Surfaces --- */
  .card,.metric-card,.dash-panel,.user-card,.settings-card{
    background:var(--glass-bg);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid var(--glass-border);
    box-shadow:var(--surface-inset), var(--shadow-sm);
  }
  .card{
    border-radius:var(--radius-lg);
    padding:var(--space-card);
  }
  .surface-card{
    background:var(--glass-bg);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-md);
  }
  .surface-inset{
    background:rgba(255,255,255,0.018);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-sm);
  }

  /* --- Views --- */
  .view{display:none;animation:viewEnter var(--duration-normal) var(--ease-out);}
  .view.active{display:block;}
  @keyframes viewEnter{
    from{opacity:0;transform:translateY(6px);}
    to{opacity:1;transform:translateY(0);}
  }
  @keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

  /* --- Typography helpers --- */
  .page-title{
    font-family:'Space Grotesk',sans-serif;font-weight:600;
    font-size:var(--text-lg);color:var(--text);
    letter-spacing:-0.01em;line-height:var(--leading-tight);
    margin:0 0 var(--space-md);
  }
  .section-title{
    font-size:var(--text-xs);font-weight:600;
    color:var(--text-faint);text-transform:uppercase;
    letter-spacing:0.06em;
    margin:var(--space-2xl) 0 var(--space-md);
  }
  .section-title:first-child{margin-top:0;}
  .field-label{
    display:block;font-size:var(--text-sm);font-weight:600;
    color:var(--text-dim);margin-bottom:var(--space-sm);
  }
  .hint-text{
    font-size:var(--text-xs);color:var(--text-faint);
    line-height:var(--leading-relaxed);margin-bottom:var(--space-md);
  }

  /* === DASHBOARD === */
  .metrics-grid{
    display:grid;grid-template-columns:1fr 1fr;
    gap:var(--space-md);margin-bottom:var(--space-lg);
  }
  .metric-card{
    border-radius:var(--radius-md);
    padding:var(--space-card);
    position:relative;
    overflow:hidden;
    transition:border-color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out);
  }
  .metric-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg, transparent, var(--metric-accent, rgba(255,255,255,0.12)), transparent);
    opacity:0.75;
  }
  .metric-card::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 80% 60% at 50% -20%, color-mix(in srgb, var(--metric-accent, var(--cyan)) 8%, transparent), transparent 70%);
    opacity:0.9;
  }
  .metric-card > *{position:relative;z-index:1;}
  .metric-label{
    font-size:var(--text-xs);color:var(--text-faint);
    font-weight:500;margin-bottom:var(--space-sm);
  }
  .metric-value{
    font-family:'Space Grotesk',sans-serif;font-weight:700;
    font-size:var(--text-2xl);color:var(--metric-accent, var(--text));
    line-height:1;letter-spacing:-0.02em;
  }
  .metric-value .unit{font-size:var(--text-sm);color:var(--text-dim);font-weight:500;margin-left:2px;}
  .metric-foot{font-size:var(--text-xs);color:var(--text-faint);margin-top:var(--space-sm);line-height:var(--leading-normal);}

  .mc-cyan{--metric-accent:var(--cyan);}
  .mc-emerald{--metric-accent:var(--emerald);}
  .mc-pink{--metric-accent:var(--pink);}
  .mc-amber{--metric-accent:var(--amber);}

  .dash-panel{
    border-radius:var(--radius-md);
    padding:var(--space-card);
    margin-bottom:var(--space-gap);
  }
  .dash-panel-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:var(--space-md);
    font-size:var(--text-xs);color:var(--text-faint);
    font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  }
  .dash-panel-head span{color:var(--text-dim);font-weight:500;text-transform:none;letter-spacing:0;}

  .chart-bars{
    display:flex;align-items:flex-end;gap:var(--space-sm);
    height:68px;padding-top:var(--space-xs);
  }
  .chart-bar-wrap{
    flex:1;display:flex;flex-direction:column;align-items:center;
    gap:var(--space-xs);min-width:0;
  }
  .chart-bar{
    width:100%;max-width:24px;border-radius:var(--radius-xs) var(--radius-xs) 2px 2px;
    background:linear-gradient(180deg, rgba(0,229,255,0.85), rgba(0,229,255,0.22));
    min-height:4px;
    transition:height 0.5s var(--ease-out), opacity var(--duration-normal) var(--ease-out);
    transform-origin:bottom;
  }
  .chart-bar-svg{
    width:100%;max-width:24px;height:68px;display:block;
  }
  .chart-bar-fill{fill:rgba(0,229,255,0.75);}
  .chart-bar-wrap--0{animation-delay:0s;}
  .chart-bar-wrap--1{animation-delay:0.05s;}
  .chart-bar-wrap--2{animation-delay:0.1s;}
  .chart-bar-wrap--3{animation-delay:0.15s;}
  .chart-bar-wrap--4{animation-delay:0.2s;}
  .chart-bar-wrap--5{animation-delay:0.25s;}
  .chart-bar-wrap--6{animation-delay:0.3s;}
  .chart-bar-wrap{animation:barWrapIn 0.45s var(--ease-out) backwards;}
  @keyframes barWrapIn{
    from{opacity:0;transform:translateY(4px);}
    to{opacity:1;transform:translateY(0);}
  }
  .chart-bar-label{font-size:var(--text-xs);color:var(--text-faint);}

  .highlight-row{
    display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
    padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);
    background:linear-gradient(135deg, rgba(0,255,163,0.05), rgba(0,255,163,0.02));
    border:1px solid rgba(0,255,163,0.12);
    box-shadow:var(--surface-inset);
    font-size:var(--text-sm);
  }
  .highlight-row .hl-main{min-width:0;flex:1;}
  .highlight-row .hl-title{font-size:10px;color:var(--text-faint);font-weight:600;margin-bottom:3px;}
  .highlight-row .hl-user{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .highlight-row .hl-meta{font-size:var(--text-xs);color:var(--text-dim);margin-top:2px;}
  .highlight-row .hl-amount{
    font-family:'Space Grotesk',sans-serif;font-weight:700;
    font-size:var(--text-lg);color:var(--emerald);white-space:nowrap;
  }

  .server-list,.activity-list{display:flex;flex-direction:column;gap:0;}
  .activity-panel .activity-list{gap:0;}
  .activity-panel .activity-row{
    background:transparent;border:none;border-radius:0;
    padding:var(--space-md) 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .activity-panel .activity-row:last-child{border-bottom:none;}
  .activity-panel .load-more{margin-top:var(--space-md);}
  .server-row,.activity-row{
    display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
    padding:var(--space-md);border-radius:var(--radius-sm);
    background:rgba(255,255,255,0.018);border:1px solid var(--glass-border);
    font-size:var(--text-sm);
  }
  .activity-row{align-items:flex-start;}
  .server-row .srv-name{font-weight:600;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .server-row .srv-meta{display:flex;align-items:center;gap:var(--space-sm);color:var(--text-dim);font-size:var(--text-xs);white-space:nowrap;}
  .srv-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
  .srv-dot--ok{background:var(--emerald);}
  .srv-dot--off{background:var(--text-faint);}
  .srv-dot--warn{background:var(--amber);}
  .activity-row .act-main{min-width:0;flex:1;}
  .activity-row .act-title{font-weight:600;color:var(--text);font-size:var(--text-sm);}
  .activity-row .act-detail{font-size:var(--text-xs);color:var(--text-dim);margin-top:2px;line-height:var(--leading-normal);word-break:break-word;}
  .activity-row .act-time{font-size:10px;color:var(--text-faint);white-space:nowrap;flex-shrink:0;margin-top:2px;}

  .dash-note{font-size:var(--text-xs);color:var(--text-faint);text-align:center;padding:var(--space-sm) 0;}

  .empty-state{
    text-align:center;padding:var(--space-2xl) var(--space-lg);
    color:var(--text-faint);font-size:var(--text-sm);
    display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);
  }
  .empty-state-icon{font-size:26px;line-height:1;opacity:0.45;}
  .empty-state-title{font-size:var(--text-base);font-weight:600;color:var(--text-dim);}
  .empty-state-desc{font-size:var(--text-sm);color:var(--text-faint);max-width:280px;line-height:var(--leading-relaxed);}
  .empty-state .btn{margin-top:var(--space-sm);flex:none;min-width:128px;min-height:var(--touch-min);}

  .card-enter{
    animation:cardEnter 0.42s var(--ease-out) backwards;
  }
  .card-enter-0{animation-delay:0s;}
  .card-enter-1{animation-delay:0.04s;}
  .card-enter-2{animation-delay:0.08s;}
  .card-enter-3{animation-delay:0.12s;}
  .card-enter-4{animation-delay:0.16s;}
  .card-enter-5{animation-delay:0.2s;}
  .card-enter-6{animation-delay:0.24s;}
  .card-enter-7{animation-delay:0.28s;}
  .card-enter-8{animation-delay:0.32s;}
  @keyframes cardEnter{
    from{opacity:0;transform:translateY(8px) scale(0.985);}
    to{opacity:1;transform:translateY(0) scale(1);}
  }

  /* === USERS === */
  .search-bar{margin-bottom:var(--space-lg);}
  .search-wrap{
    position:relative;display:flex;align-items:center;
  }
  .search-icon{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);
    width:16px;height:16px;color:var(--text-faint);pointer-events:none;
    display:flex;align-items:center;justify-content:center;
  }
  .search-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;}
  .search-input{
    flex:1;width:100%;min-height:var(--touch-min);
    background:rgba(255,255,255,0.025);border:1px solid var(--glass-border);
    border-radius:var(--radius-md);padding:0 var(--space-lg) 0 42px;
    color:var(--text);font-size:var(--text-base);font-family:'Inter',sans-serif;
    outline:none;
    transition:border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background var(--duration-fast) ease;
    box-shadow:var(--surface-inset);
  }
  .search-input:focus{
    border-color:rgba(0,229,255,0.35);
    box-shadow:var(--focus-ring), var(--surface-inset);
    background:rgba(0,229,255,0.03);
  }
  .search-input::placeholder{color:var(--text-faint);}

  .user-toolbar{
    display:flex;flex-direction:column;gap:var(--space-sm);
    margin-bottom:var(--space-lg);
  }
  .filter-row{
    display:flex;flex-wrap:wrap;gap:var(--space-xs);
  }
  .filter-row .audience-chip{
    flex:1 1 auto;min-width:0;padding:var(--space-sm) var(--space-md);
    text-align:center;font-size:var(--text-xs);
  }
  .sort-select{
    min-height:var(--touch-min);
    padding:0 var(--space-md);
    border-radius:var(--radius-sm);
    border:1px solid var(--glass-border);
    background:rgba(255,255,255,0.018);
    color:var(--text-dim);font-size:var(--text-sm);font-weight:500;
    font-family:'Inter',sans-serif;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .sort-select:focus{outline:none;border-color:rgba(0,229,255,0.35);box-shadow:var(--focus-ring);}

  .user-card{
    border-radius:var(--radius-md);
    padding:var(--space-card);margin-bottom:var(--space-gap);
    --expiry-accent:var(--text-faint);
    border-left:2px solid var(--expiry-accent);
  }
  .user-card--green{--expiry-accent:var(--emerald);}
  .user-card--yellow{--expiry-accent:var(--amber);}
  .user-card--red{--expiry-accent:var(--pink);}
  .user-card--admin{--expiry-accent:var(--cyan);}
  .user-card-header{
    display:flex;align-items:flex-start;justify-content:space-between;
    gap:var(--space-md);margin-bottom:var(--space-md);
  }
  .user-id-block{display:flex;align-items:center;gap:var(--space-md);min-width:0;flex:1;}
  .user-avatar{
    width:40px;height:40px;border-radius:var(--radius-sm);
    background:linear-gradient(135deg, rgba(0,229,255,0.12), rgba(0,255,163,0.06));
    display:flex;align-items:center;justify-content:center;
    font-family:'Space Grotesk',sans-serif;font-weight:600;
    font-size:var(--text-sm);color:var(--cyan);flex-shrink:0;
  }
  .user-name{font-size:var(--text-base);font-weight:600;line-height:var(--leading-tight);}
  .user-tgid{font-size:var(--text-xs);color:var(--text-faint);margin-top:2px;}
  .badge{
    font-size:10px;font-weight:600;
    padding:5px 10px;border-radius:var(--radius-pill);
    white-space:nowrap;flex-shrink:0;border:1px solid transparent;
  }
  .badge-active{background:rgba(0,255,163,0.1);color:var(--emerald);border-color:rgba(0,255,163,0.18);}
  .badge-blocked{background:rgba(255,59,107,0.1);color:var(--pink);border-color:rgba(255,59,107,0.18);}
  .badge-expired{background:rgba(255,59,107,0.08);color:#ff7a9a;border-color:rgba(255,59,107,0.14);}
  .badge-admin{background:rgba(0,229,255,0.1);color:var(--cyan);border-color:rgba(0,229,255,0.18);}
  .user-expiry{
    padding:var(--space-md);border-radius:var(--radius-sm);
    margin-bottom:var(--space-md);
    background:rgba(255,255,255,0.018);border:1px solid var(--glass-border);
  }
  .user-expiry--green{border-color:rgba(0,255,163,0.16);background:rgba(0,255,163,0.04);}
  .user-expiry--yellow{border-color:rgba(255,209,102,0.18);background:rgba(255,209,102,0.04);}
  .user-expiry--red{border-color:rgba(255,59,107,0.18);background:rgba(255,59,107,0.04);}
  .user-expiry--admin{border-color:rgba(0,229,255,0.16);background:rgba(0,229,255,0.04);}
  .user-expiry-label{
    font-size:10px;color:var(--text-faint);
    font-weight:600;margin-bottom:var(--space-xs);
  }
  .user-expiry-date{
    font-family:'Space Grotesk',sans-serif;
    font-size:var(--text-xl);font-weight:700;line-height:1.1;letter-spacing:-0.02em;
  }
  .user-expiry--green .user-expiry-date{color:var(--emerald);}
  .user-expiry--yellow .user-expiry-date{color:var(--amber);}
  .user-expiry--red .user-expiry-date{color:var(--pink);}
  .user-expiry--admin .user-expiry-date{color:var(--cyan);}
  .user-expiry-days{font-size:12px;margin-top:5px;font-weight:600;}
  .user-expiry--green .user-expiry-days{color:rgba(0,255,163,0.85);}
  .user-expiry--yellow .user-expiry-days{color:rgba(255,209,102,0.95);}
  .user-expiry--red .user-expiry-days{color:rgba(255,122,154,0.95);}
  .user-expiry--admin .user-expiry-days{color:var(--text-dim);font-weight:500;}
  .user-secondary{
    display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);
    font-size:var(--text-xs);color:var(--text-dim);margin-bottom:var(--space-md);
  }
  .user-card-divider{
    height:1px;background:var(--glass-border);
    margin:0 0 var(--space-md);
  }
  .user-actions{
    display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);
  }
  .user-actions .btn{
    flex:none;min-width:0;min-height:var(--touch-min);padding:10px 6px;font-size:var(--text-xs);
  }
  .user-actions-panel{display:flex;gap:var(--space-sm);flex-wrap:wrap;width:100%;align-items:center;}
  .user-devices{
    margin-top:var(--space-md);padding-top:var(--space-md);
    border-top:1px solid var(--glass-border);
  }
  .user-devices-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:var(--space-md);
    font-size:var(--text-xs);color:var(--text-faint);
  }
  .user-devices-head b{color:var(--text-dim);font-weight:600;}
  .device-list{display:flex;flex-direction:column;gap:var(--space-sm);}
  .device-card{
    background:rgba(255,255,255,0.02);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-sm);
    padding:var(--space-md);
  }
  .device-card-head{
    display:flex;align-items:flex-start;justify-content:space-between;
    gap:var(--space-sm);margin-bottom:var(--space-sm);
  }
  .device-title-wrap{min-width:0;flex:1;}
  .device-name{font-size:var(--text-base);font-weight:600;line-height:var(--leading-tight);color:var(--text);}
  .device-platform{font-size:var(--text-xs);color:var(--text-dim);margin-top:3px;font-weight:600;}
  .device-status{
    display:flex;align-items:center;gap:6px;
    font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;
    white-space:nowrap;flex-shrink:0;
  }
  .device-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
  .device-status--online{color:var(--emerald);}
  .device-status--online .device-status-dot{background:var(--emerald);}
  .device-status--offline{color:var(--text-faint);}
  .device-status--offline .device-status-dot{background:var(--text-faint);}
  .device-meta-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm) var(--space-md);
    margin-bottom:var(--space-sm);
  }
  .device-meta-item{
    min-width:0;font-size:var(--text-xs);color:var(--text-dim);line-height:var(--leading-normal);
  }
  .device-meta-label{
    display:flex;align-items:center;gap:var(--space-xs);
    color:var(--text-faint);font-size:10px;margin-bottom:2px;
  }
  .device-meta-value{color:var(--text);font-weight:600;word-break:break-word;}
  .device-meta-value.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:500;}
  .device-card-actions{display:flex;justify-content:flex-end;}
  .device-card-actions .btn{min-height:36px;padding:8px 12px;font-size:var(--text-xs);flex:none;}
  .device-empty,.device-loading{font-size:var(--text-xs);color:var(--text-faint);padding:var(--space-xs) 0;}
  .device-empty--error{color:var(--pink);}

  .user-actions-panel .btn-compact{
    flex:1;min-width:50px;min-height:var(--touch-min);padding:8px 6px;font-size:var(--text-xs);
  }
  .user-actions-panel .btn-fixed{
    flex:none;min-height:var(--touch-min);padding:8px 12px;font-size:var(--text-sm);
  }
  .inline-input{
    flex:1;min-width:80px;min-height:var(--touch-min);
    background:var(--glass-bg);border:1px solid var(--glass-border);
    border-radius:var(--radius-xs);padding:8px 10px;
    color:var(--text);font-size:var(--text-sm);font-family:'Inter',sans-serif;outline:none;
  }
  .inline-input:focus{border-color:rgba(0,229,255,0.35);box-shadow:var(--focus-ring);}
  .inline-input--wide{min-width:120px;}
  .vless-row{display:flex;align-items:flex-start;gap:var(--space-sm);}
  .vless-row .vless-text{flex:1;line-height:var(--leading-relaxed);}
  .btn.is-locked{opacity:0.4;pointer-events:none;}
  .hidden{display:none !important;}
  .vless-block{
    margin-top:var(--space-sm);
    background:rgba(255,255,255,0.02);
    border-radius:var(--radius-sm);
    padding:var(--space-md);
    word-break:break-all;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:var(--text-xs);color:var(--text-dim);
  }
  .vless-row .btn-copy{
    flex:none;min-height:36px;padding:8px 12px;
    font-size:var(--text-xs);white-space:nowrap;
  }
  .skeleton-metric{display:inline-block;width:50px;height:26px;}
  .skeleton-metric--sm{width:40px;}
  .skeleton-metric--lg{width:60px;}

  .btn{
    flex:1;min-height:var(--touch-min);
    padding:10px var(--space-md);
    border-radius:var(--radius-sm);
    border:1px solid var(--glass-border);
    background:rgba(255,255,255,0.025);
    color:var(--text);
    font-size:var(--text-sm);font-weight:600;
    font-family:'Inter',sans-serif;
    cursor:pointer;
    transition:background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    text-align:center;line-height:var(--leading-tight);
    -webkit-tap-highlight-color:transparent;
  }
  .btn:active:not(:disabled){transform:scale(0.98);}
  .btn:focus-visible{outline:none;box-shadow:var(--focus-ring);}
  .btn-cyan{border-color:rgba(0,229,255,0.28);color:var(--cyan);}
  .btn-cyan:active:not(:disabled){background:rgba(0,229,255,0.1);}
  .btn-cyan.btn-lg,
  .btn-cyan.btn-full{
    background:linear-gradient(180deg, rgba(0,229,255,0.16) 0%, rgba(0,229,255,0.06) 100%);
    box-shadow:var(--surface-inset), 0 1px 2px rgba(0,0,0,0.2);
  }
  .btn-cyan.btn-lg:active:not(:disabled),
  .btn-cyan.btn-full:active:not(:disabled){
    background:linear-gradient(180deg, rgba(0,229,255,0.22) 0%, rgba(0,229,255,0.1) 100%);
  }
  .btn-pink{border-color:rgba(255,59,107,0.28);color:var(--pink);}
  .btn-pink:active:not(:disabled){background:rgba(255,59,107,0.1);}
  .btn-emerald{border-color:rgba(0,255,163,0.28);color:var(--emerald);}
  .btn-emerald:active:not(:disabled){background:rgba(0,255,163,0.1);}
  .btn-ghost{background:transparent;color:var(--text-dim);border-color:var(--glass-border);}
  .btn-full{width:100%;}
  .btn-lg{
    min-height:var(--touch-min);padding:0 var(--space-lg);
    font-size:var(--text-base);border-radius:var(--radius-md);
  }
  .btn-sm{min-height:36px;padding:8px 12px;font-size:var(--text-xs);}
  .btn:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none;}

  .load-more{
    text-align:center;padding:var(--space-md) var(--space-lg);
    color:var(--text-dim);font-size:var(--text-sm);font-weight:600;
    cursor:pointer;min-height:var(--touch-min);
    display:flex;align-items:center;justify-content:center;
    border-radius:var(--radius-pill);
    border:1px solid var(--glass-border);
    background:rgba(255,255,255,0.02);
    margin-top:var(--space-sm);
    transition:background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out);
  }
  .load-more:active{
    background:rgba(0,229,255,0.06);
    border-color:rgba(0,229,255,0.2);
    color:var(--cyan);
    transform:scale(0.98);
  }

  /* === BROADCAST === */
  .form-block{margin-bottom:var(--space-lg);}
  .form-block:last-child{margin-bottom:0;}
  textarea, .file-drop{
    width:100%;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-md);
    color:var(--text);
    font-family:'Inter',sans-serif;
    font-size:var(--text-base);
    outline:none;resize:none;line-height:var(--leading-relaxed);
  }
  textarea{
    padding:var(--space-md);min-height:120px;
    margin-bottom:0;
  }
  textarea:focus,.file-drop:focus-within{border-color:rgba(0,229,255,0.35);box-shadow:var(--focus-ring);}
  textarea::placeholder{color:var(--text-faint);}

  .file-drop{
    padding:var(--space-xl);text-align:center;cursor:pointer;
    border-style:dashed;color:var(--text-dim);margin-bottom:0;
    transition:border-color 0.2s ease, background 0.2s ease;
    min-height:var(--touch-min);display:flex;flex-direction:column;
    align-items:center;justify-content:center;
  }
  .file-drop.has-file{border-color:rgba(0,255,163,0.35);border-style:solid;color:var(--emerald);background:rgba(0,255,163,0.03);}
  .file-drop input{display:none;}
  .file-drop-icon{font-size:20px;margin-bottom:var(--space-sm);display:block;opacity:0.7;}

  .file-preview{
    margin-top:var(--space-md);border-radius:var(--radius-md);overflow:hidden;
    border:1px solid var(--glass-border);display:none;
  }
  .file-preview.visible{display:block;}
  .file-preview img{width:100%;display:block;max-height:200px;object-fit:cover;}

  .broadcast-meta{
    display:flex;justify-content:space-between;align-items:center;
    margin:var(--space-md) 0;font-size:var(--text-xs);color:var(--text-faint);
  }
  .char-count--warn{color:var(--amber);}
  .char-count--danger{color:var(--pink);}

  .audience-grid{
    display:grid;grid-template-columns:1fr 1fr;
    gap:var(--space-sm);margin-bottom:0;
  }
  .audience-chip{
    min-height:var(--touch-min);
    padding:var(--space-md);
    border-radius:var(--radius-sm);
    border:1px solid var(--glass-border);
    background:rgba(255,255,255,0.018);
    color:var(--text-dim);font-size:var(--text-sm);font-weight:600;
    cursor:pointer;text-align:left;
    transition:border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    font-family:'Inter',sans-serif;
    -webkit-tap-highlight-color:transparent;
  }
  .audience-chip:active{transform:scale(0.98);}
  .audience-chip:focus-visible{outline:none;box-shadow:var(--focus-ring);}
  .audience-chip.active{
    border-color:rgba(0,229,255,0.35);
    background:rgba(0,229,255,0.06);color:var(--cyan);
  }
  .audience-chip span{display:block;font-size:var(--text-xs);font-weight:500;color:var(--text-faint);margin-top:3px;}
  .audience-chip.active span{color:var(--text-dim);}

  .broadcast-preview{
    margin-top:var(--space-md);padding:var(--space-md);
    border-radius:var(--radius-md);
    background:rgba(255,255,255,0.018);border:1px solid var(--glass-border);
  }
  .broadcast-preview-label{
    font-size:10px;color:var(--text-faint);font-weight:600;
    letter-spacing:0.04em;text-transform:uppercase;
    margin-bottom:var(--space-sm);
  }
  .preview-bubble{
    display:inline-block;max-width:100%;
    padding:var(--space-md);
    border-radius:var(--radius-md) var(--radius-md) var(--radius-md) var(--radius-xs);
    background:rgba(0,229,255,0.08);border:1px solid rgba(0,229,255,0.12);
    font-size:var(--text-sm);line-height:var(--leading-relaxed);
    color:var(--text);white-space:pre-wrap;word-break:break-word;
  }
  .preview-bubble img{
    display:block;width:100%;max-height:180px;object-fit:cover;
    border-radius:var(--radius-sm);margin-bottom:var(--space-sm);
  }
  .preview-empty{font-size:var(--text-sm);color:var(--text-faint);font-style:italic;}

  .template-row{
    display:flex;gap:var(--space-sm);flex-wrap:wrap;
  }
  .template-row select{
    flex:1;min-width:140px;min-height:var(--touch-min);
    background:var(--glass-bg);border:1px solid var(--glass-border);
    border-radius:var(--radius-sm);padding:0 var(--space-md);
    color:var(--text);font-size:var(--text-sm);font-family:'Inter',sans-serif;
    outline:none;transition:border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .template-row select:focus{border-color:rgba(0,229,255,0.35);box-shadow:var(--focus-ring);}
  .template-row .btn{flex:none;min-height:var(--touch-min);padding:0 var(--space-md);}

  .broadcast-progress{
    display:none;margin-bottom:var(--space-lg);padding:var(--space-md);
    border-radius:var(--radius-md);
    background:rgba(255,255,255,0.018);border:1px solid var(--glass-border);
  }
  .broadcast-progress.visible{display:block;}
  .progress-head{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:var(--space-sm);font-size:var(--text-sm);color:var(--text-dim);
  }
  .progress-bar{
    height:6px;border-radius:var(--radius-pill);background:rgba(255,255,255,0.06);overflow:hidden;
  }
  .progress-bar-fill{
    height:100%;width:100%;border-radius:var(--radius-pill);
    background:linear-gradient(90deg, var(--cyan), var(--emerald));
    transform-origin:left center;
    transform:scaleX(0);
    transition:transform 0.35s ease;
  }
  .progress-bar-fill[data-pct="0"]{transform:scaleX(0);}
  .progress-bar-fill[data-pct="5"]{transform:scaleX(0.05);}
  .progress-bar-fill[data-pct="10"]{transform:scaleX(0.1);}
  .progress-bar-fill[data-pct="15"]{transform:scaleX(0.15);}
  .progress-bar-fill[data-pct="20"]{transform:scaleX(0.2);}
  .progress-bar-fill[data-pct="25"]{transform:scaleX(0.25);}
  .progress-bar-fill[data-pct="30"]{transform:scaleX(0.3);}
  .progress-bar-fill[data-pct="35"]{transform:scaleX(0.35);}
  .progress-bar-fill[data-pct="40"]{transform:scaleX(0.4);}
  .progress-bar-fill[data-pct="45"]{transform:scaleX(0.45);}
  .progress-bar-fill[data-pct="50"]{transform:scaleX(0.5);}
  .progress-bar-fill[data-pct="55"]{transform:scaleX(0.55);}
  .progress-bar-fill[data-pct="60"]{transform:scaleX(0.6);}
  .progress-bar-fill[data-pct="65"]{transform:scaleX(0.65);}
  .progress-bar-fill[data-pct="70"]{transform:scaleX(0.7);}
  .progress-bar-fill[data-pct="75"]{transform:scaleX(0.75);}
  .progress-bar-fill[data-pct="80"]{transform:scaleX(0.8);}
  .progress-bar-fill[data-pct="85"]{transform:scaleX(0.85);}
  .progress-bar-fill[data-pct="90"]{transform:scaleX(0.9);}
  .progress-bar-fill[data-pct="95"]{transform:scaleX(0.95);}
  .progress-bar-fill[data-pct="100"]{transform:scaleX(1);}
  .progress-foot{
    display:flex;justify-content:space-between;align-items:center;
    margin-top:var(--space-sm);font-size:var(--text-xs);color:var(--text-faint);
  }

  .toast{
    position:fixed;bottom:calc(var(--tabbar-h) + 28px);left:50%;
    transform:translateX(-50%) translateY(16px) scale(0.96);
    background:var(--bg-elevated);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-md);
    padding:var(--space-md) var(--space-lg);
    font-size:var(--text-sm);font-weight:500;
    z-index:120;
    opacity:0;
    transition:opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-spring);
    pointer-events:none;
    max-width:90%;
    text-align:center;
    box-shadow:var(--shadow-md);
    display:flex;align-items:center;justify-content:center;gap:var(--space-sm);
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
  .toast.toast-ok{border-color:rgba(0,255,163,0.3);color:var(--emerald);}
  .toast.toast-err{border-color:rgba(255,59,107,0.3);color:var(--pink);}

  .confirm-overlay{
    position:fixed;inset:0;z-index:110;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    padding:20px;opacity:0;pointer-events:none;
    transition:opacity 0.25s ease;
  }
  .confirm-overlay.visible{opacity:1;pointer-events:auto;}
  .confirm-overlay.visible .confirm-dialog{
    animation:dialogIn var(--duration-normal) var(--ease-spring);
  }
  @keyframes dialogIn{
    from{opacity:0;transform:scale(0.94) translateY(8px);}
    to{opacity:1;transform:scale(1) translateY(0);}
  }
  .confirm-dialog{width:100%;max-width:340px;padding:var(--space-card);}
  .confirm-title{
    font-family:'Space Grotesk',sans-serif;
    font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-sm);
    letter-spacing:-0.01em;
  }
  .confirm-message{
    font-size:var(--text-sm);color:var(--text-dim);
    line-height:var(--leading-relaxed);margin-bottom:var(--space-lg);white-space:pre-wrap;
  }
  .confirm-actions{display:flex;gap:var(--space-sm);}
  .confirm-actions .btn{flex:1;min-height:var(--touch-min);}

  .ptr-indicator{
    position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(-120%);
    z-index:90;display:flex;align-items:center;gap:8px;
    padding:8px 14px;border-radius:100px;
    background:var(--bg-elevated);border:1px solid var(--glass-border);
    font-size:11px;color:var(--text-dim);
    transition:transform 0.25s ease;
    pointer-events:none;
  }
  .ptr-indicator.visible{transform:translateX(-50%) translateY(12px);}
  .ptr-indicator.loading .ptr-spinner{animation:ptrSpin 0.8s linear infinite;}
  .ptr-spinner{
    width:14px;height:14px;border-radius:50%;
    border:2px solid rgba(0,229,255,0.2);border-top-color:var(--cyan);
  }
  @keyframes ptrSpin{to{transform:rotate(360deg);}}

  .skeleton-user-card{pointer-events:none;}
  .skeleton-line{border-radius:6px;}
  .sk-w55{width:55%;}
  .sk-w70{width:70%;}
  .sk-w75{width:75%;}
  .sk-w100{width:100%;}
  .sk-h10{height:10px;}
  .sk-h14{height:14px;}
  .sk-h32{height:32px;}
  .sk-h36{height:36px;}
  .sk-h48{height:48px;}
  .sk-h52{height:52px;}
  .sk-mb10{margin-bottom:10px;}
  .sk-mb12{margin-bottom:12px;}
  .sk-r8{border-radius:8px;}
  .sk-r10{border-radius:10px;}

  /* === SETTINGS === */
  .settings-category{margin-bottom:var(--space-lg);}
  .settings-category-head{margin-bottom:var(--space-md);padding:0;}
  .settings-category-title{
    font-size:var(--text-xs);font-weight:600;
    color:var(--text-faint);text-transform:uppercase;letter-spacing:0.06em;
  }
  .settings-category-desc{
    display:block;font-size:var(--text-sm);color:var(--text-faint);
    margin-top:var(--space-xs);line-height:var(--leading-relaxed);
  }
  .settings-hint,.hint-text--field{
    font-size:var(--text-xs);color:var(--text-faint);
    margin:0 0 var(--space-md);line-height:var(--leading-relaxed);
  }
  .settings-field input,
  .settings-field textarea{
    width:100%;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-sm);
    color:var(--text);
    font-family:'Inter',sans-serif;
    outline:none;
    transition:border-color 0.2s ease;
  }
  .settings-field input{
    min-height:var(--touch-min);padding:0 var(--space-md);
    font-size:var(--text-base);
  }
  .settings-field textarea{
    padding:var(--space-md);min-height:96px;resize:vertical;
    font-size:var(--text-base);line-height:var(--leading-relaxed);
  }
  .settings-field + .settings-field{
    margin-top:var(--space-lg);padding-top:var(--space-lg);
    border-top:1px solid var(--glass-border);
  }
  .settings-field input:focus,
  .settings-field textarea:focus{border-color:rgba(0,229,255,0.35);box-shadow:var(--focus-ring);}
  .settings-field-foot{
    display:flex;justify-content:space-between;align-items:center;
    gap:var(--space-sm);margin-top:var(--space-sm);min-height:36px;
  }
  .settings-status{font-size:var(--text-xs);color:var(--text-faint);flex:1;}
  .settings-status--dirty{color:var(--amber);}
  .settings-status--saved{color:var(--emerald);}
  .settings-status--saving{color:var(--cyan);}
  .settings-status--error{color:var(--pink);}
  .settings-field-foot .btn{
    min-height:36px;padding:8px 12px;font-size:var(--text-xs);flex:none;
  }
  .settings-actions{
    display:flex;gap:var(--space-sm);margin-top:var(--space-lg);
  }
  .settings-actions .btn{flex:1;min-height:var(--touch-min);}
  .settings-actions .btn:disabled{opacity:0.45;cursor:not-allowed;}

  /* --- Bottom nav — thumb zone --- */
  .tabbar{
    position:fixed;bottom:0;left:0;right:0;z-index:10;
    display:flex;
    padding:var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom));
    background:rgba(13,13,17,0.94);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--glass-border);
    box-shadow:0 -4px 24px rgba(0,0,0,0.28);
  }
  .tabbar-indicator{
    position:absolute;
    top:var(--space-sm);
    left:var(--space-md);
    width:calc((100% - 2 * var(--space-md)) / 4);
    height:calc(var(--tabbar-h) - 2px);
    border-radius:var(--radius-md);
    background:rgba(0,229,255,0.07);
    border:1px solid rgba(0,229,255,0.14);
    box-shadow:var(--surface-inset);
    transition:transform 0.38s var(--ease-out);
    pointer-events:none;
    z-index:0;
    opacity:0;
  }
  .tabbar-indicator.ready{opacity:1;}
  .tabbar[data-active-tab="0"] .tabbar-indicator{transform:translateX(0);}
  .tabbar[data-active-tab="1"] .tabbar-indicator{transform:translateX(100%);}
  .tabbar[data-active-tab="2"] .tabbar-indicator{transform:translateX(200%);}
  .tabbar[data-active-tab="3"] .tabbar-indicator{transform:translateX(300%);}
  .tab-item{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;min-height:var(--tabbar-h);
    padding:var(--space-xs) 0;cursor:pointer;
    color:var(--text-faint);
    transition:color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out);
    -webkit-tap-highlight-color:transparent;
    user-select:none;
    position:relative;z-index:1;
  }
  .tab-item:active{transform:scale(0.96);}
  .tab-item.active{color:var(--cyan);}
  .tab-icon{font-size:20px;line-height:1;opacity:0.85;transition:opacity var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out);}
  .tab-item.active .tab-icon{opacity:1;transform:translateY(-1px);}
  .tab-label{font-size:10px;font-weight:600;letter-spacing:0.02em;transition:opacity var(--duration-fast) ease;}
  .tab-item.active .tab-label{opacity:1;}

  .skeleton{
    background:linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 37%, rgba(255,255,255,0.04) 63%);
    background-size:400% 100%;
    animation:shimmer 1.4s ease infinite;
    border-radius:6px;
  }
  @keyframes shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}

  @media (prefers-reduced-motion: reduce){
    .pulse-dot, .skeleton, .view, .card-enter, .ptr-spinner, .chart-bar-wrap, .confirm-overlay.visible .confirm-dialog{animation:none !important;}
    .tabbar-indicator{transition:none !important;}
  }

  /* iOS Safari не зумит поля с font-size >= 16px */
  @media (max-width: 768px){
    input, textarea, select{
      font-size:16px;
    }
  }