:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#edf5fb;background:#06121b;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 70% 0,#123044 0,#081823 36%,#05111a 72%);min-height:100vh}button,input{font:inherit}.app-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.sidebar{background:linear-gradient(180deg,#071824,#06121b);border-right:1px solid #173244;padding:18px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;gap:10px;align-items:center;padding:0 8px 24px}.brand-mark{width:42px;height:42px;display:grid;place-items:center;font-weight:900;font-size:26px;color:#04120a;background:#52f384;clip-path:polygon(0 0,65% 0,100% 50%,65% 100%,0 100%,38% 50%)}.brand strong{display:block;font-size:24px;letter-spacing:1px}.brand span{display:block;color:#47f279;font-size:12px;font-weight:800;letter-spacing:.8px}.brand small{display:block;color:#7f9caf;font-size:11px;margin-top:2px}.sidebar nav{display:grid;gap:4px}.sidebar nav button{border:0;color:#c5d5df;background:transparent;display:flex;gap:12px;align-items:center;padding:11px 14px;border-radius:9px;text-align:left;cursor:pointer}.sidebar nav button b{width:20px;text-align:center;color:#8fb0c2}.sidebar nav button:hover,.sidebar nav button.active{background:linear-gradient(90deg,#0e6036,#0c412d);color:white}.sidebar nav button.active{box-shadow:inset 3px 0 #35f274}.section-label{font-size:10px;letter-spacing:1.2px;color:#668699;margin:24px 12px 8px;padding-bottom:8px;border-bottom:1px solid #173244}.sidebar-footer{margin-top:auto;color:#86a1b1;font-size:12px;padding:18px 12px}.sidebar-footer small{margin-left:16px}.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#31ef72;box-shadow:0 0 10px #31ef7255;margin-right:8px}.status-dot.waiting{background:#647e8d;box-shadow:none}.status-dot.error{background:#ff5e66;box-shadow:0 0 10px #ff5e6644}main{min-width:0}.topbar{height:76px;border-bottom:1px solid #19384b;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#0a1c29dd;backdrop-filter:blur(14px)}.topbar>div:first-child strong,.topbar small{display:block}.topbar>div:first-child strong{font-size:19px}.topbar small{font-size:11px;color:#8ea7b6;margin-top:3px}.top-actions{display:flex;align-items:center;gap:16px}.top-actions label{width:310px;border:1px solid #29485b;border-radius:8px;padding:9px 12px;display:flex;gap:8px;align-items:center;background:#071621}.top-actions input{width:100%;border:0;outline:0;background:transparent;color:#e9f4fa}.bell{font-size:7px;color:#38ef73}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#183347;border:1px solid #3c5a6d}.hero{min-height:145px;padding:28px 30px 20px;display:flex;justify-content:space-between;align-items:flex-start;background:linear-gradient(180deg,#07141aaa,#08151ddd),radial-gradient(circle at 80% 20%,#1c3d45,#07121a 58%);border-bottom:1px solid #173244}.hero>div:first-child>span{font-size:11px;letter-spacing:1.5px;color:#9ab0bd;border-bottom:3px solid #35ef70;padding-bottom:8px}.hero h1{margin:14px 0 3px;font-size:39px;line-height:1}.hero h1 b{font-weight:700}.hero p{margin:8px 0;color:#c7d4dc}.operational{font-size:12px;color:#34ef72;margin-top:8px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px 28px}.stat-card,.panel,.module-card{background:linear-gradient(180deg,#0d2534,#091c29);border:1px solid #244354;border-radius:9px;box-shadow:0 8px 24px #00000018}.stat-card{display:flex;gap:14px;align-items:center;padding:14px 16px}.icon-box,.module-icon{width:54px;height:54px;border-radius:12px;display:grid;place-items:center;background:#0b4b2f;color:#3af078;font-weight:800}.stat-card span,.stat-card small{display:block;color:#9bb0bd}.stat-card strong{display:block;font-size:24px;margin:2px 0}.stat-card small{color:#36ed72}.dashboard-grid{display:grid;grid-template-columns:1.15fr 1.15fr .9fr;gap:12px;padding:0 28px}.panel{padding:14px 16px;min-height:260px}.panel-title{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid #213f50;padding-bottom:10px;margin-bottom:6px}.panel-title h2{font-size:15px;margin:0}.panel-title p{font-size:11px;color:#8da4b1;margin:4px 0 0}.panel-title button{background:#0d2230;border:1px solid #355468;color:#d8e4eb;padding:7px 10px;border-radius:7px;font-size:11px}.system-row,.health-row{display:grid;align-items:center;border-bottom:1px solid #173344;min-height:39px;font-size:12px}.system-row{grid-template-columns:1.45fr .7fr .8fr .55fr}.system-row em,.health-row em{font-style:normal;color:#38ef73}.system-row em.muted,.health-row em.muted{color:#7f99a8}.system-row>span:first-child,.health-row>span:first-child{display:flex;align-items:center}.system-row .status-dot,.health-row .status-dot{width:8px;height:8px;margin-right:9px}.health-row{grid-template-columns:1fr auto}.usage svg{width:100%;height:185px;overflow:visible}.grid-lines path{stroke:#173747;stroke-width:1;fill:none}.line{stroke:#38ef73;stroke-width:3;fill:none}.area{fill:url(#fill)}.modules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 28px 28px}.module-card{border:1px solid #244354;color:#eef6fa;padding:13px;display:grid;grid-template-columns:48px 1fr auto;align-items:center;text-align:left;cursor:pointer}.module-card:hover{border-color:#36d96b;transform:translateY(-1px)}.module-icon{width:44px;height:44px;background:#112e3e;color:#dce9ef}.module-card strong,.module-card small{display:block}.module-card small{color:#8ea7b5;margin-top:3px;font-size:11px}.module-card>b{font-size:24px;color:#6d8a9b}@media(max-width:1280px){.app-shell{grid-template-columns:220px 1fr}.dashboard-grid{grid-template-columns:1fr 1fr}.health{grid-column:1/-1}.stats-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.app-shell{display:block}.sidebar{position:relative;width:100%;height:auto}.sidebar nav{grid-template-columns:repeat(2,1fr)}.sidebar-footer{display:none}.topbar{height:auto;padding:16px;gap:15px}.top-actions label{display:none}.hero{padding:22px 16px}.hero h1{font-size:30px}.stats-grid,.dashboard-grid,.modules-grid{grid-template-columns:1fr;padding-left:16px;padding-right:16px}.health{grid-column:auto}.operational{display:none}}
[hidden]{display:none!important}.auth-gate{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 75% 10%,#14364a 0,#081823 38%,#041018 78%)}.auth-card{width:min(460px,100%);background:linear-gradient(180deg,#0d2534,#081923);border:1px solid #27495c;border-radius:14px;padding:28px;box-shadow:0 30px 90px #0008}.auth-brand{padding:0 0 24px;border-bottom:1px solid #1d3a4a;margin-bottom:24px}.auth-card h1{margin:0 0 8px;font-size:26px}.auth-card p{margin:0 0 22px;color:#91a9b7;line-height:1.55}.auth-loading{padding:16px 0}.auth-form{display:grid;gap:15px}.auth-form label{display:grid;gap:7px;color:#bdd0db;font-size:12px;font-weight:700;letter-spacing:.2px}.auth-form input{width:100%;border:1px solid #315165;background:#071620;color:#eef6fa;border-radius:8px;padding:12px 13px;outline:0}.auth-form input:focus{border-color:#36ef72;box-shadow:0 0 0 3px #36ef7217}.auth-form small{color:#7f99a8;line-height:1.4}.auth-form button,.logout-btn{border:1px solid #2ce76a;background:linear-gradient(180deg,#1e9a4d,#126c39);color:white;border-radius:8px;padding:11px 14px;font-weight:800;cursor:pointer}.auth-form button:hover,.logout-btn:hover{filter:brightness(1.12)}.auth-error{border:1px solid #a94545;background:#451b21;color:#ffd5d5;border-radius:8px;padding:10px 12px;margin-bottom:14px;font-size:12px}.logout-btn{padding:7px 11px;font-size:11px;background:#0e2937;border-color:#355568;color:#d7e4eb}

/* v0.3.0 control-plane data modules */
.view{min-height:calc(100vh - 76px)}.page-head{min-height:132px;padding:26px 30px 22px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;background:linear-gradient(180deg,#07141aaa,#08151ddd),radial-gradient(circle at 80% 20%,#1c3d45,#07121a 58%);border-bottom:1px solid #173244}.page-head>div:first-child>span{font-size:10px;letter-spacing:1.5px;color:#91aab8;border-bottom:3px solid #35ef70;padding-bottom:7px}.page-head h1{margin:14px 0 5px;font-size:30px}.page-head p{margin:0;color:#98adba}.head-actions{display:flex;gap:8px;margin-top:4px}.content-pad{padding:18px 28px 30px;display:grid;gap:14px}.content-pad.two-col{grid-template-columns:minmax(0,1.55fr) minmax(310px,.75fr);align-items:start}.data-panel{min-height:0}.pill{border:1px solid #34566a;background:#0a1b27;border-radius:999px;padding:5px 9px;font-size:10px;color:#a9beca}.primary-btn,.secondary-btn,.table-btn,.icon-btn{border-radius:8px;cursor:pointer;font-weight:700}.primary-btn{border:1px solid #2ce76a;background:linear-gradient(180deg,#1e9a4d,#126c39);color:white;padding:10px 14px}.secondary-btn{border:1px solid #355568;background:#0d2533;color:#dce8ef;padding:10px 14px}.table-btn{border:1px solid #355568;background:#0b202d;color:#cfe0e9;padding:6px 9px;font-size:11px}.primary-btn:hover,.secondary-btn:hover,.table-btn:hover{filter:brightness(1.12);border-color:#35ef70}.table-wrap{width:100%;overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;color:#7894a4;font-size:10px;letter-spacing:.6px;text-transform:uppercase;padding:10px;border-bottom:1px solid #294858;white-space:nowrap}td{padding:11px 10px;border-bottom:1px solid #173545;color:#cfdae1;vertical-align:middle}td strong,td small{display:block}td small{color:#7895a6;margin-top:3px}.actions{text-align:right;white-space:nowrap}.empty{text-align:center;color:#7895a6;padding:32px}.url-cell{max-width:210px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.badge{display:inline-flex;align-items:center;border:1px solid #355568;border-radius:999px;padding:4px 8px;font-size:10px;text-transform:capitalize;white-space:nowrap}.badge-active,.badge-online,.badge-production,.badge-success{border-color:#23834c;background:#0b3a27;color:#53ef83}.badge-suspended,.badge-disabled,.badge-offline,.badge-failure{border-color:#81404b;background:#3b1d25;color:#ff9ca8}.badge-maintenance,.badge-staging,.badge-operator{border-color:#8b7036;background:#372d16;color:#f6d271}.badge-development,.badge-admin{border-color:#356888;background:#142f43;color:#82c9f2}.badge-super_admin{border-color:#4c9a68;background:#123724;color:#60f28d}.badge-viewer{border-color:#566777;background:#1e2a33;color:#b9c7d0}.notice{border:1px solid #2f8852;background:#123521;color:#79f0a0;border-radius:8px;padding:10px 12px}.notice.error{border-color:#9d434b;background:#421e24;color:#ffb6bd}.role-panel{position:sticky;top:92px}.role-card{border-bottom:1px solid #1f3e4f;padding:12px 2px}.role-card:last-child{border-bottom:0}.role-card>div{display:flex;justify-content:space-between;gap:10px}.role-card strong{text-transform:capitalize}.role-card span{color:#7894a4;font-size:10px}.role-card ul{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:4px;color:#9db3c0;font-size:11px}.role-card li{color:#8fb7a0}.coming-soon{text-align:center;padding:55px 25px;max-width:720px;margin:0 auto}.coming-soon .module-icon{margin:0 auto 14px}.coming-soon p{color:#8fa6b4;line-height:1.7}.modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:#000a;backdrop-filter:blur(5px)}.modal-card{position:relative;z-index:1;width:min(650px,100%);max-height:90vh;overflow:auto;background:linear-gradient(180deg,#0d2534,#081923);border:1px solid #315268;border-radius:12px;box-shadow:0 30px 90px #000b}.modal-head{display:flex;justify-content:space-between;align-items:start;padding:18px 20px;border-bottom:1px solid #1e3c4d}.modal-head small{color:#3aef75;letter-spacing:1px}.modal-head h2{margin:4px 0 0}.icon-btn{width:34px;height:34px;border:1px solid #355568;background:#0b202d;color:#bcd0db;font-size:22px}.modal-form{padding:18px 20px 20px;display:grid;grid-template-columns:1fr 1fr;gap:14px}.modal-form label{display:grid;gap:6px;color:#aec3cf;font-size:11px;font-weight:700}.modal-form input,.modal-form select,.modal-form textarea{width:100%;border:1px solid #315165;background:#071620;color:#eef6fa;border-radius:8px;padding:10px 11px;outline:0}.modal-form textarea{resize:vertical}.modal-form input:focus,.modal-form select:focus,.modal-form textarea:focus{border-color:#36ef72;box-shadow:0 0 0 3px #36ef7217}.modal-form .full{grid-column:1/-1}.modal-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;padding-top:6px}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#5ce887;font-size:10px}@media(max-width:1100px){.content-pad.two-col{grid-template-columns:1fr}.role-panel{position:static}}@media(max-width:900px){.page-head{padding:20px 16px;display:block}.head-actions{margin-top:16px}.content-pad{padding:14px 16px 24px}.modal-form{grid-template-columns:1fr}.modal-form .full{grid-column:auto}}

/* v0.3.1 branding + bilingual UI */
.brand-icon{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 0 10px #b6ff3b22)}
.auth-logo-wrap{display:flex;justify-content:center;align-items:center;border-bottom:1px solid #1d3a4a;margin:4px 0 24px;padding:0 12px 18px}.auth-logo{width:min(330px,92%);height:auto;display:block;filter:drop-shadow(0 12px 28px #0007)}
.auth-card{position:relative}.auth-lang{position:absolute;top:14px;right:14px;z-index:2}.lang-switch{display:inline-flex;border:1px solid #315165;border-radius:8px;overflow:hidden;background:#071620}.lang-switch button{border:0;background:transparent;color:#87a4b5;padding:7px 9px;font-size:10px;font-weight:900;letter-spacing:.6px;cursor:pointer}.lang-switch button+button{border-left:1px solid #315165}.lang-switch button.active{background:#b6ff3b;color:#07131d}.top-actions .lang-switch{flex:0 0 auto}.brand{padding-bottom:20px}.brand span{color:#b6ff3b}.sidebar nav button.active{box-shadow:inset 3px 0 #b6ff3b}.auth-form button,.primary-btn{border-color:#a8f836}.auth-form input:focus{border-color:#b6ff3b;box-shadow:0 0 0 3px #b6ff3b18}@media(max-width:900px){.top-actions .lang-switch{display:inline-flex}.auth-logo{width:min(280px,88%)}}
