:root{
  --bg:#0A0A0A; --bg-1:#101010; --surface:#161616; --surface-2:#1D1D1D; --surface-hover:#252525;
  --border:#262626; --border-strong:#343434;
  --text-1:#F2F2EF; --text-2:#A3A3A0; --text-3:#686865;
  --accent:#C6F135; --accent-dim:#2C3610; --accent-text:#1A2006; --on-accent:#141B04;
  --success:#5FBF7F; --success-bg:#152418; --success-text:#8FDDA6;
  --danger:#E2645A; --danger-bg:#271718; --danger-text:#F0958C;
  --info:#5AA9E6; --info-bg:#131F2C; --info-text:#93CBF2;
  --warn:#E6B84E; --warn-bg:#241E10; --warn-text:#F2D28D;
  --radius:6px; --radius-lg:10px;
  --font: 'Inter', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --navy: #0B2545;
    --navy-deep: #071A33;
    --asphalt: #1B1F27;
    --chrome: #C9D6DF;
    --foam: #F5F8F7;
    --aqua: #2EC4B6;
    --amber: #FFB238;
    --ink: #0E1620;
    --line: rgba(201,214,223,0.18);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text-1);font-family:var(--font);font-size:14px;line-height:1.5;}
a{color:inherit;text-decoration:none;}
button{font-family:var(--font);cursor:pointer;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px;}

.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh;}

/* ---------- SIDEBAR ---------- */
.sidebar{background:var(--bg-1);border-right:0.5px solid var(--border);
position:sticky;top:0;height:100vh;overflow-y:auto;}
.brand{margin-bottom: 17px; display:flex;align-items:center;gap:10px;padding: 10px 10px;position:sticky;top:0;background:var(--bg-1);z-index:2;}
.brand-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#c97f22);display:flex;align-items:center;justify-content:center;color:var(--on-accent);position:relative;overflow:hidden;flex-shrink:0;}
.brand-mark::after{content:'';position:absolute;top:-40%;left:-20%;width:60%;height:220%;background:rgba(255,255,255,0.35);transform:rotate(25deg);}
.brand-mark i{font-size:17px;position:relative;z-index:1;}
.brand-name{font-size:15px;font-weight:600;letter-spacing:-0.2px;}
.brand-sub{font-size:11px;color:var(--text-3);margin-top:1px;}

.nav-group{margin-bottom:1.1rem; padding: 0 10px;}
.nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-3);padding:0 0.6rem;margin-bottom:6px;font-weight:500;}
.nav-item{margin-bottom: 3px; display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13.5px;color:var(--text-2);cursor:pointer;position:relative;}
.nav-item i{font-size:17px;width:18px;text-align:center;}
.nav-item:hover{background:var(--surface-hover);color:var(--text-1);}
.nav-item.active{background:var(--surface-2);color:var(--text-1);}
.nav-item.active::before{content:'';position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:3px;height:16px;background:var(--accent);border-radius:2px;}
.nav-item .badge{margin-left:auto;font-size:10px;background:var(--accent-dim);color:var(--accent);padding:1px 6px;border-radius:20px;font-weight:500;}
.nav-item .lock{margin-left:auto;font-size:13px;color:var(--text-3);}

/* ---------- MAIN ---------- */
.main{min-width:0;}
.topbar{height:50px;border-bottom:0.5px solid var(--border);display:flex;
  align-items:center;justify-content:space-between;padding:0 1rem;position:sticky;top:0;background:var(--bg);z-index:5;}
.topbar-search{display:flex;align-items:center;gap:8px;
  background:var(--surface);border:0.5px solid var(--border);
  border-radius:8px;padding:7px 12px;color:var(--text-3);font-size:13px;
  position:relative;width:320px;}
.topbar-search input{background:none;border:none;outline:none;color:var(--text-1);font-family:var(--font);font-size:13px;width:100%;}
.topbar-search input::placeholder{color:var(--text-3);}
.topbar-right{display:flex;align-items:center;gap:14px;}
.branch-pill{display:flex;align-items:center;gap:6px;background:var(--surface);border:0.5px solid var(--border);border-radius:20px;padding:6px 12px;font-size:12.5px;color:var(--text-2);cursor:pointer;user-select:none;}
.icon-btn{width:34px;height:34px;border-radius:8px;background:var(--surface);border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-2);position:relative;cursor:pointer;}
.dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--danger);}
.dot.hidden{display:none;}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;cursor:pointer;flex-shrink:0;}

/* ---------- SEARCH RESULTS ---------- */
.search-results{position:absolute;top:calc(100% + 8px);left:0;width:360px;max-height:380px;overflow-y:auto;background:var(--surface-2);border:0.5px solid var(--border-strong);border-radius:var(--radius);box-shadow:0 12px 32px rgba(0,0,0,0.4);z-index:30;display:none;padding:6px;}
.search-results.open{display:block;}
.search-group-label{font-size:10.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-3);padding:8px 8px 4px;font-weight:500;}
.search-result{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer;}
.search-result:hover{background:var(--surface-hover);}
.search-result i{font-size:15px;color:var(--text-3);width:16px;text-align:center;flex-shrink:0;}
.search-result-title{font-size:13px;color:var(--text-1);}
.search-result-sub{font-size:11.5px;color:var(--text-3);margin-top:1px;}
.search-empty, .dropdown-empty{padding:20px 8px;text-align:center;font-size:12.5px;color:var(--text-3);}

/* ---------- DROPDOWNS ---------- */
.dropdown{position:relative;}
.dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:230px;background:var(--surface-2);border:0.5px solid var(--border-strong);border-radius:var(--radius);box-shadow:0 12px 32px rgba(0,0,0,0.4);z-index:30;display:none;padding:6px;}
.dropdown-menu.open{display:block;}
.dropdown-menu.dropdown-menu-wide{width:320px;}
.dropdown-header{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 10px;font-size:13px;font-weight:600;color:var(--text-1);}
.dropdown-header .link{font-size:11.5px;font-weight:500;cursor:pointer;}
.dropdown-item{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;font-size:13px;color:var(--text-2);cursor:pointer;}
.dropdown-item i{font-size:15px;width:16px;text-align:center;color:var(--text-3);flex-shrink:0;}
.dropdown-item:hover{background:var(--surface-hover);color:var(--text-1);}
.dropdown-item.active{background:var(--surface-hover);color:var(--accent);}
.dropdown-item.active i{color:var(--accent);}
.dropdown-item.danger{color:var(--danger-text);}
.dropdown-item.danger i{color:var(--danger-text);}
.dropdown-divider{height:0.5px;background:var(--border);margin:6px 4px;}
.dropdown-user{display:flex;align-items:center;gap:10px;padding:6px 8px 10px;}
.dropdown-user-name{font-size:13px;font-weight:600;color:var(--text-1);}
.dropdown-user-email{font-size:11.5px;color:var(--text-3);margin-top:1px;}

.notif-list, .wa-list{max-height:340px;overflow-y:auto;margin:0 -2px;}
.notif-item, .wa-item{display:flex;gap:10px;padding:9px 8px;border-radius:8px;cursor:pointer;position:relative;}
.notif-item:hover, .wa-item:hover{background:var(--surface-hover);}
.notif-item.unread::after{content:'';position:absolute;top:14px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--accent);}
.notif-icon{width:30px;height:30px;border-radius:8px;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-2);font-size:14px;}
.notif-title{font-size:12.5px;color:var(--text-1);line-height:1.4;padding-right:10px;}
.notif-time{font-size:11px;color:var(--text-3);margin-top:2px;}
.wa-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;flex-shrink:0;}
.wa-name{font-size:12.5px;color:var(--text-1);font-weight:500;}
.wa-msg{font-size:11.5px;color:var(--text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;}

/* ---------- MODAL ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(8,7,5,0.6);display:none;align-items:flex-start;justify-content:center;padding:6vh 1rem;z-index:100;overflow-y:auto;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface-2);border:0.5px solid var(--border-strong);border-radius:var(--radius-lg);width:100%;max-width:480px;box-shadow:0 24px 64px rgba(0,0,0,0.5);}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.3rem;border-bottom:0.5px solid var(--border);}
.modal-title{font-size:15px;font-weight:600;}
.modal-close{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;}
.modal-close:hover{background:var(--surface-hover);color:var(--text-1);}
.modal-body{padding:1.1rem 1.3rem;display:grid;gap:12px;}
.modal-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.field label{display:block;font-size:12px;color:var(--text-2);margin-bottom:6px;}
.field input, .field select, .field textarea{width:100%;background:var(--surface);border:0.5px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text-1);font-family:var(--font);font-size:13px;outline:none;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent);}
.field textarea{resize:vertical;min-height:60px;}
.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:1rem 1.3rem 1.3rem;}

/* ---------- TOAST ---------- */
.toast-stack{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:8px;z-index:200;}
.toast{background:var(--surface-2);border:0.5px solid var(--border-strong);border-radius:var(--radius);padding:10px 14px;font-size:13px;color:var(--text-1);box-shadow:0 12px 32px rgba(0,0,0,0.4);display:flex;align-items:center;gap:8px;animation:toast-in 0.18s ease-out;}
.toast i{color:var(--success-text);font-size:16px;}
@keyframes toast-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

.view{padding: 0px 1rem 1rem;max-width:100%;}
.view-header{display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: sticky;
  top: 50px;
  z-index: 4;
  background: var(--bg);
  padding: 5px 0px 5px;
  margin: 0 0 12px;
  border-bottom: 0.5px solid var(--border);}
.view-title{font-size:23px;font-weight:700;letter-spacing:-0.3px;}
.view-sub{font-size:13px;color:var(--text-3);margin-top:3px;}
.btn{display:inline-flex;align-items:center;gap:6px;border-radius:6px;padding:8px 14px;font-size:13px;font-weight:500;border:0.5px solid var(--border-strong);background:var(--surface);color:var(--text-1);}
.btn:hover{background:var(--surface-hover);}
.btn-accent{background:var(--accent);color:var(--on-accent);border:none;font-weight:600;}
.btn-accent:hover{background:#e9a136;}
.btn.danger{color:var(--danger-text);}
.btn.danger:hover{background:var(--danger-bg);border-color:var(--danger-text);}

/* ---------- KPI / CARDS ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:15px;}
.kpi{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem 1.2rem;position:relative;overflow:hidden;}
.kpi-label{font-size:12px;color:var(--text-3);display:flex;align-items:center;gap:6px;}
.kpi-value{font-family:var(--mono);font-size:26px;font-weight:500;margin-top:8px;}
.kpi-delta{font-size:11.5px;margin-top:6px;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:20px;}
.up{color:var(--success-text);background:var(--success-bg);}
.down{color:var(--danger-text);background:var(--danger-bg);}

.grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;}
.card-title{font-size:13.5px;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between;}
.card-title .link{font-size:12px;color:var(--accent);font-weight:500;cursor:pointer;}
.card-title .link:hover{text-decoration:underline;}
.card-title-actions{display:flex;align-items:center;gap:12px;}
.chart-icon-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;border:none;background:none;color:var(--text-3);padding:0;}
.chart-icon-btn:hover{background:var(--surface-hover);color:var(--text-1);}

/* bars (used on dashboard + reports) */
.bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:10px;}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:flex-end;height:100%;}
.bar{width:100%;background:var(--accent-dim);border-radius:4px 4px 0 0;position:relative;}
.bar.now{background:var(--accent);}
.bar-label{font-size:10.5px;color:var(--text-3);}

/* queue list (used on dashboard, queue, crm, reports) */
.qrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:0.5px solid var(--border);}
.qrow:last-child{border-bottom:none;}
.qav{width:32px;height:32px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--text-2);}
.qmeta{flex:1;min-width:0;}
.qname{font-size:13px;font-weight:500;}
.qsub{font-size:11.5px;color:var(--text-3);margin-top:1px;}
.status-pill{font-size:11px;padding:3px 9px;border-radius:20px;font-weight:500;white-space:nowrap;}

/* ---------- TABLES ---------- */
.table-wrap{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.toolbar{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:0.5px solid var(--border);}
.toolbar input{background:var(--bg-1);border:0.5px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text-1);font-size:13px;width:240px;}
.chip{font-size:12px;padding:6px 12px;border-radius:20px;border:0.5px solid var(--border);color:var(--text-2);}
.chip.active{background:var(--accent-dim);color:var(--accent);border-color:transparent;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-3);font-weight:500;padding:10px 16px;border-bottom:0.5px solid var(--border);}
td{padding:12px 16px;border-bottom:0.5px solid var(--border);color:var(--text-2);}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--surface-hover);}
.cell-primary{color:var(--text-1);font-weight:500;}
.mono{font-family:var(--mono);font-size:12.5px;}
.tag{font-size:11px;padding:3px 9px;border-radius:6px;font-weight:500;}
.row-edit-btn{width:28px;height:28px;border-radius:7px;border:0.5px solid var(--border);background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center;color:var(--text-2);cursor:pointer;}
.row-edit-btn:hover{background:var(--surface-hover);color:var(--text-1);}

/* ---------- SCROLLABLE TABLE WITH STICKY HEADER ---------- */
.table-scroll{height:calc(100dvh - 246px);overflow-y:auto;}
.table-scroll table{width:100%;border-collapse:separate;border-spacing:0;}
.table-scroll thead th{position:sticky;top:0;background:var(--surface);z-index:2;}

/* ---------- TABLE PAGINATION ---------- */
.table-pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:0.5px solid var(--border);font-size:12.5px;color:var(--text-3);}
.pagination-btns{display:flex;gap:8px;}
.pagination-btns .btn{padding:6px 12px;font-size:12.5px;gap:4px;}
.pagination-btns .btn:disabled{opacity:0.4;cursor:not-allowed;}
.pagination-btns .btn:disabled:hover{background:var(--surface);}

/* ---------- SERVICE CARDS (services, marketing, ai) ---------- */
.svc-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem;position:relative;}
.svc-icon{width:36px;height:36px;border-radius:9px;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:12px;}
.svc-edit-btn{position:absolute;top:1.1rem;right:1.1rem;width:28px;height:28px;border-radius:7px;border:0.5px solid var(--border);background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--text-2);cursor:pointer;}
.svc-edit-btn:hover{background:var(--surface-hover);color:var(--text-1);}
.svc-name{font-size:14px;font-weight:600;}
.svc-desc{font-size:12px;color:var(--text-3);margin:4px 0 12px;}
.svc-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--text-2);border-top:0.5px solid var(--border);padding-top:10px;}

/* plan badge ribbon — used on membership.html and pricing.html */
.plan-badge{position:absolute;top:-11px;left:1.4rem;background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:600;padding:3px 10px;border-radius:20px;}

.section-block{margin-bottom:2rem;}
.section-block h3{font-size:14px;font-weight:600;margin-bottom:0.9rem;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.inline-icon{font-size:15px;vertical-align:-2px;margin-right:5px;color:var(--text-3);}

@media(max-width:1100px){.kpi-grid,.grid-3,.pricing-grid{grid-template-columns:repeat(2,1fr);}.grid-2{grid-template-columns:1fr;}.kanban{grid-template-columns:repeat(2,1fr);}}



  /* ===== LEFT: BRAND PANEL ===== */
  .brandLoginmain{
    position:relative;

  background: var(--bg-1);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding: 50px;
    overflow:hidden;
    border-right: 1px solid var(--line);
    .brand{
      margin-bottom: 0px!important;
      background: transparent;
    }
  }
  
 
  /* drip texture */
  .drips{
    position:absolute; inset:0; pointer-events:none; opacity:0.5;
  }
  .drip{
    position:absolute; top:-10px; width:2px;
    background:linear-gradient(var(--aqua), transparent);
    animation: fall linear infinite;
    opacity:0.35;
  }
  @keyframes fall{
    0%{ transform:translateY(-40px); opacity:0;}
    10%{opacity:0.5;}
    100%{ transform:translateY(120vh); opacity:0;}
  }
 
  .brand-top{position:relative; z-index:2; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;}
  .badge{
    display:flex; align-items:center; gap:14px;
  }
  .badge-ring{
    width:52px; height:52px; border-radius:50%;
    border:2px solid var(--chrome);
    display:flex; align-items:center; justify-content:center;
    position:relative;
    flex-shrink:0;
  }
  .badge-ring::before{
    content:'';
    position:absolute; inset:5px;
    border-radius:50%;
    border:1px dashed rgba(201,214,223,0.5);
  }
  .badge-ring svg{ width:22px; height:22px; }
  .brand-name{
   
    font-weight:700;
    font-size:22px;
    letter-spacing:0.14em;
    color: var(--foam);
  }
  .brand-name span{ color: var(--aqua); }
  .brand-sub{

    font-size:11px;
    letter-spacing:0.22em;
    color: var(--chrome);
    text-transform:uppercase;
    margin-top:2px;
  }
 
  .hero{
    position:relative; z-index:2;
    margin-top: 40px;
  }
  .eyebrow{

    font-size:12px;
    letter-spacing:0.2em;
    color: var(--accent);
    text-transform:uppercase;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{
    content:''; width:26px; height:1px; background:var(--accent);
  }
  .hero h1{

    font-weight:560;
  font-size: clamp(38px, 4.6vw, 76px);
    line-height:1.04;
    letter-spacing:-0.01em;
    margin-top:18px;
    color: var(--foam);
    max-width: 12.5ch;
  }
  .hero h1 em{
    font-style:italic;
    color: var(--accent);
  }
  .hero p{

font-size: 17px;
  line-height: 1.7;
  color: rgba(245,248,247,0.62);
  max-width: 61ch;
  margin-top: 42px;
  }
 
  .stats{
    position:relative; z-index:2;
    display:flex;
    gap:40px;
    margin-top:52px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
  }
  .stat b{
    display:block;
  
    font-size:26px;
    font-weight:600;
    color: var(--foam);
  }
  .stat span{

    font-size:10.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color: var(--chrome);
  }
 
  .bay-line{
    position:relative; z-index:2;
    display:flex; align-items:center; gap:12px;
  font-size: 13px;letter-spacing:0.1em; color: var(--chrome);
    text-transform:uppercase;
  }
.bay-line a{
  color: var(--accent);
  font-weight: 700;
}
 
  /* ===== RIGHT: FORM PANEL ===== */
  .panel{
    flex:1;
    background: var(--foam);
    display:flex; align-items:center; justify-content:center;
    position:relative;
    padding: 40px;
  }
  .panel::before{
    content:'';
    position:absolute; inset:0;
    background-image: radial-gradient(rgba(11,37,69,0.05) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events:none;
  }
 
  .cardLoginBgSec{
    position:relative; z-index:2;
    width:100%;
    max-width: 600px;
  }
 
  .card-eyebrow{
   
    font-size:11px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color: #7C8A93;
    display:flex; align-items:center; justify-content:space-between;
  }
  .card-eyebrow .clock{ color:var(--navy); font-weight:500; }
 
  .cardLoginBgSec h2{

    font-weight:560;
    font-size:32px;
    color: var(--ink);
    margin-top:14px;
  }
  .cardLoginBgSec p.lead{

    font-size:13px;
    color:#6B7680;
    margin-top:8px;
    line-height:1.6;
  }
 
  form{ margin-top:34px; display:flex; flex-direction:column; gap:20px; }
 
  .fieldLogin{ position:relative; 
   label{
    display:block;

    font-size:10.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:#5B6670;
    margin-bottom:8px;
  }
  
  }

  .fieldLogin input{
    width:100%;

    font-size:17px;
    color: var(--ink);
    background:transparent;
    border:none;
    border-bottom: 1.5px solid #D7DEE0;
    padding: 8px 2px 12px;
    outline:none;
    transition: border-color 0.25s ease;
  }
  .fieldLogin input::placeholder{ color:#B7C1C6;  font-size:13px;}
  .fieldLogin input:focus{ border-color: var(--navy); }
  .fieldLogin .under{
    position:absolute; left:0; bottom:-1.5px; height:1.5px; width:0%;
    background: var(--accent);
    transition: width 0.35s ease;
  }
  .fieldLogin input:focus ~ .under{ width:100%; }

  .fieldRow{ display:flex; gap:20px; }
  .fieldRow .fieldLogin{ flex:1; min-width:0; }

  .row-between{
    display:flex; align-items:center; justify-content:space-between;
    font-family:'DM Mono', monospace; font-size:12px;
  }
  .remember{ display:flex; align-items:center; gap:8px; color:#5B6670; }
  .remember input{ accent-color: var(--navy); width:13px; height:13px; }
  .forgot{ color: var(--navy); text-decoration:none; border-bottom:1px solid transparent; }
  .forgot:hover{ border-bottom-color: var(--navy); }
 
  button.submit{
    margin-top:6px;
    background: var(--accent);
    color: #000;
    border:none;
    padding:16px;
    font-weight:600;
    font-size:13px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:10px;
    transition: background 0.25s ease, transform 0.15s ease;
    border-radius: 5px;
  }
  button.submit:hover{ background: var(--bg); color: #fff; }
  button.submit:active{ transform: scale(0.99); }
  button.submit:focus-visible{ outline:2px solid var(--aqua); outline-offset:3px; }
  button.submit svg{ width:16px; height:16px; transition: transform 0.25s ease; }
  button.submit:hover svg{ transform: translateX(3px); }
 
  .divider{
    display:flex; align-items:center; gap:14px;
    margin: 26px 0 4px;
    color:#B7C1C6;  font-size:10.5px;
    letter-spacing:0.12em; text-transform:uppercase;
  }
  .divider::before, .divider::after{ content:''; flex:1; height:1px; background:#E4E9EA; }
 
  .foot{
    margin-top:18px;

    font-size:12px;
    color:#6B7680;
    text-align:center;
  }
  .foot a{ color: var(--navy); text-decoration:none; border-bottom:1px solid var(--navy); }
 
  a.access:focus-visible, .field input:focus-visible, .remember input:focus-visible{
    outline:2px solid var(--navy); outline-offset:2px;
  }
 
  @media (max-width: 880px){
    .brand{ display:none; }
    .panel{ flex:1; }
    .fieldRow{ flex-direction:column; gap:20px; }
  }
 
  @media (prefers-reduced-motion: reduce){
    .drip, .dot{ animation:none; }
  }
  .loginMainFlexAll{
    display: flex;
    height: 100dvh;

  }