:root{--bg:#0b1020;--card:#151d31;--line:#283452;--text:#f5f7ff;--muted:#9cabc8;--gold:#f5bc4b;--gold-dark:#221b0b;--ok:#51d496;--bad:#ff7a87;--live:#ff5364;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 10% 0,#263455 0,transparent 34rem),var(--bg);min-height:100%}*{box-sizing:border-box}body{margin:0;min-height:100vh}.shell{min-height:100vh}.hidden{display:none!important}.auth-view,.center-view{min-height:100vh;display:grid;place-content:center;padding:24px;gap:22px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--gold);color:#171207;font-weight:800;font-size:18px}.brand h1{font-size:20px;margin:0}.brand p{margin:3px 0 0;color:var(--muted);font-size:13px}.card{background:rgba(21,29,49,.94);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 16px 50px rgba(0,0,0,.18)}.auth-card{width:min(100%,390px)}.tabs{display:flex;gap:5px;background:#0d1425;padding:4px;border-radius:11px;margin-bottom:20px}.tab{flex:1;border:0;background:transparent;color:var(--muted);padding:9px;border-radius:8px;cursor:pointer;font:inherit}.tab.active{background:#263454;color:var(--text)}form{display:grid;gap:13px}label{font-size:13px;color:var(--muted);display:grid;gap:6px}small{font-size:11px}input{width:100%;border:1px solid var(--line);border-radius:10px;background:#0b1222;color:var(--text);padding:12px;font:inherit;outline:0}input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,188,75,.12)}button{font:inherit;cursor:pointer}.primary,.ghost{border-radius:10px;padding:11px 15px;font-weight:700}.primary{border:1px solid var(--gold);background:var(--gold);color:#1b1508}.primary:hover{filter:brightness(1.05)}.ghost{border:1px solid var(--line);background:transparent;color:var(--text)}.gold-text{color:var(--gold)}.wide{width:100%;margin-top:12px}.link-btn{border:0;background:none;color:var(--gold);padding:8px 0}.message{min-height:20px;margin:12px 0 0;font-size:13px;color:var(--muted)}.error{color:var(--bad)}.activation-card{width:min(100%,430px);text-align:center}.activation-card form{text-align:left;margin-top:22px}.activation-card h2{margin:10px 0}.activation-card>p{color:var(--muted);line-height:1.5}.eyebrow{color:var(--gold);font-weight:700;letter-spacing:.08em;font-size:11px}.topbar{min-height:76px;padding:12px max(20px,calc((100vw - 1040px)/2));border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;background:rgba(11,16,32,.8);backdrop-filter:blur(10px)}.compact .brand-mark{width:38px;height:38px;border-radius:11px;font-size:14px}.compact h1{font-size:17px}.content{max-width:1040px;margin:0 auto;padding:25px 20px 46px;display:grid;gap:16px}.notice{border:1px solid rgba(245,188,75,.5);background:var(--gold-dark);color:#ffe3a6;padding:12px 15px;border-radius:12px;font-size:14px}.status-card{display:flex;align-items:center;justify-content:space-between;gap:20px}.dot{display:inline-block;width:11px;height:11px;background:#71809d;border-radius:50%;margin-right:8px}.dot.live{background:var(--live);box-shadow:0 0 0 5px rgba(255,83,100,.13);animation:pulse 1.3s infinite}@keyframes pulse{50%{opacity:.35}}.muted{color:var(--muted);font-size:14px;line-height:1.5;margin:6px 0}.socket{font-size:12px;color:var(--muted);white-space:nowrap}.socket.ok{color:var(--ok)}.inline-form{grid-template-columns:1fr auto;margin-top:16px}.section-head{display:flex;justify-content:space-between;gap:15px;align-items:start}.section-head h2{margin:4px 0 0;font-size:19px}.audio-actions,.gift-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}.last-event{min-height:20px;margin:16px 0 0;color:#dbe5ff;font-size:14px}.catalog-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:10px;margin-top:15px}.gift,.catalog-gift{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#10182a}.catalog-gift{cursor:pointer}.catalog-gift.locked{opacity:.55;cursor:not-allowed}.gift-image{width:42px;height:42px;border-radius:9px;object-fit:cover;background:#263454}.gift-copy{min-width:0;flex:1}.gift-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gift-detail{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.test-btn{padding:7px 10px;border:1px solid var(--line);background:transparent;color:var(--gold);border-radius:8px;font-size:12px}.badge{font-size:11px;padding:4px 7px;border-radius:20px;background:#263454;color:var(--gold);white-space:nowrap}.badge.bad{color:var(--bad)}.assigned-table-wrap{margin-top:15px;overflow-x:auto;border:1px solid var(--line);border-radius:12px}.assigned-table{border-collapse:collapse;width:100%;min-width:710px;text-align:left}.assigned-table th{padding:11px 13px;background:#10182a;color:var(--muted);font-size:12px;font-weight:600}.assigned-table td{padding:11px 13px;border-top:1px solid var(--line);font-size:13px}.assigned-table tr:hover td{background:#18233b}.gift-cell{display:flex;align-items:center;gap:10px;min-width:210px}.coins{color:var(--gold);font-weight:700;white-space:nowrap}.audio-name{max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-count{color:var(--muted);white-space:nowrap}.empty{color:var(--muted);text-align:center;margin:18px 0 0}.send-bar{position:sticky;bottom:12px;border:1px solid var(--line);background:#18233b;padding:12px;border-radius:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;box-shadow:0 10px 25px rgba(0,0,0,.25)}.toast{position:fixed;z-index:10;bottom:22px;left:50%;transform:translateX(-50%);background:#eef4ff;color:#15203a;box-shadow:0 8px 30px rgba(0,0,0,.3);border-radius:10px;padding:11px 15px;font-size:14px;max-width:calc(100vw - 32px)}@media(max-width:580px){.topbar{padding:12px 16px}.compact p{display:none}.content{padding:16px}.card{padding:17px}.status-card{align-items:start;flex-direction:column;gap:7px}.inline-form{grid-template-columns:1fr}.catalog-list{grid-template-columns:1fr}.audio-actions,.gift-actions{flex-direction:column}.audio-actions button,.gift-actions button{width:100%}.send-bar{align-items:stretch;flex-direction:column}}

.install-tip{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:11px 12px;border:1px solid rgba(245,188,75,.32);border-radius:12px;background:rgba(245,188,75,.08);color:var(--muted);font-size:12px;line-height:1.45}
.install-tip-icon{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:9px;background:rgba(245,188,75,.16);color:var(--gold);font-size:16px;font-weight:900}
.install-tip strong,.install-tip span{display:block}
.install-tip strong{margin-bottom:2px;color:var(--text);font-size:13px}
@supports (padding:max(0px)){
  .auth-view,.center-view{padding-top:max(24px,env(safe-area-inset-top));padding-right:max(24px,env(safe-area-inset-right));padding-bottom:max(24px,env(safe-area-inset-bottom));padding-left:max(24px,env(safe-area-inset-left))}
  .topbar{padding-top:max(12px,env(safe-area-inset-top))}
  .content{padding-right:max(20px,env(safe-area-inset-right));padding-bottom:max(46px,calc(24px + env(safe-area-inset-bottom)));padding-left:max(20px,env(safe-area-inset-left))}
  .send-bar{bottom:max(12px,env(safe-area-inset-bottom))}
  .toast{bottom:max(22px,calc(12px + env(safe-area-inset-bottom)))}
}
@media(max-width:580px){
  @supports (padding:max(0px)){
    .topbar{padding-right:max(16px,env(safe-area-inset-right));padding-left:max(16px,env(safe-area-inset-left))}
    .content{padding-right:max(16px,env(safe-area-inset-right));padding-left:max(16px,env(safe-area-inset-left))}
  }
}
@media(display-mode:standalone){.install-tip{display:none}}

/* ---------- Vỏ ứng dụng cho iPhone/Android ---------- */
.mobile-app-nav{display:none}
@media(max-width:720px){
  html{min-height:100%;background:var(--bg);-webkit-text-size-adjust:100%}
  body,.shell{min-width:0;max-width:100%;min-height:100vh;min-height:100dvh}
  body{overflow-x:hidden;overscroll-behavior-y:none}
  button,input,select,textarea,.primary,.ghost,.link-btn,.test-btn{min-height:44px;touch-action:manipulation}
  input,select,textarea{font-size:16px}
  .auth-view,.center-view{min-height:100vh;min-height:100dvh;align-content:center;justify-content:center}
  .auth-card,.activation-card{max-width:420px;border-radius:20px}

  .topbar{
    position:sticky;
    z-index:40;
    top:0;
    min-height:68px;
    gap:10px;
    padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));
    background:rgba(9,16,34,.98);
    backdrop-filter:none;
  }
  .topbar .brand{min-width:0;flex:1 1 auto;gap:9px}
  .topbar .brand>div:last-child{min-width:0}
  .compact .brand-avatar{width:40px;height:40px}
  .compact h1{overflow:hidden;font-size:15px;text-overflow:ellipsis;white-space:nowrap}
  .compact p{overflow:hidden;max-width:46vw;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
  .topbar>.ghost{flex:0 0 auto;min-height:40px;padding:8px 11px;font-size:12px}

  .content{
    width:100%;
    min-width:0;
    max-width:none;
    padding:14px max(12px,env(safe-area-inset-right)) calc(92px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    gap:12px;
  }
  .card{min-width:0;max-width:100%;padding:16px;border-radius:16px;box-shadow:0 10px 28px rgba(0,0,0,.16)}
  .section-head{align-items:stretch;flex-direction:column;gap:12px}
  .section-head>button,.section-head>.ghost{width:100%}
  .linked-profile,.linked-profile>div{min-width:0}
  #tiktokName{overflow:hidden;font-size:18px;text-overflow:ellipsis;white-space:nowrap}
  .status-card{align-items:flex-start;flex-direction:column;gap:7px}
  .socket{white-space:normal}
  .inline-form{grid-template-columns:1fr}
  .inline-form button{width:100%}
  .live-stats{align-items:stretch;flex-direction:column}
  .live-stat,.top-gifters-card{width:100%;min-width:0;max-width:none}
  .audio-actions,.gift-actions{align-items:stretch;flex-direction:column}
  .audio-actions button,.gift-actions button{width:100%}
  .feature-grid{grid-template-columns:1fr}
  .feature-toggle{min-height:68px}
  .feature-count{align-self:flex-start}
  .live-events-heading{align-items:stretch;flex-direction:column}
  .live-events-heading h3{margin-right:0}
  .live-events-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .session-counter{min-width:0}
  .live-events-actions>.ghost{grid-column:1/-1;width:100%}
  .live-events{max-height:none;overflow:visible;padding-right:0}
  .live-event{grid-template-columns:28px 34px minmax(0,1fr);gap:7px;padding:9px 8px}
  .live-event time{grid-column:3}
  .overlay-card{grid-template-columns:1fr}
  .overlay-actions,.overlay-url-row{align-items:stretch;flex-direction:column}
  .overlay-actions button,.overlay-url-row button{width:100%}

  body[data-mobile-panel="live"] [data-mobile-panel="features"],
  body[data-mobile-panel="live"] [data-mobile-panel="gifts"],
  body[data-mobile-panel="features"] [data-mobile-panel="live"],
  body[data-mobile-panel="features"] [data-mobile-panel="gifts"],
  body[data-mobile-panel="gifts"] [data-mobile-panel="live"],
  body[data-mobile-panel="gifts"] [data-mobile-panel="features"]{display:none!important}

  .mobile-app-nav{
    position:fixed;
    z-index:50;
    right:0;
    bottom:0;
    left:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    padding:7px max(8px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    border-top:1px solid var(--line);
    background:rgba(9,16,34,.97);
    box-shadow:0 -12px 30px rgba(0,0,0,.3);
    backdrop-filter:blur(18px);
  }
  .mobile-nav-btn{
    display:grid;
    place-items:center;
    align-content:center;
    gap:3px;
    min-width:0;
    min-height:50px;
    padding:6px 4px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:var(--muted);
    font-size:11px;
    font-weight:700;
  }
  .mobile-nav-icon{font-size:17px;line-height:1}
  .mobile-nav-btn.active{background:#263454;color:var(--gold)}
  .mobile-nav-btn:disabled{opacity:.35}
  .mobile-nav-btn:focus-visible{outline:3px solid rgba(245,188,75,.42);outline-offset:1px}

  .assigned-table-wrap{overflow:visible;border:0;border-radius:0}
  .assigned-table,.assigned-table tbody,.assigned-table tr,.assigned-table td{display:block;width:100%;min-width:0}
  .assigned-table thead{display:none}
  .assigned-table tbody{display:grid;gap:12px}
  .assigned-table tr{padding:10px 12px;border:1px solid var(--line);border-radius:15px;background:#10182a;box-shadow:0 8px 22px rgba(0,0,0,.12)}
  .assigned-table tr:hover td{background:transparent}
  .assigned-table td{
    display:grid;
    grid-template-columns:minmax(92px,34%) minmax(0,1fr);
    align-items:start;
    gap:10px;
    padding:9px 2px;
    border:0;
    overflow-wrap:anywhere;
  }
  .assigned-table td+td{border-top:1px solid rgba(40,52,82,.55)}
  .assigned-table td::before{content:attr(data-label);color:var(--muted);font-size:10.5px;font-weight:700;line-height:1.45;text-transform:uppercase;letter-spacing:.04em}
  .assigned-table td[data-label=""]::before{display:none}
  .assigned-table td[data-label=""]{display:flex;align-items:center}
  .gift-cell{min-width:0;padding-bottom:11px!important}
  .audio-cell{min-width:0}
  .audio-name{max-width:none;white-space:normal;overflow-wrap:anywhere}
  .volume-control{grid-template-columns:minmax(0,1fr) 42px;min-width:0}
  .volume-control>span{grid-column:1/-1}
  .volume-control input[type="range"]{min-width:0}
  .queue-count{white-space:normal}
  .test-btn{width:100%;padding:10px}

  .request-view{padding-bottom:calc(24px + env(safe-area-inset-bottom));scroll-padding-top:80px}
  .request-tabs{position:sticky;z-index:30;top:74px;margin-bottom:0;background:#0d1425}
  .catalog-list{grid-template-columns:1fr}
  .send-bar{
    z-index:35;
    bottom:max(8px,env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    padding:10px 12px;
    background:#18233b;
  }
  .send-bar .primary{min-width:132px}
  .toast{z-index:60;right:12px;bottom:calc(82px + env(safe-area-inset-bottom));left:12px;max-width:none;transform:none;text-align:center}
  body.request-open .toast{bottom:calc(16px + env(safe-area-inset-bottom))}
  html.keyboard-open .mobile-app-nav{display:none}
  html.keyboard-open .content{padding-bottom:24px}
}
@media(max-width:340px){
  .send-bar{grid-template-columns:1fr}
  .send-bar .primary{width:100%}
}

/* Khách tự chọn quà và tự gắn nhạc */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.attach-bar{grid-template-columns:minmax(170px,1fr) auto auto}
.attach-summary{display:grid;gap:2px;min-width:0}
.attach-summary .muted{overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap}
.gift-row-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.danger-text{color:var(--bad)}
.test-btn:disabled{cursor:not-allowed;opacity:.42}
.catalog-gift:has(input:checked){border-color:var(--gold);background:rgba(245,188,75,.1);box-shadow:0 0 0 2px rgba(245,188,75,.1)}
@media(max-width:720px){
  .attach-bar{grid-template-columns:1fr 1fr}
  .attach-summary{grid-column:1/-1}
  .gift-row-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .gift-row-actions .test-btn{min-width:0;padding:9px 5px;font-size:11px}
}
@media(max-width:420px){
  .attach-bar{grid-template-columns:1fr}
  .attach-bar .ghost,.attach-bar .primary{width:100%}
}