:root{--mint:#42d7b0;--mint-dark:#16b98f;--ink:#14233d;--muted:#718096;--line:#e5ebf1;--soft:#f5f8fa;--navy:#10243d}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'DM Sans',sans-serif;color:var(--ink);background:#f8fafb}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}.sidebar{position:fixed;inset:0 auto 0 0;width:252px;background:white;border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:20}.brand{height:92px;display:flex;align-items:center;gap:11px;padding:0 30px;font-size:21px;font-weight:500;letter-spacing:-.5px}.brand small{display:block;font-size:9px;letter-spacing:2px;color:#9aa6b3;margin-top:1px}.brand-mark{display:grid;place-items:center;width:39px;height:45px;border-radius:22px 8px;background:linear-gradient(145deg,#57e2bd,#16b78d);color:white;font-weight:700;font-size:25px;transform:skew(-7deg)}nav{padding:16px 14px;flex:1}nav p{font-size:10px;letter-spacing:1.5px;color:#a6b0bc;margin:22px 16px 8px}nav a{display:flex;align-items:center;gap:13px;padding:12px 14px;margin:4px 0;border-radius:9px;font-size:14px;color:#617083}nav a i{font-style:normal;font-size:18px;width:20px;text-align:center}nav a em{font-style:normal;margin-left:auto;background:#e9eef2;border-radius:10px;font-size:10px;padding:2px 7px}nav a.active,nav a:hover{background:#e9fbf6;color:#0ea77e;font-weight:600}.sidebar-user{border-top:1px solid var(--line);padding:18px;display:flex;align-items:center;gap:10px}.sidebar-user>span,.avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#dff8f1;color:#109b79;font-weight:700}.sidebar-user div{min-width:0;flex:1}.sidebar-user b,.sidebar-user small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user b{font-size:12px}.sidebar-user small{font-size:10px;color:var(--muted);margin-top:2px}main{margin-left:252px;min-height:100vh}.topbar{height:72px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 38px;position:sticky;top:0;z-index:10}.crumb{font-size:13px;font-weight:600}.crumb span{color:#bdc5ce;margin:0 8px}.top-actions{margin-left:auto;display:flex;gap:9px;align-items:center}.icon-btn{border:0;background:transparent;font-size:20px;color:#526071;position:relative}.has-dot:after{content:'';position:absolute;width:6px;height:6px;background:#ef6470;border:2px solid white;border-radius:50%;top:1px;right:1px}.btn{border:0;border-radius:7px;padding:11px 18px;font-weight:600;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn.primary{background:var(--mint);color:#082c25;box-shadow:0 4px 12px #3dd4ad2b}.btn.primary:hover{background:#35cda5}.btn.outline{border:1px solid #cfd8df;background:white}.btn.ghost{background:#eef2f5}.wide{width:100%}.content{padding:40px;max-width:1540px;margin:auto}.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:700}.eyebrow.mint{color:#12ad83}.page-head h1{font-size:27px;letter-spacing:-.7px;margin:8px 0 6px}.page-head p,.panel-head p{margin:0;color:var(--muted);font-size:13px}.date-pill{background:white;border:1px solid var(--line);padding:10px 15px;border-radius:7px;font-size:12px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}.stats-grid article{background:white;border:1px solid var(--line);border-radius:10px;padding:19px;display:flex;gap:15px;box-shadow:0 3px 15px #263b5108}.stat-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:9px;font-size:20px}.mint-bg{background:#e2f9f3;color:#0bad81}.blue-bg{background:#e8f2ff;color:#478ee9}.amber-bg{background:#fff2dc;color:#e69a20}.purple-bg{background:#f0eafe;color:#815ad7}.stats-grid span,.stats-grid small{display:block}.stats-grid span{color:var(--muted);font-size:11px}.stats-grid strong{font-size:27px;line-height:1.25}.stats-grid small{font-size:9px;color:#96a1ad}.stats-grid .up{color:#1cab82}.stats-grid .amber{color:#df9420}.dashboard-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,.72fr);gap:20px}.panel{background:white;border:1px solid var(--line);border-radius:10px;box-shadow:0 3px 18px #20364c08}.panel-head{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.panel-head h2,.details h2,.status-form h2{font-size:15px;margin:0 0 3px}.panel-head>a{font-size:11px;color:#13ae85;font-weight:600}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left}th{background:#f7f9fa;color:#8a97a5;font-size:9px;letter-spacing:.8px;padding:12px 18px}td{padding:16px 18px;border-bottom:1px solid #edf1f4;font-size:11px;color:#536276}tbody tr:hover{background:#fcfefd}.ticket-title{display:block;color:var(--ink);font-weight:600;min-width:190px}.ticket-title small{display:block;color:#15ae86;font-size:9px;margin-bottom:3px}.priority{font-size:10px;white-space:nowrap}.priority.urgent{color:#e44f5c}.priority.high{color:#ef8c28}.priority.medium{color:#e4ae20}.priority.low{color:#4c99df}.status{display:inline-block;border-radius:12px;padding:5px 9px;font-size:9px;font-weight:600;white-space:nowrap}.status.open{background:#e8f2ff;color:#337dca}.status.in-progress{background:#e3faf3;color:#0c9d78}.status.waiting-client{background:#fff2db;color:#c98518}.status.resolved{background:#f0ebfc;color:#7751c5}.quick-panel>a{padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}.quick-panel>a i{font-style:normal;background:#ebfbf7;width:34px;height:34px;border-radius:7px;display:grid;place-items:center;color:#10a77f}.quick-panel>a span{flex:1}.quick-panel>a b,.quick-panel>a small{display:block}.quick-panel>a b{font-size:11px}.quick-panel>a small{font-size:9px;color:var(--muted);margin-top:3px}.quick-panel>a em{font-style:normal;color:#aab4be}.support-box{margin:18px;background:#132a43;color:white;border-radius:8px;padding:18px;position:relative;overflow:hidden}.support-box:after{content:'';position:absolute;width:110px;height:110px;border:20px solid #42d7b018;border-radius:50%;right:-55px;bottom:-55px}.support-box span{color:#58ddbc;font-size:8px;letter-spacing:1px}.support-box b{display:block;font-size:13px;margin-top:14px}.support-box p{font-size:9px;line-height:1.5;color:#b9c6d1}.support-box button{border:1px solid #5e7185;background:transparent;color:white;border-radius:5px;font-size:9px;padding:7px 10px}.filters{display:flex;gap:12px;padding:18px}.search{flex:1;border:1px solid var(--line);border-radius:7px;padding:0 12px;color:#9aa5b0}.search input{border:0;outline:0;padding:11px;width:calc(100% - 25px)}select,input,textarea{border:1px solid #d8e0e6;border-radius:7px;padding:11px;background:white;color:var(--ink);outline:none}input:focus,textarea:focus,select:focus{border-color:var(--mint);box-shadow:0 0 0 3px #42d7b019}.filters select{min-width:150px}.ticket-form{max-width:900px;padding:28px}.back{display:block;color:#16aa83;font-size:12px;font-weight:600;margin-bottom:12px}.form-section{display:flex;gap:13px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:22px}.form-section>span{width:34px;height:34px;background:#e4faf4;color:#10a980;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700}.form-section h2{font-size:15px;margin:0}.form-section p{font-size:11px;color:var(--muted);margin:3px 0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-grid label{font-size:11px;font-weight:600}.form-grid input,.form-grid select,.form-grid textarea{display:block;width:100%;margin-top:7px}.full{grid-column:1/-1}.form-actions{border-top:1px solid var(--line);margin-top:24px;padding-top:20px;display:flex;justify-content:flex-end;gap:10px}.detail-title{display:flex;align-items:center;gap:10px;margin:14px 0 3px}.detail-title small{color:var(--muted)}.ticket-detail-head h1{margin-top:5px}.detail-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,.7fr);gap:20px}.conversation{padding:24px}.message{display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--line)}.message.original{padding-top:0}.message>div:last-child{flex:1}.avatar{flex:0 0 auto}.avatar.agent{background:#eaf0ff;color:#5d75c5}.message-head{display:flex;justify-content:space-between;font-size:11px}.message-head span{color:var(--muted);font-size:9px}.message-head em{font-style:normal;background:#e5faf4;color:#10a47c;padding:2px 5px;border-radius:4px;font-size:8px}.message p{font-size:12px;line-height:1.7;color:#536276}.reply{margin-top:22px}.reply textarea{width:100%;resize:vertical}.reply button{margin-top:10px;float:right}.details,.status-form{padding:20px;margin-bottom:16px}.details dl{margin:16px 0 0}.details dt{color:#8a97a5;font-size:9px;text-transform:uppercase;margin-top:16px}.details dd{margin:4px 0;font-size:11px;font-weight:600}.details dd small{display:block;color:var(--muted);font-weight:400;margin-top:3px}.status-form select{width:100%;margin:12px 0}.flash,.error{padding:12px 15px;border-radius:7px;margin-bottom:18px;font-size:12px}.flash{background:#e3f9f3;color:#087e61}.error{background:#ffeaec;color:#b93a46}.mobile-menu{display:none;border:0;background:none;font-size:20px}
.login-page{display:grid;grid-template-columns:1.05fr .95fr;background:white}.login-visual{min-height:100vh;background:var(--navy);color:white;position:relative;overflow:hidden;padding:0 9%;display:flex;flex-direction:column}.login-visual:before,.login-visual:after{content:'';position:absolute;border:1px solid #ffffff0c;border-radius:50%}.login-visual:before{width:600px;height:600px;left:-200px;bottom:-260px}.login-visual:after{width:400px;height:400px;right:-180px;top:-140px}.brand.light{padding:0;height:110px;color:white}.visual-copy{margin:auto 0;max-width:570px;position:relative;z-index:1}.visual-copy h1{font-size:48px;line-height:1.1;letter-spacing:-2px;margin:18px 0}.visual-copy h1 strong{color:var(--mint)}.visual-copy>p{color:#b3c1cf;max-width:420px;line-height:1.7;font-size:14px}.art{height:235px;position:relative;margin-top:35px}.art-window{position:absolute;width:390px;height:190px;border:1px solid #62758a;border-radius:10px;background:#18314c;padding:16px;box-shadow:0 30px 50px #06172866}.art-window>span{display:inline-block;width:6px;height:6px;background:#61758a;border-radius:50%;margin-right:4px}.art-chart{height:130px;margin-top:12px;border-top:1px solid #2c4761;display:flex;align-items:end;gap:26px;padding:22px 35px}.art-chart i{display:block;width:28px;background:#3bd6ad;border-radius:4px 4px 0 0}.art-chart i:nth-child(1){height:35%}.art-chart i:nth-child(2){height:65%}.art-chart i:nth-child(3){height:48%}.art-chart i:nth-child(4){height:88%}.art-ticket{position:absolute;right:0;bottom:5px;background:white;color:var(--ink);width:195px;padding:16px 16px 16px 54px;border-radius:8px;box-shadow:0 15px 35px #06172888}.art-ticket b{position:absolute;left:14px;top:18px;width:28px;height:28px;border-radius:50%;background:#dff9f2;color:#0da77e;display:grid;place-items:center}.art-ticket p{font-size:11px;font-weight:700;margin:0}.art-ticket span{font-size:9px;color:#19ae87}.copyright{padding:30px 0;color:#718297;font-size:9px}.login-form-wrap{display:grid;place-items:center;padding:50px}.login-card{width:min(410px,100%)}.login-card h2{font-size:30px;letter-spacing:-1px;margin:12px 0 7px}.login-card>p{font-size:12px;color:var(--muted);margin-bottom:30px}.login-card>label{display:block;font-size:11px;font-weight:600;margin:16px 0}.login-card input[type=email],.login-card input[type=password]{display:block;width:100%;margin-top:7px;padding:13px}.password{position:relative}.password button{position:absolute;right:12px;top:19px;border:0;background:none;color:#16a67f;font-size:10px}.form-meta{display:flex;justify-content:space-between;align-items:center;font-size:10px;margin:18px 0}.form-meta label{display:flex;align-items:center;gap:5px}.form-meta a,.help a{color:#0fa77e;font-weight:600}.login-card .btn{padding:14px}.login-card .btn span{margin-left:auto}.demo-note{background:#f4f7f8;border-radius:7px;padding:10px;margin-top:15px;display:flex;align-items:center;gap:8px;font-size:9px;color:#667585}.demo-note b{color:#27384e}.demo-note code{font-family:inherit}.login-card .help{text-align:center;font-size:10px;margin-top:26px}.brand.light small{color:#8fa0b0}
@media(max-width:1050px){.stats-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.detail-grid{grid-template-columns:1fr}.login-visual{display:none}.login-page{display:block}.login-form-wrap{min-height:100vh}}@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.mobile-menu{display:block;margin-right:14px}main{margin-left:0}.topbar{padding:0 18px}.crumb{display:none}.content{padding:24px 16px}.page-head{align-items:flex-start;gap:15px}.date-pill{display:none}.stats-grid{grid-template-columns:1fr 1fr}.dashboard-grid{display:block}.quick-panel{margin-top:18px}.filters{flex-wrap:wrap}.search{flex:1 0 100%}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.ticket-detail-head{display:block}.ticket-detail-head>.priority{display:inline-block;margin-top:10px}}@media(max-width:470px){.stats-grid{grid-template-columns:1fr}.top-actions .icon-btn{display:none}.page-head h1{font-size:24px}.content{padding:20px 12px}.login-form-wrap{padding:30px 20px}.filters select,.filters .btn{width:100%}}