:root{
 --bg:#f6faff;--card:#fff;--line:#dfe9f5;--text:#12213b;--muted:#6d7f98;
 --blue:#126cf3;--cyan:#12b7c8;--green:#13aa66;--amber:#f6a512;--red:#ed4b4b;--purple:#7754df;
 --nav:#fff;--shadow:0 10px 32px rgba(40,78,120,.07);--radius:16px
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--blue);text-decoration:none}button,input,select,textarea{font:inherit}.muted{color:var(--muted)}.tiny{font-size:12px}.text-red{color:var(--red)!important}.text-green{color:var(--green)!important}
.app-shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}.sidebar{background:var(--nav);border-right:1px solid var(--line);padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto;z-index:20}
.brand{display:flex;gap:10px;align-items:center;margin:0 0 18px 2px}.brand-mark{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#11a962,#1577ed);color:#fff;font-weight:900;display:grid;place-items:center}.brand strong{font-size:20px}.brand small{display:block;font-size:10px;color:#607793;text-transform:uppercase;letter-spacing:.08em}
nav a,.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;color:#314760;font-size:13px;margin:1px 0}nav a:hover{background:#eef6ff;color:var(--blue)}nav a.active{background:#e7f7ef;color:#07824b;font-weight:800}.nav-group{padding-top:8px;border-top:1px solid #edf2f8;margin-top:8px}.nav-title{font-size:9px;color:#7e91a8;text-transform:uppercase;letter-spacing:.08em;padding:4px 9px;font-weight:800}
.main{min-width:0}.topbar{height:66px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:15}.icon-btn{border:0;background:#edf5fd;border-radius:9px;padding:8px 10px;color:#46617d}.global-search{display:flex;align-items:center;gap:8px;border:1px solid #d9e4f1;background:#fbfdff;border-radius:10px;padding:7px 11px;max-width:520px;flex:1}.global-search input{border:0;outline:0;background:transparent;width:100%}.top-user{margin-left:auto;display:flex;align-items:center;gap:9px}.top-user small{display:block;color:var(--muted);font-size:11px}.online-dot{width:8px;height:8px;background:#14ae68;border-radius:50%}.content{padding:22px;max-width:1800px;margin:auto}
.page-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px}.page-head h1{font-size:24px;margin:0 0 4px}.page-head p{margin:0;color:var(--muted)}.eyebrow{color:#667c95;font-size:11px;text-transform:uppercase;font-weight:800;letter-spacing:.08em}.live-badge{font-size:12px;color:#13a766;background:#ebfbf4;border:1px solid #c9f1df;padding:6px 9px;border-radius:99px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.card h2{font-size:15px;margin:0}.card h3{font-size:13px;margin:14px 0 6px}.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.card-head a,.card-head span{font-size:12px}.grid{display:grid;gap:14px}.grid.two{grid-template-columns:1.25fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}.span-2{grid-column:1/-1}.main-grid{grid-template-columns:1.35fr .65fr}.ticket-layout{grid-template-columns:1fr 330px}
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:14px}.kpi-grid.compact{grid-template-columns:240px}.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow)}.kpi-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-weight:900;font-size:21px;color:#fff}.kpi small{font-size:10px;color:#6d7f98;font-weight:800}.kpi strong{font-size:24px;display:block}.kpi span:not(.kpi-icon){font-size:10px;color:var(--muted)}.kpi.blue .kpi-icon{background:var(--blue)}.kpi.red .kpi-icon{background:var(--red)}.kpi.cyan .kpi-icon{background:var(--cyan)}.kpi.amber .kpi-icon{background:var(--amber)}.kpi.purple .kpi-icon{background:var(--purple)}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th,td{text-align:left;padding:10px;border-bottom:1px solid #edf2f7;white-space:nowrap}th{font-size:10px;color:#647890;text-transform:uppercase;letter-spacing:.03em;background:#fbfdff}tr:hover td{background:#fbfdff}.empty{text-align:center;color:#8193a8;padding:24px!important}
.pill{display:inline-block;border-radius:99px;padding:4px 7px;font-size:10px;font-weight:800;background:#eef4fb;color:#4e6781}.pill.p1{background:#ffe9e8;color:#c83333}.pill.p2{background:#fff0df;color:#c66a00}.pill.p3{background:#fff7d9;color:#987600}.pill.p4{background:#eaf8ef;color:#198653}.pill.status{background:#eaf2ff;color:#2469d8}.pill.good{background:#e7f9f0;color:#108452}.pill.big{font-size:12px;padding:7px 10px}
.btn{border:0;border-radius:9px;padding:9px 13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.btn.primary{background:var(--blue);color:#fff}.btn.success{background:var(--green);color:#fff}.btn.danger{background:var(--red);color:#fff}.btn.teal{background:var(--cyan);color:#fff}.btn.purple{background:var(--purple);color:#fff}.btn.ghost{background:#eef4fa;color:#47627f}.btn.small{padding:7px 10px;font-size:11px}.fullbtn{width:100%;margin-bottom:8px}
.alert{padding:12px 14px;border-radius:10px;margin:0 0 14px;border:1px solid}.alert.success{background:#eafbf3;border-color:#c7f0da;color:#137144}.alert.danger{background:#fff0f0;border-color:#ffd1d1;color:#a82b2b}.alert.warning{background:#fff8e8;border-color:#ffe0a7;color:#8c6100}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid.one{grid-template-columns:1fr}.form-grid label,.stack{display:grid;gap:7px}.form-grid label{font-size:12px;font-weight:700}.form-grid .full{grid-column:1/-1}.form-grid input,.form-grid select,.form-grid textarea,.stack input,.stack select,.stack textarea{width:100%;border:1px solid #cedbe9;border-radius:9px;padding:10px;background:#fff;color:var(--text);outline:none}.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{border-color:#6aa5f7;box-shadow:0 0 0 3px #e6f0ff}.actions,.split{display:flex;gap:10px}.split>*{flex:1}.toggle{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center}.toggle input{width:auto!important}
.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.detail-grid div{background:#f8fbff;border:1px solid #e7eef7;border-radius:10px;padding:11px}.detail-grid small{display:block;color:var(--muted);font-size:10px}.detail-grid strong{display:block;font-size:12px;margin-top:4px}.rootcause-box{background:#f8fbff;border:1px solid #e2ecf6;border-radius:12px;padding:13px;margin-top:14px}.actions-panel{height:max-content;position:sticky;top:84px}.actions-panel h2{margin-bottom:12px}
.timeline{display:grid;gap:0}.timeline-item{display:grid;grid-template-columns:16px 1fr;gap:8px;position:relative;padding-bottom:14px}.timeline-item i{width:9px;height:9px;background:var(--blue);border-radius:50%;margin-top:4px}.timeline-item:before{content:"";position:absolute;left:4px;top:14px;bottom:0;border-left:1px solid #d9e4f0}.timeline-item:last-child:before{display:none}.timeline-item strong{font-size:12px}.timeline-item p,.timeline-item small{margin:2px 0;color:var(--muted);font-size:11px}.comments{margin-top:12px}.comment{border-top:1px solid #edf2f7;padding:10px 0}.comment strong{font-size:12px}.comment small{float:right;color:var(--muted);font-size:10px}.comment p{font-size:12px}
.rfo-callout{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(120deg,#f3efff,#ffffff)}
.status-row{display:grid;grid-template-columns:150px 38px 1fr;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #edf2f7;font-size:12px}.bar{height:7px;background:#edf2f7;border-radius:99px}.bar i{height:100%;display:block;background:linear-gradient(90deg,#1676ec,#19b4c6);border-radius:99px}
.map-card{min-height:350px}.indo-map svg{width:100%;height:265px}.islands path{fill:#b6e9c8;stroke:#8fd3aa;stroke-width:2}.map-links line{stroke:#92b5d8;stroke-width:2;stroke-dasharray:5 5}.node{stroke:#fff;stroke-width:3}.node.good,.dot.good{fill:#14ad69;background:#14ad69}.node.warning,.dot.warning{fill:#f5a623;background:#f5a623}.node.critical,.dot.critical{fill:#ef4e4e;background:#ef4e4e}.dot.inactive{background:#a9b8c8}.map-label{fill:#fff;stroke:#d9e5f1;filter:drop-shadow(0 4px 8px rgba(55,88,120,.12))}.indo-map text{font-size:10px;fill:#314760}.map-legend{display:flex;justify-content:center;gap:18px;font-size:10px;color:var(--muted)}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.sla-number{font-size:30px;color:var(--green);font-weight:900}.line-chart{height:130px;border-bottom:1px solid #dfe8f2;display:flex;align-items:flex-end;gap:10px;padding:0 10px;background:linear-gradient(to top,#f6fff9,#fff)}.line-chart span{flex:1;background:linear-gradient(#14ae69,#77d9a8);border-radius:6px 6px 0 0;min-height:10px}
.notify-stat{display:grid;grid-template-columns:1fr auto auto;gap:8px;border-bottom:1px solid #edf2f7;padding:10px 0;font-size:11px}.summary-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.summary-cards div{background:#f5f9fe;border-radius:12px;padding:15px;text-align:center}.summary-cards strong{display:block;font-size:25px}.summary-cards span{font-size:11px;color:var(--muted)}
.kanban{display:grid;grid-template-columns:repeat(7,minmax(220px,1fr));gap:10px;overflow:auto;padding-bottom:10px}.kanban-col{background:#eff5fb;border:1px solid #dbe7f3;border-radius:12px;padding:9px;min-height:500px}.kanban-col header{display:flex;justify-content:space-between;font-size:12px;padding:4px 3px 10px}.kanban-col header span{background:#fff;border-radius:99px;padding:2px 7px}.ticket-card{display:block;background:#fff;border:1px solid #dfe9f4;border-radius:10px;padding:10px;margin-bottom:8px;color:var(--text);box-shadow:0 5px 14px rgba(60,85,115,.05)}.ticket-card p{font-size:12px;margin:8px 0}.ticket-card small{font-size:10px;color:var(--muted)}.job-card{color:var(--text)}.job-card h3{font-size:15px}.job-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.chip{padding:6px 9px;background:#eef4fa;border-radius:99px;color:#49647f;font-size:10px}.chip.active{background:#dcecff;color:#1262d4;font-weight:800}.code-block{background:#10213a;color:#dcecff;border-radius:11px;padding:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.7}.token-box{display:block;padding:10px;margin-top:8px;background:#14233b;color:#fff;border-radius:8px;overflow-wrap:anywhere}.truncate{max-width:320px;overflow:hidden;text-overflow:ellipsis}
.login-body{display:grid;place-items:center;background:radial-gradient(circle at top,#e8f7ff,#f6faff 50%,#ecfff5);padding:20px}.login-card{width:min(420px,100%);background:#fff;border:1px solid #dce8f4;border-radius:22px;box-shadow:0 24px 70px rgba(42,75,110,.14);padding:30px}.login-card h1{margin:22px 0 5px}.brand.large .brand-mark{width:48px;height:48px}.brand.large strong{font-size:25px}
hr{border:0;border-top:1px solid #e9eff6;margin:14px 0}
@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.grid.three{grid-template-columns:1fr 1fr}.detail-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-240px;width:220px;transition:.2s;box-shadow:0 0 40px #96a9bd}.sidebar.open{left:0}.grid.two,.main-grid,.ticket-layout{grid-template-columns:1fr}.span-2{grid-column:auto}.actions-panel{position:static}.kpi-grid{grid-template-columns:1fr 1fr}.content{padding:14px}.top-user div{display:none}}
@media(max-width:620px){.kpi-grid,.grid.three,.form-grid,.detail-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.global-search{display:none}.page-head{align-items:flex-start;flex-direction:column}.map-legend{flex-wrap:wrap}.kpi-grid.compact{grid-template-columns:1fr}}

.evidence-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}.evidence-item{display:grid;gap:3px;padding:10px;border:1px solid #dfe9f4;border-radius:10px;background:#f9fcff;color:var(--text)}.evidence-item strong{font-size:10px;color:var(--blue)}.evidence-item span{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.evidence-item small{font-size:9px;color:var(--muted)}
@media(max-width:800px){.evidence-grid{grid-template-columns:1fr 1fr}}
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:12px;font-size:11px;color:var(--muted)}.pager form label{display:flex;align-items:center;gap:7px}.pager select{border:1px solid #d3dfec;border-radius:8px;padding:6px;background:#fff}.pager-links{display:flex;align-items:center;gap:8px}@media(max-width:650px){.pager{align-items:flex-start;flex-direction:column}}