:root {
  --color-brand:#E20074;
  --color-brand-hover:#C40062;
  --color-bg:#F0F0F0;
  --color-surface:#FFFFFF;
  --color-text:#222;
  --color-text-secondary:#555;
  --color-border:#E2E2E2;
  --color-border-strong:#CFCFCF;
  --color-success:#1E9E59;
  --color-danger:#D22C32;
  --color-warning:#D89200;
  --radius:10px;
  --shadow:0 2px 4px rgba(0,0,0,0.08),0 4px 12px rgba(0,0,0,0.06);
  font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;}body{margin:0;background:var(--color-bg);color:var(--color-text);display:flex;min-height:100vh;overflow:auto;font-family:inherit;-webkit-font-smoothing:antialiased;}a{text-decoration:none;color:inherit;}

/* Layout */
.sidebar{width:240px;background:#1E1E24;color:#DDD;display:flex;flex-direction:column;padding:1rem 0;} .sidebar h1{font-size:1.05rem;font-weight:600;padding:0 1.25rem 1rem;margin:0 0 .5rem;color:#FFF;letter-spacing:.5px;}
.nav{list-style:none;margin:0;padding:0;flex:1;} .nav li a{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;color:#B9B9C2;font-size:.9rem;border-left:4px solid transparent;transition:.2s;} .nav li a:hover{background:rgba(255,255,255,.05);color:#FFF;} .nav li a.active{background:rgba(226,0,116,.12);color:#FFF;border-left-color:var(--color-brand);font-weight:600;}
.icon{width:18px;height:18px;border-radius:4px;background:linear-gradient(135deg,var(--color-brand),#FF4DA8);opacity:.8;}
.footer{padding:1rem 1.25rem;font-size:.7rem;opacity:.55;}
.main-wrapper{flex:1;display:flex;flex-direction:column;min-width:0;}
.header{height:64px;background:var(--color-surface);display:flex;align-items:center;padding:0 1.5rem;gap:1rem;border-bottom:1px solid var(--color-border);} .brand-title{font-weight:600;letter-spacing:.5px;font-size:.9rem;color:var(--color-brand);}
.search-box{flex:1;position:relative;} .search-box input{width:100%;padding:.65rem .9rem .65rem 2.25rem;border:1px solid var(--color-border);border-radius:999px;background:#FFF;font-size:.85rem;outline:none;transition:.2s;} .search-box input:focus{border-color:var(--color-brand);box-shadow:0 0 0 3px rgba(226,0,116,.25);} .search-box .magnifier{position:absolute;top:50%;left:.8rem;width:14px;height:14px;background:var(--color-brand);border-radius:50%;transform:translateY(-50%);box-shadow:0 0 0 3px rgba(226,0,116,.25);}
.user-avatar{width:36px;height:36px;background:linear-gradient(135deg,var(--color-brand),#FF4DA8);border-radius:50%;box-shadow:0 0 0 3px rgba(226,0,116,.25);}
.content{flex:1;overflow:visible;padding:1.5rem clamp(1rem,2vw,2rem) 2rem;display:flex;flex-direction:column;gap:1.5rem;}

/* Cards & Utilities */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.1rem 1.15rem 1.25rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.75rem;position:relative;}
.card h3{margin:0;font-size:.95rem;font-weight:600;letter-spacing:.3px;}
.small{font-size:.65rem;opacity:.75;}
.primary-btn{align-self:flex-start;background:var(--color-brand);color:#FFF;font-size:.8rem;font-weight:600;border:none;padding:.65rem 1.1rem;border-radius:8px;cursor:pointer;letter-spacing:.3px;display:inline-flex;gap:.4rem;box-shadow:0 4px 10px -2px rgba(226,0,116,.45);transition:.2s;} .primary-btn:hover{background:var(--color-brand-hover);transform:translateY(-2px);box-shadow:0 6px 14px -2px rgba(226,0,116,.5);} .secondary-btn{background:#FFF;color:var(--color-brand);border:1px solid var(--color-brand);padding:.55rem .95rem;font-size:.75rem;border-radius:8px;cursor:pointer;font-weight:500;transition:.2s;} .secondary-btn:hover{background:rgba(226,0,116,.08);} .danger-btn{background:var(--color-danger);color:#FFF;border:none;padding:.55rem .95rem;font-size:.75rem;border-radius:8px;cursor:pointer;}
.inline-note{font-size:.65rem;opacity:.8;margin-left:.35rem;}
.status-pill{background:rgba(226,0,116,.1);color:var(--color-brand);padding:.25rem .55rem;font-size:.65rem;border-radius:999px;font-weight:500;white-space:nowrap;}
.status-ok{background:rgba(30,158,89,.12);color:var(--color-success);} .status-warn{background:rgba(216,146,0,.15);color:var(--color-warning);} .status-bad{background:rgba(210,44,50,.15);color:var(--color-danger);} 
.divider{height:1px;background:var(--color-border);margin:.75rem 0;}

/* Metrics */
.metrics{display:flex;gap:1.25rem;margin-top:.25rem;} .metric{flex:1;background:#F8F8F9;padding:.6rem .7rem;border-radius:8px;display:flex;flex-direction:column;gap:.15rem;font-size:.7rem;line-height:1.25;border:1px solid #ECECEC;} .metric .val{font-size:.95rem;font-weight:600;color:var(--color-brand);}

/* Tables */
.table-wrapper{overflow:auto;border:1px solid var(--color-border);border-radius:10px;background:#FFF;}
table{width:100%;border-collapse:collapse;font-size:.75rem;min-width:600px;}
thead{background:#FBFBFC;} th,td{text-align:left;padding:.65rem .85rem;border-bottom:1px solid #EEE;white-space:nowrap;} tbody tr:hover{background:#FFF4FA;} tbody tr:last-child td{border-bottom:none;}
.row-actions{opacity:0;transition:.15s;display:flex;gap:.3rem;} tbody tr:hover .row-actions{opacity:1;} .icon-btn{background:transparent;border:1px solid var(--color-border);width:26px;height:26px;padding:0;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.6rem;color:var(--color-text-secondary);} .icon-btn:hover{border-color:var(--color-brand);color:var(--color-brand);} .overflow-menu{position:absolute;top:100%;right:0;background:#FFF;border:1px solid var(--color-border);border-radius:8px;min-width:160px;padding:.35rem .3rem;box-shadow:var(--shadow);display:none;z-index:10;} .overflow-menu.open{display:block;} .overflow-menu button{all:unset;display:block;width:100%;padding:.45rem .65rem;font-size:.7rem;color:var(--color-text-secondary);border-radius:6px;cursor:pointer;} .overflow-menu button:hover{background:rgba(226,0,116,.08);color:var(--color-brand);}

/* Filters */
.filters-bar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:.6rem;} .filters-bar input[type=search]{flex:1;min-width:220px;padding:.55rem .75rem;border:1px solid var(--color-border);border-radius:8px;font-size:.75rem;outline:none;} .filters-bar input[type=search]:focus{border-color:var(--color-brand);box-shadow:0 0 0 3px rgba(226,0,116,.2);} .chip{background:#FFF;border:1px solid var(--color-border);border-radius:999px;padding:.35rem .7rem;font-size:.65rem;display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;} .chip.active{border-color:var(--color-brand);color:var(--color-brand);background:rgba(226,0,116,.08);}

/* Tabs */
.tabs{display:flex;gap:.75rem;margin-top:.3rem;border-bottom:1px solid var(--color-border);padding:0 .15rem;} .tab{padding:.55rem .95rem;font-size:.75rem;font-weight:500;cursor:pointer;color:var(--color-text-secondary);position:relative;border-radius:6px 6px 0 0;transition:.2s;} .tab.active{background:var(--color-surface);color:var(--color-brand);font-weight:600;box-shadow:0 -2px 6px rgba(0,0,0,.05);} .tab.active:after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:3px;background:var(--color-brand);border-radius:2px 2px 0 0;}

/* Stepper */
.stepper{display:flex;gap:1.5rem;align-items:flex-start;flex-wrap:wrap;padding:.4rem 0 .9rem;} .step{display:flex;align-items:center;gap:.6rem;position:relative;font-size:.7rem;color:var(--color-text-secondary);} .step-circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:600;border:2px solid var(--color-border);background:#FFF;color:var(--color-text-secondary);transition:.25s;} .step.active .step-circle{border-color:var(--color-brand);background:var(--color-brand);color:#FFF;box-shadow:0 0 0 4px rgba(226,0,116,.25);} .step.completed .step-circle{border-color:var(--color-brand);background:#FFF;color:var(--color-brand);} .step-label{max-width:120px;line-height:1.2;} .step:after{content:"";position:absolute;left:14px;top:34px;width:2px;height:26px;background:var(--color-border);opacity:.5;} .step:last-child:after{display:none;} @media (min-width:760px){.stepper.horizontal{flex-wrap:nowrap;}.stepper.horizontal .step{flex-direction:column;align-items:center;}.stepper.horizontal .step:after{display:none;}.stepper.horizontal .step:not(:last-child)::before{content:"";position:absolute;top:14px;left:50%;right:-50%;height:2px;background:var(--color-border);z-index:-1;}} 

/* Forms */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem 1.25rem;margin-top:.75rem;} .form-group{display:flex;flex-direction:column;gap:.35rem;font-size:.7rem;} .form-group label{font-weight:600;font-size:.65rem;letter-spacing:.5px;text-transform:uppercase;color:var(--color-text-secondary);} .form-group input,.form-group select,.form-group textarea{padding:.6rem .7rem;border:1px solid var(--color-border);border-radius:8px;font-size:.75rem;background:#FFF;resize:vertical;min-height:42px;font-family:inherit;} .form-group textarea.code{font-family:ui-monospace,Consolas,"SFMono-Regular",monospace;line-height:1.35;tab-size:2;white-space:pre;} .form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 3px rgba(226,0,116,.25);} .mask-wrapper{position:relative;display:flex;align-items:center;} .mask-wrapper button{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);border:none;background:rgba(226,0,116,.12);color:var(--color-brand);font-size:.6rem;padding:.3rem .5rem;border-radius:6px;cursor:pointer;} .mask-wrapper button:hover{background:var(--color-brand);color:#FFF;}

/* KPI Cards */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;} .kpi{background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.35rem;box-shadow:var(--shadow);position:relative;overflow:hidden;} .kpi h4{margin:0;font-size:.6rem;letter-spacing:.6px;font-weight:600;text-transform:uppercase;color:var(--color-text-secondary);} .kpi .val{font-size:1.35rem;font-weight:600;color:var(--color-brand);line-height:1;} .kpi .trend{font-size:.6rem;font-weight:500;} .trend.up{color:var(--color-success);} .trend.down{color:var(--color-danger);} .sparkline{position:absolute;inset:0;opacity:.15;background:radial-gradient(circle at 80% 20%,var(--color-brand),transparent 60%);} 

/* Chart Placeholder */
.chart-card{min-height:280px;} .chart-placeholder{flex:1;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--color-text-secondary);border:2px dashed var(--color-border);border-radius:12px;padding:1rem;margin-top:.5rem;}

/* Health Panel */
.health-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;margin-top:.5rem;} .health-item{background:#FAFAFA;border:1px solid var(--color-border);border-radius:10px;padding:.6rem .7rem;display:flex;flex-direction:column;gap:.25rem;font-size:.65rem;} .health-item strong{font-size:.7rem;}

/* Usage Bars */
.usage-bar{height:6px;background:#ECECEC;border-radius:4px;overflow:hidden;position:relative;}
.usage-bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--color-brand),#FF4DA8);}
.usage-bar.warn > span{background:linear-gradient(90deg,#D89200,#FFB347);} 
.usage-bar.danger > span{background:linear-gradient(90deg,#D22C32,#FF5A5F);} 

/* Toggles */
.toggle {position:relative;display:inline-flex;align-items:center;gap:.55rem;font-size:.7rem;cursor:pointer;user-select:none;}
.toggle input{appearance:none;width:40px;height:20px;background:#CFCFCF;border-radius:999px;position:relative;outline:none;transition:.25s;border:1px solid #B9B9B9;cursor:pointer;}
.toggle input:after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#FFF;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:.25s;}
.toggle input:checked{background:var(--color-brand);border-color:var(--color-brand);}
.toggle input:checked:after{transform:translateX(20px);} 

/* Slider (Hybrid Weights) */
.slider-row{display:flex;align-items:center;gap:.75rem;font-size:.65rem;}
.slider-row input[type=range]{flex:1;height:6px;background:linear-gradient(90deg,var(--color-brand),#FF4DA8);border-radius:4px;outline:none;-webkit-appearance:none;appearance:none;}
.slider-row input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:#FFF;border:2px solid var(--color-brand);box-shadow:0 0 0 3px rgba(226,0,116,.25);cursor:pointer;}
.slider-row .weight-badge{background:#FFF;border:1px solid var(--color-border);padding:.35rem .55rem;border-radius:6px;font-size:.6rem;font-weight:600;min-width:42px;text-align:center;}

/* Metadata Rule Builder */
.rule-builder{display:flex;flex-direction:column;gap:.6rem;}
.rule-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;background:#FAFAFA;border:1px solid var(--color-border);padding:.55rem .6rem;border-radius:8px;position:relative;}
.rule-row select,.rule-row input{padding:.45rem .55rem;font-size:.65rem;border:1px solid var(--color-border);border-radius:6px;min-width:120px;}
.rule-row select:focus,.rule-row input:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 2px rgba(226,0,116,.25);} 
.rule-row button.remove-rule{background:transparent;border:1px solid var(--color-border);color:#666;font-size:.6rem;width:26px;height:26px;border-radius:6px;cursor:pointer;}
.rule-row button.remove-rule:hover{color:var(--color-brand);border-color:var(--color-brand);} 
.add-rule-btn{background:#FFF;border:1px dashed var(--color-brand);color:var(--color-brand);padding:.5rem .75rem;font-size:.65rem;border-radius:8px;cursor:pointer;width:fit-content;}
.add-rule-btn:hover{background:rgba(226,0,116,.08);} 

/* Upload Zone */
.upload-zone{border:2px dashed var(--color-border);border-radius:12px;padding:1.1rem .9rem;text-align:center;background:#FCFCFD;display:flex;flex-direction:column;gap:.55rem;font-size:.65rem;color:var(--color-text-secondary);}
.upload-zone.dragover{border-color:var(--color-brand);background:rgba(226,0,116,.04);} 
.file-list{display:flex;flex-direction:column;gap:.45rem;font-size:.6rem;margin-top:.4rem;}
.file-item{display:flex;align-items:center;gap:.5rem;padding:.45rem .55rem;background:#FFF;border:1px solid var(--color-border);border-radius:8px;}
.file-icon{width:26px;height:26px;border-radius:6px;background:linear-gradient(135deg,var(--color-brand),#FF4DA8);opacity:.85;display:flex;align-items:center;justify-content:center;color:#FFF;font-size:.55rem;font-weight:600;}

/* ACL / Versions / Cost */
.acl-table th,.acl-table td{padding:.5rem .6rem;font-size:.65rem;border-bottom:1px solid #EEE;text-align:left;}
.acl-table th{background:#FBFBFC;font-weight:600;font-size:.6rem;letter-spacing:.5px;text-transform:uppercase;}
.version-list{display:flex;flex-direction:column;gap:.45rem;font-size:.6rem;}
.version-item{display:flex;justify-content:space-between;align-items:center;background:#FAFAFA;border:1px solid var(--color-border);padding:.45rem .55rem;border-radius:8px;gap:.5rem;}
.version-item .meta{display:flex;flex-direction:column;line-height:1.25;}
.version-item button{background:#FFF;border:1px solid var(--color-border);padding:.3rem .55rem;font-size:.55rem;border-radius:6px;cursor:pointer;}
.version-item button:hover{border-color:var(--color-brand);color:var(--color-brand);} 
.cost-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;font-size:.6rem;margin-top:.6rem;}
.cost-box{background:#FAFAFA;border:1px solid var(--color-border);border-radius:10px;padding:.55rem .65rem;display:flex;flex-direction:column;gap:.25rem;}
.cost-box strong{font-size:.7rem;}
.cost-val{font-size:.85rem;font-weight:600;color:var(--color-brand);} 

/* Flex helpers */
.flex{display:flex;} .col{display:flex;flex-direction:column;} .gap-s{gap:.5rem;} .gap-m{gap:1rem;} .space-between{justify-content:space-between;} .align-center{align-items:center;}

/* Responsive */
@media (max-width:900px){.sidebar{width:200px;}.header{height:60px;}} @media (max-width:680px){.sidebar{display:none;} body{flex-direction:column;} .header{border-top:4px solid var(--color-brand);} }

/* ================= LOGIN PAGE ================= */
.login-shell{display:flex;flex-direction:column;min-height:100vh;width:100%;background:var(--color-bg);}
.login-topbar{height:70px;background:var(--color-brand);display:flex;align-items:center;padding:0 2rem;}
.login-topbar .brand-logo{width:44px;height:44px;background:#FFF;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;color:var(--color-brand);box-shadow:0 2px 6px rgba(0,0,0,.15);}
.login-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:2.5rem 1rem 3rem;overflow:auto;}
.login-card{background:#FFF;border:1px solid var(--color-border);border-radius:14px;box-shadow:var(--shadow);width:100%;max-width:640px;padding:3.25rem 3rem 2.75rem;display:flex;flex-direction:column;gap:1.4rem;position:relative;}
.login-card h2{margin:0;font-size:2.15rem;line-height:1.15;font-weight:700;letter-spacing:.5px;text-align:center;}
.login-card h2 .sub{display:block;font-size:.6em;font-weight:500;opacity:.65;margin-top:.35rem;}
.login-service{font-weight:600;text-align:center;font-size:.8rem;letter-spacing:.6px;margin-top:-.5rem;color:var(--color-text-secondary);}
.login-form{display:flex;flex-direction:column;gap:1rem;}
.login-form .field{display:flex;flex-direction:column;gap:.4rem;}
.login-form input[type=text],.login-form input[type=password]{padding:.75rem .9rem;border:1px solid var(--color-border);border-radius:8px;font-size:.85rem;outline:none;background:#FFF;}
.login-form input[type=text]:focus,.login-form input[type=password]:focus{border-color:var(--color-brand);box-shadow:0 0 0 3px rgba(226,0,116,.25);} 
.login-actions{display:flex;flex-direction:column;gap:.75rem;margin-top:.25rem;}
.login-btn-primary{background:var(--color-brand);color:#FFF;border:none;border-radius:8px;padding:.85rem 1.1rem;font-size:.85rem;font-weight:600;cursor:pointer;box-shadow:0 4px 12px -2px rgba(226,0,116,.45);transition:.2s;}
.login-btn-primary:hover{background:var(--color-brand-hover);transform:translateY(-2px);} 
.login-btn-secondary{background:#FFF;border:1px solid var(--color-border);border-radius:8px;padding:.8rem 1.1rem;font-size:.8rem;font-weight:600;cursor:pointer;}
.login-btn-secondary:hover{border-color:var(--color-brand);color:var(--color-brand);} 
.login-meta{display:flex;align-items:center;justify-content:space-between;font-size:.65rem;}
.login-meta a{color:var(--color-brand);text-decoration:none;font-weight:500;}
.login-meta a:hover{text-decoration:underline;}
.remember-row{display:flex;align-items:center;gap:.5rem;font-size:.65rem;color:var(--color-text-secondary);}
.remember-row input{width:16px;height:16px;cursor:pointer;}
.login-help{text-align:center;font-size:.6rem;}
.login-help a{color:var(--color-brand);}
.login-social{display:flex;justify-content:center;gap:1.1rem;margin-top:.4rem;}
.login-social a{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#FFF;border:1px solid var(--color-border);font-size:.85rem;color:var(--color-text-secondary);transition:.2s;}
.login-social a:hover{border-color:var(--color-brand);color:var(--color-brand);}
.login-footer{border-top:1px solid var(--color-border);padding:.85rem 2rem;font-size:.55rem;color:var(--color-text-secondary);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;background:#FFF;}
.legal-links{display:flex;gap:1rem;}
.legal-links a{color:var(--color-text-secondary);text-decoration:none;}
.legal-links a:hover{color:var(--color-brand);} 
@media (max-width:720px){
  .login-card{padding:2.5rem 1.6rem 2.4rem;}
  .login-card h2{font-size:1.85rem;}
  .login-topbar{height:60px;padding:0 1rem;}
  .login-footer{padding:.85rem 1rem;}
}

