/* ============================================
   Kalium Intranet - Admin Panel Styles
   ============================================ */
:root{--accent:#7c3aed;--bg-primary:#0f1117;--bg-card:#161b22;--bg-secondary:#1c2128;--bg-input:#0d1117;--bg-hover:#272c33;--bg-active:rgba(124,58,237,.08);--border-color:#30363d;--text-primary:#e1e4e8;--text-secondary:#8b949e;--text-muted:#555;--ok:#10b981;--er:#ef4444;--rs:12px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#0f1117;color:#e1e4e8;min-height:100vh;overflow-x:hidden}
.sidebar{position:fixed;top:0;left:0;width:260px;height:100vh;background:#161b22;border-right:1px solid #30363d;display:flex;flex-direction:column;z-index:100;transition:width .3s ease,transform .3s ease}
.sidebar.collapsed{width:70px}
.sidebar-logo{display:flex;align-items:center;padding:20px 16px;border-bottom:1px solid #30363d;gap:12px;height:64px}
.sidebar-logo .logo-icon{width:36px;height:36px;background:linear-gradient(135deg,#7c3aed,#2563eb);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff;flex-shrink:0}
.sidebar-logo .logo-text{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden}
.sidebar.collapsed .logo-text,.sidebar.collapsed .nav-label,.sidebar.collapsed .user-info-text,.sidebar.collapsed .sidebar-toggle-label{display:none}
.sidebar-nav{flex:1;padding:12px 8px;overflow-y:auto}
.nav-item{display:flex;align-items:center;padding:10px 12px;border-radius:8px;cursor:pointer;gap:12px;color:#8b949e;transition:all .2s;margin-bottom:2px;position:relative}
.nav-item:hover{background:#1c2128;color:#e1e4e8}
.nav-item.active{background:rgba(124,58,237,.15);color:#a78bfa}
.nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;background:#7c3aed;border-radius:0 3px 3px 0}
.nav-item i{width:20px;text-align:center;font-size:16px;flex-shrink:0}
.nav-label{font-size:13px;font-weight:500;white-space:nowrap}
.nav-group{margin-bottom:2px}
.nav-group-header{display:flex;align-items:center;padding:10px 12px;border-radius:8px;cursor:pointer;gap:12px;color:#8b949e;transition:all .2s;user-select:none}
.nav-group-header:hover{background:#1c2128;color:#e1e4e8}
.nav-group-header i{width:20px;text-align:center;font-size:16px;flex-shrink:0}
.nav-group-header .nav-label{font-size:13px;font-weight:500;white-space:nowrap;flex:1}
.nav-group-header .nav-chevron{font-size:10px;transition:transform .3s cubic-bezier(.4,0,.2,1);margin-left:auto}
.nav-group.open>.nav-group-header .nav-chevron{transform:rotate(90deg)}
.nav-group-items{overflow:hidden;padding-left:20px;height:0}
.nav-group-items>.nav-item{opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease}
.nav-group.open>.nav-group-items>.nav-item{opacity:1;transform:translateY(0)}
.sidebar.collapsed .nav-group-items{display:none!important}
.sidebar-footer{padding:12px;border-top:1px solid #30363d}
.sidebar-toggle{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;cursor:pointer;color:#8b949e;transition:all .2s;margin-bottom:8px;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.sidebar-toggle:hover{background:#1c2128;color:#e1e4e8}
.user-info-box{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#1c2128;border-radius:8px}
.user-avatar{width:32px;height:32px;background:linear-gradient(135deg,#7c3aed,#2563eb);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0;position:relative;overflow:hidden}
.user-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.user-info-text{flex:1;overflow:hidden}
.user-info-text .name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-info-text .role{font-size:11px;color:#8b949e}
.logout-btn{background:none;border:none;color:#8b949e;cursor:pointer;padding:6px;border-radius:6px;transition:all .2s}
.logout-btn:hover{color:#f85149;background:rgba(248,81,73,.1)}
.main-wrapper{margin-left:260px;transition:margin-left .3s ease;min-height:100vh}
.sidebar.collapsed~.main-wrapper{margin-left:70px}
.header{position:sticky;top:0;background:rgba(15,17,23,.85);backdrop-filter:blur(12px);border-bottom:1px solid #30363d;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;z-index:50}
.header-left{display:flex;align-items:center;gap:16px}
.page-title{font-size:18px;font-weight:700}
.header-right{display:flex;align-items:center;gap:16px}
.search-bar{position:relative}
.search-bar input{background:#1c2128;border:1px solid #30363d;border-radius:8px;padding:8px 12px 8px 36px;color:#e1e4e8;font-family:'Inter',sans-serif;font-size:13px;width:280px;transition:all .2s;outline:none}
.search-bar input:focus{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.search-bar i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#8b949e;font-size:13px}
.notification-btn{position:relative;background:none;border:none;color:#8b949e;font-size:18px;cursor:pointer;padding:8px;border-radius:8px;transition:all .2s}
.notification-btn:hover{background:#1c2128;color:#e1e4e8}
.notification-badge{position:absolute;top:4px;right:4px;width:8px;height:8px;background:#f85149;border-radius:50%;border:2px solid #0f1117}
.header-user{display:flex;align-items:center;gap:8px;cursor:pointer}
.header-user .user-avatar{width:32px;height:32px}
.header-user-name{font-size:13px;font-weight:600}
.content{padding:24px}
.view{display:none}.view.active{display:block}
.view-inbox.active{display:flex;flex-direction:column;height:calc(100vh - 112px);overflow:hidden}
/* ── Inbox Layout ── */
.inbox-wrap{display:flex;flex:1;overflow:hidden}
.inbox-sidebar{width:380px;min-width:380px;border-right:1px solid var(--border-color);display:flex;flex-direction:column;background:var(--bg-card)}
.inbox-sidebar-head{padding:16px;border-bottom:1px solid var(--border-color)}
.inbox-sidebar-title{font-weight:700;font-size:1rem;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.inbox-sidebar-title i{color:var(--accent);font-size:.9rem}
.inbox-filters{display:flex;flex-direction:column;gap:8px}
.inbox-filters-row{display:flex;gap:6px}
.inbox-filters-row select,.inbox-filters-row input{flex:1}
.inbox-sidebar select,.inbox-sidebar input{background:var(--bg-input,#0d1117);border:1px solid var(--border-color);border-radius:8px;padding:8px 10px;color:var(--text-primary);font-size:13px;outline:none;transition:border-color .2s;font-family:'Inter',sans-serif}
.inbox-sidebar select:focus,.inbox-sidebar input:focus{border-color:var(--accent)}
.inbox-sidebar select{cursor:pointer;-webkit-appearance:none;appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-color:var(--bg-input,#0d1117)}
.inbox-list{flex:1;overflow-y:auto}
.inbox-list-empty{text-align:center;padding:40px 16px;color:var(--text-secondary,#8b949e)}
.inbox-list-empty i{font-size:40px;opacity:.25;margin-bottom:12px;display:block}
.inbox-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .15s,border-left-color .15s;border-left:3px solid transparent}
.inbox-item:hover{background:var(--bg-hover,#1c2128)}
.inbox-item.selected{background:var(--bg-active,rgba(124,58,237,.08));border-left-color:var(--accent)}
.inbox-item-body{flex:1;min-width:0}
.inbox-item-top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.inbox-item-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}
.inbox-item-status{font-size:10px;padding:2px 8px;border-radius:4px;font-weight:600;flex-shrink:0;line-height:1.4}
.inbox-item-meta{font-size:12px;color:var(--text-secondary,#8b949e);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-item-date{font-size:11px;color:var(--text-muted,#555);margin-top:3px}
.inbox-item-chevron{font-size:10px;color:var(--text-muted,#555);flex-shrink:0;opacity:.5;transition:opacity .15s}
.inbox-item:hover .inbox-item-chevron{opacity:1}
.inbox-pagination{padding:10px 16px;border-top:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between}
.inbox-pagination-info{font-size:12px;color:var(--text-secondary,#8b949e)}
.inbox-pagination-btns{display:flex;gap:4px}
.inbox-pagination-btns button{padding:4px 10px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;font-size:12px;transition:all .15s;font-family:'Inter',sans-serif}
.inbox-pagination-btns button:hover:not(:disabled){background:var(--bg-hover);border-color:var(--accent)}
.inbox-pagination-btns button.active{background:var(--accent);border-color:var(--accent);color:#fff}
.inbox-pagination-btns button:disabled{opacity:.35;cursor:not-allowed}
/* ── Detail Panel ── */
.inbox-detail{flex:1;overflow-y:auto;background:var(--bg-primary);min-width:0}
.inbox-detail-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-secondary,#8b949e)}
.inbox-detail-empty-inner{text-align:center}
.inbox-detail-empty-inner i{font-size:48px;margin-bottom:16px;opacity:.2;display:block}
.inbox-detail-scroll{padding:24px 28px;max-width:100%;width:100%;box-sizing:border-box}
.inbox-detail-head{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;margin-bottom:20px;gap:12px}
.inbox-detail-head-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.inbox-detail-head-left h3{margin:0;font-size:1.15rem;word-break:break-word;flex:1;min-width:0}
.inbox-detail-meta{font-size:12px;color:var(--text-secondary,#8b949e);margin-top:2px}
.inbox-detail-head-right{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.detail-card{background:var(--bg-secondary);border-radius:12px;padding:16px 18px;margin-bottom:16px;border:1px solid transparent;transition:border-color .2s}
.detail-card:hover{border-color:var(--border-color)}
.detail-card-title{font-weight:700;font-size:13px;margin-bottom:12px;display:flex;align-items:center;gap:8px;color:var(--text-primary)}
.detail-card-title i{color:var(--text-secondary,#8b949e);font-size:14px}
.detail-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.detail-card-grid>.detail-card{margin-bottom:0}
.detail-invite-banner{margin-bottom:16px;padding:14px 18px;background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.2);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.detail-invite-banner-info{display:flex;align-items:center;gap:12px}
.detail-invite-banner-icon{width:40px;height:40px;border-radius:10px;background:rgba(16,185,129,.12);display:flex;align-items:center;justify-content:center;color:#10b981;font-size:18px;flex-shrink:0}
.detail-invite-banner-text h4{font-size:13px;font-weight:700;color:#10b981;margin-bottom:2px}
.detail-invite-banner-text p{font-size:12px;color:var(--text-secondary,#8b949e);margin:0}
.detail-status-section{display:none;margin-bottom:16px;padding:14px 18px;background:var(--bg-secondary);border-radius:12px;border:1px solid var(--border-color)}
.detail-status-section.show{display:block}
.detail-comment-thread{max-height:320px;overflow-y:auto;padding-right:4px}
.detail-comment{padding:10px 14px;background:var(--bg-primary);border-radius:8px;margin-bottom:8px;border:1px solid var(--border-color)}
/* ── Form Data Fields ── */
.form-response-field{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border-color,#21262d)}
.form-response-field:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.form-response-label{font-size:12px;font-weight:600;color:var(--text-secondary,#8b949e);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px}
.form-response-value{font-size:14px;line-height:1.65;white-space:pre-wrap;word-break:break-word;color:var(--text-primary,#e1e4e8)}
.detail-comment-head{display:flex;justify-content:space-between;font-size:11px;color:var(--text-secondary,#8b949e);margin-bottom:4px}
.detail-comment-body{font-size:13px;line-height:1.5}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:#161b22;border:1px solid #30363d;border-radius:12px;padding:20px;transition:all .2s;cursor:default;min-width:0}
.stat-card:hover{border-color:#3d444d;transform:translateY(-2px)}
.stat-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.stat-card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px}
.stat-card-icon.purple{background:rgba(124,58,237,.15);color:#a78bfa}
.stat-card-icon.blue{background:rgba(37,99,235,.15);color:#60a5fa}
.stat-card-icon.green{background:rgba(34,197,94,.15);color:#4ade80}
.stat-card-icon.red{background:rgba(248,81,73,.15);color:#f87171}
.stat-card-icon.yellow{background:rgba(234,179,8,.15);color:#facc15}
.stat-card-icon.cyan{background:rgba(6,182,212,.15);color:#22d3ee}
.stat-card-icon.pink{background:rgba(236,72,153,.15);color:#f472b6}
.stat-trend{font-size:11px;font-weight:600;padding:2px 8px;border-radius:12px}
.stat-trend.up{background:rgba(34,197,94,.15);color:#4ade80}
.stat-trend.down{background:rgba(248,81,73,.15);color:#f87171}
.stat-trend.neutral{background:rgba(139,148,158,.15);color:#8b949e}
.status-badge{font-size:10px;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.5px;white-space:nowrap;text-transform:uppercase;flex-shrink:0;max-width:100%}
.status-badge.on{background:rgba(34,197,94,.15);color:#4ade80}
.status-badge.off{background:rgba(234,179,8,.15);color:#facc15}
.status-badge.none{background:rgba(248,81,73,.15);color:#f87171}
.status-badge.info{background:rgba(99,102,241,.15);color:#818cf8}
.status-card-title{font-size:.9rem;font-weight:600;margin-top:8px;line-height:1.4;overflow-wrap:break-word}
.status-card-sub{font-size:.75rem;color:#8b949e;margin-top:2px;line-height:1.5;overflow-wrap:break-word}
.status-card-hint{font-size:.7rem;color:#8b949e;margin:8px 0 0;line-height:1.45;overflow-wrap:break-word}
.status-card-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;align-items:center;border-top:1px solid #30363d;padding-top:12px;min-width:0}
.status-card-actions .btn{white-space:normal;line-height:1.35;text-align:center}
.status-card-avatar{width:44px;height:44px;min-width:44px;border-radius:10px;background:#1c2128;display:flex;align-items:center;justify-content:center;color:#8b949e;font-size:18px;overflow:hidden;flex-shrink:0}
.status-card-avatar img{display:block;width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0}
.stat-number{font-size:28px;font-weight:800;margin-bottom:4px}
.stat-label{font-size:13px;color:#8b949e;font-weight:500}
.stats-grid.dashboard-stats{grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.stats-grid.dashboard-stats .stat-card{padding:14px;min-width:0}
.stats-grid.dashboard-stats .stat-card-header{margin-bottom:8px;gap:8px}
.stats-grid.dashboard-stats .stat-card-icon{width:32px;height:32px;font-size:14px;border-radius:8px}
.stats-grid.dashboard-stats .stat-number{font-size:18px;margin-bottom:2px}
.stats-grid.dashboard-stats .stat-label{font-size:11px;line-height:1.3}
.stats-grid.dashboard-stats .stat-trend{font-size:10px;padding:2px 6px;white-space:nowrap}
.table-container{background:#161b22;border:1px solid #30363d;border-radius:12px;overflow:hidden;margin-bottom:24px}
.table-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #30363d}
.table-title{font-size:15px;font-weight:700}
.table-wrapper{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{padding:12px 16px;text-align:left;font-size:11px;font-weight:600;color:#8b949e;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #30363d;background:#1c2128;white-space:nowrap}
tbody td{padding:12px 16px;font-size:13px;border-bottom:1px solid #21262d;white-space:nowrap}
tbody tr{transition:background .15s}
tbody tr:hover{background:#1c2128}
tbody tr:last-child td{border-bottom:none}
.badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-pending{background:rgba(234,179,8,.15);color:#facc15}
.badge-approved{background:rgba(34,197,94,.15);color:#4ade80}
.badge-rejected{background:rgba(248,81,73,.15);color:#f87171}
.badge-review{background:rgba(37,99,235,.15);color:#60a5fa}
.badge-second-phase,.badge-admin{background:rgba(124,58,237,.15);color:#a78bfa}
.badge-mod{background:rgba(6,182,212,.15);color:#22d3ee}
.badge-active{background:rgba(34,197,94,.15);color:#4ade80}
.badge-inactive{background:rgba(139,148,158,.15);color:#8b949e}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;border:none;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-primary{background:#7c3aed;color:#fff}.btn-primary:hover{background:#6d28d9}
.btn-success{background:#16a34a;color:#fff}.btn-success:hover{background:#15803d}
.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover{background:#b91c1c}
.btn-warning{background:#d97706;color:#fff}.btn-warning:hover{background:#b45309}
.btn-info{background:#2563eb;color:#fff}.btn-info:hover{background:#1d4ed8}
.btn-ghost{background:transparent;color:#8b949e;border:1px solid #30363d}.btn-ghost:hover{background:#1c2128;color:#e1e4e8}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-icon{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;background:transparent;border:1px solid #30363d;color:#8b949e;cursor:pointer;transition:all .2s;font-size:13px}
.btn-icon:hover{background:#1c2128;color:#e1e4e8}
.filter-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.filter-bar select,.filter-bar input{background:#1c2128;border:1px solid #30363d;border-radius:8px;padding:8px 12px;color:#e1e4e8;font-family:'Inter',sans-serif;font-size:13px;outline:none;transition:border-color .2s}
.filter-bar select:focus,.filter-bar input:focus{border-color:#7c3aed}
.filter-bar select{cursor:pointer;-webkit-appearance:none;appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid #30363d}
.pagination-info{font-size:13px;color:#8b949e}
.pagination-buttons{display:flex;gap:4px}
.pagination-buttons button{background:#1c2128;border:1px solid #30363d;color:#8b949e;padding:6px 12px;border-radius:6px;font-size:13px;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif}
.pagination-buttons button:hover{background:#272c33;color:#e1e4e8}
.pagination-buttons button.active{background:#7c3aed;border-color:#7c3aed;color:#fff}
.pagination-buttons button:disabled{opacity:.4;cursor:not-allowed}
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.chart-card{background:#161b22;border:1px solid #30363d;border-radius:12px;padding:20px}
.chart-card-title{font-size:14px;font-weight:700;margin-bottom:16px}
.chart-canvas-wrapper{position:relative;width:100%;height:280px}
.chart-canvas-wrapper canvas{width:100%!important;height:100%!important}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.panel{background:#161b22;border:1px solid #30363d;border-radius:12px;padding:20px}
.panel-title{font-size:14px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:12px;font-weight:600;color:#8b949e;margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px}
.form-control{width:100%;background:#0d1117;border:1px solid #30363d;border-radius:8px;padding:10px 12px;color:#e1e4e8;font-family:'Inter',sans-serif;font-size:13px;outline:none;transition:border-color .2s}
.form-control:focus{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.1)}
textarea.form-control{min-height:80px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.toggle-switch{display:flex;align-items:center;gap:10px;cursor:pointer}
.toggle-switch input{display:none}
.toggle-track{width:40px;height:22px;background:#30363d;border-radius:11px;position:relative;transition:background .2s;flex-shrink:0}
.toggle-track::after{content:'';width:18px;height:18px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .2s}
.toggle-switch input:checked+.toggle-track{background:#7c3aed}
.toggle-switch input:checked+.toggle-track::after{transform:translateX(18px)}
.form-group label.toggle-switch{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;font-weight:500;color:#e1e4e8;text-transform:none;letter-spacing:normal;margin-bottom:0}
.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:200;justify-content:center;align-items:center}
.modal-overlay.show{display:flex}
#confirmModal{z-index:260}
.modal{background:#161b22;border:1px solid #30363d;border-radius:16px;width:90%;max-width:560px;max-height:85vh;overflow-y:auto}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #30363d}
.modal-header h3{font-size:16px;font-weight:700}
.modal-close{background:none;border:none;color:#8b949e;font-size:18px;cursor:pointer;padding:4px}
.modal-close:hover{color:#e1e4e8}
.modal-body{padding:20px}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 20px;border-top:1px solid #30363d}
.app-profile-head{display:flex;gap:14px;align-items:center;padding:12px 14px;background:#1c2128;border:1px solid #30363d;border-radius:10px;margin-top:10px}
.app-profile-head .user-avatar{width:52px;height:52px;font-size:22px}
.app-profile-stat{background:#1c2128;border:1px solid #30363d;border-radius:10px;padding:10px 12px;text-align:center}
.app-profile-stat-num{font-size:18px;font-weight:700;color:#e6edf3}
.app-profile-stat-label{font-size:11px;color:#8b949e;margin-top:2px;text-transform:uppercase;letter-spacing:.4px}
.detail-overlay{display:none;position:fixed;top:0;right:0;width:520px;height:100%;background:#161b22;border-left:1px solid #30363d;z-index:150;overflow-y:auto;transition:transform .3s ease;transform:translateX(100%)}
.detail-overlay.show{display:block;transform:translateX(0)}
#interviewDetail.detail-overlay{width:100%;max-width:100%;height:100%;background:#161b22;border-radius:0;border-left:none;z-index:200;transform:none}
#interviewDetail.detail-overlay.show{transform:none}
#interviewDetail .detail-header{width:100%;max-width:1040px;margin:0 auto;border-radius:0}
#interviewDetail .detail-body{max-width:1040px;margin:0 auto}
.detail-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #30363d;position:sticky;top:0;background:#161b22;z-index:10}
.detail-body{padding:20px}
.detail-section{margin-bottom:20px}
.detail-section-title{font-size:12px;font-weight:700;color:#8b949e;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.detail-field{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #21262d;font-size:13px}
.detail-field-label{color:#8b949e}
.detail-field-value{font-weight:500;text-align:right}
.detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.comment-thread{max-height:300px;overflow-y:auto}
.comment-item{padding:10px 12px;background:#1c2128;border-radius:8px;margin-bottom:8px}
.comment-item-header{display:flex;justify-content:space-between;font-size:11px;color:#8b949e;margin-bottom:4px}
.comment-item-body{font-size:13px}
.timeline{border-left:2px solid #30363d;margin-left:8px;padding-left:16px}
.timeline-item{position:relative;margin-bottom:16px;font-size:13px}
.timeline-item::before{content:'';width:10px;height:10px;background:#7c3aed;border-radius:50%;position:absolute;left:-22px;top:4px}
.timeline-item-time{font-size:11px;color:#8b949e;margin-top:2px}
.forms-layout{display:grid;grid-template-columns:300px 1fr;gap:0;height:calc(100vh - 112px);overflow:hidden}
.category-list{background:#161b22;border-right:1px solid #30363d;display:flex;flex-direction:column;overflow:hidden}
.category-list-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #30363d;flex-shrink:0}
.category-list-header h4{font-size:13px;font-weight:700}
.category-list-scroll{flex:1;overflow-y:auto}
.category-item{display:flex;align-items:center;padding:10px 16px;border-bottom:1px solid #21262d;cursor:pointer;gap:10px;transition:background .15s}
.category-item:hover{background:#1c2128}
.category-item.active{background:rgba(124,58,237,.1);border-left:3px solid #7c3aed}
.category-item-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.category-item-info{flex:1;min-width:0}
.category-item-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.category-item-slug{font-size:11px;color:#8b949e}
.category-item-actions{display:flex;gap:2px;flex-shrink:0}
.fields-panel{background:#161b22;display:flex;flex-direction:column;overflow:hidden}
.fields-panel-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #30363d;flex-shrink:0}
.fields-panel-scroll{flex:1;overflow-y:auto;padding:8px}
.field-item{display:flex;align-items:flex-start;padding:12px 16px;border-bottom:1px solid #21262d;gap:10px;cursor:grab;transition:background .15s;border-radius:6px;margin-bottom:2px}
.field-item:hover{background:#1c2128}
.field-drag{color:#555;cursor:grab;font-size:12px;padding-top:2px;flex-shrink:0}
.field-info{flex:1;min-width:0}
.field-name{font-size:13px;font-weight:600;word-break:break-word}
.field-type{font-size:11px;color:#8b949e;margin-top:2px}
.field-item-actions{display:flex;gap:4px;flex-shrink:0;padding-top:2px}
.settings-section{background:#161b22;border:1px solid #30363d;border-radius:12px;margin-bottom:16px}
.settings-section-header{padding:16px 20px;border-bottom:1px solid #30363d;font-size:14px;font-weight:700}
.settings-section-body{padding:20px}
.quick-actions{display:flex;flex-wrap:wrap;gap:10px}
.quick-action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#1c2128;border:1px solid #30363d;border-radius:8px;color:#e1e4e8;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}
.quick-action-btn:hover{border-color:#7c3aed;background:rgba(124,58,237,.08)}
.second-phase-item{background:#1c2128;border:1px solid #30363d;border-radius:10px;padding:16px;margin-bottom:12px}
.second-phase-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.media-preview{background:#0d1117;border-radius:8px;padding:12px;margin-bottom:12px;text-align:center;min-height:120px;display:flex;align-items:center;justify-content:center}
.media-preview video,.media-preview audio{max-width:100%}
.file-size-compare{display:flex;gap:16px;margin-bottom:12px}
.file-size-box{flex:1;background:#0d1117;border-radius:8px;padding:10px;text-align:center}
.file-size-box .size-value{font-size:18px;font-weight:700}
.file-size-box .size-label{font-size:11px;color:#8b949e;margin-top:2px}
.toast-container{position:fixed;bottom:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 16px;border-radius:8px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:10px;min-width:280px;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:slideIn .3s ease}
.toast-success{background:#16a34a;color:#fff}
.toast-error{background:#dc2626;color:#fff}
.toast-info{background:#2563eb;color:#fff}
.toast-warning{background:#d97706;color:#fff}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.confirm-dialog{text-align:center}
.confirm-dialog i{font-size:40px;color:#f85149;margin-bottom:16px}
.confirm-dialog p{margin-bottom:8px;font-size:14px}
.confirm-dialog .confirm-subtext{font-size:13px;color:#8b949e}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#30363d;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#484f58}
.def-tab-bar .def-tab{text-align:center;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;color:var(--text-secondary);transition:all .15s;border:none;background:none;font-family:inherit}
.def-tab-bar .def-tab.def-tab-active{background:var(--accent);color:#fff}
.def-tab-bar .def-tab:hover:not(.def-tab-active){color:var(--text-primary);background:var(--bg-hover)}
.def-tab-content{display:none}.def-tab-content.def-tab-content-active{display:block}

/* ==========================================================
   GUILD MANAGER — Ticket System Styles
   ========================================================== */

/* ── Section cards ── */
.sec-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--rs);padding:20px;margin-bottom:20px}
.sec-title{font-size:15px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:10px}
.sec-title i{color:var(--accent)}
.sec-sub{font-size:12px;color:var(--text-secondary);margin-bottom:16px}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.sec-head-actions{display:flex;gap:8px;flex-wrap:wrap}
.sec-divider{border-top:1px solid var(--border-color)}

/* ── KPIs ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:20px}
.kpi{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:18px;position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.kpi.green::before{background:#10b981}.kpi.amber::before{background:#f59e0b}.kpi.red::before{background:#ef4444}.kpi.blue::before{background:#3b82f6}.kpi.purple::before{background:#8b5cf6}
.kpi .k-label{font-size:12px;color:var(--text-secondary);font-weight:600;margin-bottom:8px}
.kpi .k-value{font-size:26px;font-weight:800;line-height:1}
.kpi .k-sub{font-size:12px;color:var(--text-secondary);margin-top:6px}

/* ── Status grid (bot config) ── */
.status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.status-cell{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:14px 16px}
.status-cell .lbl{font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px}
.status-cell .val{font-size:15px;font-weight:700;word-break:break-all}

/* ── Bot status pill ── */
.bot-status-pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;background:var(--bg-secondary);border:1px solid var(--border-color)}
.bot-status-pill .dot{width:8px;height:8px;border-radius:50%;background:#8b949e;animation:pulse 1.6s infinite}
.bot-status-pill.online .dot{background:#3ba55d}
.bot-status-pill.offline .dot{background:#f23f43}
.bot-status-pill.idle .dot{background:#faa61a}
.bot-status-pill .ping{color:var(--text-secondary);font-weight:500}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── Grid and layout helpers ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row{display:flex;gap:12px}.row>*{flex:1}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mt{margin-top:12px}.mb{margin-bottom:12px}
.small{font-size:12px}
.empty-state{text-align:center;padding:48px 16px;color:var(--text-secondary)}
.empty-state i{font-size:44px;opacity:.25;margin-bottom:12px;display:block}
.chart-box{position:relative;height:150px}

/* ── Panel / Category cards ── */
.panel-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s}
.panel-card:hover{border-color:#3d444d}
.panel-card .pc-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.panel-card .pc-name{font-weight:700;font-size:14px;word-break:break-word}
.panel-card .pc-meta{font-size:12px;color:var(--text-secondary);display:flex;flex-direction:column;gap:4px}
.panel-card .pc-actions{display:flex;gap:6px;margin-top:auto;flex-wrap:wrap}
.panel-card .pc-actions .btn{flex:1;justify-content:center}

/* ── Color input ── */
.color-input-wrap{display:flex;gap:8px;align-items:center}
.color-input-wrap input[type=color]{width:44px;height:38px;border:1px solid var(--border-color);border-radius:8px;background:none;cursor:pointer;padding:2px}
.color-input-wrap input[type=text]{flex:1}

/* ── Ticket inbox (list + chat) ── */
.ticket-inbox{display:grid;grid-template-columns:360px 1fr;gap:0;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;overflow:hidden;min-height:560px;height:calc(100vh - 260px)}
.ticket-inbox-side{display:flex;flex-direction:column;border-right:1px solid var(--border-color);min-height:0}
.ticket-inbox-filters{padding:14px;border-bottom:1px solid var(--border-color);display:flex;flex-direction:column;gap:8px}
.ticket-inbox-filters .row{display:flex;gap:8px}
.ticket-inbox-filters select,.ticket-inbox-filters input{flex:1;background:var(--bg-input);border:1px solid var(--border-color);border-radius:8px;padding:8px 10px;color:var(--text-primary);font-size:12px;outline:none;font-family:'Inter',sans-serif}
.ticket-inbox-list{flex:1;overflow-y:auto;min-height:200px}
.ti-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .15s;border-left:3px solid transparent}
.ti-item:hover{background:var(--bg-hover)}
.ti-item.selected{background:var(--bg-active);border-left-color:var(--accent)}
.ti-item .ti-emoji{width:38px;height:38px;border-radius:10px;background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.ti-item .ti-body{flex:1;min-width:0}
.ti-item .ti-top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.ti-item .ti-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti-item .ti-cat{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti-item .ti-date{font-size:11px;color:var(--text-muted);margin-top:3px}
.badge-open{background:rgba(34,197,94,.15);color:#4ade80}
.badge-in_progress{background:rgba(37,99,235,.15);color:#60a5fa}
.badge-closed{background:rgba(139,148,158,.15);color:#8b949e}
.badge-low{background:rgba(234,179,8,.15);color:#facc15}
.badge-normal{background:rgba(139,148,158,.15);color:#c9d1d9}
.badge-high{background:rgba(249,115,22,.15);color:#fb923c}
.badge-critical{background:rgba(248,81,73,.15);color:#f87171}

.ticket-inbox-detail{display:flex;flex-direction:column;min-height:0}
.ticket-inbox-detail .tid-empty{display:flex;flex:1;align-items:center;justify-content:center;color:var(--text-secondary)}
.tid-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border-color);flex-wrap:wrap}
.tid-head-left{min-width:0}
.tid-head-title{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tid-head-meta{font-size:12px;color:var(--text-secondary);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap}
.tid-actions{display:flex;gap:6px;flex-wrap:wrap}
.tid-actions select{background:var(--bg-input);border:1px solid var(--border-color);border-radius:8px;padding:6px 8px;color:var(--text-primary);font-size:12px;outline:none;font-family:'Inter',sans-serif}
.tid-actions select:focus{border-color:var(--accent)}
.tid-close-info{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tid-close-info span{display:inline-flex;align-items:center;gap:6px;background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.3);color:#c4b5fd;border-radius:6px;padding:3px 10px;font-size:12px}
.transfer-select{margin:0;height:34px}

/* ── Chat ── */
.chat-channel-switch{display:flex;gap:4px;padding:8px 18px;border-bottom:1px solid var(--border-color);background:var(--bg-card)}
.ccs-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px;border-radius:8px;border:1px solid transparent;background:none;color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif}
.ccs-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.ccs-btn.active{background:rgba(124,58,237,.12);color:#a78bfa;border-color:rgba(124,58,237,.3)}
.chat-scroll{flex:1;overflow-y:auto;background:var(--bg-primary);padding:16px 18px;display:flex;flex-direction:column;gap:2px;min-height:240px;text-align:left}
.chat-msg{display:flex;align-items:flex-start;justify-content:flex-start;gap:12px;padding:6px 10px;border-radius:8px;text-align:left;width:100%}
.chat-msg:hover{background:rgba(255,255,255,.02)}
.chat-msg.system{background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.15);border-radius:8px;margin:8px 0;text-align:left}
.chat-msg .cm-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#7c3aed,#2563eb);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;overflow:hidden}
.chat-msg .cm-avatar img{width:100%;height:100%;object-fit:cover}
.chat-msg .cm-body{flex:1;min-width:0;text-align:left}
.chat-msg .cm-meta{display:flex;align-items:center;gap:8px}
.chat-msg .cm-author{font-weight:600;font-size:13px}
.chat-msg .cm-badge{font-size:10px;background:#5865F2;color:#fff;padding:1px 6px;border-radius:4px;font-weight:700}
.chat-msg .cm-time{font-size:11px;color:var(--text-muted)}
.chat-msg .cm-content{font-size:13px;line-height:1.5;margin-top:2px;white-space:pre-wrap;word-break:break-word;text-align:left}
.chat-msg .cm-content .discord-link{color:#00a8fc;text-decoration:none}
.chat-msg .cm-attach{margin-top:4px}
.chat-msg .cm-attach a{font-size:12px;word-break:break-all}
.chat-msg .cm-embeds{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.chat-msg .cm-empty{color:var(--text-muted);font-style:italic;font-size:12px}
.chat-embed{display:flex;background:#2f3136;border:1px solid rgba(255,255,255,.06);border-left:4px solid #5865F2;border-radius:6px;max-width:460px;overflow:hidden;text-align:left}
.chat-embed .emb-body{padding:8px 10px;min-width:0;color:#dbdee1}
.chat-embed .emb-author{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#fff;margin-bottom:4px}
.chat-embed .emb-author img{width:16px;height:16px;border-radius:50%;object-fit:cover}
.chat-embed .emb-title{font-size:13px;font-weight:600;color:#fff;margin-bottom:4px;word-break:break-word}
.chat-embed .emb-title a{color:#00a8fc;text-decoration:none}
.chat-embed .emb-title a:hover{text-decoration:underline}
.chat-embed .emb-desc{font-size:12.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.chat-embed .emb-fields{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px}
.chat-embed .emb-field{min-width:110px;max-width:100%}
.chat-embed .emb-field.inline{min-width:80px}
.chat-embed .emb-field strong{display:block;font-size:11.5px;color:#f2f3f5;margin-bottom:2px}
.chat-embed .emb-field span{font-size:12.5px;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.chat-embed .emb-image{display:block;max-width:100%;max-height:240px;object-fit:cover;border-radius:6px;margin-top:8px}
.chat-embed .emb-thumb{float:right;width:72px;height:72px;object-fit:cover;border-radius:6px;margin:0 0 6px 8px}
.chat-embed .emb-footer{clear:both;font-size:11px;color:#949ba4;margin-top:6px}
.chat-divider{display:flex;align-items:center;gap:12px;color:#c084fc;font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin:14px 0 6px}
.chat-divider::after{content:'';flex:1;height:1px;background:rgba(124,58,237,.3)}
.chat-divider i{font-size:12px}
.chat-input-row{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--border-color);background:var(--bg-card)}
.chat-input-row textarea{flex:1;background:var(--bg-input);border:1px solid var(--border-color);border-radius:10px;padding:10px 12px;color:var(--text-primary);font-family:'Inter',sans-serif;font-size:13px;outline:none;resize:none;min-height:42px;transition:border-color .2s}
.chat-input-row textarea:focus{border-color:var(--accent)}
.chat-input-row .send-btn{width:44px;height:44px;border-radius:10px;background:var(--accent);border:none;color:#fff;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .2s}
.chat-input-row .send-btn:hover{background:#6d28d9}

/* ── Discord embed preview ── */
.discord-preview{background:#2f3136;border-radius:12px;padding:20px;min-height:220px;border:1px solid #202225}
.discord-preview .dp-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:#dcddde;font-size:14px;font-weight:600}
.discord-preview .dp-header .hash{color:#8e9297;font-size:20px}
.discord-embed{display:flex;background:#36393f;border-radius:6px;border-left:4px solid #5865F2;max-width:520px;overflow:hidden}
.discord-embed .de-body{padding:14px 16px;flex:1;min-width:0}
.discord-embed .de-thumb{width:72px;margin:14px 16px 14px 0;border-radius:6px;background-size:cover;background-position:center;background-repeat:no-repeat;flex-shrink:0}
.discord-embed .de-title{color:#fff;font-weight:600;font-size:15px;margin-bottom:6px;word-break:break-word}
.discord-embed .de-desc{color:#dcddde;font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.discord-embed .de-image{border-radius:6px;margin-top:12px;max-width:100%;max-height:220px;display:none;background-size:cover;background-position:center}
.discord-embed .de-footer{display:flex;align-items:center;gap:6px;margin-top:12px;color:#8e9297;font-size:12px}
.discord-embed .de-footer img{width:20px;height:20px;border-radius:50%}
.discord-selectmenu{background:#313338;border:1px solid #3f4248;border-radius:6px;padding:12px 14px;color:#dbdee1;font-size:14px;margin-top:10px;display:flex;align-items:center;gap:10px;max-width:520px}
.discord-selectmenu i{color:#b5bac1}
.discord-selectmenu .caret{margin-left:auto;color:#b5bac1}

/* ── Logs ── */
.log-list{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.log-item{display:flex;gap:10px;align-items:flex-start;font-size:12px;padding:6px 10px;border-radius:6px;background:var(--bg-secondary)}
.log-item .log-time{color:var(--text-muted);white-space:nowrap}
.log-item .log-icon{width:18px;text-align:center}
.log-item.success .log-icon{color:#4ade80}.log-item.error .log-icon{color:#f87171}.log-item.warn .log-icon{color:#facc15}.log-item.info .log-icon{color:#60a5fa}

/* ── Guild chip ── */
.guild-chip{display:inline-flex;align-items:center;gap:8px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:20px;padding:5px 12px;font-size:12px}
.guild-chip img{width:22px;height:22px;border-radius:50%}

/* ── Category stats bars ── */
.catstat-row{margin-bottom:12px}
.catstat-head{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary);margin-bottom:4px}
.catstat-count{font-weight:700;color:var(--text-primary)}
.catstat-bar{height:8px;border-radius:5px;background:var(--bg-secondary);overflow:hidden}
.catstat-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,#7c3aed,#2563eb);transition:width .4s}

/* ── Rating / Rank ── */
.rating-stars{color:#fbbf24;font-size:12px;letter-spacing:1px;white-space:nowrap}
.rank-cell{display:flex;align-items:center;gap:10px}
.rank-pos{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:var(--bg-secondary);border:1px solid var(--border-color);font-size:11px;font-weight:700;color:var(--text-secondary)}
.qrow{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:10px 12px}

/* ── Role tag ── */
.role-tag .x{cursor:pointer;color:var(--text-muted)}
.role-tag .x:hover{color:#f87171}

/* ── Loading spinner for buttons ── */
.btn.loading{pointer-events:none;opacity:.6;position:relative}
.btn.loading::after{content:'';position:absolute;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;border-radius:50%;animation:spinner .7s linear infinite;right:10px}
@keyframes spinner{to{transform:rotate(360deg)}}

/* ==========================================================
   RESPONSIVE — Guild Manager / Tickets
   ========================================================== */
@media(max-width:1024px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .ticket-inbox{grid-template-columns:300px 1fr;min-height:480px}
  .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .status-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}
@media(max-width:768px){
  .ticket-inbox{grid-template-columns:1fr;height:auto;min-height:0}
  .ticket-inbox-side{border-right:none;border-bottom:1px solid var(--border-color);max-height:45vh}
  .ticket-inbox-detail{min-height:300px}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .status-grid{grid-template-columns:1fr 1fr}
  .chat-input-row{padding:10px 12px}
  .chat-input-row textarea{min-height:38px;font-size:12px}
  .tid-head{flex-direction:column;gap:8px}
  .tid-actions{width:100%;flex-wrap:wrap}
  .tid-actions select{flex:1;min-width:0}
  .discord-embed{max-width:100%}
  .discord-selectmenu{max-width:100%}
}
@media(max-width:480px){
  .kpi-grid{grid-template-columns:1fr}
  .kpi{padding:14px}
  .kpi .k-value{font-size:22px}
  .status-grid{grid-template-columns:1fr}
  .empty-state{padding:32px 12px}
  .empty-state i{font-size:36px}
  .sec-card{padding:14px}
  .sec-title{font-size:13px}
  .sec-sub{font-size:11px}
  .panel-card{padding:12px;border-radius:10px}
  .panel-card .pc-name{font-size:13px}
  .panel-card .pc-meta{font-size:11px}
}

/* ==========================================================
   RESPONSIVE — Admin Panel
   Standardized Breakpoints: 480 / 768 / 1024 / 1280
   ========================================================== */

/* ── Desktop (≤1280px): dashboard stats scroll ── */
@media(max-width:1279px){
  .stats-grid.dashboard-stats{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding:2px 2px 8px}
  .stats-grid.dashboard-stats .stat-card{flex:1 1 160px;min-width:160px;max-width:220px}
}

/* ── Tablet landscape / Laptop (≤1024px) ── */
@media(max-width:1024px){
  .charts-grid,.panel-grid{grid-template-columns:1fr}
  .forms-layout{grid-template-columns:1fr!important}
  .inbox-sidebar{width:300px;min-width:260px}
  .detail-card-grid{grid-template-columns:1fr}
  .notif-dropdown{width:300px;right:-40px}
  .users-search-wrap input{width:200px}
}

/* ── Mobile L / Tablet portrait (≤768px) ── */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.mobile-open{transform:translateX(0)}
  .main-wrapper{margin-left:0!important}
  .header{padding:0 16px}
  .search-bar input{width:160px;font-size:12px}
  .page-title{font-size:15px}
  .content{padding:16px}
  .form-row{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
  .filter-bar{flex-direction:column;align-items:stretch}
  .filter-bar select,.filter-bar input{width:100%}
  .table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .detail-overlay{width:100%}
  .inbox-wrap{flex-direction:column}
  .inbox-sidebar{width:100%;min-width:0;border-right:none;border-bottom:1px solid var(--border-color);max-height:50vh}
  .inbox-detail{min-height:300px}
  .notif-dropdown{width:calc(100vw - 32px);right:-8px;max-height:60vh}
  .modal{width:95%;max-width:560px}
  .users-search-wrap input{width:160px}
  .users-count{display:none}
  .header-right{gap:8px}
  .pagination{flex-direction:column;gap:8px;align-items:stretch}
  .pagination-buttons{justify-content:center}
}

/* ── Mobile S/M (≤480px) ── */
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .stat-card{padding:14px}
  .stat-number{font-size:22px}
  .header{height:56px}
  .header-left{gap:8px}
  .search-bar{display:none}
  .page-title{font-size:14px}
  .table-header{padding:12px 14px;flex-direction:column;gap:8px;align-items:flex-start}
  .quick-actions{flex-direction:column}
  .quick-action-btn{width:100%;justify-content:center}
  .modal{width:100%;max-width:100%;border-radius:0;max-height:100vh}
  .modal-header{padding:12px 16px}
  .modal-body{padding:16px}
  .modal-footer{padding:12px 16px}
  .detail-overlay{width:100%;border-radius:0}
  .inbox-sidebar{max-height:40vh}
  .chat-input-row{padding:10px 12px}
  .chat-input-row textarea{font-size:12px}
  .tid-head{flex-direction:column;gap:8px}
  .tid-actions{width:100%}
  .tid-actions select{width:100%}
}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:#30363d;border-radius:3px;outline:none;border:none}
input[type="range"]:focus{outline:2px solid #7c3aed;outline-offset:2px}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:#7c3aed;border-radius:50%;cursor:pointer;transition:background .2s}
input[type="range"]::-webkit-slider-thumb:hover{background:#6d28d9}
input[type="range"]::-moz-range-thumb{width:18px;height:18px;background:#7c3aed;border-radius:50%;cursor:pointer;border:none}
/* Permission checkboxes */
.perm-check-label{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border-color);border-radius:6px;font-size:12px;cursor:pointer;background:var(--bg-secondary);transition:all .15s}
.perm-check-label:hover{border-color:var(--accent);background:rgba(99,102,241,.05)}
.perm-check-label input[type=checkbox]:checked+*,.perm-check-label:has(input:checked){border-color:var(--accent);background:rgba(99,102,241,.1);color:var(--accent)}
.perm-check-label input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px}
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.perm-group{grid-column:1/-1;margin-top:6px}
.perm-group-head{display:flex;align-items:center;gap:8px;padding:4px 2px;cursor:pointer;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#9ca3af;user-select:none}
.perm-group-head input[type=checkbox]{accent-color:var(--accent);width:13px;height:13px;flex-shrink:0}
.perm-group-label{flex:1;min-width:0}
.perm-group-count{font-weight:600;font-size:10px;padding:1px 6px;border-radius:999px;background:rgba(99,102,241,.12);color:#818cf8;text-transform:none;letter-spacing:0}
.perm-site-block{margin-top:14px;padding-top:10px;border-top:1px dashed var(--border-color)}
.perm-search-wrap{position:relative;margin-top:6px}
.perm-search-wrap i{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:11px;color:#8b949e;pointer-events:none}
.perm-search-wrap .form-control{padding-left:28px;font-size:12px}
.perm-count-chip{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;background:rgba(99,102,241,.12);color:#818cf8;font-weight:600;font-size:11px;white-space:nowrap}
.perm-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:4px;font-size:10px;background:rgba(99,102,241,.15);color:#6366f1;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.perm-badge-full{background:rgba(16,185,129,.15);color:#10b981}
.perm-badge-more{background:rgba(148,163,184,.18);color:#94a3b8;cursor:default;font-weight:700}
.perm-status-line{font-size:11px;color:#8b949e;margin-top:4px;padding-left:4px}
.perm-status-line .perm-ok{color:#10b981}
.perm-status-line .perm-denied{color:#ef4444}
.perm-role-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12px;border-bottom:1px solid var(--border-color)}
.perm-role-row:last-child{border-bottom:none}
.perm-role-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.perm-role-check{color:#10b981;font-size:12px}
.perm-role-x{color:#ef4444;font-size:12px}
/* ── Sidebar Nav Badges ── */
.nav-badges{display:flex;gap:4px;margin-left:auto;flex-shrink:0}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 5px;border-radius:10px;font-size:10px;font-weight:700;line-height:1;flex-shrink:0}
.badge-pending-count{background:rgba(245,158,11,.2);color:#f59e0b}
.badge-review-count{background:rgba(99,102,241,.2);color:#818cf8}
.badge-interviews-count{background:rgba(16,185,129,.2);color:#34d399}
.sidebar.collapsed .nav-badges{display:none}
.nav-group.open>.nav-group-header>.nav-badges{display:none}
/* ── Notification Dropdown ── */
.notif-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:360px;max-height:420px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--rs);box-shadow:0 12px 32px rgba(0,0,0,.4);z-index:200;display:flex;flex-direction:column;overflow:hidden}
.notif-dropdown-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-color)}
.notif-dropdown-list{flex:1;overflow-y:auto;max-height:360px}
.notif-empty{text-align:center;padding:32px 16px;color:var(--text-secondary);font-size:13px}
.notif-item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .15s}
.notif-item:hover{background:var(--bg-hover)}
.notif-item.unread{background:rgba(99,102,241,.04)}
.notif-item.unread::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.notif-item{position:relative}
.notif-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
.notif-icon.info{background:rgba(99,102,241,.15);color:#818cf8}
.notif-icon.success{background:rgba(16,185,129,.15);color:#10b981}
.notif-icon.warning{background:rgba(245,158,11,.15);color:#f59e0b}
.notif-icon.error{background:rgba(239,68,68,.15);color:#ef4444}
.notif-body{flex:1;min-width:0}
.notif-title{font-weight:600;font-size:13px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-message{font-size:12px;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-time{font-size:11px;color:var(--text-muted);margin-top:3px}
.staff-action-option{transition:all .15s ease;user-select:none}
.staff-action-option:hover{border-color:#7c3aed!important;background:rgba(124,58,237,.05)!important}
.staff-action-option:active{transform:scale(.98)}
.staff-hierarchy-item:hover{border-color:#7c3aed!important;background:rgba(124,58,237,.03)!important}
.staff-hierarchy-item:active{cursor:grabbing!important}

/* ── Drag & Drop ── */
.dragging{opacity:0.4;transform:scale(0.97)}
.drag-over{border-color:#7c3aed!important;border-style:dashed!important;background:rgba(124,58,237,.06)!important;box-shadow:0 0 0 2px rgba(124,58,237,.15)}
.role-item,.field-item{transition:opacity .15s,transform .15s,border-color .2s,box-shadow .2s}
.role-item{cursor:default}
.role-drag-handle{cursor:grab!important;user-select:none}
.role-drag-handle:active{cursor:grabbing!important}
.role-item.dragging .role-drag-handle,.field-item.dragging .field-drag{cursor:grabbing!important}
.field-item{border:1px solid transparent;border-radius:6px;margin-bottom:2px;transition:border-color .2s,background .2s,opacity .15s}
.field-item[draggable]{cursor:grab}
.field-item[draggable]:active{cursor:grabbing}

/* ── Users View ── */
.users-search-wrap{position:relative}
.users-search-wrap i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#8b949e;font-size:12px;pointer-events:none}
.users-search-wrap input{padding-left:32px;width:250px}
.filter-check{display:flex;align-items:center;gap:6px;font-size:13px;color:#8b949e;cursor:pointer;background:#1c2128;border:1px solid #30363d;border-radius:8px;padding:8px 12px;user-select:none;transition:border-color .2s,color .2s;white-space:nowrap}
.filter-check:hover{border-color:#3d444d}
.filter-check input{accent-color:#7c3aed;margin:0;cursor:pointer}
.filter-check:has(input:checked){border-color:#7c3aed;color:#e1e4e8}
.users-count{font-size:12px;color:#8b949e;margin-right:auto;margin-left:12px}
.users-table th.sortable{cursor:pointer;user-select:none;white-space:nowrap;transition:color .15s}
.users-table th.sortable:hover{color:#e1e4e8}
.sort-ind{display:inline-block;width:0;height:0;margin-left:5px;border-left:4px solid transparent;border-right:4px solid transparent;opacity:.35;vertical-align:middle}
.sort-ind.asc{border-bottom:5px solid #a78bfa;opacity:1}
.sort-ind.desc{border-top:5px solid #a78bfa;opacity:1}
.user-id{font-size:11px;color:#8b949e;font-family:'Consolas','SF Mono',monospace}
.user-cell{display:flex;align-items:center;gap:10px}
.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;position:relative;overflow:hidden}
.user-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.user-name{font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;line-height:1.3}
.user-name .badge{font-size:10px;padding:2px 5px}
.user-sub{font-size:11px;color:#8b949e;margin-top:2px}
.discord-cell{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#7289da;white-space:nowrap}
.discord-cell i{font-size:13px;flex-shrink:0}
.discord-id{color:#484f58;font-size:10px}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle}
.status-dot.active{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.status-dot.inactive{background:#8b949e;box-shadow:0 0 0 3px rgba(139,148,158,.15)}
.status-dot.suspended{background:#f59e0b;box-shadow:0 0 0 3px rgba(234,179,8,.15)}
.status-dot.banned{background:#ef4444;box-shadow:0 0 0 3px rgba(248,81,73,.15)}
.last-login{font-size:12px;color:#8b949e;white-space:nowrap}
.user-row{cursor:pointer;transition:background .12s}
.user-row:hover{background:#1c2128}
.actions-cell{white-space:nowrap;text-align:right}
.user-row .actions-cell .btn-icon{opacity:.3;margin-left:2px}
.user-row:hover .actions-cell .btn-icon{opacity:1}
.btn-icon.danger:hover{background:rgba(248,81,73,.12);color:#ef4444}
.table-empty{padding:32px;text-align:center;color:#8b949e}
.table-empty.error{color:#ef4444}
.text-muted{color:#484f58}

/* ── User Modal Tabs ── */
.modal-lg{max-width:680px}
.user-modal-tabs{display:flex;gap:2px;padding:0 16px;border-bottom:1px solid #30363d;background:#0d1117}
.user-tab{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;background:none;border:none;border-bottom:2px solid transparent;color:#8b949e;font-size:13px;font-weight:600;cursor:pointer;transition:color .2s,border-color .2s;margin-bottom:-1px}
.user-tab:hover{color:#e1e4e8}
.user-tab.active{color:#7c3aed;border-bottom-color:#7c3aed}
.user-tab-panel{display:none}
.user-tab-panel.active{display:block;animation:userTabFade .2s ease}
@keyframes userTabFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.user-avatar-field{display:flex;align-items:center;gap:12px}
.user-avatar-field .user-avatar{width:48px;height:48px;font-size:18px}
.user-avatar-field .user-avatar img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.user-discord-hint{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px dashed #30363d;border-radius:10px;background:#0d1117;color:#8b949e;font-size:12.5px;line-height:1.5}
.user-discord-hint i{color:#7289da;font-size:16px;margin-top:1px}

/* ── Modal Footer Split (usuario) ── */
.modal-footer{flex-wrap:wrap}
.footer-actions-left{display:flex;gap:8px;flex-wrap:wrap;margin-right:auto;align-items:center}
.footer-actions-right{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.form-hint{font-size:12px;color:#8b949e;margin-top:6px;line-height:1.5}

/* ── Scroll lock ── */
body.modal-open{overflow:hidden}

/* ── Mobile sidebar backdrop ── */
.sidebar-backdrop{position:fixed;inset:0;background:rgba(5,5,10,.55);backdrop-filter:blur(2px);z-index:80;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.sidebar-backdrop.visible{opacity:1;visibility:visible}

/* ── Safe areas (notch / home indicator) ── */
@supports(padding:max(0px)){
  .sidebar{padding-top:env(safe-area-inset-top)}
  .sidebar-footer{padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .header{height:calc(64px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
  .toast-container{right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom))}
}

/* ── Touch (no sticky hover) ── */
@media(hover:none),(pointer:coarse){
  /* Selectores concretos: un `*:hover` global también alcanzaba al propio
     .sidebar y, en táctil, clavaba su transform (el drawer móvil se quedaba
     abierto/cerrado fuera de sitio). */
  .stat-card:hover,.field-type-card:hover,.ann-color-preset:hover{transform:none}
  button:hover,.btn:hover,.nav-item:hover,.category-item:hover,.field-item:hover,.second-phase-item:hover,.quick-action-btn:hover,.perm-check-label:hover,.notif-item:hover,.def-tab:hover,.user-tab:hover,.res-link:hover{box-shadow:none!important}
}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── Base de Datos (gestor) ── */
.db-tab-btn.active{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}
.db-table-item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;cursor:pointer;color:#8b949e;font-size:13px;transition:background .15s}
.db-table-item i{font-size:12px;color:var(--text-muted)}
.db-table-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.db-table-item.active{background:var(--bg-active);color:#fff}
.db-table-rows{margin-left:auto;font-size:11px;background:var(--bg-secondary);border:1px solid var(--border-color);padding:1px 7px;border-radius:999px;color:var(--text-secondary)}
.db-sql-result{background:#161b22;border:1px solid #30363d;border-radius:12px;overflow:auto;max-height:60vh}
.db-sql-result table{width:100%;border-collapse:collapse;font-size:12.5px;font-family:Consolas,Menlo,monospace}
.db-sql-result th{position:sticky;top:0;background:#1c2128;color:#e1e4e8;text-align:left;padding:9px 12px;border-bottom:1px solid #30363d;font-weight:600;white-space:nowrap}
.db-sql-result td{padding:7px 12px;border-bottom:1px solid #262b33;color:#c9d1d9;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-sql-result tr:hover td{background:rgba(124,58,237,.05)}
.db-sql-result .empty{text-align:center;color:#8b949e;padding:20px;font-family:'Inter',sans-serif}
.db-sql-result td.db-row-actions{white-space:nowrap;width:110px}
.db-row-actions .btn{padding:4px 8px;margin-right:4px;font-size:12px;background:transparent}
.db-row-actions .db-row-del:hover{color:#f85149!important;border-color:#f85149;background:rgba(248,81,73,.08)}
#dbRowForm .form-group label{display:block;margin-bottom:4px;font-size:12px;font-weight:600;color:#8b949e}
#dbRowForm .form-control{font-family:'Inter',sans-serif;padding:8px 10px}
#dbRowForm .db-row-input[disabled]{opacity:.5;cursor:not-allowed}

/* ── Field Type Picker (Visual Grid) ── */
.field-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-bottom:16px}
.field-type-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 8px;border:1.5px solid #30363d;border-radius:10px;
  background:#0d1117;cursor:pointer;transition:all .2s;text-align:center;
  user-select:none;position:relative
}
.field-type-card:hover{border-color:#7c3aed;background:rgba(124,58,237,.06);transform:translateY(-1px)}
.field-type-card.active{border-color:#7c3aed;background:rgba(124,58,237,.12);box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.field-type-card.active::after{
  content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;
  position:absolute;top:6px;right:6px;font-size:10px;
  color:#7c3aed;width:16px;height:16px;display:flex;align-items:center;justify-content:center;
  background:rgba(124,58,237,.15);border-radius:50%
}
.field-type-card i{font-size:20px;color:#8b949e;transition:color .2s;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.field-type-card:hover i,.field-type-card.active i{color:#a78bfa}
.field-type-card .ftc-name{font-size:11px;font-weight:600;color:#e1e4e8;line-height:1.2}
.field-type-card .ftc-desc{font-size:10px;color:#8b949e;line-height:1.3;display:none}
.field-type-card.active .ftc-desc{display:block}

/* ── Field Config Sections ── */
.field-config-section{margin-bottom:16px;padding:14px;background:#0d1117;border:1px solid #30363d;border-radius:10px}
.field-config-section.fcs-highlight{border-color:rgba(124,58,237,.3);background:rgba(124,58,237,.04)}
.field-config-section .fcs-title{font-size:11px;font-weight:700;color:#8b949e;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.field-config-section .fcs-title i{font-size:10px;color:#7c3aed}
.field-config-hint{font-size:11px;color:#8b949e;margin-top:4px;line-height:1.4;padding:6px 8px;background:rgba(124,58,237,.05);border-radius:6px;border-left:2px solid #7c3aed}
.field-config-hint code{font-family:'Consolas',monospace;font-size:10px;background:rgba(124,58,237,.15);padding:1px 4px;border-radius:3px;color:#a78bfa}

/* ── Field Name Badge ── */
.field-name-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;color:#8b949e;background:#1c2128;
  border:1px solid #30363d;border-radius:6px;
  padding:3px 8px;margin-top:4px;font-family:Consolas,monospace
}
.field-name-badge i{font-size:9px;color:#555}

/* ── Field Preview ── */
.field-preview-box{
  margin-top:12px;padding:14px;
  background:#161b22;border:1px solid #30363d;border-radius:10px
}
.field-preview-box .fpb-label{font-size:11px;font-weight:700;color:#8b949e;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.field-preview-box .fpb-label i{font-size:10px;color:#7c3aed}
.field-preview-box .fpb-content{min-height:32px;display:flex;align-items:center}
.field-preview-box .fpb-content input[type=text],
.field-preview-box .fpb-content input[type=number],
.field-preview-box .fpb-content input[type=url],
.field-preview-box .fpb-content input[type=email],
.field-preview-box .fpb-content textarea,
.field-preview-box .fpb-content select{
  width:100%;background:#0d1117;border:1px solid #30363d;border-radius:8px;
  padding:8px 10px;color:#e1e4e8;font-size:13px;font-family:'Inter',sans-serif;
  pointer-events:none;opacity:.7
}
.field-preview-box .fpb-content textarea{min-height:60px;resize:none}
.field-preview-box .fpb-content .fi-radio,
.field-preview-box .fpb-content .fi-check{pointer-events:none;opacity:.7}
.field-preview-box .fpb-content .fi-terms{pointer-events:none;opacity:.7}
.field-preview-box .fpb-empty{font-size:12px;color:#555;font-style:italic}

/* ── Options Editor (improved) ── */
.options-editor{display:flex;flex-direction:column;gap:6px}
.options-editor .oe-row{display:flex;align-items:center;gap:6px}
.options-editor .oe-row input{flex:1;background:#0d1117;border:1px solid #30363d;border-radius:6px;padding:6px 10px;color:#e1e4e8;font-size:12px;outline:none;transition:border-color .2s}
.options-editor .oe-row input:focus{border-color:#7c3aed}
.options-editor .oe-row .oe-num{font-size:11px;color:#555;width:16px;text-align:right;flex-shrink:0}
.options-editor .oe-row .oe-del{background:none;border:none;color:#555;cursor:pointer;padding:4px;font-size:12px;transition:color .15s;flex-shrink:0}
.options-editor .oe-row .oe-del:hover{color:#f85149}
.options-editor .oe-add{
  display:flex;align-items:center;gap:6px;
  background:none;border:1px dashed #30363d;border-radius:6px;
  padding:6px 10px;color:#8b949e;font-size:12px;cursor:pointer;
  transition:all .2s;justify-content:center
}
.options-editor .oe-add:hover{border-color:#7c3aed;color:#a78bfa;background:rgba(124,58,237,.05)}
.options-editor .oe-row .oe-drag{cursor:grab;color:#555;font-size:12px;padding:4px;flex-shrink:0;transition:color .15s}
.options-editor .oe-row .oe-drag:hover{color:#8b949e}
.options-editor .oe-row.oe-drag-over{border-top:2px solid #7c3aed;padding-top:4px}
.options-editor .oe-row{transition:opacity .15s}

/* ── Discord Announcements System ── */
.ann-filter-group{display:flex;gap:6px;flex-wrap:wrap}
button.ann-filter, .ann-filter-group button.ann-filter{display:inline-flex !important;align-items:center;gap:6px;padding:6px 14px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid #30363d !important;background:#161b22 !important;color:#8b949e !important;font-family:'Inter',sans-serif !important}
button.ann-filter:hover, .ann-filter-group button.ann-filter:hover{background:#1c2128 !important;color:#e1e4e8 !important;border-color:#484f58 !important}
button.ann-filter.active, .ann-filter-group button.ann-filter.active{background:var(--accent,#7c3aed) !important;color:#fff !important;border-color:var(--accent,#7c3aed) !important}
button.ann-filter.active:hover, .ann-filter-group button.ann-filter.active:hover{background:#6d28d9 !important;border-color:#6d28d9 !important}
.ann-card{transition:border-color .2s,box-shadow .2s}
.ann-card:hover{box-shadow:0 2px 12px rgba(0,0,0,.2)}
.ann-field-row,.ann-btn-row{transition:border-color .15s}
.ann-field-row:hover,.ann-btn-row:hover{border-color:var(--accent,#7c3aed) !important}
.ann-reaction-chip{transition:all .15s;cursor:default}
.ann-reaction-chip:hover{background:rgba(239,68,68,.1);border-color:#ef4444}
.ann-toast{pointer-events:none}
@keyframes annSlideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
#annModal .modal-body{scrollbar-width:thin;scrollbar-color:#4e5058 transparent}
#annModal .modal-body::-webkit-scrollbar{width:6px}
#annModal .modal-body::-webkit-scrollbar-track{background:transparent}
#annModal .modal-body::-webkit-scrollbar-thumb{background:#4e5058;border-radius:3px}

/* Character counters */
.ann-char-count{font-size:11px;color:#a5a7aa;text-align:right;margin-top:2px;font-variant-numeric:tabular-nums}
.ann-char-count.warn{color:#faa81a}
.ann-char-count.over{color:#ed4245}

/* Color conversion row */
.ann-color-row{display:flex;gap:8px;align-items:center}
.ann-color-row input[type=color]{width:40px;height:36px;padding:2px;cursor:pointer;border:1px solid #30363d;border-radius:4px;background:#161b22}
.ann-color-row input[type=text]{flex:1}

/* Preset colors */
.ann-color-presets{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.ann-color-preset{width:24px;height:24px;border-radius:4px;border:2px solid transparent;cursor:pointer;transition:all .15s}
.ann-color-preset:hover{transform:scale(1.15);border-color:#fff}
.ann-color-preset.active{border-color:#fff;box-shadow:0 0 0 2px var(--accent,#7c3aed)}

/* Timestamp mode toggle */
.ann-ts-modes{display:flex;gap:6px;margin-top:4px}
.ann-ts-mode{padding:4px 10px;border-radius:4px;font-size:11px;cursor:pointer;border:1px solid #30363d;background:#161b22;color:#8b949e;transition:all .15s}
.ann-ts-mode.active{background:var(--accent,#7c3aed);color:#fff;border-color:var(--accent,#7c3aed)}
.ann-ts-mode:hover:not(.active){background:#1c2128;color:#e1e4e8}

/* Embed editor card */
#annEmbedEditor{transition:all .2s}

/* ══════════════════════════════════════════════════════════════
   DISCORD PIXEL-PERFECCIÓN — Vista Previa
   Colores oficiales de Discord Desktop (modo oscuro)
   ══════════════════════════════════════════════════════════════ */

/* Contenedor principal del canal Discord */
.discord-preview-channel{
    background:#313338;
    border-radius:8px;
    overflow-x:hidden;
    font-family:'gg sans','Noto Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    line-height:1.375;
    color:#dbdee1;
    font-size:16px;
}

/* Barra del canal superior */
.discord-preview-channelbar{
    background:#1e1f22;
    padding:8px 16px;
    display:flex;
    align-items:center;
    gap:8px;
    border-bottom:1px solid #3f4147;
    font-size:14px;
    color:#949ba4;
}
.discord-preview-channelbar .hash{color:#80848e;font-size:20px;font-weight:400}
.discord-preview-channelbar .chname{color:#f2f3f5;font-weight:600}

/* Wrapper del mensaje */
.discord-msg{
    display:flex;
    padding:2px 16px;
    position:relative;
    margin-top:17px;
}
.discord-msg:hover{background:rgba(0,0,0,.06)}

/* Avatar del bot */
.discord-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    flex-shrink:0;
    margin-right:16px;
    margin-top:2px;
    background:#5865f2;
    position:relative;
    overflow:hidden;
}
.discord-avatar img{position:absolute;inset:0;width:40px;height:40px;border-radius:50%;object-fit:cover;display:block}
.discord-avatar-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px}

/* Header del mensaje: nombre + bot tag + timestamp */
.discord-msg-header{
    display:flex;
    align-items:baseline;
    gap:4px;
    flex-wrap:wrap;
    line-height:1.375;
}
.discord-msg-header .disc-name{
    font-size:16px;
    font-weight:500;
    color:#f2f3f5;
    cursor:pointer;
}
.discord-msg-header .disc-name:hover{text-decoration:underline}
.discord-msg-header .disc-bot-badge{
    display:inline-flex;
    align-items:center;
    background:#5865f2;
    color:#fff;
    font-size:10px;
    font-weight:600;
    padding:1px 5px;
    border-radius:3px;
    text-transform:uppercase;
    letter-spacing:.02em;
    line-height:1.3;
    position:relative;
    top:-1px;
}
.discord-msg-header .disc-timestamp{
    font-size:12px;
    color:#949ba4;
    font-weight:400;
    margin-left:4px;
}

/* Contenido del mensaje */
.discord-msg-content{
    font-size:16px;
    color:#dbdee1;
    line-height:1.375;
    word-wrap:break-word;
    white-space:pre-wrap;
    margin-top:2px;
}
.discord-msg-content strong{font-weight:700}
.discord-msg-content em{font-style:italic}
.discord-msg-content u{text-decoration:underline}
.discord-msg-content del{text-decoration:line-through;opacity:.6}
.discord-msg-content code{
    background:#2b2d31;
    border:1px solid #1e1f22;
    border-radius:4px;
    padding:1px 5px;
    font-size:14px;
    font-family:'Consolas','Andale Mono WT','Andale Mono','Lucida Console','Lucida Sans Typewriter','DejaVu Sans Mono','Bitstream Vera Sans Mono','Liberation Mono','Nimbus Mono L',monospace;
    color:#dbdee1;
}
.discord-msg-content pre{
    background:#2b2d31;
    border:1px solid #1e1f22;
    border-radius:4px;
    padding:8px;
    font-size:14px;
    font-family:'Consolas',monospace;
    color:#dbdee1;
    overflow-x:auto;
    margin:4px 0;
}
.discord-msg-content pre code{
    background:transparent;
    border:none;
    padding:0;
    font-size:inherit;
}
.discord-msg-content a{color:#00a8fc;text-decoration:none}
.discord-msg-content a:hover{text-decoration:underline}

/* ══════════════════════════════════════════════════════════════
   EMBED — Estructura exacta de Discord
   ══════════════════════════════════════════════════════════════ */

.discord-embed-outer{
    margin-top:4px;
    max-width:520px;
}

.discord-embed{
    display:flex;
    background:#2b2d31;
    border-radius:4px;
    border-left:4px solid #5865f2;
    max-width:520px;
    overflow:hidden;
}

.discord-embed-inner{
    padding:8px 16px 8px 12px;
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}

/* Author */
.discord-embed-author{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:4px;
}
.discord-embed-author-icon{
    width:24px;
    height:24px;
    border-radius:50%;
    object-fit:cover;
}
.discord-embed-author-name{
    font-size:14px;
    font-weight:600;
    color:#f2f3f5;
    line-height:1.3;
}
.discord-embed-author-name.has-link{color:#00a8fc;text-decoration:none;cursor:pointer}
.discord-embed-author-name.has-link:hover{text-decoration:underline}

/* Title */
.discord-embed-title{
    font-size:16px;
    font-weight:600;
    color:#f2f3f5;
    line-height:1.3;
    word-break:break-word;
    margin-bottom:4px;
}
.discord-embed-title.has-link{color:#00a8fc;cursor:pointer}
.discord-embed-title.has-link:hover{text-decoration:underline}

/* Description */
.discord-embed-description{
    font-size:16px;
    color:#dbdee1;
    line-height:1.375;
    word-wrap:break-word;
    white-space:pre-wrap;
}

/* Fields */
.discord-embed-fields{
    display:flex;
    flex-wrap:wrap;
    gap:4px 8px;
    margin-top:8px;
}
.discord-embed-field{
    min-width:0;
    flex:0 1 auto;
    max-width:100%;
}
.discord-embed-field.is-inline{
    flex:1 1 auto;
    min-width:60px;
}
.discord-embed-field-name{
    font-size:14px;
    font-weight:700;
    color:#f2f3f5;
    margin-bottom:2px;
    line-height:1.3;
}
.discord-embed-field-value{
    font-size:14px;
    color:#dbdee1;
    line-height:1.3;
    word-wrap:break-word;
}

/* Image */
.discord-embed-image-wrapper{
    margin-top:4px;
}
.discord-embed-image{
    max-width:400px;
    max-height:300px;
    border-radius:4px;
    object-fit:cover;
    display:block;
}

/* Thumbnail */
.discord-embed-thumb{
    width:80px;
    height:80px;
    border-radius:4px;
    object-fit:cover;
    flex-shrink:0;
    margin-left:auto;
    margin-top:-24px;
}

/* Footer */
.discord-embed-footer{
    display:flex;
    align-items:center;
    gap:4px;
    margin-top:8px;
}
.discord-embed-footer-icon{
    width:16px;
    height:16px;
    border-radius:50%;
    object-fit:cover;
}
.discord-embed-footer-text{
    font-size:12px;
    color:#949ba4;
    line-height:1.3;
}
.discord-embed-footer-text+.discord-embed-footer-sep{margin:0 4px}
.discord-embed-footer-sep{font-size:12px;color:#949ba4}
.discord-embed-footer-timestamp{font-size:12px;color:#949ba4}

/* ══════════════════════════════════════════════════════════════
   BOTONES — Estilos exactos de Discord
   ══════════════════════════════════════════════════════════════ */

.discord-buttons-wrapper{
    padding-left:56px;
    margin-top:8px;
}
.discord-button-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:4px;
}
.discord-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:2px 16px;
    min-height:32px;
    border:none;
    border-radius:3px;
    font-size:14px;
    font-weight:500;
    font-family:'gg sans','Noto Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    cursor:default;
    text-decoration:none;
    line-height:1.3;
    transition:none;
}
.discord-button.discord-btn-primary{background:#5865f2;color:#fff}
.discord-button.discord-btn-secondary{background:#4e5058;color:#fff}
.discord-button.discord-btn-success{background:#248046;color:#fff}
.discord-button.discord-btn-danger{background:#d83c3e;color:#fff}
.discord-button.discord-btn-link{background:transparent;color:#00a8fc;text-decoration:underline;padding:0}
.discord-button.discord-btn-link:hover{text-decoration:underline}
.discord-button:disabled{opacity:.5;cursor:not-allowed}

/* ══════════════════════════════════════════════════════════════
   REACCIONES — Estilo exacto Discord
   ══════════════════════════════════════════════════════════════ */

.discord-reactions-wrapper{
    padding-left:56px;
    margin-top:4px;
    display:flex;
    gap:4px;
    flex-wrap:wrap;
}
.discord-reaction{
    display:inline-flex;
    align-items:center;
    gap:4px;
    background:rgba(88,101,242,.15);
    border:1px solid rgba(88,101,242,.6);
    border-radius:8px;
    padding:2px 6px;
    font-size:16px;
    line-height:1.3;
    cursor:default;
    height:28px;
}
.discord-reaction:hover{background:rgba(88,101,242,.25);border-color:rgba(88,101,242,.8)}
.discord-reaction .disc-rx-emoji{font-size:16px}
.discord-reaction .disc-rx-count{
    font-size:12px;
    font-weight:500;
    color:#949ba4;
    min-width:12px;
    text-align:center;
}
.discord-reaction.is-me{background:rgba(88,101,242,.3);border-color:#5865f2}

/* ══════════════════════════════════════════════════════════════
   ENCUESTA — Estilo Discord
   ══════════════════════════════════════════════════════════════ */

.discord-poll-wrapper{
    padding-left:56px;
    margin-top:8px;
    max-width:400px;
}
.discord-poll{
    background:#2b2d31;
    border-radius:8px;
    padding:16px;
    border-left:4px solid #5865f2;
}
.discord-poll-question{
    font-size:16px;
    font-weight:700;
    color:#f2f3f5;
    margin-bottom:12px;
    line-height:1.3;
}
.discord-poll-options{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.discord-poll-option{
    background:#4e5058;
    border-radius:4px;
    padding:8px 12px;
    font-size:14px;
    color:#dbdee1;
    position:relative;
    overflow:hidden;
    min-height:34px;
    display:flex;
    align-items:center;
}
.discord-poll-option-bar{
    position:absolute;
    left:0;top:0;bottom:0;
    background:rgba(88,101,242,.3);
    border-radius:4px;
    min-width:0;
    width:0;
    transition:width .3s;
}
.discord-poll-option-text{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:6px;
}
.discord-poll-option-check{
    width:18px;height:18px;
    border-radius:50%;
    border:2px solid #949ba4;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.discord-poll-meta{
    font-size:12px;
    color:#949ba4;
    margin-top:8px;
}

/* ══════════════════════════════════════════════════════════════
   @everyone MENTION
   ══════════════════════════════════════════════════════════════ */

.discord-everyone-mention{
    background:rgba(88,101,242,.3);
    color:#c9cdfb;
    padding:0 2px;
    border-radius:3px;
    font-weight:500;
    cursor:pointer;
}
.discord-everyone-mention:hover{background:rgba(88,101,242,.5);color:#fff}

/* ── Evaluación de Staff ───────────────────────────────────────── */
.staff-eval-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;background:#21262d}
.se-badge{display:inline-block;min-width:18px;padding:1px 6px;border-radius:999px;background:#7c3aed;color:#fff;font-size:11px;font-weight:700;text-align:center;margin-left:4px}

/* Lista a pantalla completa (filas) */
.se-list{display:flex;flex-direction:column;gap:8px}
.se-row{display:flex;align-items:center;gap:14px;background:#161b22;border:1px solid #30363d;border-radius:10px;padding:9px 14px;cursor:pointer;transition:border-color .18s,background .18s}
.se-row:hover{border-color:#10b981;background:#1a2029}
.se-row:focus-visible{outline:2px solid #10b981;outline-offset:2px}
.se-row-main{min-width:0;flex:1}
.se-row-name{font-size:14px;font-weight:700;color:#e1e4e8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.se-row-sub{font-size:12px;color:#8b949e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.se-row-stats{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.se-row-stat{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:62px}
.se-row-stat .k{display:block;font-size:10.5px;color:#8b949e;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.se-row-stat .v{display:block;font-size:14px;font-weight:700;color:#e1e4e8}
.se-row-none{font-size:13px;color:#8b949e}
.se-row-pending{font-size:13px;font-weight:600;color:#8b949e}
.se-row-draft{font-size:13px;font-weight:700;color:#f59e0b}
.se-row-arrow{color:#484f58;font-size:12px;flex:none}

/* Ficha a pantalla completa */
.se-detail-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.se-score{display:inline-block;padding:3px 9px;border-radius:6px;font-weight:800;font-size:14px;background:rgba(148,163,184,.15);color:#cbd5e1;vertical-align:middle}
.se-score.hi{background:rgba(16,185,129,.18);color:#34d399}
.se-score.mid{background:rgba(245,158,11,.18);color:#fbbf24}
.se-score.lo{background:rgba(239,68,68,.18);color:#f87171}
.se-score-none{background:transparent;color:#8b949e;font-weight:600}

/* Resultados mensuales */
.se-month{border:1px solid #21262d;border-radius:10px;margin-bottom:12px;overflow:hidden}
.se-month-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;background:#1c2128;border-bottom:1px solid #30363d}
.se-month-name{font-weight:700;font-size:13.5px;color:#e1e4e8}
.se-month-meta{font-size:11.5px;color:#8b949e;margin-left:auto}
.se-eval{padding:12px 14px;border-bottom:1px solid #1c2128}
.se-eval:last-child{border-bottom:0}
.se-eval-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:#8b949e}
.se-eval-head .se-score{margin-left:auto}
.se-eval-rubric{font-size:12px;color:#a78bfa;margin-top:6px}
.se-eval-comment{font-size:13px;color:#e1e4e8;margin-top:7px;white-space:pre-line;line-height:1.5}
.se-eval-comment.muted{color:#8b949e;font-style:italic}
.se-draft-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #21262d;border-radius:8px;margin-bottom:8px;background:#1c2128}

/* Rúbricas y formulario de evaluación */
.se-rubric-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;border:1px solid #30363d;background:#1c2128;color:#e1e4e8;font-size:12.5px;cursor:pointer;transition:border-color .15s,background .15s}
.se-rubric-chip:hover{border-color:#7c3aed}
.se-rubric-chip.on{border-color:#7c3aed;background:rgba(124,58,237,.2)}
.se-rubric-meta{font-size:11px;color:#8b949e}
.se-crit-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;padding:8px;border:1px solid #21262d;border-radius:8px;margin-bottom:8px;background:#1c2128}
.se-crit-num{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:#8b949e;text-transform:uppercase;letter-spacing:.4px}
.se-crit-num input{width:74px;background:#161b22;border:1px solid #30363d;border-radius:6px;padding:6px 8px;color:#e1e4e8;font-size:13px;outline:none}
.se-crit-num input:focus{border-color:#7c3aed}
.se-crit-eval{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #21262d;border-radius:8px;margin-bottom:8px;background:#1c2128}
.eval-total-box{display:flex;align-items:baseline;gap:10px;padding:14px 16px;border:1px dashed #7c3aed;border-radius:10px;background:rgba(124,58,237,.08);margin-bottom:14px}
.eval-total{font-size:30px;font-weight:800;color:#a78bfa;line-height:1}
.eval-total-label{font-size:12px;color:#8b949e}

.se-section{background:#161b22;border:1px solid #30363d;border-radius:12px;padding:16px;margin-bottom:16px}
.se-section-title{font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px;color:#e1e4e8}
.se-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.se-metric{background:#1c2128;border:1px solid #21262d;border-radius:8px;padding:12px}
.se-metric .v{font-size:19px;font-weight:700;color:#e1e4e8}
.se-metric .k{font-size:11px;color:#8b949e;margin-top:3px}
.se-kv{display:grid;grid-template-columns:170px minmax(0,1fr);gap:6px 12px;font-size:13px}
.se-kv .k{color:#8b949e}
.se-kv .v{color:#e1e4e8;word-break:break-word}
.se-subtitle{font-size:11px;color:#8b949e;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
@media (max-width:960px){
    .se-kv{grid-template-columns:1fr;gap:2px}
    .se-kv .k{margin-top:6px}
    .se-row{flex-wrap:wrap;gap:10px}
    .se-row-stats{gap:12px}
    .se-crit-row{flex-direction:column;align-items:stretch}
    .se-crit-num input{width:100%}
    .se-crit-eval{flex-wrap:wrap}
}



/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE · MÓVIL · TÁCTIL  (mobile-first + WCAG 2.2)
   Bloque final a propósito: mismas especificidades que las reglas
   originales, así que aquí gana el orden de aparición.
   ═══════════════════════════════════════════════════════════════ */

/* 1) Anti-zoom en iOS — Safari agranda la página si un campo tiene
   <16px (aquí iban a 12-13px, e incluso había media queries que los
   bajaban a 12px justo en móvil). Sólo en pantallas pequeñas: el
   desktop conserva su tipografía original. */
@media(max-width:768px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select,textarea{font-size:16px!important}
}

/* 2) Desbordamiento horizontal — `.table-container` tenía
   overflow:hidden y recortaba las columnas sin scroll en escritorio
   (sólo se desbloqueaba a ≤768). Ahora scrollea siempre. */
.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Las páginas que no cargan style.css no heredaban esta regla:
   cualquier <img> inyectado por JS podía ensanchar la página. */
img{max-width:100%}

/* 3) Filas de formulario — `.row>*{flex:1}` sin wrap aplastaba 4-5
   campos a ~60px en modales estrechos. Ahora envuelven y en móvil
   pasan a columna (con !important porque el JS pone flex inline). */
.row{flex-wrap:wrap}
.row>.form-group{min-width:170px}
@media(max-width:768px){
  .row>*{flex:1 1 100%!important;min-width:0}
}
/* Selects con flex:1 sin min-width:0 desbordaban su contenedor. */
.inbox-filters-row{flex-wrap:wrap}
.inbox-filters-row select,.inbox-filters-row input,
.ticket-inbox-filters select,.ticket-inbox-filters input{min-width:0}

/* 4) Modales — `.modal-content` no existía en ningún CSS (los modales
   de Formularios salían sin fondo ni borde) y la X tenía ~26px de
   área táctil. Además cabecera/pie se perdían al hacer scroll. */
.modal-content{background:#161b22;border:1px solid #30363d;border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.5);width:100%;max-width:560px}
.modal{max-height:min(85vh,100dvh)}
.modal-header{position:sticky;top:0;background:#161b22;z-index:1}
.modal-footer{position:sticky;bottom:0;background:#161b22}
.modal-close{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:8px}
/* Margen lateral garantizado: 90% del viewport podía tocar los bordes
   en tabletas. En ≤480 se mantiene el diseño full-screen existente. */
.modal-overlay{padding:16px}
@media(max-width:480px){.modal-overlay{padding:0}}

/* 5) Menú de notificaciones recortado — `right:-8px` se anclaba al
   bloque de usuario (~110px del borde), así que el borde izquierdo
   quedaba fuera del viewport y `overflow-x:hidden` lo cortaba. */
@media(max-width:768px){
  .notif-dropdown{position:fixed;top:calc(100% + 8px);right:16px;left:auto;width:calc(100vw - 32px);max-height:70vh}
}

/* 6) Alturas con vh → dvh (barra de direcciones de iOS). Con `vh`
   fijo el chat y el editor de formularios quedaban tras la barra.
   Si el navegador no soporta dvh se mantiene el valor en vh previo. */
.view-inbox.active{height:calc(100dvh - 112px)}
.forms-layout{height:calc(100dvh - 112px)}
.ticket-inbox{height:calc(100dvh - 260px)}

/* 7) Objetivos táctiles ≥44×44 (WCAG 2.5.8). Sólo en dispositivos
   táctiles: en escritorio los botones compactos de 32px son
   correctos y agrandarlos estropearía las tablas. */
@media(pointer:coarse){
  .btn,.btn-sm,.ccs-btn,.sidebar-toggle,.nav-item,.nav-group-header{min-height:44px}
  .btn-icon,.modal-close,.logout-btn,.notification-btn,
  .pagination-buttons button,.inbox-pagination-btns button{min-width:44px;min-height:44px}
  .form-control,.filter-bar select,.filter-bar input,
  .inbox-sidebar select,.inbox-sidebar input,
  .ticket-inbox-filters select,.ticket-inbox-filters input,
  .tid-actions select,.transfer-select,.search-bar input{min-height:44px}
  .chat-input-row textarea{min-height:44px}
  /* Acciones de tabla al 30% de opacidad eran invisibles al tacto */
  .user-row .actions-cell .btn-icon{opacity:1}
  /* Checkbox 14px ≈ área real de 14px: se amplía la fila entera */
  .perm-check-label{padding:10px}
  .perm-check-label input[type=checkbox],.perm-group-head input[type=checkbox]{width:18px;height:18px}
  .perm-group-head{padding:10px 6px}
  .toggle-track{width:48px;height:26px}
  .toggle-track::after{width:22px;height:22px}
  .toggle-switch input:checked+.toggle-track::after{transform:translateX(22px)}
}

/* 8) Safe area: el home indicator tapaba el input del chat y el pie
   de los modales. */
@supports(padding:max(0px)){
  .chat-input-row{padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .modal-footer{padding-bottom:max(16px,env(safe-area-inset-bottom))}
}


/* Hamburguesa inyectada por /js/mobile-sidebar.js: sólo en móvil,
   en escritorio el sidebar ya está visible. */
.mobile-menu-btn{display:none}
@media(max-width:768px){
  .mobile-menu-btn{display:inline-flex;font-size:16px}
}