/* ==========================================================================
   AWS Management Console recreation — Cloudscape-inspired theme
   ========================================================================== */
:root{
  --font: "Amazon Ember","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono: "Amazon Ember Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --grey-900:#16191f; --grey-700:#414750; --grey-600:#5f6b7a; --grey-550:#687078;
  --grey-500:#7d8998; --grey-400:#9ba7b6; --grey-300:#d5dbdb; --grey-200:#e9ebed;
  --grey-100:#f2f3f3; --grey-50:#fafafa;
  --blue-600:#0972d3; --blue-700:#033160; --blue-500:#539fe5; --blue-100:#f1faff; --blue-50:#f2f8fd;
  --red-600:#d91515; --red-700:#7c2718; --red-100:#fdf3f1;
  --green-600:#037f0c; --green-100:#f2f8f0; --green-700:#1a520f;
  --amber-600:#8a6400; --amber-100:#fdf6e5; --amber-500:#b2911c;
  --topnav-bg:#0f1b2a; --topnav-hover:rgba(255,255,255,.14);
  --border:1px solid var(--grey-200);
  --border-d:1px solid var(--grey-300);
  --radius:8px;
  --shadow-pop:0 0 1px rgba(0,7,22,.12),0 8px 24px rgba(0,7,22,.25);
  --shadow-modal:0 4px 28px rgba(0,7,22,.35);
  --focus-ring:0 0 0 2px #fff,0 0 0 4px var(--blue-600);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--font);font-size:14px;line-height:1.45;color:var(--grey-900);background:var(--grey-100);-webkit-font-smoothing:antialiased}
a{color:var(--blue-600);text-decoration:none;cursor:pointer}
a:hover{color:var(--blue-700);text-decoration:underline}
h1{font-size:24px;font-weight:700;line-height:1.25;margin:0}
h2{font-size:18px;font-weight:700;margin:0}
h3{font-size:16px;font-weight:700;margin:0}
p{margin:0}
code,.mono{font-family:var(--mono);font-size:12.5px}
::selection{background:#bfe0fb}

/* ---------- boot splash ---------- */
.boot-splash{position:fixed;inset:0;background:var(--topnav-bg);display:flex;flex-direction:column;gap:26px;align-items:center;justify-content:center;z-index:4000}
.boot-spinner{width:26px;height:26px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#ff9900;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- top navigation ---------- */
.topnav{position:fixed;top:0;left:0;right:0;height:48px;background:var(--topnav-bg);display:flex;align-items:center;padding:0 8px;z-index:1000;color:#fff;font-size:14px}
.topnav .tn-item{display:flex;align-items:center;gap:6px;height:40px;padding:0 10px;border-radius:6px;color:#fff;cursor:pointer;white-space:nowrap;border:none;background:transparent;font-family:var(--font);font-size:14px}
.topnav .tn-item:hover{background:var(--topnav-hover)}
.topnav .tn-item:focus-visible,.topnav button:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tn-logo{display:flex;align-items:center;padding:0 10px;height:48px;cursor:pointer}
.tn-hamburger{display:none;width:40px;height:40px;align-items:center;justify-content:center;background:none;border:none;color:#fff;cursor:pointer;border-radius:6px}
.tn-hamburger:hover{background:var(--topnav-hover)}
.tn-spacer{flex:1}
.tn-icon-btn{position:relative;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:none;border:none;color:#d5dbdb;cursor:pointer}
.tn-icon-btn:hover{background:var(--topnav-hover);color:#fff}
.tn-badge{position:absolute;top:2px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#d91515;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--topnav-bg)}
.tn-account{max-width:230px;overflow:hidden;text-overflow:ellipsis}
.tn-caret{font-size:10px;color:#d5dbdb}

/* unified search */
.tn-search{position:relative;flex:0 1 520px;margin:0 10px}
.tn-search input{width:100%;height:34px;border-radius:8px;border:1px solid #46505e;background:#232f3e;color:#fff;padding:0 36px 0 34px;font-family:var(--font);font-size:14px;outline:none}
.tn-search input::placeholder{color:#aab7b8}
.tn-search input:focus{border-color:var(--blue-500);box-shadow:0 0 0 1px var(--blue-500);background:#2a3646}
.tn-search .search-icon{position:absolute;left:10px;top:8px;color:#aab7b8;pointer-events:none}
.tn-search .search-kbd{position:absolute;right:8px;top:8px;color:#aab7b8;font-size:11px;border:1px solid #46505e;border-radius:4px;padding:1px 5px}
.search-dropdown{position:absolute;top:40px;left:0;right:0;background:#fff;color:var(--grey-900);border-radius:8px;box-shadow:var(--shadow-pop);max-height:70vh;overflow:auto;padding:6px 0;z-index:1200}
.sd-section{padding:6px 16px 4px;font-size:12px;font-weight:700;color:var(--grey-600);text-transform:uppercase;letter-spacing:.4px}
.sd-item{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;color:var(--grey-900)}
.sd-item .sd-sub{font-size:12px;color:var(--grey-600);margin-left:auto;overflow:hidden;text-overflow:ellipsis}
.sd-item.active{background:var(--blue-100)}
.sd-item.active .sd-sub{color:var(--grey-700)}
.sd-none{padding:14px 16px;color:var(--grey-600)}
.svc-dot{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;font-size:11px;font-weight:700}

/* mega dropdowns from topnav */
.tn-dropdown{position:fixed;top:46px;background:#fff;color:var(--grey-900);border-radius:8px;box-shadow:var(--shadow-pop);z-index:1150;overflow:hidden}
.services-menu{width:min(1060px,94vw);max-height:78vh;display:flex;flex-direction:column}
.services-menu .sm-search{padding:12px 16px;border-bottom:var(--border)}
.services-menu .sm-search input{width:100%;height:34px;border:var(--border-d);border-radius:8px;padding:0 12px;font-family:var(--font);font-size:14px;outline:none}
.services-menu .sm-search input:focus{border-color:var(--blue-600);box-shadow:0 0 0 1px var(--blue-600)}
.sm-body{overflow:auto;padding:12px 16px 20px}
.sm-section-title{font-size:14px;font-weight:700;padding:14px 0 8px;color:var(--grey-900)}
.sm-recent{display:flex;flex-wrap:wrap;gap:8px}
.sm-chip{display:flex;align-items:center;gap:8px;border:var(--border-d);border-radius:8px;padding:6px 10px;cursor:pointer;background:#fff}
.sm-chip:hover{border-color:var(--blue-600);background:var(--blue-100)}
.sm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 24px}
.sm-cat{font-size:12px;font-weight:700;color:var(--grey-600);padding:10px 0 4px;text-transform:none}
.sm-svc{display:block;padding:3px 0;color:var(--blue-600);font-size:14px;cursor:pointer}
.sm-svc:hover{text-decoration:underline}

/* region dropdown */
.region-menu{width:360px;max-height:70vh;overflow:auto}
.region-menu .rm-head{padding:12px 16px;font-weight:700;border-bottom:var(--border);font-size:14px}
.region-item{display:flex;align-items:flex-start;gap:10px;padding:9px 16px;cursor:pointer}
.region-item:hover{background:var(--blue-100)}
.region-item .ri-main{font-weight:700;font-size:14px}
.region-item .ri-sub{font-size:12px;color:var(--grey-600)}
.region-item .ri-dot{margin-top:6px;width:8px;height:8px;border-radius:50%;background:var(--grey-300);flex:none}
.region-item.current .ri-dot{background:var(--green-600)}
.region-item .ri-check{margin-left:auto;color:var(--blue-600);visibility:hidden}
.region-item.current .ri-check{visibility:visible}

/* account dropdown */
.account-menu{width:340px}
.account-menu .am-head{padding:12px 16px;border-bottom:var(--border)}
.am-row{display:flex;justify-content:space-between;align-items:center;padding:7px 16px;font-size:14px}
.am-row .am-label{color:var(--grey-600)}
.am-link{display:block;padding:9px 16px;color:var(--grey-900);cursor:pointer;font-size:14px}
.am-link:hover{background:var(--blue-100)}
.am-sep{border-top:var(--border);margin:4px 0}
.am-signout{color:var(--grey-900);display:flex;align-items:center;gap:8px}

/* notifications panel */
.notif-overlay{position:fixed;inset:0;background:rgba(22,25,31,.4);z-index:1290;opacity:0;transition:opacity .18s}
.notif-overlay.open{opacity:1}
.notif-panel{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:94vw;background:#fff;z-index:1300;box-shadow:var(--shadow-pop);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .22s ease}
.notif-panel.open{transform:translateX(0)}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:var(--border)}
.notif-body{flex:1;overflow:auto}
.notif-item{display:flex;gap:12px;padding:14px 16px;border-bottom:var(--border);cursor:pointer}
.notif-item.unread{background:var(--blue-50)}
.notif-item:hover{background:var(--blue-100)}
.notif-ico{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.notif-item .ni-title{font-weight:700;font-size:14px}
.notif-item .ni-msg{font-size:13px;color:var(--grey-700);margin-top:2px}
.notif-item .ni-time{font-size:12px;color:var(--grey-600);margin-top:4px}
.notif-empty{padding:48px 24px;text-align:center;color:var(--grey-600)}

/* ---------- app layout ---------- */
.app-shell{padding-top:48px;min-height:100vh}
.layout{display:flex;align-items:stretch;min-height:calc(100vh - 48px)}
.sidenav{width:280px;flex:none;background:#fff;border-right:var(--border);min-height:calc(100vh - 48px);transition:margin-left .2s ease}
.sidenav.collapsed{margin-left:-280px}
.sidenav-inner{position:sticky;top:48px;max-height:calc(100vh - 48px);overflow:auto;padding:8px 0 24px}
.snav-head{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;font-size:16px;font-weight:700}
.snav-search{padding:4px 12px 10px}
.snav-search input{width:100%;height:32px;border:var(--border-d);border-radius:8px;padding:0 10px;font-family:var(--font);font-size:14px;outline:none}
.snav-search input:focus{border-color:var(--blue-600);box-shadow:0 0 0 1px var(--blue-600)}
.snav-group{border-bottom:var(--border);padding:4px 0}
.snav-item{display:flex;align-items:center;gap:8px;padding:7px 16px;color:var(--grey-900);cursor:pointer;font-size:14px;border-left:3px solid transparent}
.snav-item:hover{background:var(--grey-100)}
.snav-item.active{background:var(--blue-100);border-left-color:var(--blue-600);font-weight:700;color:var(--blue-700)}
.snav-item .expand{margin-left:auto;color:var(--grey-600)}
.snav-sub .snav-item{padding-left:32px;font-size:14px}
.main{flex:1;min-width:0;padding:0 20px 40px}

/* breadcrumbs */
.breadcrumbs{display:flex;align-items:center;gap:6px;padding:12px 0 2px;font-size:14px;color:var(--grey-600);flex-wrap:wrap}
.breadcrumbs a{color:var(--blue-600)}
.breadcrumbs .sep{color:var(--grey-400)}
.breadcrumbs .current{color:var(--grey-600)}

/* ---------- containers / headers ---------- */
.container{background:#fff;border:var(--border);border-radius:var(--radius);margin-top:14px;overflow:hidden}
.container-pad{padding:16px 20px}
.page-head{display:flex;align-items:flex-start;gap:12px;padding:14px 0 4px;flex-wrap:wrap}
.page-head .ph-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-head .ph-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.page-sub{color:var(--grey-600);font-size:14px;margin-top:4px}
.counter-label{color:var(--grey-600);font-weight:400;font-size:14px}
.info-link{color:var(--blue-600);font-size:14px;cursor:pointer;white-space:nowrap}
.info-link:hover{text-decoration:underline}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:8px;border:1px solid var(--grey-400);background:#fff;color:var(--grey-900);font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.btn:hover:not(:disabled){border-color:var(--grey-600);background:var(--grey-50)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.btn-primary:hover:not(:disabled){background:#0b5cad;border-color:#0b5cad}
.btn-normal-danger{color:var(--red-600);border-color:var(--red-600)}
.btn-normal-danger:hover:not(:disabled){background:var(--red-100);border-color:var(--red-600)}
.btn-link{border:none;background:none;color:var(--blue-600);height:auto;padding:0;font-weight:400}
.btn-link:hover:not(:disabled){text-decoration:underline;background:none}
.btn-icon{width:30px;height:30px;padding:0;justify-content:center;border:none;background:none;color:var(--grey-600);border-radius:6px}
.btn-icon:hover:not(:disabled){background:var(--grey-100);color:var(--grey-900)}
.btn .caret{font-size:9px}
.btn-sm{height:28px;font-size:13px;padding:0 10px}

/* ---------- tables ---------- */
.table-wrap{margin-top:14px;border:var(--border);border-radius:var(--radius);background:#fff;overflow:hidden}
.table-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:var(--border);flex-wrap:wrap}
.table-head h1,.table-head h2{display:flex;align-items:baseline;gap:8px}
.table-head .th-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.table-tools{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:var(--border);flex-wrap:wrap}
.table-tools .tt-filter{flex:1;min-width:200px;max-width:460px;position:relative}
.tt-filter input{width:100%;height:32px;border:var(--border-d);border-radius:8px;padding:0 12px;font-family:var(--font);font-size:14px;outline:none;background:#fff}
.tt-filter input:focus{border-color:var(--blue-600);box-shadow:0 0 0 1px var(--blue-600)}
.tt-tools-right{margin-left:auto;display:flex;gap:6px;align-items:center}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;padding:8px 16px 0}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--blue-100);border:1px solid var(--blue-500);color:var(--blue-700);border-radius:16px;padding:3px 10px;font-size:13px}
.chip button{background:none;border:none;color:var(--blue-700);cursor:pointer;font-size:13px;line-height:1;padding:0;display:flex}
.tbl-scroll{overflow:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{background:#fff;text-align:left;font-weight:700;color:var(--grey-900);padding:10px 12px;border-bottom:2px solid var(--grey-300);white-space:nowrap;user-select:none}
.tbl th .sort-ind{color:var(--grey-500);font-size:10px;margin-left:4px}
.tbl th.sortable{cursor:pointer}
.tbl td{padding:10px 12px;border-bottom:var(--border);vertical-align:middle;color:var(--grey-900)}
.tbl tbody tr:hover{background:var(--grey-50)}
.tbl tbody tr.selected{background:var(--blue-100)}
.tbl tbody tr.selected td{border-bottom-color:#b3d4f0}
.tbl .cell-main{font-weight:700}
.tbl .cell-sub{font-size:12px;color:var(--grey-600)}
.tbl .nowrap{white-space:nowrap}
.tbl .truncate{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue-600);cursor:pointer;vertical-align:middle}
.tbl input[type=radio]{width:16px;height:16px;accent-color:var(--blue-600);cursor:pointer;vertical-align:middle}
.table-foot{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:10px 16px;border-top:var(--border);color:var(--grey-600);font-size:14px}
.pagination{display:flex;align-items:center;gap:2px}
.pg-btn{width:30px;height:30px;border:none;background:none;border-radius:6px;color:var(--grey-900);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px}
.pg-btn:hover:not(:disabled){background:var(--grey-100)}
.pg-btn.current{border:1px solid var(--blue-600);color:var(--blue-600);font-weight:700}
.pg-btn:disabled{color:var(--grey-400);cursor:default}
.tbl-empty{padding:48px 20px;text-align:center;color:var(--grey-600)}
.tbl-empty .te-title{font-weight:700;color:var(--grey-900);font-size:15px;margin-bottom:4px}

/* ---------- status indicators & badges ---------- */
.status{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;white-space:nowrap}
.status .st-ico{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px}
.st-success{color:var(--green-600)}
.st-error{color:var(--red-600)}
.st-warning{color:var(--amber-600)}
.st-info{color:var(--blue-600)}
.st-stopped{color:var(--grey-600)}
.st-spinner{width:13px;height:13px;border:2px solid #b3d4f0;border-top-color:var(--blue-600);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:1px 10px;font-size:12px;font-weight:700;white-space:nowrap;flex:none}
.badge-blue{background:var(--blue-100);color:var(--blue-700);border:1px solid #b3d4f0}
.badge-green{background:var(--green-100);color:var(--green-700);border:1px solid #b7dfb9}
.badge-red{background:var(--red-100);color:var(--red-700);border:1px solid #f5c0b5}
.badge-grey{background:var(--grey-100);color:var(--grey-700);border:1px solid var(--grey-300)}
.badge-sev{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:4px;padding:1px 6px;color:#fff}

/* copy button */
.copy-wrap{display:inline-flex;align-items:center;gap:6px;min-width:0}
.copy-btn{opacity:0;border:none;background:none;color:var(--grey-600);cursor:pointer;padding:2px;border-radius:4px;display:inline-flex;flex:none}
td:hover .copy-btn,.copy-wrap:hover .copy-btn,.copy-btn.copied{opacity:1}
.copy-btn:hover{background:var(--grey-200);color:var(--grey-900)}
.copy-btn.copied{color:var(--green-600)}
.copy-toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--grey-900);color:#fff;padding:8px 16px;border-radius:8px;font-size:13px;z-index:3000;box-shadow:var(--shadow-modal)}

/* ---------- flashbar ---------- */
.flashbar{position:sticky;top:48px;z-index:900;display:flex;flex-direction:column;gap:8px;margin:0 -20px;padding:10px 20px 0}
.flash{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:8px;font-size:14px;box-shadow:0 2px 8px rgba(0,7,22,.16);animation:flashin .22s ease;background:#fff;border:1px solid}
@keyframes flashin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.flash-success{border-color:#b7dfb9;background:var(--green-100)}
.flash-error{border-color:#f5c0b5;background:var(--red-100)}
.flash-warning{border-color:#ecd9a0;background:var(--amber-100)}
.flash-info{border-color:#b3d4f0;background:var(--blue-100)}
.flash .fl-ico{flex:none;margin-top:1px}
.flash-success .fl-ico{color:var(--green-600)}
.flash-error .fl-ico{color:var(--red-600)}
.flash-warning .fl-ico{color:var(--amber-600)}
.flash-info .fl-ico{color:var(--blue-600)}
.flash .fl-body{flex:1;min-width:0}
.flash .fl-head{font-weight:700}
.flash .fl-msg{color:var(--grey-700);margin-top:2px}
.flash .fl-dismiss{border:none;background:none;color:var(--grey-600);cursor:pointer;padding:2px;border-radius:4px}
.flash .fl-dismiss:hover{background:rgba(0,0,0,.06)}
.fl-progress{height:3px;background:rgba(0,0,0,.08);border-radius:2px;margin-top:8px;overflow:hidden}
.fl-progress>div{height:100%;background:var(--blue-600);transition:width .2s linear}

/* ---------- forms ---------- */
.form-row{margin-bottom:16px}
.form-label{display:block;font-weight:700;font-size:14px;margin-bottom:4px}
.form-label .req{color:var(--red-600);margin-left:2px}
.form-desc{font-size:13px;color:var(--grey-600);margin-bottom:6px}
.input,select.input,textarea.input{width:100%;max-width:560px;border:var(--border-d);border-radius:8px;padding:7px 12px;font-family:var(--font);font-size:14px;outline:none;background:#fff;color:var(--grey-900)}
.input:focus{border-color:var(--blue-600);box-shadow:0 0 0 1px var(--blue-600)}
.input:disabled{background:var(--grey-100);color:var(--grey-600)}
.input.invalid{border-color:var(--red-600)}
textarea.input{font-family:var(--mono);font-size:13px;line-height:1.5;resize:vertical}
.form-error{color:var(--red-600);font-size:13px;margin-top:4px;display:flex;gap:6px;align-items:flex-start}
.form-hint{color:var(--grey-600);font-size:12px;margin-top:4px}
.radio-row,.check-row{display:flex;align-items:flex-start;gap:8px;padding:6px 0;font-size:14px}
.radio-row input,.check-row input{margin-top:2px;accent-color:var(--blue-600)}
.radio-card{border:var(--border-d);border-radius:8px;padding:12px 14px;display:flex;gap:10px;cursor:pointer;max-width:720px;margin-bottom:10px;background:#fff}
.radio-card:hover{border-color:var(--blue-500)}
.radio-card.selected{border-color:var(--blue-600);background:var(--blue-50);box-shadow:0 0 0 1px var(--blue-600)}
.radio-card .rc-title{font-weight:700}
.radio-card .rc-desc{color:var(--grey-600);font-size:13px;margin-top:2px}
.select-wrap{position:relative;display:inline-block;max-width:560px;width:100%}
.select-wrap::after{content:"▾";position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--grey-600);pointer-events:none;font-size:11px}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:28px}

/* ---------- modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(22,25,31,.55);z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 16px;animation:fadein .15s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:12px;box-shadow:var(--shadow-modal);width:640px;max-width:100%;max-height:84vh;display:flex;flex-direction:column;animation:modalin .18s ease}
@keyframes modalin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:var(--border)}
.modal-body{padding:16px 20px;overflow:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:var(--border)}
.modal-list{border:var(--border);border-radius:8px;overflow:hidden;margin-top:10px}
.modal-list .ml-row{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:var(--border);font-size:14px}
.modal-list .ml-row:last-child{border-bottom:none}
.alert{border-radius:8px;padding:10px 14px;font-size:14px;display:flex;gap:10px;margin-bottom:12px;border:1px solid}
.alert-warning{background:var(--amber-100);border-color:#ecd9a0}
.alert-error{background:var(--red-100);border-color:#f5c0b5}
.alert-info{background:var(--blue-100);border-color:#b3d4f0}
.alert-success{background:var(--green-100);border-color:#b7dfb9}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--grey-200);margin-top:14px;overflow-x:auto}
.tab{padding:9px 14px;font-size:14px;color:var(--grey-900);cursor:pointer;border:none;background:none;font-family:var(--font);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;display:flex;gap:6px;align-items:center}
.tab:hover{color:var(--blue-600)}
.tab.active{color:var(--blue-600);font-weight:700;border-bottom-color:var(--blue-600)}
.tab:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---------- key/value grids, detail pages ---------- */
.kv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 24px}
.kv .kv-l{font-size:12px;color:var(--grey-600);font-weight:700;margin-bottom:2px}
.kv .kv-v{font-size:14px;word-break:break-all}
.section-title{display:flex;align-items:center;gap:10px;margin:22px 0 8px}
.section-title h2,.section-title h3{flex:none}
.cards-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.tag-pill{display:inline-flex;align-items:center;border:var(--border-d);border-radius:6px;overflow:hidden;font-size:13px;background:#fff;margin:2px 4px 2px 0}
.tag-pill .tp-k{padding:2px 8px;background:var(--grey-100);border-right:var(--border-d);font-weight:700;color:var(--grey-700)}
.tag-pill .tp-v{padding:2px 8px}

/* ---------- wizard ---------- */
.wizard{display:flex;gap:0;margin-top:14px;align-items:flex-start}
.wizard-main{flex:1;min-width:0}
.wizard-side{width:340px;flex:none;margin-left:20px;position:sticky;top:60px}
.wizard-steps{border:var(--border);border-radius:var(--radius);background:#fff;padding:14px 0}
.ws-step{display:flex;gap:10px;padding:9px 18px;align-items:flex-start;position:relative}
.ws-num{width:22px;height:22px;border-radius:50%;border:2px solid var(--grey-400);color:var(--grey-600);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none;margin-top:1px}
.ws-step.done .ws-num{background:var(--green-600);border-color:var(--green-600);color:#fff}
.ws-step.active .ws-num{border-color:var(--blue-600);color:var(--blue-600)}
.ws-step.active .ws-label{font-weight:700;color:var(--blue-600)}
.ws-step .ws-label{font-size:14px;color:var(--grey-900)}
.ws-step .ws-sub{font-size:12px;color:var(--grey-600)}
.wizard-nav{display:flex;justify-content:space-between;gap:8px;padding:16px 0}
.ami-row{display:flex;gap:12px;border:var(--border-d);border-radius:8px;padding:12px;margin-bottom:10px;cursor:pointer;background:#fff;align-items:flex-start}
.ami-row:hover{border-color:var(--blue-500)}
.ami-row.selected{border-color:var(--blue-600);box-shadow:0 0 0 1px var(--blue-600);background:var(--blue-50)}
.ami-ico{width:44px;height:44px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:11px}

/* ---------- help panel ---------- */
.help-overlay{position:fixed;inset:0;z-index:1400;pointer-events:none}
.help-panel{position:fixed;top:48px;right:0;bottom:0;width:440px;max-width:94vw;background:#fff;border-left:var(--border-d);box-shadow:-6px 0 24px rgba(0,7,22,.18);z-index:1401;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .22s ease}
.help-panel.open{transform:translateX(0)}
.help-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:var(--border);background:var(--grey-50)}
.help-body{padding:16px 18px;overflow:auto;font-size:14px;line-height:1.6}
.help-body h3{margin:14px 0 6px}
.help-body ul{margin:6px 0 6px 18px;padding:0}
.help-body li{margin-bottom:4px}

/* ---------- console home ---------- */
.home-head{padding:20px 0 4px}
.home-head .hh-sub{color:var(--grey-600);margin-top:2px}
.widget-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:14px}
.widget{background:#fff;border:var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;min-height:150px}
.widget .w-head{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:var(--border);font-weight:700;font-size:15px}
.widget .w-head .w-actions{margin-left:auto;display:flex;gap:2px}
.widget .w-body{padding:12px 16px;flex:1;font-size:14px}
.widget .w-foot{border-top:var(--border);padding:8px 16px;font-size:13px}
.w-span-4{grid-column:span 4}.w-span-5{grid-column:span 5}.w-span-6{grid-column:span 6}.w-span-7{grid-column:span 7}.w-span-8{grid-column:span 8}.w-span-12{grid-column:span 12}
.rv-list{display:flex;flex-direction:column}
.rv-item{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;border-bottom:var(--border)}
.rv-item:last-child{border-bottom:none}
.rv-item .rv-name{color:var(--blue-600);font-weight:700}
.rv-item .rv-desc{color:var(--grey-600);font-size:12px}
.cost-bar-row{display:flex;align-items:center;gap:10px;padding:4px 0;font-size:13px}
.cost-bar-row .cb-label{width:150px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cost-bar-row .cb-track{flex:1;height:14px;background:var(--grey-100);border-radius:3px;overflow:hidden}
.cost-bar-row .cb-fill{height:100%;background:var(--blue-500);border-radius:3px}
.cost-bar-row .cb-val{width:70px;text-align:right;flex:none;font-weight:700}
.ta-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:var(--border);font-size:14px}
.ta-row:last-child{border-bottom:none}
.ta-dot{width:10px;height:10px;border-radius:50%;flex:none}
.health-item{display:flex;gap:10px;padding:8px 0;border-bottom:var(--border)}
.health-item:last-child{border-bottom:none}
.explore-cols{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}
.explore-cols a{display:block;padding:5px 0;font-size:14px}

/* ---------- misc ---------- */
.skeleton{position:relative;overflow:hidden;background:var(--grey-200);border-radius:6px;color:transparent !important;user-select:none}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shimmer 1.2s infinite;transform:translateX(-100%)}
@keyframes shimmer{to{transform:translateX(100%)}}
.skel-row{height:18px;margin:12px 16px}
.skel-block{height:110px;margin:14px 0}
.spinner{width:16px;height:16px;border:2px solid var(--grey-300);border-top-color:var(--blue-600);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
.divider{border:none;border-top:var(--border);margin:14px 0}
.muted{color:var(--grey-600)}
.small{font-size:12px}
.mt8{margin-top:8px}.mt14{margin-top:14px}.mt20{margin-top:20px}
.flex{display:flex;align-items:center;gap:8px}
.flex-wrap{flex-wrap:wrap}
.spread{justify-content:space-between}
.grow{flex:1;min-width:0}
.external-ico{font-size:10px;vertical-align:super;margin-left:2px}
.footer{padding:26px 20px 40px;color:var(--grey-600);font-size:12px;display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.footer a{font-size:12px;color:var(--grey-600)}
.footer a:hover{color:var(--grey-900)}

/* console home greeting banner */
.home-banner{background:linear-gradient(90deg,#0f1b2a,#1c3a5e);color:#fff;border-radius:var(--radius);padding:22px 24px;margin-top:14px;position:relative;overflow:hidden}
.home-banner h1{color:#fff}
.home-banner .hb-sub{color:#d5dbdb;margin-top:4px;max-width:640px}
.home-banner .hb-art{position:absolute;right:18px;top:50%;transform:translateY(-50%);opacity:.9}

/* code editor mock */
.code-editor{border:var(--border-d);border-radius:8px;overflow:hidden;font-family:var(--mono);font-size:13px}
.code-editor .ce-head{background:var(--grey-100);border-bottom:var(--border-d);padding:6px 12px;font-size:12px;color:var(--grey-600);display:flex;gap:14px;align-items:center}
.code-editor pre{margin:0;padding:12px 0;background:#fff;overflow:auto;line-height:1.55}
.code-editor .ln{display:flex}
.code-editor .ln .no{width:44px;flex:none;text-align:right;padding-right:14px;color:var(--grey-400);user-select:none}
.code-editor .ln .tx{white-space:pre;color:var(--grey-900)}
.tok-k{color:#c92ab2}.tok-s{color:#037f0c}.tok-c{color:#7d8998;font-style:italic}.tok-n{color:#b35c00}.tok-f{color:#0972d3}

/* log / result panels */
.log-panel{background:var(--grey-900);color:#e9ebed;border-radius:8px;font-family:var(--mono);font-size:12.5px;padding:14px 16px;overflow:auto;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.log-panel .lg-dim{color:#7d8998}
.log-panel .lg-ok{color:#7dd87d}
.log-panel .lg-err{color:#ff8f8f}

/* dropdown menu (contextual) */
.menu{position:fixed;background:#fff;border-radius:8px;box-shadow:var(--shadow-pop);z-index:1900;min-width:220px;padding:6px 0;max-height:70vh;overflow:auto}
.menu .mi{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:14px;color:var(--grey-900);cursor:pointer;white-space:nowrap}
.menu .mi:hover:not(.disabled){background:var(--blue-100)}
.menu .mi.disabled{color:var(--grey-400);cursor:not-allowed}
.menu .mi.danger{color:var(--red-600)}
.menu .mi-sep{border-top:var(--border);margin:5px 0}
.menu .mi-head{padding:6px 16px;font-size:12px;font-weight:700;color:var(--grey-600)}

/* upload flow */
.upload-zone{border:2px dashed var(--grey-400);border-radius:8px;padding:34px 20px;text-align:center;color:var(--grey-600);cursor:pointer;background:var(--grey-50)}
.upload-zone:hover,.upload-zone.drag{border-color:var(--blue-600);background:var(--blue-100);color:var(--blue-700)}
.up-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:var(--border);font-size:14px}
.up-row .up-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-row .up-size{color:var(--grey-600);flex:none;width:80px;text-align:right}
.up-row .up-status{flex:none;width:110px;text-align:right}
.up-track{width:140px;height:6px;background:var(--grey-200);border-radius:3px;overflow:hidden;flex:none}
.up-track>div{height:100%;background:var(--blue-600);transition:width .15s linear}

/* split view resource detail */
.split{display:flex;gap:0;align-items:flex-start}
.split .split-detail{flex:1;min-width:0}

/* alarm graph */
.alarm-graph{background:#fff;border:var(--border);border-radius:8px;padding:14px}
canvas.graph{width:100%;height:220px;display:block}
.graph-legend{display:flex;gap:18px;font-size:12px;color:var(--grey-600);padding-top:8px;flex-wrap:wrap}
.graph-legend .gl-item{display:flex;align-items:center;gap:6px}
.gl-swatch{width:14px;height:3px;border-radius:2px}

/* mobile menu drawer */
.mobile-drawer{position:fixed;inset:0;z-index:1500;display:none}
.mobile-drawer.open{display:block}
.mobile-drawer .md-scrim{position:absolute;inset:0;background:rgba(22,25,31,.5)}
.mobile-drawer .md-panel{position:absolute;top:0;left:0;bottom:0;width:300px;background:var(--topnav-bg);color:#fff;padding:14px 0;overflow:auto;animation:slidein .2s ease}
@keyframes slidein{from{transform:translateX(-40px);opacity:0}to{transform:none;opacity:1}}
.mobile-drawer .md-item{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;color:#fff;cursor:pointer;font-size:15px}
.mobile-drawer .md-item:hover{background:var(--topnav-hover)}
.mobile-drawer .md-sub{color:#aab7b8;font-size:12px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .sidenav{position:fixed;left:0;top:48px;bottom:0;z-index:1100;margin-left:-280px;box-shadow:var(--shadow-pop)}
  .sidenav.open{margin-left:0}
  .wizard-side{position:static;width:100%;margin-left:0;margin-top:14px}
  .wizard{flex-direction:column}
}
@media (max-width:900px){
  .tn-search{flex:1 1 auto}
  .topnav .tn-hide-md{display:none}
  .widget-grid{grid-template-columns:repeat(6,1fr)}
  .w-span-4,.w-span-5,.w-span-6,.w-span-7,.w-span-8{grid-column:span 6}
}
@media (max-width:640px){
  .tn-search{display:none}
  .tn-hamburger{display:flex}
  .tn-account-name{display:none}
  .main{padding:0 10px 30px}
  .flashbar{margin:0 -10px;padding:10px 10px 0}
  .table-head{padding:10px 12px}
  .widget-grid{grid-template-columns:1fr}
  .w-span-4,.w-span-5,.w-span-6,.w-span-7,.w-span-8,.w-span-12{grid-column:span 1}
  .explore-cols{grid-template-columns:1fr}
  .modal-overlay{padding:0}
  .modal{border-radius:0;max-height:100vh;height:100%}
}
@media (max-width:640px){
  .tn-search.mobile-open{display:block;position:fixed;top:48px;left:0;right:0;margin:0;background:var(--topnav-bg);padding:8px 10px;z-index:999}
  #tn-mobile-search{display:flex}
}
/* side-nav edge toggle for ≤1180px */
#sidenav-toggle{display:none;position:fixed;left:0;top:120px;z-index:1099;width:26px;height:64px;border:none;border-radius:0 8px 8px 0;background:#fff;border-left:none;box-shadow:2px 0 8px rgba(0,7,22,.18);color:var(--grey-600);cursor:pointer;align-items:center;justify-content:center}
#sidenav-toggle:hover{color:var(--blue-600)}
@media (max-width:1180px){#sidenav-toggle.on{display:flex}}