* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { background-color: #080a0f; color: #c9d1d9; display: flex; flex-direction: column; align-items: center; padding: 12px; }
.container { width: 100%; max-width: 900px; display: flex; flex-direction: column; gap: 12px; }

.control-panel {
    background: #121620; padding: 14px; border-radius: 14px; display: flex; flex-direction: column; gap: 12px; border: 1px solid #1f2738;
}

/* Universal Clearable Input Wrapper */
.input-clearable-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.input-clearable-wrap input {
    width: 100%;
    padding-right: 34px !important;
}

/* 100% Dead-Center Clear Button (Both Mobile & PC) */
.input-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border-radius: 50% !important;
    background-color: #ef4444 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 8px 8px !important;
    display: none;
    cursor: pointer;
    user-select: none;
    z-index: 10;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.input-clear-btn:hover {
    background-color: #dc2626 !important;
    transform: translateY(-50%) scale(1.1);
}

.input-bar { display: flex; gap: 8px; width: 100%; align-items: center; }
.input-bar input {
    flex: 1; background: #181d2a; color: #f0f6fc; border: 1px solid #283144; padding: 11px 14px; border-radius: 8px; font-size: 14px; outline: none; transition: 0.2s;
}
.input-bar input:focus { border-color: #7c3aed; }
.btn-save-top {
    background: #e11d48; color: white; border: none; padding: 11px 22px; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.2s; white-space: nowrap;
}
.btn-save-top:hover { background: #be123c; }
.btn-save-top:disabled { opacity: 0.5; cursor: not-allowed; }

.status-box { font-size: 12px; font-weight: 600; min-height: 16px; margin-top: -6px; padding-left: 4px; }

/* Saved Streamers Accordion */
.saved-streamers-wrapper { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.saved-section-title { font-size: 11px; font-weight: 700; color: #818cf8; text-transform: uppercase; letter-spacing: 0.5px; }

.streamer-selected-bar {
    background: #171b26; border: 1px solid #262f44; border-radius: 10px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; transition: 0.2s;
}
.streamer-selected-bar:hover { border-color: #3b4766; }
.bar-left { display: flex; align-items: center; gap: 10px; }
.avatar-circle {
    width: 34px; height: 34px; border-radius: 50%; background: #4f46e5; color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; position: relative;
}

/* Status Dot Colors (Optimized Sleek Size) */
.status-dot {
    width: 7.5px !important; 
    height: 7.5px !important; 
    border-radius: 50% !important; 
    position: absolute !important; 
    bottom: 0px !important; 
    right: 0px !important; 
    border: 2px solid #171b26 !important;
    box-sizing: content-box !important;
}
.status-dot.public, .status-dot.online { background: #10b981 !important; box-shadow: 0 0 4px rgba(16, 185, 129, 0.4); }
.status-dot.private { background: #f59e0b !important; box-shadow: 0 0 4px rgba(245, 158, 11, 0.4); }
.status-dot.others { background: #a855f7 !important; box-shadow: 0 0 4px rgba(168, 85, 247, 0.4); }
.status-dot.offline { background: #64748b !important; }

/* Distinct Electric Sky Blue for Recently Added */
.status-dot.recently_added, .status-dot.recently-added {
    background: #00a8ff !important;
    box-shadow: 0 0 6px rgba(0, 168, 255, 0.8) !important;
}

.bar-text { display: flex; flex-direction: column; }
.bar-name { font-size: 14px; font-weight: 600; color: #f1f5f9; }
.bar-sub { font-size: 11px; color: #94a3b8; display: flex; align-items: center; gap: 4px; }
.chevron-icon { color: #94a3b8; transition: transform 0.25s; }
.streamer-selected-bar.open .chevron-icon { transform: rotate(180deg); }

.dropdown-drawer {
    background: #131722; border: 1px solid #28334a; border-radius: 12px; padding: 12px; display: none; flex-direction: column; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
.dropdown-drawer.active { display: flex; }

.drawer-search-box { position: relative; width: 100%; display: flex; align-items: center; }
.drawer-search-box input {
    width: 100%; background: #0c0f17; border: 1px solid #232c3f; border-radius: 8px; padding: 9px 34px 9px 34px; color: #f0f6fc; font-size: 13px; outline: none;
}
.drawer-search-box > svg { 
    position: absolute; 
    left: 10px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: #64748b; 
    z-index: 2; 
    pointer-events: none; 
}

.filter-pills-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.filter-pills-row::-webkit-scrollbar { display: none; }

.fpill {
    background: #1c2233; color: #94a3b8; border: 1px solid #2a3449; padding: 6px 12px; border-radius: 18px; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 4px; transition: 0.15s;
}
.fpill:hover { color: #f1f5f9; border-color: #435272; }
.fpill.active { background: #7c3aed; color: #fff; border-color: #a78bfa; font-weight: 600; }
.fpill-dropdown-arrow { font-size: 10px; opacity: 0.8; }

.streamer-items-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; padding-right: 4px; }
.streamer-row-item {
    background: #181d2a; border: 1px solid transparent; border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: 0.15s;
}
.streamer-row-item:hover { background: #1f2536; border-color: #33405c; }
.streamer-row-item.selected { border-color: #7c3aed; background: #201f38; }

.row-item-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.row-item-info { display: flex; flex-direction: column; min-width: 0; }
.row-item-name { font-size: 13px; font-weight: 600; color: #f8fafc; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-bubble { color: #64748b; font-size: 11px; cursor: pointer; padding: 0 4px; }
.info-bubble:hover { color: #a78bfa; }
.row-item-sub { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.row-item-right-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Glassy Preview Button on Streamer Cards */
.row-preview-btn {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: #a5b4fc;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    user-select: none;
    line-height: 1.2;
}

.row-preview-btn:hover {
    background: #6366f1;
    color: #ffffff;
    border-color: #818cf8;
    transform: translateY(-1px);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.5);
}

/* Enlarged Favorite Heart Button in Drawer */
.row-heart-btn { 
    background: none !important; 
    border: none !important; 
    font-size: 22px !important; 
    line-height: 1 !important;
    cursor: pointer !important; 
    padding: 4px 6px !important; 
    color: #64748b !important; 
    transition: 0.2s ease !important; 
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.row-heart-btn:hover {
    transform: scale(1.15);
}
.row-heart-btn.active { 
    color: #f43f5e !important; 
    text-shadow: 0 0 8px rgba(244, 63, 94, 0.5);
}

/* Centered Drawer Footer Stats with Perfect Dot Alignment */
.drawer-footer-stats {
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 12px !important; 
    flex-wrap: wrap !important; 
    padding-top: 10px !important; 
    padding-bottom: 2px !important; 
    border-top: 1px solid #1f2738 !important; 
    font-size: 11px !important; 
    color: #94a3b8 !important; 
    text-align: center !important;
    line-height: 1 !important;
}
.stat-item { 
    display: inline-flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    gap: 5px !important; 
    line-height: 1 !important;
}
.stat-item .stat-dot { 
    position: static !important;
    width: 7.5px !important; 
    height: 7.5px !important; 
    border: none !important;
    border-radius: 50% !important; 
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(0.5px) !important;
}

/* Buttons Grid */
.button-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
@media (max-width: 480px) { .button-grid { grid-template-columns: repeat(3, 1fr); } }

.btn-action {
    height: 42px; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: 0.2s; user-select: none;
}
.btn-play-action { background: #16a34a; color: white; }
.btn-play-action:hover { background: #15803d; }
.btn-nav-action { background: #1e293b; color: #cbd5e1; border: 1px solid #334155; }
.btn-nav-action:hover { background: #334155; color: #fff; }
.btn-details-action { background: #6366f1; color: white; }
.btn-notify-action { background: #1f2937; color: #94a3b8; border: 1px solid #374151; }
.btn-notify-action.active { color: #38bdf8; border-color: #0284c7; background: rgba(56, 189, 248, 0.12); box-shadow: 0 0 10px rgba(56, 189, 248, 0.3); }
.btn-fav-action { background: #1f2937; color: #9ca3af; border: 1px solid #374151; }
.btn-fav-action.active { color: #f43f5e; border-color: #f43f5e; background: rgba(244, 63, 94, 0.1); }
.btn-fullmode-action { background: #1f2937; color: #94a3b8; border: 1px solid #374151; }
.btn-fullmode-action.active { background: #7c3aed !important; color: white !important; border-color: #a78bfa !important; box-shadow: 0 0 12px rgba(124, 58, 237, 0.6); }
.btn-admin-action { background: #334155; color: #e2e8f0; }
.btn-delete-action { background: #991b1b; color: white; }
.btn-fs-standalone { grid-column: 1 / -1; background: #0284c7; color: white; display: none; height: 40px; border-radius: 8px; font-weight: 600; }

/* Calibrated Player */
.player-wrapper {
    position: relative; width: 100%; aspect-ratio: 1069 / 601; background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.7);
}
.player-wrapper iframe {
    position: absolute; width: 1280px; height: 720px; border: 0; background: #000; transform-origin: 0 0;
}
.floating-exit-btn {
    position: absolute; top: 10px; right: 10px; z-index: 9999; width: 34px; height: 34px; background: rgba(0,0,0,0.7); color: #fff; border: 1px solid rgba(255,255,255,0.35); border-radius: 50%; display: none; align-items: center; justify-content: center; padding: 0; margin: 0; line-height: 0; cursor: pointer; backdrop-filter: blur(4px);
}
.floating-exit-btn svg { display: block; margin: auto; }

/* Status Footer */
.system-status-footer {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; margin-top: 6px; margin-bottom: 12px; font-size: 11px; color: #64748b; text-align: center; letter-spacing: 0.2px; user-select: none;
}
.system-status-footer .status-line { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: center; }

/* Modals General */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.82); backdrop-filter: blur(6px); z-index: 10000; display: none; justify-content: center; align-items: center; padding: 12px;
}
.modal-card {
    background: #11151f; border: 1px solid #252e42; border-radius: 14px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { font-size: 17px; color: #fff; }
.modal-header p { font-size: 12px; color: #64748b; }

.modal-close {
    background: #1c2233; border: 1px solid #334155; border-radius: 50%; width: 32px; height: 32px; min-width: 32px; min-height: 32px; color: #cbd5e1; display: flex; align-items: center; justify-content: center; cursor: pointer; outline: none; transition: 0.2s;
}
.modal-close:hover { background: #e11d48; color: white; border-color: #f43f5e; }

.modal-tabs-header { display: flex; gap: 8px; border-bottom: 1px solid #232c3f; padding-bottom: 6px; }
.m-tab-btn {
    background: transparent; border: none; color: #94a3b8; font-size: 13px; font-weight: 600; padding: 6px 12px; cursor: pointer; border-radius: 6px;
}
.m-tab-btn.active { color: #fff; background: #252a3c; }

.section-box { background: #161a26; border: 1px solid #232b3d; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.section-title { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; }
.section-help-text { font-size: 11px; color: #64748b; line-height: 1.4; margin-top: 4px; }
textarea {
    width: 100%; background: #0c0f17; border: 1px solid #262f44; border-radius: 8px; color: #e2e8f0; padding: 10px; font-size: 13px; resize: vertical; min-height: 75px; outline: none;
}
textarea:focus { border-color: #7c3aed; }

/* Special Notify Selector */
.special-group-row { 
    display: flex; 
    align-items: center; 
    margin-bottom: 2px; 
}
.special-notify-pill {
    background: #141824; 
    border: 1px solid #2c364d; 
    border-radius: 20px; 
    padding: 0 10px; 
    height: 28px; 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
    cursor: pointer; 
    user-select: none; 
    transition: all 0.15s ease; 
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
.special-notify-pill:hover { 
    border-color: #6366f1; 
    background: #191f2e;
}
.special-notify-pill.active {
    border-color: #818cf8; 
    background: rgba(99, 102, 241, 0.18); 
    color: #ffffff; 
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.25);
}
.notify-check-square {
    width: 13px; 
    height: 13px; 
    border-radius: 3px; 
    border: 1.5px solid #64748b; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 9px; 
    line-height: 1;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    transition: all 0.15s;
    box-sizing: border-box;
}
.special-notify-pill.active .notify-check-square {
    border-color: #818cf8; 
    background: #6366f1; 
    color: #ffffff;
}
.special-notify-pill.active .notify-check-square::after { 
    content: '✓'; 
    display: block;
    line-height: 1;
}
.badge-special-tag {
    font-size: 8px; 
    font-weight: 700; 
    background: rgba(168, 85, 247, 0.2); 
    color: #c084fc; 
    border: 1px solid rgba(168, 85, 247, 0.5); 
    padding: 1px 4px; 
    border-radius: 3px; 
    letter-spacing: 0.3px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pill-grid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 160px; overflow-y: auto; padding: 4px 0; }
.tag-pill { background: #1c2233; color: #94a3b8; border: 1px solid #2e3852; padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer; user-select: none; transition: 0.15s; }
.tag-pill.active { background: #7c3aed; color: #ffffff; border-color: #a78bfa; font-weight: 600; }
.group-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.group-pill { background: #1c2233; color: #94a3b8; border: 1px solid #2e3852; padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer; line-height: 1; }
.group-pill.active { background: #4f46e5; color: #ffffff; border-color: #818cf8; }
.btn-modal-save { background: #7c3aed; color: white; padding: 12px; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; width: 100%; cursor: pointer; }

/* History Sessions & Badges */
.history-search-input {
    width: 100%; background: #0c0f17; border: 1px solid #262f44; border-radius: 8px; padding: 8px 12px; color: #f0f6fc; font-size: 13px; outline: none; margin-bottom: 8px;
}
.history-sessions-list { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow-y: auto; }
.session-card {
    background: #161b26; border: 1px solid #232b3f; border-radius: 8px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sess-info-left { display: flex; flex-direction: column; gap: 4px; }
.sess-date { font-size: 13px; font-weight: 600; color: #f1f5f9; }
.sess-meta { font-size: 11px; color: #94a3b8; }
.btn-sess-details {
    background: #252e42; color: #a78bfa; border: 1px solid #3b4766; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-sess-details:hover { background: #33405c; color: #fff; }

/* Badges System (Perfect Centered Crown & Icons) */
.session-badges-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.session-badge {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.session-badge .badge-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    line-height: 1 !important;
    margin-right: 4px !important;
    transform: translateY(-0.5px) !important;
}

/* Fame Badges */
.badge-fame-30k { background: linear-gradient(135deg, rgba(234,179,8,0.25), rgba(245,158,11,0.15)); color: #fbbf24; border: 1px solid #f59e0b; box-shadow: 0 0 10px rgba(245,158,11,0.4); }
.badge-fame-20k { background: linear-gradient(135deg, rgba(168,85,247,0.25), rgba(217,70,239,0.15)); color: #e879f9; border: 1px solid #c026d3; box-shadow: 0 0 8px rgba(192,38,211,0.4); }
.badge-fame-mega { background: rgba(236, 72, 153, 0.15); color: #f472b6; border: 1px solid #db2777; }
.badge-fame-hot { background: rgba(249, 115, 22, 0.15); color: #fb923c; border: 1px solid #ea580c; }
.badge-fame-pop { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid #0284c7; }
.badge-fame-active { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid #059669; }
.badge-fame-chill { background: rgba(148, 163, 184, 0.12); color: #94a3b8; border: 1px solid #475569; }

/* Tipped Session Badges */
.badge-tip-10k { background: linear-gradient(135deg, rgba(239,68,68,0.25), rgba(244,63,94,0.18)); color: #fda4af; border: 1px solid #e11d48; box-shadow: 0 0 10px rgba(225,29,72,0.5); }
.badge-tip-5k { background: rgba(168, 85, 247, 0.22); color: #d8b4fe; border: 1px solid #9333ea; box-shadow: 0 0 8px rgba(168, 85, 247, 0.4); }
.badge-tip-2500 { background: rgba(234, 179, 8, 0.2); color: #fde047; border: 1px solid #ca8a04; }
.badge-tip-1k { background: rgba(20, 184, 166, 0.2); color: #5eead4; border: 1px solid #0d9488; }
.badge-tip-500 { background: rgba(59, 130, 246, 0.18); color: #93c5fd; border: 1px solid #2563eb; }
.badge-tip-100 { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; border: 1px solid #059669; }
.badge-tip-private { background: rgba(245, 158, 11, 0.18); color: #fcd34d; border: 1px solid #d97706; }
.badge-goals-done { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; border: 1px solid #4f46e5; }

/* Single Clean LATEST badge */
.badge-single-latest {
    font-size: 9px; background: #2563eb; color: #fff; padding: 1px 6px; border-radius: 4px; margin-left: 6px; font-weight: 700; vertical-align: middle;
}

/* Breakdown rows & Charts */
.breakdown-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #1a2233; font-size: 12px; }
.breakdown-row:last-child { border-bottom: none; }
.chart-box { width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; position: relative; }
.viewer-curve-box { width: 100%; height: 170px; position: relative; }

/* Subject History Timeline & Custom Scrollbar */
.subject-history-container {
    display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; padding-right: 6px;
}
.subject-history-container::-webkit-scrollbar { width: 5px; }
.subject-history-container::-webkit-scrollbar-track { background: #0c0f17; border-radius: 4px; }
.subject-history-container::-webkit-scrollbar-thumb { background: #28334a; border-radius: 4px; }
.subject-history-container::-webkit-scrollbar-thumb:hover { background: #7c3aed; }

.subject-timeline-item {
    display: flex; flex-direction: column; gap: 4px; background: #0c0f17; border: 1px solid #1f2738; padding: 8px 10px; border-radius: 8px; transition: border-color 0.2s;
}
.subject-timeline-item:first-child {
    border-color: #2563eb; background: rgba(37, 99, 235, 0.08);
}
.subject-time-badge {
    font-size: 11px; font-weight: 700; color: #10b981; display: flex; align-items: center; justify-content: space-between;
}
.subject-text-content {
    font-size: 12px; color: #e2e8f0; line-height: 1.4; word-break: break-word;
}

/* Weekly Heatmap */
.heatmap-box { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.heatmap-grid-table {
    display: grid; grid-template-columns: 45px repeat(4, 1fr); gap: 4px; font-size: 10px; text-align: center;
}
.hm-header { color: #64748b; font-weight: 600; padding: 2px 0; }
.hm-day-label { color: #94a3b8; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.hm-cell {
    border-radius: 5px; height: 22px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 10px; border: 1px solid #1f2738;
}

/* CSV Export Button */
.btn-export-csv {
    background: #0284c7; color: white; border: none; border-radius: 6px; padding: 6px 12px; font-size: 11px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: 0.2s; white-space: nowrap;
}
.btn-export-csv:hover { background: #0369a1; }

/* Live Notification Modal */
.modal-notify-card {
    max-width: 440px; background: #11151f; border-radius: 16px; padding: 20px;
}
.notify-status-box {
    background: #141925; border: 1px solid #232c3f; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 3px;
}
.btn-enable-notify {
    flex: 1; background: #15803d; color: #fff; border: 1px solid #16a34a; border-radius: 8px; padding: 12px; font-size: 13px; font-weight: 700; cursor: pointer; transition: 0.2s;
}
.btn-enable-notify:hover { background: #16a34a; }
.btn-disable-notify {
    background: #1e2433; color: #cbd5e1; border: 1px solid #334155; border-radius: 8px; padding: 12px 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.2s;
}
.btn-disable-notify:hover { background: #334155; color: #fff; }

/* Custom Delete Modal */
.modal-confirm-card {
    max-width: 360px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px;
}
.confirm-icon-box {
    width: 52px; height: 52px; border-radius: 50%; background: rgba(239, 68, 68, 0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.confirm-actions { display: flex; gap: 10px; width: 100%; margin-top: 10px; }
.btn-modal-cancel {
    flex: 1; background: #1e2433; border: 1px solid #334155; color: #cbd5e1; padding: 10px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer;
}
.btn-modal-danger {
    flex: 1; background: #ef4444; border: none; color: white; padding: 10px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer;
}
.btn-modal-danger:hover { background: #dc2626; }

/* Filter Modals */
.modal-filter-card { max-width: 420px; padding: 18px; border-radius: 16px; background: #12151e; }
.filter-table-header {
    display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: #64748b; letter-spacing: 0.5px; padding: 8px 12px 4px 12px; border-bottom: 1px solid #1c2233; margin-top: -4px;
}
.modal-radio-list { display: flex; flex-direction: column; gap: 6px; max-height: 380px; overflow-y: auto; padding: 4px 0; }
.filter-row-item {
    display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; background: #161a25; cursor: pointer; transition: 0.15s;
}
.filter-row-item:hover { background: #1c2233; }
.filter-row-item.active { border-color: #7c3aed; background: rgba(124, 58, 237, 0.12); }
.row-label { font-size: 13px; font-weight: 500; color: #f1f5f9; }
.row-right { display: flex; align-items: center; gap: 14px; }
.badge-count {
    background: #0f121a; border: 1px solid #232c3f; color: #94a3b8; font-size: 11px; padding: 2px 8px; border-radius: 12px; min-width: 28px; text-align: center;
}
.radio-circle {
    width: 18px; height: 18px; border-radius: 50%; border: 2px solid #475569; position: relative; display: flex; align-items: center; justify-content: center;
}
.filter-row-item.active .radio-circle { border-color: #8b5cf6; }
.filter-row-item.active .radio-circle::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #8b5cf6; }

/* ==========================================================
   PERFECT PIP PREVIEW (MOBILE + PC DUAL OS-LEVEL PIP)
   ========================================================== */
#streamPreviewModal {
    display: none;
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 300px; /* Mobile & PC duititei unified 300px width */
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.9), 0 0 25px rgba(99, 102, 241, 0.35);
    z-index: 99999;
    overflow: hidden;
    touch-action: none;
    user-select: none;
}

.pip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    height: 36px;
    background: rgba(30, 41, 59, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: move;
}

.pip-user-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f8fafc;
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
}

.pip-live-indicator {
    width: 8px;
    height: 8px;
    background-color: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 8px #22c55e;
    animation: pipPulse 1.6s infinite ease-in-out;
    flex-shrink: 0;
}

@keyframes pipPulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.pip-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.pip-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    border-radius: 6px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.pip-btn svg { display: block; margin: auto; }
.pip-btn:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.pip-btn.close:hover { background: rgba(239, 68, 68, 0.3); color: #ef4444; }

/* 16:9 Aspect Ratio Container */
.pip-player-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    position: relative;
    overflow: hidden;
}

.pip-iframe-crop {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* APNAR GOLDEN TESTED VALUES (CROP & SCALE) */
.pip-iframe-crop iframe {
    position: absolute;
    border: none;
    background: #000;
    pointer-events: none;
    user-select: none;

    width: 640px;
    height: 360px;

    transform-origin: 0 0;
    transform: scale(0.593); /* Golden tested scale */

    top: -20px;              /* Header cut offset */
    left: -1px;              /* Side balance */
}

/* Pop-out button PC-te display hobe, Mobile-e hide thakbe */
.popout-btn {
    display: inline-flex;
}

@media (max-width: 640px) {
    #streamPreviewModal {
        width: 300px;
    }

    .popout-btn {
        display: none !important;
    }
}