.sidebar{width:280px;background:#fff;border-right:1px solid #e3e0da;height:100vh;position:fixed;top:0;left:0;padding:20px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:2px 0 8px #0000000d}.sidebar-header{display:flex;align-items:center;gap:10px;margin-bottom:20px;font-size:18px;font-weight:700;color:#0051cc}.sidebar-logo-container{width:40px;height:40px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:6px;background:#fff}.sidebar-logo{max-width:100%;max-height:100%;object-fit:contain}.sidebar ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.sidebar li{padding:12px 10px;border-radius:10px;color:#333;cursor:pointer;transition:background .2s}.sidebar li:hover{background:#f4f1eb}.sidebar li.active{background:#06f;color:#fff;font-weight:600}.sidebar-user{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px 10px;margin-top:auto;border-top:1px solid #e3e0da}.user-details{display:flex;flex-direction:column;overflow:hidden}.user-name{font-size:14px;font-weight:600;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-email{font-size:12px;color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-role{font-size:12px;color:#0051cc;font-weight:500;margin-top:2px}.logout-icon{background:transparent;border:none;color:#777;cursor:pointer;font-size:16px;transition:color .2s;margin-left:8px}.logout-icon:hover{color:#0051cc}.logout-menu{position:absolute;bottom:40px;right:10px;background:#fff;border:1px solid #e3e0da;border-radius:6px;box-shadow:0 2px 6px #0000001a;padding:6px;z-index:100}.logout-menu button{background:#06f;color:#fff;border:none;border-radius:4px;padding:6px 12px;cursor:pointer;font-size:14px}.logout-menu button:hover{background:#0051cc}.main-content{margin-left:240px;padding:28px}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:240px;width:100%;text-align:center;color:var(--accent-600);font-weight:500;font-size:15px}.loader-ring{width:48px;height:48px;border:4px solid rgba(37,99,235,.2);border-top-color:var(--accent-500);border-radius:50%;animation:spin .9s linear infinite;margin-bottom:12px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app{min-height:100vh;background:#f4f1eb;padding:28px;color:#1a1a1a;font-family:Inter,Segoe UI,sans-serif}header.appbar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;margin-bottom:20px;border-radius:16px;background:#fff;border:1px solid #e3e0da;box-shadow:0 2px 6px #00000014}header .title h1{margin:0;font-size:22px;font-weight:700;color:#0051cc}header .subtitle{font-size:13px;color:#666;margin:2px 0 0}.chip{background:#fff7df;border:1px solid #f0d58f;color:#ffb200;font-weight:600;font-size:12px;border-radius:999px;padding:4px 10px}.panel{background:#fff;border:1px solid #e3e0da;border-radius:16px;box-shadow:0 2px 6px #0000000d;padding:16px 20px;margin-bottom:20px}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.panel h3{font-size:14px;font-weight:700;text-transform:uppercase;color:#666;margin:0}.toolbar{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}.filter-group{display:flex;flex-direction:column;gap:4px}.filter-group label{font-weight:600;font-size:13px;color:#333}.select{padding:10px 12px;border:1px solid #e3e0da;border-radius:10px;background:#fff;font-size:14px;color:#222;outline:none;height:38px;min-width:150px}.select:focus{border-color:#0051cc;box-shadow:0 0 0 3px #0051cc1a}.btn{cursor:pointer;background:linear-gradient(180deg,#06f,#0051cc);border:none;color:#fff;font-weight:700;padding:10px 16px;border-radius:10px;box-shadow:0 3px 14px #06f3;transition:transform .08s ease,box-shadow .15s ease}.btn:disabled{background:#ccc!important;color:#666!important;cursor:not-allowed;box-shadow:none!important}table{width:100%;border-collapse:collapse;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 6px #0000000d}th,td{padding:14px 16px;border-bottom:1px solid #e3e0da;font-size:15px;text-align:left;color:#1a1a1a}th{text-transform:uppercase;font-size:13px;font-weight:700;color:#666;border-bottom:2px solid #e3e0da}tr:hover td{background:#faf9f7}.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}.badge.ok{background:#4bb543;color:#fff}.badge.amber{background:#e67e22;color:#fff}.badge.danger{background:#d9534f;color:#fff}.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:13px;color:#666}@media (max-width: 768px){header.appbar{flex-direction:column;align-items:flex-start;gap:10px}.toolbar{flex-direction:column;align-items:flex-start}table th,table td{padding:10px 12px;font-size:13px}}.clickword{cursor:pointer;font-weight:600;color:#0b5cff}.clickword:hover{text-decoration:underline}.clickword.disabled{cursor:not-allowed;opacity:.5;text-decoration:none;color:#7f8ab2}.clickword.muted{color:#2c2c2c}.clickword.primary{color:#0b5cff}.linklike{background:none;border:0;padding:0;color:inherit}.drawer-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0c0e1459;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:50}.drawer{position:fixed;top:0;right:0;width:min(520px,100%);height:100%;background:var(--bg-800, #fff);border-left:1px solid var(--border-700, #e6e6e6);box-shadow:-12px 0 28px #0000001f;z-index:51;display:flex;flex-direction:column}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border-700, #e6e6e6)}.drawer-body{padding:16px 20px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}.drawer-foot{margin-top:auto;display:flex;gap:16px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--border-700, #e6e6e6)}.kv{display:grid;grid-template-columns:120px 1fr;gap:8px;align-items:center}.kv .k{color:#666;font-weight:600}.kv .v{color:#1a1a1a}.formlabel{font-size:13px;font-weight:700;color:#333;margin-top:8px}.select.full{width:100%}.textarea{width:100%;border:1px solid var(--border-700, #d7d7d7);border-radius:10px;padding:10px 12px;background:#fff;outline:none}.textarea:focus{border-color:#0051cc;box-shadow:0 0 0 3px #0051cc1a}.alert{background:#fff7e6;border:1px solid #ffe2a8;color:#8a5a00;padding:10px 12px;border-radius:10px}.pagination-controls .clickword{margin:0 8px}.drawer{transform:translate(100%);transition:transform .3s ease;will-change:transform}.drawer.open{transform:translate(0)}.drawer-backdrop{opacity:0;transition:opacity .3s ease}.drawer-backdrop.open{opacity:1}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(0,0,0,.1);background:#fff;padding:6px 12px;border-radius:8px;font:inherit;cursor:pointer;box-shadow:0 1px 1px #0000000a;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}.btn:hover:not(:disabled){background:#f7f9fc;border-color:#00000026;color:#333}.btn:active:not(:disabled){transform:translateY(.5px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-link{border:none;background:transparent;color:#1771f1;padding:0;box-shadow:none}.pagination-controls{display:flex;align-items:center;gap:10px}.page-indicator{color:#333;font-weight:500}.login-page{height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#f1e8df,#c7a98b 40%,#8a5a2f);padding:20px}.login-card{display:flex;flex-direction:row;background:linear-gradient(135deg,#f6f0e7,#d6b89a,#8a5a2f);border-radius:16px;box-shadow:0 8px 22px #00000040;overflow:hidden;max-width:850px;width:100%;min-height:420px}.login-left{flex:1;background:var(--bg-900);color:var(--text-100);padding:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.login-logo{max-width:260px;margin-bottom:20px}.brand-heading{font-family:Poppins,sans-serif;font-size:28px;font-weight:700}.brand-heading .blue,.brand-heading .orange{color:#484e55}.login-right{flex:1;padding:40px;background:linear-gradient(#aa845e 50%)!important;display:flex;flex-direction:column;justify-content:center;color:#fff}.login-right h3{font-size:22px;margin-bottom:20px;color:#fff}.form-group{margin-bottom:18px}.form-group label{display:block;font-size:14px;color:#fff;margin-bottom:6px;font-weight:500}.login-right .form-group label{color:#fff!important;font-weight:500}.form-group input{width:100%;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#ffffff1a;color:#fff}.form-group input:focus{outline:none;border-color:#fff}.btn-primary{width:100%;padding:14px;border:none;border-radius:8px;background:#bfbfbf!important;color:#fff;font-weight:700;cursor:pointer;transition:background .2s;margin-top:20px}.btn-primary:hover{background:#bfbfbf!important;color:#333}.btn-primary:active{background:#a5a5a5}.status-msg{margin-top:12px;font-size:13px;white-space:pre-wrap;word-break:break-word;color:#fff}.alt-text{margin-top:16px;font-size:14px;color:#ffffffe6;text-align:center}.alt-text a{color:#fff;cursor:pointer;font-weight:500;text-decoration:underline}.login-logo{max-width:200px;mix-blend-mode:multiply}.admin-page{display:flex;flex-direction:column;padding:28px;background:var(--bg-100, #f4f1eb00);font-family:var(--font-sans, "Inter", "Segoe UI", sans-serif);color:var(--text-900, #1a1a1a);min-height:100vh}.admin-main-content{flex:1;display:flex;flex-direction:column;gap:8px}.card{background:#fff;border:1px solid var(--border-300, #e3e0da);border-radius:16px;padding:22px;box-shadow:0 2px 8px #00000014;margin-bottom:18px}.card h3,.ticket-form-card h3,.ticket-table-card h3{font-size:18px;font-weight:600;color:var(--accent-700, #003d99);margin-bottom:12px;border-bottom:1px solid var(--border-200, #eceae5);padding-bottom:8px}.ticket-layout{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap}.ticket-form-card{flex:0 0 360px;background:#fff;border-radius:16px;padding:22px;box-shadow:0 2px 10px #00000014}.ticket-form{display:flex;flex-direction:column;gap:16px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:14px;color:var(--text-600, #444);font-weight:500}.ticket-form input,.ticket-form select,.ticket-form textarea{padding:10px 12px;border-radius:10px;border:1px solid var(--border-300, #ddd);background:var(--bg-surface, #f9f8f6);font-size:14px;color:var(--text-900, #1a1a1a);transition:all .2s ease}.ticket-form input:focus,.ticket-form select:focus,.ticket-form textarea:focus{outline:none;border-color:var(--accent-500, #746f53);box-shadow:0 0 0 2px #0066ff26}.ticket-form button{cursor:pointer;background:linear-gradient(180deg,var(--accent-500, #0066ff),var(--accent-600, #004ecc));border:none;color:#fff;font-weight:700;padding:10px 16px;border-radius:10px;box-shadow:0 3px 14px #06f3;transition:all .15s ease;font-size:14px}.ticket-form button:hover{box-shadow:0 6px 18px #0066ff40}.ticket-form button:active{transform:translateY(1px)}.ticket-form button:disabled{background:#ccc;cursor:not-allowed;box-shadow:none}.ticket-table-card{flex:1;background:#fff;border-radius:16px;padding:22px;box-shadow:0 2px 10px #00000014;overflow-x:auto}.ticket-table{width:100%;border-collapse:collapse;font-size:14px}.ticket-table th,.ticket-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border-300, #e3e0da)}.ticket-table th{background:var(--bg-200, #faf9f7);color:var(--text-600, #555);text-transform:uppercase;font-size:13px;font-weight:700;letter-spacing:.3px}.ticket-table tr:hover td{background:#fafafa;transition:background .2s ease}.editing-row{background:#0066ff14}.editing-row input,.editing-row select{background:#f9f8f6;border:1px solid var(--accent-500, #0066ff);border-radius:8px;padding:6px 8px}.ticket-table button{padding:6px 10px;font-size:13px;font-weight:600;border-radius:8px;border:none;background:linear-gradient(180deg,#06f,#0051cc);color:#fff;cursor:pointer;transition:box-shadow .15s ease}.ticket-table button:hover{box-shadow:0 4px 12px #0066ff40}.pagination-footer{margin-top:16px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border-300, #e3e0da);background:#fff;border-radius:16px;box-shadow:0 2px 6px #00000014;flex-wrap:wrap;gap:10px}.pagination-footer label{font-size:14px;color:var(--text-500, #555);display:flex;align-items:center;gap:8px}.pagination-footer select{background:var(--bg-surface, #f8f6f3);border:1px solid var(--border-300, #e3e0da);border-radius:8px;padding:6px 10px;font-size:14px;color:var(--text-900, #1a1a1a);cursor:pointer;transition:border .2s ease}.pagination-controls{display:flex;align-items:center;gap:12px}.pagination-controls button{background:linear-gradient(180deg,#06f,#0051cc);padding:6px 12px;border-radius:8px;border:none;color:#fff;font-weight:600;font-size:13px;cursor:pointer}.pagination-controls button:disabled{background:#ddd;color:#666;cursor:not-allowed}.pagination-controls span{font-size:14px;color:var(--text-500, #555)}@media (max-width: 1024px){.ticket-layout{flex-direction:column}.ticket-form-card,.ticket-table-card{flex:1 1 100%}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal{background:#fff;border-radius:16px;padding:24px;width:420px;max-width:90%;box-shadow:0 8px 28px #0003;animation:fadeIn .2s ease}.modal h3{margin-top:0;font-size:18px;color:#0051cc;margin-bottom:16px}.modal-body{display:flex;flex-direction:column;gap:10px}.modal-body label{font-weight:600;font-size:13px;color:#333}.input,.select{padding:8px 10px;border:1px solid #ccc;border-radius:8px;font-size:14px}.input:focus,.select:focus{border-color:#0051cc;box-shadow:0 0 0 2px #0051cc1a}.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.btn.cancel{background:#ccc;color:#333;box-shadow:none}.btn.cancel:hover{background:#bbb}@keyframes fadeIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;font-family:var(--font-sans, "Inter", "Segoe UI", sans-serif);color:var(--text-900, #1a1a1a);background:var(--bg-100, #f4f1eb)}.app{min-height:100%;padding:28px;background:var(--bg-100)}.app.tonal{background:var(--bg-100)}header.appbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-radius:var(--radius-lg, 16px);background:#fff;border:1px solid var(--border-300, #e3e0da);box-shadow:0 2px 6px #00000014}header .title{display:flex;align-items:center;gap:12px}header .title h1{margin:0;font-size:22px;font-weight:700;letter-spacing:.3px;color:var(--accent-600, #0051cc)}header .subtitle{color:var(--text-400, #666);font-size:13px}.chip{padding:6px 10px;background:#fff6e0;border:1px solid #f0d58f;border-radius:999px;color:var(--accent-600, #0051cc);font-weight:600;font-size:12px}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:2px}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}.panel{border:1px solid var(--border-300, #e3e0da);background:#fff;border-radius:var(--radius-lg, 16px);padding:16px;box-shadow:0 2px 6px #00000014;position:relative}.panel h3{margin:0 0 10px;font-size:14px;letter-spacing:.4px;text-transform:uppercase;color:var(--text-400, #666)}.panel .panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.stats{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;margin-bottom:12px}.statcard{grid-column:span 2;border:1px solid var(--border-300, #e3e0da);border-radius:var(--radius-lg, 16px);padding:14px;background:#fff;display:flex;align-items:center;gap:12px;box-shadow:0 2px 6px #00000014}.statcard .icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:700}.statcard.total .icon{background:#06f;color:#fff}.statcard.open .icon{background:#2ecc71;color:#fff}.statcard.progress .icon{background:#3498db;color:#fff}.statcard.resolved .icon{background:#8e44ad;color:#fff}.statcard.closed .icon{background:#f0ad4e;color:#fff}.statcard.escalated .icon{background:#e74c3c;color:#fff}.statcard.resolution .icon{background:#17a2b8;color:#fff}.statcard .label{color:var(--text-400, #666);font-size:12px}.statcard .value{font-size:22px;font-weight:800;color:var(--text-900, #1a1a1a)}.toolbar{display:flex;gap:20px;flex-wrap:wrap}.input,.select{background:var(--bg-surface, #f8f6f3);border:1px solid var(--border-300, #e3e0da);color:var(--text-900, #1a1a1a);padding:10px 12px;border-radius:var(--radius-md, 10px);outline:none;font-size:14px}.select{padding-right:30px}.btn{cursor:pointer;background:linear-gradient(180deg,var(--accent-500, #7c664a),var(--accent-600, #51555a));border:none;color:#fff;font-weight:700;padding:10px 14px;border-radius:var(--radius-md, 10px);box-shadow:0 3px 14px #06f3;transition:box-shadow .15s ease,transform .08s ease}.btn:hover{box-shadow:0 6px 20px #0066ff40}.btn:active{transform:translateY(1px)}table{width:100%;border-collapse:collapse}th,td{padding:12px 16px;border-bottom:1px solid var(--border-300, #e3e0da);font-size:15px;color:var(--text-900, #1a1a1a)}th{text-align:left;color:var(--text-400, #666);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;border-bottom:2px solid var(--border-300, #e3e0da)}tr:hover td{background:#faf9f7;transition:background .2s ease}td:first-child{padding-left:20px}td:last-child{padding-right:20px}table select{background:var(--bg-surface, #f8f6f3);border:1px solid var(--border-300, #e3e0da);border-radius:var(--radius-md, 10px);padding:6px 10px;font-size:14px;color:var(--text-800, #222);box-shadow:0 1px 3px #0000000f}table select:focus{outline:none;border-color:var(--accent-500, #535963)}.badge{font-size:12px;font-weight:700;padding:4px 8px;border-radius:999px;border:1px solid var(--border-300, #e3e0da)}.badge.ok{background:#2ecc71;color:#fff}.badge.warn{background:#f0ad4e;color:#fff}.badge.danger{background:#e74c3c;color:#fff}.badge.blue{background:#3498db;color:#fff}.badge.purple{background:#8e44ad;color:#fff}.badge.amber{background:#f39c12;color:#fff}.badge.muted{background:#d9d4cc;color:#333}.footer-note{color:var(--text-400, #666);font-size:12px;margin-top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-layout{display:flex}.main-content{flex:1;margin-left:250px;padding:28px;min-height:100vh;background:var(--bg-500);overflow-x:auto}@media (max-width: 768px){.grid{grid-template-columns:repeat(6,1fr)}.statcard{grid-column:span 3}.toolbar{flex-direction:column;align-items:flex-start}.main-content{margin-left:0;padding:16px}}.ticket-table th:nth-child(1),.ticket-table td:nth-child(1){width:90px;text-align:left}.ticket-table th:nth-child(2),.ticket-table td:nth-child(2){width:220px;word-break:break-word}.ticket-table th:nth-child(3),.ticket-table td:nth-child(3){width:140px}.ticket-table th:nth-child(4),.ticket-table td:nth-child(4){width:100px;text-align:center}.ticket-table th:nth-child(5),.ticket-table td:nth-child(5){width:120px;text-align:center}.ticket-table th:nth-child(6),.ticket-table td:nth-child(6){width:130px}.ticket-table th:nth-child(7),.ticket-table td:nth-child(7){width:180px;word-break:break-word}.ticket-table th:nth-child(8),.ticket-table td:nth-child(8){width:110px;text-align:center}.ticket-table th:nth-child(9),.ticket-table td:nth-child(9){width:100px;text-align:center}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(15px,1fr));gap:12px}.statcard{background:#fff;border:1px solid var(--border-300, #e3e0da);border-radius:12px;padding:16px;text-align:center;box-shadow:0 2px 6px #0000000d;transition:all .25s ease}.statcard:hover{transform:translateY(-3px);box-shadow:0 4px 10px #00000014}.statcard .label{font-size:13px;font-weight:600;margin-bottom:6px}.statcard .value{font-size:22px;font-weight:700}.statcard.total{border-left:28px solid #3b82f6}.statcard.open{border-left:28px solid #ef4444}.statcard.progress{border-left:28px solid #f59e0b}.statcard.resolved{border-left:28px solid #8b5cf6}.statcard.close{border-left:28px solid #22c55e}.usage-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:13px;font-weight:600;text-align:center;min-width:90px}.usage-ok{background-color:#3b82f626;color:#1d4ed8}.usage-full{background-color:#dc262626;color:#991b1b}:root{--bg-900: linear-gradient(125deg, #ffffff 0%, #e3ecff 60%, #644d23 100%);--bg-800: #ffffff;--bg-700: #f7f5f1;--border-700: #d6d1c7;--text-100: #1a1a1a;--text-300: #555555;--sidebar-width: 260px;--accent-500: #2563eb;--accent-600: #1d4ed8;--accent-700: #1e40af;--warn-500: #facc15;--danger-500: #ef4444;--ok-500: #22c55e;--info-500: #3b82f6;--muted-500: #9ca3af;--radius-lg: 16px;--radius-md: 12px;--radius-sm: 10px;--shadow-1: 0 6px 18px rgba(0,0,0,.08);--shadow-2: inset 0 1px 0 rgba(255,255,255,.8);--font-sans: "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif}.hero-gradient{background:linear-gradient(135deg,#2563eb,#1d4ed8)}.panel-gradient{background:linear-gradient(180deg,#0000000a,#0000) padding-box,linear-gradient(180deg,#00000014,#0000) border-box}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-700);border-radius:var(--radius-md)}::-webkit-scrollbar-thumb{background:var(--accent-500);border-radius:var(--radius-md);border:2px solid var(--bg-700)}::-webkit-scrollbar-thumb:hover{background:var(--accent-700)}*{scrollbar-width:thin;scrollbar-color:var(--accent-500) var(--bg-700)}