*{box-sizing:border-box}
:root{
  --bg:#090e15;--sidebar:#0b1017;--surface:#111821;--surface2:#151e29;
  --border:rgba(255,255,255,.075);--text:#f4f7fa;--muted:#a8b0bc;
  --green:#62c72f;--green2:#45a71f;--blue:#53a9d4;--yellow:#ffc000;
}
html,body{margin:0;min-height:100%;font-family:"Inter",sans-serif;background:var(--bg);color:var(--text)}
body{background:radial-gradient(circle at 55% 18%,rgba(42,58,77,.14),transparent 34%),linear-gradient(135deg,#0b1119,#080c12);overflow-x:hidden}
a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.app-shell{display:flex;min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:285px;background:linear-gradient(180deg,#0b1017,#091019);border-right:1px solid var(--border);z-index:30}
.brand{height:92px;display:flex;flex-direction:column;justify-content:center;padding:0 31px;border-bottom:1px solid rgba(255,255,255,.04)}
.brand-text{display:inline-block;width:max-content;font-size:43px;font-weight:800;letter-spacing:-2.5px;line-height:1}
.brand-line{width:159px;height:3px;margin-top:4px;background:#d9d9d9;transform:skewX(-18deg);opacity:.9}
.menu{padding:32px 18px}.menu-item{min-height:56px;display:flex;align-items:center;gap:17px;padding:0 21px;margin-bottom:7px;border-radius:10px;color:#cfd5df;font-size:18px;transition:.2s}
.menu-item i{width:23px;font-size:21px}.menu-item:hover{background:rgba(255,255,255,.045);color:#fff}
.menu-item.active{color:#fff;background:linear-gradient(90deg,#55b326,#4cab22);box-shadow:0 12px 30px rgba(52,156,25,.13)}
.menu-divider{height:1px;margin:22px 12px;background:rgba(255,255,255,.09)}
.main{width:calc(100% - 285px);min-height:100vh;margin-left:285px}
.topbar{height:92px;display:flex;align-items:center;padding:0 31px 0 38px;border-bottom:1px solid var(--border);background:rgba(8,12,18,.55);backdrop-filter:blur(12px)}
.topbar-spacer{flex:1}.profile-button{display:flex;align-items:center;gap:15px;padding:0;border:0;color:white;background:transparent;font-size:18px;cursor:pointer}
.profile-avatar{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:50%;font-size:24px}.small-icon{font-size:14px}
.mobile-menu{display:none;border:0;background:transparent;color:white;font-size:29px;cursor:pointer}
.content{padding:38px 34px 80px;max-width:1500px;margin:0 auto}
.welcome,.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:0 6px 42px}
.welcome h1,.page-head h1{margin:0;font-size:42px;line-height:1.2;font-weight:600;letter-spacing:-1.4px}
.welcome p,.page-head p{margin:13px 0 0;color:var(--muted);font-size:20px;line-height:1.55}.wave{font-size:38px}
.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 18px;border-radius:10px;border:1px solid transparent;font-weight:600;cursor:pointer;transition:.2s}
.primary-btn{background:linear-gradient(90deg,#64cb31,#4cae22);color:#071005;box-shadow:0 12px 28px rgba(71,170,33,.15)}
.primary-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}.secondary-btn{background:rgba(255,255,255,.035);border-color:var(--border);color:#e5e9ef}
.primary-btn.small,.secondary-btn.small{min-height:38px;padding:0 13px;font-size:14px}.full-btn{width:100%;margin-top:8px}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px}.stat-card,.panel-card,.table-card,.service-card,.mini-card,.settings-card,.announcement-item{border:1px solid var(--border);background:linear-gradient(145deg,rgba(17,25,35,.97),rgba(13,20,29,.97));box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 18px 55px rgba(0,0,0,.12)}
.stat-card{min-height:211px;padding:34px 32px 28px;border-radius:16px}.stat-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.stat-head h3{margin:0;font-size:20px;font-weight:500}.stat-value{display:block;margin-top:17px;font-size:52px;line-height:1;font-weight:500}.green{color:var(--green)}.blue{color:var(--blue)}.yellow{color:var(--yellow)}
.stat-card p{margin:25px 0 0;color:#aeb5c0;font-size:15px;line-height:1.55}.bottom-grid{display:grid;grid-template-columns:1.42fr 1fr;gap:25px;margin-top:35px}.panel-card{min-height:414px;border-radius:16px;overflow:hidden}.panel-title{padding:33px 34px 24px}.panel-title h2{margin:0;font-size:23px}
.ticket-row{display:grid;grid-template-columns:118px 1fr auto;align-items:center;min-height:82px;margin:0 34px;border-top:1px solid rgba(255,255,255,.09);gap:20px}.ticket-id{font-size:18px}.ticket-title{font-size:17px}.badge{display:inline-flex;align-items:center;width:max-content;padding:9px 13px;border-radius:8px;font-size:13px;white-space:nowrap}
.badge-success{color:#6ee43a;background:rgba(69,181,36,.1)}.badge-warning{color:#ffc400;background:rgba(255,191,0,.08)}.badge-info{color:#6dc9ff;background:rgba(75,169,219,.1)}
.announcement{min-height:246px;margin:0 34px;padding-top:31px;border-top:1px solid rgba(255,255,255,.09)}.announcement h3{margin:0 0 18px;font-size:20px}.announcement p{max-width:380px;margin:0;color:#aeb5c0;font-size:17px;line-height:1.85}
.panel-footer-link{min-height:76px;display:flex;align-items:center;justify-content:center;gap:24px;margin:0 34px;border-top:1px solid rgba(255,255,255,.09);color:#cbd2dc;font-size:17px}.panel-footer-link.between{justify-content:space-between}
.toolbar,.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.table-toolbar{padding:20px 22px;margin:0;border-bottom:1px solid var(--border)}
.search-box{min-width:280px;display:flex;align-items:center;gap:11px;padding:0 15px;height:46px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.025);color:#8f98a5}.search-box input{width:100%;border:0;outline:0;background:transparent;color:white}
.select,.form-grid input,.form-grid select,.form-grid textarea{border:1px solid var(--border);background:#0d141d;color:#e9edf2;border-radius:10px;outline:0}.select{height:46px;padding:0 14px}.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.service-card{padding:26px;border-radius:16px}.service-top{display:flex;align-items:center;justify-content:space-between}.service-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:13px;background:rgba(93,196,45,.1);color:var(--green);font-size:24px}.service-card h3{margin:24px 0 8px;font-size:21px}.service-card>p{margin:0;color:var(--muted)}.detail-list{display:grid;gap:10px;margin:25px 0;color:#b8c0ca;font-size:14px}.detail-list b{color:white}.card-actions{display:flex;gap:10px}.progress{height:8px;border-radius:20px;background:#0a1017;margin:-10px 0 24px;overflow:hidden}.progress span{display:block;height:100%;background:var(--green)}
.table-card{border-radius:16px;overflow:hidden}.responsive-table{overflow:auto}table{width:100%;border-collapse:collapse;min-width:850px}th,td{padding:20px 22px;text-align:left;border-bottom:1px solid var(--border)}th{color:#98a2af;font-size:13px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}td{color:#e4e8ee;font-size:15px}td small{display:block;margin-top:6px;color:#8e98a5}.icon-btn{width:38px;height:38px;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.025);color:white;cursor:pointer}
.switch{position:relative;width:46px;height:25px;display:inline-block}.switch input{display:none}.switch span{position:absolute;inset:0;border-radius:25px;background:#29323d;cursor:pointer;transition:.2s}.switch span:before{content:"";position:absolute;width:19px;height:19px;left:3px;top:3px;border-radius:50%;background:white;transition:.2s}.switch input:checked+span{background:var(--green2)}.switch input:checked+span:before{transform:translateX(21px)}
.mini-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:24px}.mini-card{padding:22px;border-radius:14px}.mini-card span{display:block;color:#9ea8b5;font-size:14px}.mini-card strong{display:block;margin-top:10px;font-size:27px}.priority{font-size:13px}.priority.high{color:#ff6d6d}.priority.normal{color:#ffc400}.priority.low{color:#7cbcff}
.modal{position:fixed;inset:0;display:none;place-items:center;padding:20px;background:rgba(0,0,0,.7);z-index:100}.modal.show{display:grid}.modal-box{width:min(650px,100%);border:1px solid var(--border);background:#101720;border-radius:18px;box-shadow:0 30px 100px rgba(0,0,0,.55)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:24px 26px;border-bottom:1px solid var(--border)}.modal-head h2{margin:0}.modal-head button{border:0;background:transparent;color:white;font-size:20px;cursor:pointer}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:26px}.form-grid label{display:grid;gap:9px;color:#cfd5dd;font-size:14px}.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:13px 14px;resize:vertical}.full{grid-column:1/-1}.modal-actions,.form-actions{display:flex;justify-content:flex-end;gap:12px}.one-column{grid-template-columns:1fr}
.announcement-list{display:grid;gap:18px}.announcement-item{padding:29px;border-radius:16px}.announcement-item.featured{border-color:rgba(98,199,47,.28)}.announcement-meta{display:flex;align-items:center;justify-content:space-between}.announcement-meta time{color:#8e98a5;font-size:14px}.announcement-item h2{margin:22px 0 12px}.announcement-item p{margin:0;color:#aeb6c1;line-height:1.8;max-width:950px}.announcement-item>a{display:inline-flex;align-items:center;gap:8px;margin-top:22px;color:var(--green)}
.settings-layout{display:grid;grid-template-columns:260px 1fr;gap:22px}.settings-tabs{display:grid;gap:8px;height:max-content;padding:10px;border:1px solid var(--border);border-radius:15px;background:rgba(17,25,35,.9)}.tab{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 15px;border:0;border-radius:10px;background:transparent;color:#b8c0cb;text-align:left;cursor:pointer}.tab.active{background:rgba(97,198,47,.12);color:var(--green)}.settings-card{border-radius:16px;min-height:500px}.tab-panel{display:none}.tab-panel.active{display:block}.tab-panel h2{margin:0;padding:27px 26px;border-bottom:1px solid var(--border)}.notification-option{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 26px;border-bottom:1px solid var(--border)}.notification-option strong{font-size:16px}.notification-option p{margin:7px 0 0;color:#9fa9b5;font-size:14px}
.login-page{min-height:100vh;display:grid;place-items:center;padding:30px;background:radial-gradient(circle at 15% 20%,rgba(85,179,38,.16),transparent 30%),linear-gradient(135deg,#090e15,#05080d)}.login-shell{width:min(1150px,100%);min-height:690px;display:grid;grid-template-columns:1.2fr .8fr;border:1px solid var(--border);border-radius:22px;overflow:hidden;background:#0b1119;box-shadow:0 40px 120px rgba(0,0,0,.5)}.login-brand{padding:70px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,rgba(11,17,25,.92),rgba(9,15,22,.98)),radial-gradient(circle at 30% 30%,rgba(97,199,47,.18),transparent 35%)}.brand.large{padding:0;border:0;height:auto}.login-brand h1{max-width:620px;margin:55px 0 20px;font-size:48px;line-height:1.15;letter-spacing:-2px}.login-brand p{max-width:560px;margin:0;color:#aab3bf;font-size:18px;line-height:1.75}.login-features{display:flex;gap:28px;margin-top:42px;flex-wrap:wrap}.login-features span{display:flex;align-items:center;gap:9px;color:#d7dde4}.login-features i{color:var(--green)}.login-card{padding:58px 48px;display:flex;flex-direction:column;justify-content:center;background:#101720}.login-card h2{margin:0;font-size:32px}.login-card>p{color:#9ca6b2;margin:12px 0 32px}.login-card form{display:grid;gap:19px}.login-card label{display:grid;gap:9px;font-size:14px;color:#cfd5dd}.input-icon{display:flex;align-items:center;gap:10px;height:50px;padding:0 14px;border:1px solid var(--border);border-radius:10px;background:#0c131c}.input-icon input{width:100%;border:0;outline:0;background:transparent;color:white}.login-options{display:flex;justify-content:space-between;gap:16px;font-size:13px}.remember{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.login-options a,.register-note a{color:var(--green)}.register-note{text-align:center;margin-top:24px;color:#9fa9b5;font-size:14px}.site-link{text-align:center;margin-top:34px;color:#7f8995}.mobile-login-logo{display:none}
.overlay{display:none}
@media(max-width:1220px){.stats-grid{grid-template-columns:repeat(2,1fr)}.bottom-grid{grid-template-columns:1fr}.service-grid{grid-template-columns:repeat(2,1fr)}.mini-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:.25s;box-shadow:30px 0 60px rgba(0,0,0,.35)}.sidebar.open{transform:translateX(0)}.main{width:100%;margin-left:0}.mobile-menu{display:block}.overlay{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.58)}.overlay.show{display:block}.settings-layout{grid-template-columns:1fr}.settings-tabs{grid-template-columns:repeat(3,1fr)}.login-shell{grid-template-columns:1fr;max-width:540px}.login-brand{display:none}.mobile-login-logo{display:flex;flex-direction:column;margin-bottom:35px}}
@media(max-width:680px){.topbar{height:75px;padding:0 18px}.profile-button span:nth-child(2){display:none}.content{padding:28px 17px 50px}.welcome,.page-head{display:grid;margin-bottom:30px}.welcome h1,.page-head h1{font-size:31px}.welcome p,.page-head p{font-size:16px}.stats-grid,.service-grid,.mini-stats{grid-template-columns:1fr}.bottom-grid{gap:16px;margin-top:20px}.ticket-row{grid-template-columns:80px 1fr;padding:16px 0}.badge{grid-column:2;justify-self:start}.panel-title,.ticket-row,.announcement,.panel-footer-link{margin-left:22px;margin-right:22px}.panel-title{padding-left:0;padding-right:0}.toolbar,.table-toolbar{align-items:stretch;flex-direction:column}.search-box{min-width:0;width:100%}.select{width:100%}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.settings-tabs{grid-template-columns:1fr}.login-card{padding:42px 25px}.login-card h2{font-size:27px}}