:root {
    --bg: #061014;
    --surface: #0a191e;
    --surface-2: #0e2228;
    --surface-3: #133038;
    --line: rgba(130, 212, 218, .13);
    --line-strong: rgba(130, 212, 218, .26);
    --text: #edf9fa;
    --muted: #8aa7ab;
    --primary: #43d4d8;
    --primary-2: #1aa8b1;
    --orange: #f59e5b;
    --red: #f16f78;
    --yellow: #e9c46a;
    --green: #65d6a1;
    --shadow: 0 24px 70px rgba(0, 0, 0, .32);
    --radius: 18px;
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: var(--primary); }
.hidden { display: none !important; }

.ambient { position: fixed; pointer-events: none; filter: blur(110px); opacity: .16; border-radius: 50%; z-index: -1; }
.ambient-a { width: 520px; height: 520px; background: var(--primary); top: -260px; right: 10%; }
.ambient-b { width: 420px; height: 420px; background: #11697c; bottom: -260px; left: 15%; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 610px) 1fr; padding: 32px; gap: 32px; }
.login-card, .login-visual { border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(145deg, rgba(13, 34, 40, .95), rgba(6, 17, 21, .98)); box-shadow: var(--shadow); }
.login-card { padding: clamp(42px, 7vw, 90px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: relative; overflow: hidden; }
.login-card::after { content: ""; width: 320px; height: 320px; border: 1px solid var(--line); border-radius: 50%; position: absolute; right: -190px; bottom: -170px; box-shadow: 0 0 0 50px rgba(67, 212, 216, .015), 0 0 0 100px rgba(67, 212, 216, .01); }
.brand-mark { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; font-size: 27px; font-weight: 900; color: #052024; background: linear-gradient(135deg, #79edf0, var(--primary-2)); box-shadow: 0 14px 45px rgba(67, 212, 216, .25); margin-bottom: 38px; }
.brand-mark.small { width: 42px; height: 42px; border-radius: 13px; font-size: 19px; margin: 0; }
.eyebrow { margin: 0 0 8px; color: var(--primary); text-transform: uppercase; letter-spacing: .15em; font-size: 11px; font-weight: 800; }
.login-card h1 { margin: 0; font-size: clamp(48px, 6vw, 78px); line-height: .96; letter-spacing: -.055em; }
.login-card h1 span { color: var(--primary); }
.login-copy { max-width: 480px; color: #a5babe; font-size: 17px; line-height: 1.7; margin: 30px 0 34px; }
.security-note { color: #628085; font-size: 12px; margin: 20px 0 0; }
.login-visual { position: relative; overflow: hidden; min-height: 600px; background: radial-gradient(circle at 50% 45%, rgba(67,212,216,.16), transparent 32%), linear-gradient(160deg, #0c252d, #071317 72%); }
.ocean-grid { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(var(--line-strong) 1px, transparent 1px), linear-gradient(90deg, var(--line-strong) 1px, transparent 1px); background-size: 48px 48px; transform: perspective(600px) rotateX(58deg) scale(1.4) translateY(140px); transform-origin: bottom; mask-image: linear-gradient(to bottom, transparent, #000 30%, #000); }
.signal-card { position: absolute; border: 1px solid var(--line-strong); background: rgba(7, 24, 29, .8); backdrop-filter: blur(20px); padding: 18px 22px; border-radius: 16px; display: grid; gap: 5px; min-width: 220px; box-shadow: var(--shadow); }
.signal-card strong { font-size: 14px; }.signal-card em { color: var(--muted); font-size: 12px; font-style: normal; }
.signal-main { left: 50%; top: 47%; transform: translate(-50%,-50%); min-width: 290px; padding: 28px; }
.signal-top { right: 8%; top: 17%; transform: rotate(2deg); }.signal-bottom { left: 8%; bottom: 16%; transform: rotate(-2deg); }
.signal-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 18px var(--green); margin-bottom: 8px; }

.button { border: 1px solid transparent; border-radius: 11px; padding: 10px 15px; font-weight: 760; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: .18s ease; }
.button:hover { transform: translateY(-1px); }.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.button-primary { background: linear-gradient(135deg, #5ee1e4, #28b9c1); color: #032126; box-shadow: 0 10px 30px rgba(45, 197, 202, .18); }
.button-primary:hover { box-shadow: 0 13px 34px rgba(45, 197, 202, .28); }
.button-ghost { background: rgba(255,255,255,.025); border-color: var(--line); color: #cce0e2; }
.button-danger { background: rgba(241,111,120,.11); border-color: rgba(241,111,120,.25); color: #ffabb1; }
.button-large { padding: 14px 21px; font-size: 14px; }
.icon-button { width: 37px; height: 37px; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); cursor: pointer; font-size: 21px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 268px minmax(0, 1fr); }
.sidebar { height: 100vh; position: sticky; top: 0; padding: 22px 16px 16px; border-right: 1px solid var(--line); background: rgba(6, 16, 20, .92); backdrop-filter: blur(22px); display: flex; flex-direction: column; overflow-y: auto; }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 3px 8px 20px; }
.sidebar-brand div:last-child { display: grid; }.sidebar-brand strong { font-size: 15px; }.sidebar-brand span { color: var(--muted); font-size: 11px; }
.guild-chip, .user-chip { border: 1px solid var(--line); border-radius: 13px; padding: 11px; background: rgba(255,255,255,.018); display: flex; gap: 10px; align-items: center; min-width: 0; }
.guild-chip { margin-bottom: 18px; }.user-chip { margin-top: auto; }
.chip-avatar { width: 32px; height: 32px; border-radius: 10px; object-fit: cover; background: var(--surface-3); }
.chip-copy { display: grid; min-width: 0; }.chip-copy strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.chip-copy span { color: var(--muted); font-size: 10px; text-transform: capitalize; }
.nav-label { margin: 17px 10px 7px; color: #526e73; text-transform: uppercase; letter-spacing: .13em; font-size: 9px; font-weight: 800; }
.nav-item { width: 100%; border: 0; background: transparent; border-radius: 10px; padding: 9px 11px; color: #88a4a9; display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer; font-size: 12px; font-weight: 650; margin: 1px 0; transition: .16s ease; }
.nav-item > span { width: 19px; color: #5c8389; font-size: 15px; text-align: center; }
.nav-item:hover { background: rgba(67,212,216,.05); color: #d7ebed; }.nav-item.active { color: var(--primary); background: rgba(67,212,216,.09); box-shadow: inset 2px 0 var(--primary); }
.logout { margin-top: 8px; color: #769095; }
.workspace { min-width: 0; }
.topbar { min-height: 92px; padding: 23px clamp(24px, 4vw, 52px); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; position: sticky; top: 0; z-index: 10; background: rgba(6,16,20,.84); backdrop-filter: blur(20px); }
.topbar h2 { margin: 0; font-size: 25px; letter-spacing: -.025em; }.topbar-actions { display: flex; align-items: center; gap: 9px; }
.connection { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 7px; margin-right: 7px; }.connection i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(101,214,161,.7); }
.page-content { padding: 30px clamp(24px, 4vw, 52px) 70px; max-width: 1600px; margin: 0 auto; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 19px; }.section-heading h3 { margin: 0; font-size: 17px; }.section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 14px; margin-bottom: 28px; }
.metric { background: linear-gradient(145deg, rgba(14,34,40,.9), rgba(8,23,28,.92)); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; min-height: 135px; position: relative; overflow: hidden; }
.metric::after { content:""; position:absolute; width:90px; height:90px; border-radius:50%; right:-45px; bottom:-45px; border:1px solid var(--line); }
.metric-label { color: var(--muted); font-size: 11px; font-weight: 700; }.metric-value { display: block; font-size: 35px; letter-spacing: -.05em; margin: 14px 0 5px; }.metric-note { color: #66858a; font-size: 10px; }.metric-value.teal { color: var(--primary); }.metric-value.orange { color: var(--orange); }.metric-value.red { color: var(--red); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 17px; }
.card { background: rgba(9,25,30,.82); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 44px rgba(0,0,0,.12); overflow: hidden; }
.card.spaced { margin-top: 16px; }
.card-header { min-height: 58px; padding: 15px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; }.card-header h3 { margin:0; font-size:14px; }.card-header span { color:var(--muted); font-size:10px; }.card-body { padding: 18px; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 16px; }.toolbar .field { margin:0; min-width: 145px; }.toolbar .search-field { flex: 1; min-width: 230px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }.field > span, .field label { color: #97b0b4; font-size: 10px; font-weight: 750; letter-spacing: .03em; }
input, select, textarea { width: 100%; color: var(--text); background: #07171b; border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; outline: none; transition: border .16s, box-shadow .16s; font-size: 12px; }
input:focus, select:focus, textarea:focus { border-color: rgba(67,212,216,.55); box-shadow: 0 0 0 3px rgba(67,212,216,.07); }
textarea { min-height: 104px; resize: vertical; line-height: 1.5; }.field-row { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:12px; }.field-row.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.schedule-grid { display:grid; gap:7px; margin-top:12px; }.schedule-row { display:grid; grid-template-columns:minmax(140px,1fr) 120px 120px; gap:9px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:rgba(5,19,23,.42); }.schedule-row input[type="time"] { padding:7px 9px; }
.checkbox { display:flex; align-items:center; gap:9px; color:#aec2c5; font-size:12px; }.checkbox input { width:16px; height:16px; accent-color:var(--primary); }
.help-text { color:#59787d; font-size:10px; line-height:1.5; margin:-7px 0 13px; }
progress { width:100%; height:7px; border:0; border-radius:9px; overflow:hidden; background:#07171b; }
progress::-webkit-progress-bar { background:#07171b; } progress::-webkit-progress-value { background:var(--primary); border-radius:9px; } progress::-moz-progress-bar { background:var(--primary); border-radius:9px; }

.table-wrap { overflow-x: auto; }.data-table { width:100%; border-collapse:collapse; min-width:720px; }.data-table th { text-align:left; color:#5f7c81; text-transform:uppercase; letter-spacing:.09em; font-size:9px; padding:11px 14px; border-bottom:1px solid var(--line); }.data-table td { padding:13px 14px; border-bottom:1px solid rgba(130,212,218,.07); color:#b9cdd0; font-size:11px; vertical-align:middle; }.data-table tbody tr { transition:.14s; }.data-table tbody tr:hover { background:rgba(67,212,216,.035); }.data-table tbody tr.clickable { cursor:pointer; }.data-table strong { color:#eef8f9; font-size:12px; }
.badge { display:inline-flex; align-items:center; padding:4px 7px; border-radius:999px; background:rgba(255,255,255,.035); border:1px solid var(--line); color:#a8bfc2; font-size:9px; font-weight:760; text-transform:capitalize; white-space:nowrap; }.badge.open, .badge.in_progress, .badge.reopened { color:var(--primary); background:rgba(67,212,216,.07); }.badge.urgent,.badge.escalated,.badge.fail { color:#ff9aa2; background:rgba(241,111,120,.08); }.badge.warning,.badge.waiting_for_user,.badge.warn { color:var(--yellow); background:rgba(233,196,106,.08); }.badge.closed,.badge.archived { color:#758f93; }.badge.pass { color:var(--green); background:rgba(101,214,161,.08); }
.empty { padding:55px 24px; text-align:center; color:var(--muted); }.empty strong { display:block; color:var(--text); margin-bottom:5px; }
.skeleton { min-height:120px; border-radius:var(--radius); background:linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size:200% 100%; animation:shine 1.3s infinite; } @keyframes shine { to { background-position:-200% 0; } }

.collection-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }.collection-card { border:1px solid var(--line); background:rgba(10,28,33,.72); border-radius:16px; padding:17px; min-height:170px; display:flex; flex-direction:column; gap:10px; }.collection-card header { display:flex; justify-content:space-between; gap:12px; }.collection-card h4 { margin:0; font-size:14px; }.collection-card p { color:var(--muted); font-size:11px; line-height:1.55; margin:0; }.collection-card footer { margin-top:auto; display:flex; gap:8px; }.meta-row { display:flex; flex-wrap:wrap; gap:6px; }

.dialog { width:min(860px, calc(100vw - 30px)); max-height:calc(100vh - 34px); border:1px solid var(--line-strong); padding:0; border-radius:20px; color:var(--text); background:#091a1f; box-shadow:0 30px 100px rgba(0,0,0,.6); }.dialog::backdrop { background:rgba(1,8,10,.74); backdrop-filter:blur(5px); }.dialog-card { display:flex; flex-direction:column; max-height:calc(100vh - 36px); }.dialog-card > header, .dialog-card > footer { display:flex; align-items:center; justify-content:space-between; padding:17px 20px; border-bottom:1px solid var(--line); }.dialog-card > footer { border-bottom:0; border-top:1px solid var(--line); justify-content:flex-end; gap:9px; }.dialog-card h3 { margin:0; }.dialog-body { padding:20px; overflow-y:auto; }.editor-section { padding:16px; border:1px solid var(--line); border-radius:14px; margin-bottom:14px; background:rgba(255,255,255,.012); }.editor-section > header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }.editor-section h4 { margin:0; font-size:13px; }.question-row { padding:13px; border:1px solid var(--line); border-radius:12px; margin:9px 0; background:#07171b; }.question-row header { display:flex; gap:8px; align-items:center; margin-bottom:10px; }.question-row header strong { flex:1; }

.drawer { position:fixed; z-index:40; top:0; right:0; height:100vh; width:min(610px, 94vw); background:#08171b; border-left:1px solid var(--line-strong); box-shadow:-28px 0 80px rgba(0,0,0,.4); display:flex; flex-direction:column; }.drawer > header { padding:20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }.drawer h3 { margin:0; }.drawer-body { overflow-y:auto; padding:20px; }.drawer-backdrop { position:fixed; inset:0; z-index:35; background:rgba(0,0,0,.48); }.detail-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:17px; }.detail { border:1px solid var(--line); border-radius:11px; padding:11px; display:grid; gap:4px; }.detail span { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }.detail strong { font-size:12px; word-break:break-word; }.timeline { border-left:1px solid var(--line-strong); margin:14px 0 0 6px; padding-left:18px; }.timeline-item { position:relative; margin:0 0 18px; }.timeline-item::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--primary); position:absolute; left:-22px; top:5px; box-shadow:0 0 0 4px #08171b; }.timeline-item strong { font-size:11px; }.timeline-item p { margin:4px 0; color:var(--muted); font-size:10px; }.action-grid { display:flex; flex-wrap:wrap; gap:8px; margin:15px 0; }

.notice { border:1px solid var(--line); border-radius:11px; padding:11px 13px; font-size:11px; line-height:1.5; }.notice-danger { color:#ffc0c5; border-color:rgba(241,111,120,.25); background:rgba(241,111,120,.08); }.notice-warning { color:#f8dfa1; border-color:rgba(233,196,106,.25); background:rgba(233,196,106,.06); }.notice-success { color:#a7edcc; border-color:rgba(101,214,161,.25); background:rgba(101,214,161,.06); }
.toast-stack { position:fixed; z-index:80; right:18px; bottom:18px; display:grid; gap:9px; width:min(360px,calc(100vw - 36px)); }.toast { background:#10272d; border:1px solid var(--line-strong); border-radius:12px; padding:13px 15px; box-shadow:var(--shadow); font-size:11px; animation:toast-in .2s ease; }.toast.error { border-color:rgba(241,111,120,.35); }.toast.success { border-color:rgba(101,214,161,.35); } @keyframes toast-in { from { transform:translateY(8px); opacity:0; } }
.pagination { display:flex; justify-content:flex-end; align-items:center; gap:8px; padding-top:14px; color:var(--muted); font-size:10px; }
.code { font-family:"SFMono-Regular",Consolas,monospace; font-size:10px; color:#9bdadd; word-break:break-all; }

@media (max-width: 1280px) {
    .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) {
    .metric-grid { grid-template-columns:repeat(2,1fr); }.dashboard-grid { grid-template-columns:1fr; }
    .app-shell { grid-template-columns:80px minmax(0,1fr); }.sidebar { padding:18px 10px; }.sidebar-brand > div:last-child, .guild-chip .chip-copy, .user-chip .chip-copy, .nav-label, .nav-item:not(.logout) { font-size:0; }.sidebar-brand { justify-content:center; padding-inline:0; }.guild-chip,.user-chip { justify-content:center; padding:8px; }.nav-item { justify-content:center; padding:11px; }.nav-item > span { font-size:17px; }.logout { font-size:0; justify-content:center; }
}
@media (max-width: 720px) {
    .login-shell { grid-template-columns:1fr; padding:12px; }.login-visual { display:none; }.login-card { min-height:calc(100vh - 24px); padding:35px 28px; }.login-card h1 { font-size:48px; }
    .app-shell { display:block; }.sidebar { height:auto; position:fixed; z-index:30; bottom:0; top:auto; left:0; right:0; border-right:0; border-top:1px solid var(--line); padding:7px; overflow-x:auto; display:block; }.sidebar-brand,.guild-chip,.user-chip,.nav-label,.logout { display:none; } #navigation { display:flex; min-width:max-content; } .nav-item { width:58px; height:48px; margin:0 2px; }.nav-item.active { box-shadow:inset 0 -2px var(--primary); }
    .topbar { min-height:76px; padding:16px 18px; }.topbar .connection,.topbar .button-ghost { display:none; }.topbar h2 { font-size:20px; }.page-content { padding:20px 14px 95px; }.metric-grid { grid-template-columns:1fr 1fr; gap:9px; }.metric { padding:15px; min-height:115px; }.metric-value { font-size:27px; }.field-row,.field-row.three,.detail-list,.schedule-row { grid-template-columns:1fr; }.dialog-body { padding:14px; }
}
@media (max-width: 420px) { .metric-grid { grid-template-columns:1fr; } }