:root{
    --sidebar:#212121; --sidebar-active:#080808; --sidebar-fg:#d6d6d6; --sidebar-muted:#8a8a8a;
    --panel:#f7f7f7; --filter-bg:#808080; --border:#d9dbe0;
    --brand:#16314f; --brand-hover:#1e4066; --brand-text:#ffffff;
    --blue:#3c87cd; --blue-border:#2f6ea8; --blue-hover:#3679b5;
    --pill-blue:#52b8e0; --pill-blue-border:#2f93bd; --pill-blue-hover:#3fa3cc;
    --success:#2f9e44; --danger:#d64545;
  }
  html,body{height:100%;}
  body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-weight:300;background:#fff;color:#222;overflow:hidden;}
  *::-webkit-scrollbar{width:12px;height:12px;}
  *::-webkit-scrollbar-track{background:#f1f1f1;}
  *::-webkit-scrollbar-thumb{background:#c1c1c1;}
  *::-webkit-scrollbar-thumb:hover{background:#a6a6a6;}
  *::-webkit-scrollbar-thumb:active{background:#787878;}
  *::-webkit-scrollbar-button:vertical:decrement{height:16px;background:#f1f1f1 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 10l4-4 4 4' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/12px 12px;}
  *::-webkit-scrollbar-button:vertical:increment{height:16px;background:#f1f1f1 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/12px 12px;}
  *::-webkit-scrollbar-corner{background:#f1f1f1;}
  .app-main::-webkit-scrollbar{width:12px;}
  .app-main::-webkit-scrollbar-track{background:#f1f1f1;}
  .app-main::-webkit-scrollbar-thumb{background:#c1c1c1;}
  .app-main::-webkit-scrollbar-thumb:hover{background:#a6a6a6;}
  .app-main::-webkit-scrollbar-thumb:active{background:#787878;}
  .sidebar{width:254px;height:100vh;flex-shrink:0;overflow-y:scroll;overflow-x:hidden;background:transparent;box-sizing:border-box;}
  .sidebar::-webkit-scrollbar{width:14px;}
  .sidebar::-webkit-scrollbar-track{background:#f1f1f1;}
  .sidebar::-webkit-scrollbar-thumb{background:#c1c1c1;}
  .sidebar::-webkit-scrollbar-thumb:hover{background:#a6a6a6;}
  .sidebar::-webkit-scrollbar-thumb:active{background:#787878;}
  .sidebar-inner{width:240px;min-height:100%;background:var(--sidebar);color:var(--sidebar-fg);display:flex;flex-direction:column;box-sizing:border-box;}
  .sidebar .muted{color:var(--sidebar-muted);}
  .sidebar a.active,.sidebar a.active-item{background:var(--sidebar-active);color:#fff;font-weight:500;}
  .sidebar a{display:block;padding:6px 16px;font-size:15px;font-weight:300;color:var(--sidebar-fg);text-decoration:none;cursor:pointer;}
  .sidebar a:hover{color:#fff;}
  .sidebar .disabled{color:#5c5c62;padding:6px 16px;font-size:15px;font-weight:300;cursor:not-allowed;display:block;user-select:none;}
  .sidebar .section-title{padding:16px 16px 6px;font-size:19px;font-weight:400;color:#e8e8ea;border-top:1px solid rgba(255,255,255,.1);margin-top:10px;}
  .sidebar .top-divider{border-top:1px solid rgba(255,255,255,.1);margin-top:6px;padding-top:10px;}
  .sidebar-signout{display:block;margin:16px;text-align:center;padding:8px 12px;border:1px solid #c0392b;color:#e05a5a;background:transparent;border-radius:4px;font-size:14px;font-weight:400;text-decoration:none;cursor:pointer;}
  .sidebar-signout:hover{background:rgba(224,74,74,.1);}

  .sidebar-header{border-bottom:1px solid rgba(255,255,255,.08);}
  .sidebar-divider{height:0;border-top:1px solid rgba(255,255,255,.08);margin:6px 0;}
  .sidebar-title{color:var(--sidebar-muted);font-size:18px;font-weight:100;padding:5px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .sidebar-title .prod{color:#af2f1d;font-weight:300;}
  .sidebar-body{padding-top:6px;}
  .sidebar-label{padding:0 10px;color:var(--sidebar-muted);font-size:18px;margin-bottom:6px;}
  .sidebar-Button{display:block;width:100%;padding:4px 10px;background-color:var(--sidebar);color:var(--sidebar-fg);border:none;border-radius:0;font-size:14px;line-height:1.6;text-align:left;cursor:pointer;font-family:inherit;font-weight:300;}
  .sidebar-Button.active,.sidebar-Button:hover:not(:disabled){background-color:var(--sidebar-active);color:#fff;}
  .sidebar-Button:disabled{color:#5c5c62;cursor:not-allowed;}
  .sidebar-Button:disabled:hover{background-color:var(--sidebar);color:#5c5c62;}

  .panel{background:var(--filter-bg);border:none;border-radius:0;}
  .btn{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;border-radius:4px;font-size:14px;font-weight:500;border:1px solid transparent;cursor:pointer;position:relative;text-decoration:none;}
  .btn:hover:not(:disabled){text-decoration:underline;}
  .btn-brand{background:var(--brand);color:var(--brand-text);border-color:#0d1f33;}
  .btn-brand:hover{background:var(--brand-hover);}
  .btn-blue{background:var(--blue);color:#fff;border-color:var(--blue-border);}
  .btn-blue:hover{background:var(--blue-hover);}
  .btn-ban{background:#e08a8a;color:#fff;border-color:#c96b6b;}
  .btn-ban:hover{filter:brightness(.95);}
  .btn-green{background:#57a06a;color:#fff;border-color:#3d7a4e;}
  .btn-green:hover{filter:brightness(.95);}
  .btn:disabled,.btn[disabled]{background:#dcdde0!important;color:#9a9ca3!important;border-color:#cfd1d6!important;cursor:not-allowed;text-decoration:none!important;}
  .btn:disabled:hover,.btn[disabled]:hover{background:#dcdde0!important;filter:none;text-decoration:none!important;}
  .btn.state-success{background:var(--success)!important;border-color:#1f7a34!important;color:#0a1a0a!important;}
  .btn.state-error{background:var(--danger)!important;border-color:#a02c2c!important;color:#fff!important;}
  .btn.state-warning{background:#e0a63c!important;border-color:#b57f1f!important;color:#2a1a02!important;}
  .input,select,textarea{border:1px solid #cfd3d9;background:#fff;border-radius:4px;padding:6px 8px;font-size:14px;width:100%;}
  table{width:100%;border-collapse:collapse;font-size:14px;}
  th,td{padding:8px 12px;text-align:left;vertical-align:top;}
  th{background:var(--panel);font-weight:600;}
  tr+tr td{border-top:1px solid var(--border);}
  tr.row-selected td{background:#dcdcdc;}
  #players-tbody tr:nth-child(even) td{background:#f4f4f6;}
  #players-tbody tr:nth-child(odd):hover td{background:#ffffff;}
  #players-tbody tr:nth-child(even):hover td{background:#f4f4f6;}
  #players-tbody tr.row-selected td{background:#dcdcdc;}
  #players-tbody tr.row-selected:hover td{background:#dcdcdc;}
  .tag-blue{display:inline-block;background:var(--pill-blue);color:#fff;border:1px solid var(--pill-blue-border);padding:3px 10px;border-radius:4px;font-size:13px;font-weight:500;}
  .tag-brand{display:inline-block;background:var(--brand);color:#fff;padding:2px 8px;border-radius:3px;font-size:13px;}
  .link{color:var(--blue);text-decoration:underline;cursor:pointer;}
  .link:hover{opacity:.72;}
  tbody tr:hover td{background:#f2f2f3;}
  [hidden]{display:none!important;}

  .mini-avatar{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .player-name-pill{cursor:pointer;border:none;text-align:left;}
  .ban-warning{color:var(--danger);font-size:12px;font-weight:600;max-width:220px;line-height:1.3;}

  .avatar-box{width:220px;height:220px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
  .role-badge{display:inline-block;background:#1a1a1d;color:#fff;padding:3px 10px;border-radius:4px;font-size:13px;font-weight:600;}
  .role-badge-light{background:#e2e3e6;color:#666;}
  .pd-tab{padding:8px 2px;font-size:14px;color:#666;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;}
  .pd-tab:hover{color:#333;}
  .pd-tab.active{color:var(--blue);border-color:var(--blue);font-weight:600;}
  .btn-gray{background:#d9d9d9;color:#000;border-color:#000;box-shadow:none;}
  .btn-gray:hover:not(:disabled){background:#c9c9c9;}
  .btn-red{background:var(--danger);color:#fff;border-color:#a02c2c;}
  .btn-red:hover{filter:brightness(.95);}

  .modal-overlay{position:fixed;inset:0;background:rgba(20,20,22,.55);display:flex;align-items:center;justify-content:center;z-index:100;}
  .modal-box{background:#fff;border-radius:8px;padding:24px;width:440px;max-width:92vw;max-height:86vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.25);}
  .modal-box h3{font-size:18px;font-weight:600;margin-bottom:4px;color:#222;}
  .modal-actions{margin-top:22px;display:flex;justify-content:flex-end;gap:8px;}
  .modal-field{margin-top:14px;}
  .modal-field label{display:block;font-size:13px;color:#666;margin-bottom:4px;}
  .modal-err{font-size:13px;color:#c0392b;margin-top:6px;}
  .modal-horizontal{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;}
  .modal-horizontal .modal-field{margin-top:0;flex:1;min-width:150px;}

  select.sdd-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;}
  .sdd{position:relative;}
  .sdd-display{border:1px solid #cfd3d9;background:#fff;border-radius:4px;padding:6px 8px;font-size:14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:6px;user-select:none;}
  .sdd-display:hover{border-color:var(--blue);}
  .sdd.open .sdd-display{border-color:var(--blue);box-shadow:0 0 0 2px rgba(74,144,226,.15);}
  .sdd-display-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .sdd-caret{color:#888;font-size:11px;flex-shrink:0;}
  .sdd-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--blue);border-radius:4px;box-shadow:0 10px 28px rgba(0,0,0,.15);z-index:80;max-height:260px;display:flex;flex-direction:column;overflow:hidden;}
  .sdd-search{border:none;border-bottom:1px solid var(--border);padding:8px 10px;font-size:14px;outline:none;border-radius:0;}
  .sdd-options{overflow-y:auto;}
  .sdd-option{padding:6px 12px;font-size:14px;cursor:pointer;color:#333;}
  .sdd-option:hover,.sdd-option.active{background:var(--blue);color:#fff;}
  .sdd-option.selected{background:var(--blue);color:#fff;}
  .sdd-empty{padding:8px 12px;font-size:13px;color:#999;}

.auth-checking-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#15151a;color:#a9a9b2;font-family:'Inter',sans-serif;font-weight:300;}


.mobile-topbar{display:none;}
.sidebar-overlay{display:none;}

@media (max-width:768px){
  .mobile-topbar{
    display:flex;align-items:center;gap:10px;
    position:fixed;top:0;left:0;right:0;height:52px;
    background:var(--sidebar);color:#fff;z-index:150;
    padding:0 14px;box-shadow:0 2px 10px rgba(0,0,0,.3);
    box-sizing:border-box;
  }
  .mobile-title{font-size:15px;font-weight:400;color:var(--sidebar-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .mobile-menu-btn{
    background:none;border:none;color:#fff;width:34px;height:34px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    border-radius:4px;padding:0;
  }
  .mobile-menu-btn:active{background:rgba(255,255,255,.12);}
  .mobile-menu-btn svg{width:22px;height:22px;}

  #app-root{padding-top:52px;box-sizing:border-box;height:100vh;}

  .sidebar{
    position:fixed !important;top:0 !important;left:0 !important;bottom:0 !important;
    height:100vh !important;width:254px !important;max-width:80vw;
    transform:translateX(-100%);
    z-index:200;box-shadow:6px 0 26px rgba(0,0,0,.4);
  }
  .sidebar.mobile-open{transform:translateX(0);}

  .sidebar-overlay{
    display:block;position:fixed;inset:0;top:52px;background:rgba(10,10,14,.55);
    z-index:190;opacity:0;pointer-events:none;
  }
  .sidebar-overlay.show{opacity:1;pointer-events:auto;}

  .app-main{height:calc(100vh - 52px) !important;-webkit-overflow-scrolling:touch;}
  .app-main-inner{padding:16px !important;}

  table{font-size:12.5px;}
  th,td{padding:6px 8px;}

  .modal-box{width:92vw !important;padding:18px;}
  .modal-actions{flex-wrap:wrap;}
  .modal-horizontal{gap:10px;}

  #pd-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
  #pd-tabs .pd-tab{flex-shrink:0;white-space:nowrap;}

  .avatar-box{width:140px;height:140px;}
}


#app-root.signing-out { pointer-events: none; }

.cb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.cb-slot{position:relative;aspect-ratio:1/1;background:#e2e3e6;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--border);}
.cb-slot:hover{border-color:var(--blue);}
.cb-slot-plus{font-size:22px;color:#999;}
.cb-slot-remove{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;cursor:pointer;line-height:1;font-size:14px;}
.cb-slot-remove:hover{background:rgba(0,0,0,.85);}
.cb-panel{background:#2b2b2e;color:#eee;border-radius:8px;padding:14px;}
.cb-panel h4{font-size:13px;font-weight:600;color:#ccc;margin-bottom:10px;}
.cb-bottombar{background:#1a1a1d;color:#fff;border-radius:8px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}

.cb-video-grid{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto;}
.cb-video-card{display:flex;align-items:center;gap:10px;background:#1f1f22;border:1px solid #3a3a3e;border-radius:8px;padding:8px;cursor:pointer;text-align:left;width:100%;color:#eee;font-family:inherit;}
.cb-video-card:hover{border-color:var(--blue);}
.cb-video-thumb{width:56px;height:40px;border-radius:4px;background:#444 center/cover no-repeat;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#999;}
.cb-video-meta{overflow:hidden;}
.cb-video-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cb-video-desc{font-size:11px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cb-video-empty{font-size:12px;color:#888;}


.drop-zone{border:2px dashed #b9bec7;border-radius:10px;background:#fafbfc;padding:18px 16px;text-align:center;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease;}
.drop-zone:hover{border-color:var(--blue);background:#f2f7fc;}
.drop-zone.dz-dragover{border-color:var(--success);background:#eefaf0;box-shadow:0 0 0 3px rgba(47,158,68,.18);}
.drop-zone:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.drop-zone .dz-icon{color:#9aa0a8;margin-bottom:2px;}
.drop-zone .dz-icon svg{width:26px;height:26px;}
.drop-zone .dz-title{font-size:14px;font-weight:500;color:#333;}
.drop-zone .dz-sub{font-size:12px;color:#888;margin-top:2px;}
.sr-card.dz-dragover{border-color:var(--success)!important;background:#eefaf0;box-shadow:0 0 0 3px rgba(47,158,68,.15);}


.up-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto;}
.up-item{display:flex;align-items:center;gap:10px;background:#f2f2f4;border:1px solid var(--border);border-radius:8px;padding:8px;}
.up-thumb{width:48px;height:48px;border-radius:6px;background:#e2e3e6 center/cover no-repeat;flex-shrink:0;border:1px solid var(--border);}
.up-meta{flex:1;min-width:0;}
.up-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.up-sub{font-size:11px;color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.up-actions{display:flex;gap:6px;flex-shrink:0;}


.event-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.stat-badge{display:inline-flex;align-items:baseline;gap:6px;background:#e9ebef;border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:500;color:#333;}
.stat-badge b{font-weight:700;font-size:15px;}
.event-callout{background:#eaf4fd;border:1px solid #bcd9f2;color:#174e7d;border-radius:6px;padding:10px 14px;font-size:14px;margin-top:14px;}
.event-callout code{background:rgba(23,78,125,.1);padding:1px 6px;border-radius:4px;}  .ed-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-top:18px;}
  .ed-tab{padding:10px 18px;font-size:15px;color:var(--blue);border:1px solid transparent;border-bottom:none;background:transparent;cursor:pointer;font-weight:500;font-family:inherit;border-radius:6px 6px 0 0;margin-bottom:-1px;}
  .ed-tab:hover{color:#1a5f9e;background:#eef4fb;}
  .ed-tab.active{color:#333;background:#fff;border-color:var(--border);font-weight:600;}

.event-fields{max-width:760px;}
.event-field{display:grid;grid-template-columns:230px 1fr;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border);}
.event-field > label{font-size:14px;font-weight:500;color:#555;}
.event-field .field-control{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;}
.event-field .field-control .input{flex:1;min-width:200px;}
.event-field textarea.input{min-height:84px;resize:vertical;}
.event-field .readonly-value{font-size:14px;color:#333;word-break:break-all;}
.event-field .tag-room{display:inline-flex;align-items:center;gap:6px;background:var(--pill-blue);color:#fff;border:1px solid var(--pill-blue-border);padding:3px 10px;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;}
.event-field .tag-room:hover{background:var(--pill-blue-hover);}
.event-thumb{width:120px;height:68px;border-radius:6px;background:#dfe3e8 center/cover no-repeat;border:1px solid var(--border);flex-shrink:0;}
.event-thumb-empty{width:120px;height:68px;border-radius:6px;background:#dfe3e8;border:1px dashed #aab2bc;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#8a929c;font-size:11px;}
.creator-chip{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#333;}
.creator-chip .mini-avatar{width:30px;height:30px;border-radius:6px;}

.ed-section-title{margin:0 0 6px;font-size:16px;font-weight:600;color:#333;}
.ed-empty{padding:16px;text-align:center;color:#888;font-size:14px;background:#f6f7f9;border:1px solid var(--border);border-radius:6px;}

@media (max-width:768px){
  .event-field{grid-template-columns:1fr;gap:4px;}
  .event-field > label{margin-bottom:2px;}
  .ed-tabs{overflow-x:auto;}
  .ed-tab{flex-shrink:0;white-space:nowrap;}
}

.table-sort{background:none;border:none;padding:0;margin:0;font:inherit;font-weight:600;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.table-sort:hover{text-decoration:underline;}

#view-giftdrops table th{padding:8px 10px;font-size:13px;white-space:nowrap;}
#drops-tbody tr:nth-child(odd) td{background:#fafafa;}
#drops-tbody tr:nth-child(even) td{background:#f0f0f0;}
#drops-tbody tr td{padding:8px 10px;font-size:13.5px;}
#drops-tbody td:nth-child(1){width:50px;}
#drops-tbody td:nth-child(5){width:40px;}
#drops-tbody td:nth-child(14){width:36px;}

.btn-filter-full{padding:8px 24px;font-size:14px;font-weight:500;background:var(--brand);color:var(--brand-text);border:1px solid #0d1f33;border-radius:4px;cursor:pointer;}
.btn-filter-full:hover{background:var(--brand-hover);}

#btn-give-gift{transition:background .15s,border-color .15s;}
#btn-give-gift:hover:not(:disabled){background:#0d9488;border-color:#0f766e;color:#fff;}

.gf-optional{font-style:italic;color:#666;font-weight:400;}

.warn-btn{background:#e8833a;color:#fff;border:none;border-radius:6px;padding:7px 16px;font-size:13px;font-weight:700;cursor:pointer;min-width:78px;}
.warn-btn:hover:not(:disabled){filter:brightness(1.07);}
.warn-btn:disabled{opacity:.65;cursor:not-allowed;}
.warn-btn.warn-btn-done{background:#2e9e5b;}