/* ============================================================
   AMIV Connect & AMIV Admin — Prototype Stylesheet
   See README.md for a map of section markers below.
============================================================ */

/* ============================================================
   TOKENS
============================================================ */
:root{
  --primary:#4e71b6;
  --primary-dark:#3d5a96;
  --primary-light:#eef2fb;
  --accent:#e8367f;
  --accent-light:#fdeaf2;
  --text:#26282b;
  --text-soft:#383838;
  --grey:#686868;
  --grey-soft:#9aa2b0;
  --bg-page:#f4f6fa;
  --bg1:#f7f7f7;
  --bg2:#ecf4fd;
  --border:#e3e6ea;
  --dark:#161a23;
  --dark2:#1f2430;
  --dark-border:rgba(255,255,255,0.08);
  --green:#2c9a48;
  --green-bg:#e6f7e9;
  --amber:#a5690a;
  --amber-bg:#fff4de;
  --red:#c0392b;
  --red-bg:#fdecec;
  --card-bg:#ffffff;
  --shadow:0 10px 30px rgba(20,30,60,0.07);
  --shadow-lg:0 20px 60px rgba(20,30,60,0.16);
  --radius:12px;
  --radius-sm:8px;
  --font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
:root:not([data-theme="light"]){
  --bg-page-auto:var(--bg-page);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --text:#eef1f6;
    --text-soft:#dbe0ea;
    --grey:#a7afc0;
    --grey-soft:#7d869a;
    --bg-page:#11141c;
    --bg1:#181c26;
    --bg2:#1b2436;
    --border:#2a3040;
    --card-bg:#181c26;
    --primary-light:#1b2436;
    --accent-light:#301622;
    --shadow:0 10px 30px rgba(0,0,0,0.4);
  }
}
:root[data-theme="dark"]{
  --text:#eef1f6;
  --text-soft:#dbe0ea;
  --grey:#a7afc0;
  --grey-soft:#7d869a;
  --bg-page:#11141c;
  --bg1:#181c26;
  --bg2:#1b2436;
  --border:#2a3040;
  --card-bg:#181c26;
  --primary-light:#1b2436;
  --accent-light:#301622;
  --shadow:0 10px 30px rgba(0,0,0,0.4);
}

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;height:100%;
  background:var(--bg-page);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}
body{
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
img{max-width:100%;}
a{cursor:pointer;text-decoration:none;color:inherit;}
button{font-family:var(--font);cursor:pointer;}
input,select,textarea{font-family:var(--font);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;}
::-webkit-scrollbar-track{background:transparent;}

.hidden{display:none !important;}

/* ============================================================
   LAYOUT PRIMITIVES
============================================================ */
.screen{display:none;min-height:100vh;}
.screen.active{display:block;}
.container{max-width:1360px;margin:0 auto;padding:0 28px;}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 24px;border-radius:10px;font-size:13px;font-weight:700;
  border:none;transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 18px rgba(78,113,182,.32);}
.btn-primary:hover{background:var(--primary-dark);}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(232,54,127,.3);}
.btn-secondary{background:var(--card-bg);color:var(--grey);border:1.5px solid var(--border);}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary);}
.btn-dark{background:var(--dark);color:#fff;}
.btn-ghost{background:transparent;color:var(--primary);font-weight:700;padding:6px 4px;}
.btn-sm{padding:8px 16px;font-size:11.5px;}
.btn-xs{padding:6px 12px;font-size:10.5px;border-radius:7px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.45;cursor:not-allowed;}
.btn svg{width:14px;height:14px;}

/* inputs */
.field{margin-bottom:18px;}
.field label{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--grey);margin-bottom:7px;}
.field .hint{font-weight:500;text-transform:none;color:var(--grey-soft);letter-spacing:0;}
.input, select.input, textarea.input{
  width:100%;border:1.5px solid var(--border);border-radius:9px;background:var(--card-bg);
  padding:12px 15px;font-size:13px;color:var(--text);outline:none;transition:border-color .15s;
}
.input:focus, select.input:focus, textarea.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);}
.input::placeholder{color:var(--grey-soft);}
textarea.input{min-height:78px;resize:vertical;}
select.input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2210%22%20height%3D%226%22%3E%3Cpath%20d%3D%22M0%200l5%206%205-6z%22%20fill%3D%22%23686868%22/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:34px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
@media(max-width:720px){.field-row,.field-row3{grid-template-columns:1fr;}}

.check-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;cursor:pointer;user-select:none;}
.checkbox{width:17px;height:17px;min-width:17px;border:1.5px solid #b7c0d4;border-radius:5px;position:relative;background:var(--card-bg);transition:.12s;margin-top:1px;}
.checkbox.checked{background:var(--primary);border-color:var(--primary);}
.checkbox.checked:after{content:'';position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.check-row .txt{font-size:12px;color:var(--text-soft);line-height:1.55;}
.check-row .txt a{color:var(--primary);font-weight:700;}

.toggle{width:38px;height:21px;border-radius:20px;background:var(--primary);position:relative;transition:.15s;cursor:pointer;flex:none;}
.toggle.off{background:#dbe0e8;}
.toggle .knob{position:absolute;top:2px;left:19px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.toggle.off .knob{left:2px;}

/* cards */
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);}
.card-pad{padding:22px 24px;}
.shadow-card{box-shadow:var(--shadow);}

/* badges */
.badge{display:inline-block;font-size:9.5px;font-weight:700;padding:4px 12px;border-radius:30px;white-space:nowrap;}
.badge-green{background:var(--green-bg);color:var(--green);}
.badge-amber{background:var(--amber-bg);color:var(--amber);}
.badge-red{background:var(--red-bg);color:var(--red);}
.badge-blue{background:var(--bg2);color:var(--primary);}
.badge-pink{background:var(--accent-light);color:var(--accent);}
.badge-grey{background:var(--bg1);color:var(--grey-soft);}

/* tables */
table.data-table{width:100%;border-collapse:collapse;}
table.data-table th{background:var(--bg1);color:var(--grey);font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;text-align:left;padding:12px 16px;border-bottom:1.5px solid var(--border);}
table.data-table td{padding:14px 16px;font-size:12.5px;border-bottom:1px solid var(--border);color:var(--text-soft);vertical-align:middle;}
table.data-table tr:last-child td{border-bottom:none;}
table.data-table tr.clickable{cursor:pointer;transition:background .1s;}
table.data-table tr.clickable:hover{background:var(--bg1);}
.link-action{color:var(--primary);font-weight:700;font-size:11.5px;}

/* toast */
#toast-wrap{position:fixed;top:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;}
.toast{background:var(--dark);color:#fff;padding:14px 20px;border-radius:10px;font-size:12.5px;font-weight:600;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;min-width:260px;animation:slidein .25s ease;}
.toast .ic{width:20px;height:20px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-size:11px;flex:none;}
@keyframes slidein{from{transform:translateX(30px);opacity:0;}to{transform:translateX(0);opacity:1;}}

/* modal */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(15,20,30,.55);z-index:2000;display:none;padding:20px;}
.modal-overlay.active{display:block;}
.modal-box{background:var(--card-bg);border-radius:16px;max-width:520px;width:90%;max-height:640px;overflow-y:auto;box-shadow:var(--shadow-lg);margin:40px auto;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;border-bottom:1px solid var(--border);}
.modal-head h3{margin:0;font-size:16px;font-weight:700;}
.modal-close{width:30px;height:30px;border-radius:50%;background:var(--bg1);border:none;font-size:16px;color:var(--grey);display:flex;align-items:center;justify-content:center;}
.modal-body{padding:24px 26px;}
.modal-foot{padding:18px 26px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;}

/* logo */
.logo-img{height:30px;display:block;}
.logo-row{display:flex;align-items:center;gap:8px;}

/* misc */
.muted{color:var(--grey);}
.small{font-size:11px;}
.flex{display:flex;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.flex-center{display:flex;align-items:center;}
.gap8{gap:8px;} .gap10{gap:10px;} .gap14{gap:14px;} .gap20{gap:20px;}
.mt8{margin-top:8px;} .mt14{margin-top:14px;} .mt20{margin-top:20px;} .mt28{margin-top:28px;}
.mb8{margin-bottom:8px;} .mb14{margin-bottom:14px;} .mb20{margin-bottom:20px;}
.wfull{width:100%;}
.section-title{font-size:17px;font-weight:700;color:var(--text);margin:0 0 4px 0;}
.section-sub{font-size:12px;color:var(--grey);margin:0 0 20px 0;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:16px;}
@media(max-width:1000px){.grid4{grid-template-columns:1fr 1fr;} .grid3{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.grid2,.grid3,.grid4{grid-template-columns:1fr;}}

/* ============================================================
   LANDING / SWITCHER
============================================================ */
#screen-landing{
  min-height:100vh;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 85% 8%, #ecf4fd 0%, rgba(236,244,253,0) 55%),
    radial-gradient(circle at 5% 92%, #fdeaf2 0%, rgba(253,234,242,0) 55%),
    var(--bg-page);
}
#screen-landing.active{display:flex;flex-direction:column;}
.landing-top{padding:36px 48px;}
.landing-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 24px 60px 24px;text-align:center;}
.landing-kicker{display:inline-block;background:var(--bg2);color:var(--primary);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:8px 18px;border-radius:30px;margin-bottom:26px;}
.landing-mid h1{font-size:clamp(30px,5vw,50px);font-weight:800;color:var(--text);margin:0 0 16px 0;line-height:1.18;max-width:820px;}
.landing-mid h1 span{color:var(--primary);}
.landing-mid p{font-size:15px;color:var(--grey);max-width:560px;margin:0 0 46px 0;line-height:1.65;}
.landing-cards{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;max-width:900px;}
.landing-card{
  width:320px;background:var(--card-bg);border:1.5px solid var(--border);border-radius:20px;padding:32px 28px;
  text-align:left;box-shadow:var(--shadow);transition:transform .18s ease, box-shadow .18s ease;cursor:pointer;
}
.landing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary);}
.landing-card .ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:22px;}
.landing-card.connect .ic{background:var(--bg2);}
.landing-card.admin .ic{background:var(--dark);}
.landing-card h3{font-size:17px;font-weight:700;margin:0 0 8px 0;color:var(--text);}
.landing-card p{font-size:12px;color:var(--grey);line-height:1.6;margin:0 0 18px 0;max-width:none;}
.landing-card .enter{font-size:12px;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:6px;}
.landing-foot{padding:26px 48px;font-size:11px;color:var(--grey-soft);text-align:center;border-top:1px solid var(--border);}
.theme-toggle{
  border:1.5px solid var(--border);background:var(--card-bg);border-radius:30px;padding:8px 16px;font-size:11px;font-weight:700;color:var(--grey);
  display:flex;align-items:center;gap:6px;
}

/* ============================================================
   CONNECT APP SHELL
============================================================ */
#app-connect{background:var(--bg-page);min-height:100vh;}
.connect-navbar{
  background:var(--card-bg);border-bottom:1px solid var(--border);z-index:100;
}
.connect-navbar-inner{max-width:1360px;margin:0 auto;padding:13px 28px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.connect-nav-links{display:flex;gap:6px;flex:1;justify-content:center;flex-wrap:wrap;}
.connect-nav-links a{
  padding:9px 16px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--grey);transition:.12s;
}
.connect-nav-links a:hover{background:var(--bg1);}
.connect-nav-links a.active{color:var(--primary);background:var(--primary-light);}
.connect-user{position:relative;}
.user-chip{display:flex;align-items:center;gap:8px;background:var(--bg1);border-radius:30px;padding:6px 14px 6px 6px;font-size:12px;font-weight:600;color:var(--text);border:none;}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;flex:none;}
.avatar.dark{background:var(--dark);}
.dropdown{position:absolute;top:calc(100% + 10px);right:0;width:220px;background:var(--card-bg);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px 0;display:none;z-index:200;}
.dropdown.active{display:block;}
.dropdown .du{padding:12px 18px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.dropdown .du .nm{font-size:12.5px;font-weight:700;}
.dropdown .du .em{font-size:10.5px;color:var(--grey);}
.dropdown .di{padding:10px 18px;font-size:12px;font-weight:600;color:var(--text-soft);display:flex;align-items:center;gap:8px;}
.dropdown .di:hover{background:var(--bg1);}
.dropdown .di.danger{color:var(--accent);border-top:1px solid var(--border);margin-top:6px;padding-top:12px;}

.connect-body{max-width:1360px;margin:0 auto;padding:32px 28px 80px 28px;}
.page-head{margin-bottom:24px;}
.page-head h1{font-size:22px;font-weight:700;margin:0 0 4px 0;}
.page-head p{font-size:12.5px;color:var(--grey);margin:0;}

/* stat cards */
.stat-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;}
.stat-card .n{font-size:26px;font-weight:800;color:var(--text);}
.stat-card .l{font-size:10px;color:var(--grey);text-transform:uppercase;letter-spacing:.4px;margin-top:5px;font-weight:600;}
.stat-card .delta{font-size:10px;font-weight:700;color:var(--green);margin-top:8px;}
.stat-card.zero .n{color:var(--grey-soft);}

/* getting started checklist */
.checklist{background:var(--bg2);border-radius:14px;padding:20px 24px;margin-bottom:24px;}
.checklist-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--primary);margin-bottom:14px;}
.check-item{display:flex;align-items:center;padding:8px 0;gap:10px;}
.check-item .ci{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;flex:none;}
.check-item .ci.done{background:var(--green);color:#fff;}
.check-item .ci.todo{border:1.5px solid #b7c0d4;}
.check-item .ct{font-size:12px;font-weight:600;flex:1;}
.check-item .ct.todo{color:var(--grey);font-weight:500;}
.check-item .cta{font-size:10.5px;font-weight:700;color:var(--primary);}

/* empty state */
.empty-state{border:2px dashed var(--border);border-radius:14px;padding:56px 30px;text-align:center;background:var(--bg1);}
.empty-icon{width:58px;height:58px;border-radius:16px;background:var(--bg2);margin:0 auto 18px auto;display:flex;align-items:center;justify-content:center;font-size:26px;}
.empty-title{font-size:14px;font-weight:700;margin-bottom:6px;}
.empty-sub{font-size:11.5px;color:var(--grey);max-width:320px;margin:0 auto 22px auto;line-height:1.6;}

/* stepper */
.stepper-wrap{background:var(--bg2);border-radius:14px;padding:22px 24px;margin-bottom:26px;overflow-x:auto;}
.stepper{display:flex;gap:2px;min-width:640px;}
.step-item{flex:1;text-align:center;position:relative;cursor:pointer;}
.step-item .sc{width:28px;height:28px;border-radius:50%;background:#c9d6ea;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 6px auto;transition:.15s;}
.step-item.done .sc{background:var(--primary);}
.step-item.current .sc{background:var(--accent);box-shadow:0 0 0 5px rgba(232,54,127,.18);}
.step-item .sl{font-size:9px;color:#8296bb;text-transform:uppercase;letter-spacing:.3px;font-weight:700;}
.step-item.current .sl{color:var(--accent);}
.step-item.done .sl{color:var(--primary);}
.step-item:not(:first-child):before{content:'';position:absolute;top:14px;left:-50%;width:100%;height:2px;background:#c9d6ea;z-index:-1;}
.step-item.done:before{background:var(--primary);}

.onboard-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:32px 36px;max-width:900px;margin:0 auto;}
.step-panel{display:none;}
.step-panel.active{display:block;animation:fadein .2s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* connector cards */
.connector-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:820px){.connector-grid{grid-template-columns:repeat(2,1fr);}}
.connector-card{border:1.5px solid var(--border);border-radius:14px;padding:22px 16px;text-align:center;cursor:pointer;transition:.15s;background:var(--card-bg);}
.connector-card:hover{border-color:var(--primary);}
.connector-card.selected{border-color:var(--primary);background:var(--primary-light);box-shadow:0 6px 20px rgba(78,113,182,.15);}
.connector-card.disabled{opacity:.5;cursor:not-allowed;}
.connector-icon{width:46px;height:46px;border-radius:12px;background:var(--bg2);margin:0 auto 14px auto;display:flex;align-items:center;justify-content:center;font-size:20px;}
.connector-card.selected .connector-icon{background:var(--primary);color:#fff;}
.connector-name{font-size:12.5px;font-weight:700;margin-bottom:6px;}
.connector-desc{font-size:10px;color:var(--grey);line-height:1.5;}
.pill-badge{display:inline-block;margin-top:12px;font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:3px 10px;border-radius:30px;}

/* catalog */
.catalog-tabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1.5px solid var(--border);flex-wrap:wrap;}
.catalog-tab{padding:10px 18px;font-size:11.5px;font-weight:700;color:var(--grey);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;}
.catalog-tab.active{color:var(--primary);border-color:var(--primary);}
.catalog-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:22px;}
@media(max-width:820px){.catalog-layout{grid-template-columns:1fr;}}
.svc-row{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:.12s;}
.svc-row:hover{border-color:var(--primary);}
.svc-row.checked{border-color:var(--primary);background:var(--primary-light);}
.svc-row.pending{border-color:#f2dfb0;background:#fffaf0;cursor:default;}
.svc-chk{width:18px;height:18px;border:1.5px solid #b7c0d4;border-radius:5px;flex:none;margin-right:12px;position:relative;}
.svc-row.checked .svc-chk{background:var(--primary);border-color:var(--primary);}
.svc-row.checked .svc-chk:after{content:'';position:absolute;left:5px;top:2px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.svc-info{flex:1;}
.svc-name{font-size:12.5px;font-weight:700;}
.svc-desc{font-size:10.5px;color:var(--grey);margin-top:2px;}
.svc-price{font-size:13px;font-weight:700;color:var(--primary);white-space:nowrap;margin-left:10px;}
.custom-pill{display:inline-block;margin-left:6px;font-size:7.5px;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:20px;background:var(--accent-light);color:var(--accent);}
.pending-pill{display:inline-block;font-size:8.5px;font-weight:700;padding:4px 10px;border-radius:20px;background:var(--amber-bg);color:var(--amber);flex:none;margin-right:12px;}
.request-cta{border:1.5px dashed var(--primary);border-radius:12px;padding:16px 18px;text-align:center;background:var(--bg2);cursor:pointer;transition:.12s;}
.request-cta:hover{background:var(--primary-light);}
.request-cta .t{font-size:12px;font-weight:700;color:var(--primary);}
.request-cta .d{font-size:10px;color:var(--grey);margin-top:4px;}
.summary-card{background:var(--bg1);border-radius:14px;padding:20px;}
.summary-title{font-size:10.5px;font-weight:700;text-transform:uppercase;color:var(--grey);letter-spacing:.4px;margin-bottom:14px;}
.summary-item{display:flex;justify-content:space-between;font-size:11.5px;padding:8px 0;border-bottom:1px solid var(--border);}
.summary-item .p{font-weight:700;color:var(--text);}
.summary-total{display:flex;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:2px solid var(--text);font-size:13.5px;font-weight:700;}
.summary-total .p{color:var(--primary);}

.note-box{display:flex;gap:10px;align-items:flex-start;background:var(--bg1);border-radius:10px;padding:13px 17px;font-size:11px;color:var(--grey);margin-top:14px;}
.note-box.blue{background:var(--bg2);color:var(--primary);}
.note-box.green{background:var(--green-bg);color:var(--green);}
.note-box.amber{background:#fff8ec;border:1px solid #f2dfb0;color:#8a6d1f;}

/* trigger tabs manual entry */
.trigger-tabs{display:flex;border-bottom:1.5px solid var(--border);margin-bottom:22px;}
.trigger-tab{padding:12px 20px;font-size:12.5px;font-weight:700;color:var(--grey);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;}
.trigger-tab.active{color:var(--primary);border-color:var(--primary);}
.trigger-tab .tag{display:inline-block;margin-left:6px;font-size:8px;padding:2px 7px;border-radius:10px;background:var(--bg1);color:var(--grey-soft);font-weight:700;text-transform:uppercase;}
.id-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
.id-opt{border:1.5px solid var(--border);border-radius:10px;padding:13px 16px;text-align:center;font-size:11.5px;font-weight:700;color:var(--grey);cursor:pointer;}
.id-opt.sel{border-color:var(--primary);background:var(--primary-light);color:var(--primary);}
.fetch-row{display:flex;gap:10px;margin-bottom:20px;}
.fetch-row .input{flex:1;}
.preview-card{border:1.5px solid var(--green);background:var(--green-bg);border-radius:12px;padding:20px 22px;margin-bottom:20px;display:none;}
.preview-card.active{display:block;animation:fadein .25s ease;}
.preview-head{display:flex;justify-content:space-between;margin-bottom:14px;font-size:11.5px;font-weight:700;color:var(--green);}
.preview-head .e{font-weight:500;color:var(--grey);}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:700px){.preview-grid{grid-template-columns:1fr 1fr;}}
.preview-field-label{font-size:9px;text-transform:uppercase;letter-spacing:.3px;color:var(--grey);margin-bottom:3px;}
.preview-field-val{font-size:12px;font-weight:700;color:var(--text);margin-bottom:12px;}
.loader{display:none;align-items:center;gap:8px;font-size:11.5px;color:var(--grey);margin-bottom:16px;}
.loader.active{display:flex;}
.spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* team roles */
.role-pill{display:inline-block;font-size:9.5px;font-weight:700;padding:4px 11px;border-radius:30px;background:var(--bg2);color:var(--primary);}
.role-pill.owner{background:var(--accent-light);color:var(--accent);}
.role-pill.super{background:var(--dark);color:#fff;}
.role-pill.ro{background:var(--bg1);color:var(--grey-soft);}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;}
.status-dot.active{background:var(--green);}
.status-dot.pending{background:#f9ae0e;}

/* settings */
.settings-layout{display:grid;grid-template-columns:190px 1fr;gap:30px;}
@media(max-width:760px){.settings-layout{grid-template-columns:1fr;}}
.settings-nav{display:flex;flex-direction:column;gap:4px;}
.settings-nav-item{padding:11px 16px;font-size:12px;font-weight:600;color:var(--grey);border-radius:9px;cursor:pointer;}
.settings-nav-item.active{background:var(--bg2);color:var(--primary);}
.settings-panel{display:none;}
.settings-panel.active{display:block;animation:fadein .2s ease;}
.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--border);}
.toggle-row .t{font-size:12.5px;font-weight:600;}
.toggle-row .d{font-size:10.5px;color:var(--grey);margin-top:3px;}
.danger-box{border:1.5px solid #fbd5d5;background:#fff7f7;border-radius:12px;padding:18px 20px;margin-top:26px;}
.danger-box .t{font-size:12.5px;font-weight:700;color:var(--red);margin-bottom:5px;}
.danger-box .d{font-size:10.5px;color:var(--grey);margin-bottom:12px;}

/* ============================================================
   ADMIN APP SHELL
============================================================ */
#app-admin{min-height:100vh;background:var(--bg-page);}
#app-admin.active{display:flex;}
.admin-sidebar{
  width:220px;background:var(--dark);color:#fff;flex:none;min-height:100vh;
  display:flex;flex-direction:column;
}
.admin-logo-wrap{padding:24px 24px 18px 24px;border-bottom:1px solid var(--dark-border);}
.admin-logo-wrap img{height:20px;filter:brightness(0) invert(1);display:block;margin-bottom:8px;}
.admin-tag{display:inline-block;font-size:8.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#8fb0ff;background:rgba(126,161,255,.14);padding:3px 10px;border-radius:20px;}
.admin-nav{padding:16px 0;flex:1;}
.admin-nav-item{
  display:flex;align-items:center;justify-content:space-between;padding:12px 24px;font-size:12.5px;font-weight:600;
  color:#9aa5bd;cursor:pointer;border-right:3px solid transparent;transition:.12s;
}
.admin-nav-item:hover{color:#fff;}
.admin-nav-item.active{color:#fff;background:rgba(126,161,255,.14);border-right-color:#7ea1ff;}
.nav-badge{display:inline-block;background:var(--accent);color:#fff;font-size:8.5px;font-weight:700;padding:2px 7px;border-radius:20px;}
.admin-sidebar-foot{padding:18px 24px;border-top:1px solid var(--dark-border);}
.admin-back-link{font-size:11px;color:#8290a8;font-weight:600;display:flex;align-items:center;gap:6px;}
.admin-back-link:hover{color:#fff;}

.admin-main{flex:1;min-width:0;}
.admin-topbar{background:var(--card-bg);border-bottom:1px solid var(--border);padding:16px 32px;display:flex;align-items:center;justify-content:space-between;z-index:50;}
.admin-topbar .t{font-size:16px;font-weight:700;}
.admin-topbar .t .crumb{color:var(--grey);font-weight:500;}
.admin-body{padding:28px 32px 80px 32px;}

.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:14px;flex-wrap:wrap;}
.search-bar{background:var(--card-bg);border:1.5px solid var(--border);border-radius:9px;padding:10px 16px;font-size:11.5px;color:var(--grey-soft);width:220px;}

.feed-item{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);}
.feed-item:last-child{border-bottom:none;}
.dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:5px;}
.feed-text{font-size:11.5px;flex:1;color:var(--text-soft);}
.feed-time{font-size:10px;color:var(--grey-soft);white-space:nowrap;}

.card-grid-admin{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:1000px){.card-grid-admin{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.card-grid-admin{grid-template-columns:1fr;}}
.grid-card{background:var(--card-bg);border:1.5px solid var(--border);border-radius:14px;padding:22px;cursor:pointer;transition:.15s;}
.grid-card:hover{border-color:var(--primary);box-shadow:var(--shadow);}
.grid-card-top{display:flex;justify-content:space-between;margin-bottom:14px;}
.grid-icon{width:36px;height:36px;border-radius:10px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:16px;}
.grid-card .name{font-size:13.5px;font-weight:700;margin-bottom:6px;}
.grid-card .desc{font-size:10.5px;color:var(--grey);line-height:1.5;margin-bottom:14px;min-height:32px;}
.grid-card .meta{font-size:10px;color:var(--grey-soft);border-top:1px solid var(--border);padding-top:12px;}
.grid-card.dashed{border-style:dashed;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--primary);min-height:180px;}

.tabs-pill{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;}
.tab-pill{padding:9px 18px;font-size:10.5px;font-weight:700;color:var(--grey);background:var(--card-bg);cursor:pointer;border-right:1px solid var(--border);}
.tab-pill:last-child{border-right:none;}
.tab-pill.active{background:var(--dark);color:#fff;}

/* field builder */
.fb-row{display:grid;grid-template-columns:16px 1.3fr 1.1fr 0.9fr 70px 16px;gap:10px;align-items:center;border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:9px;background:var(--card-bg);}
.fb-mini-label{font-size:8px;text-transform:uppercase;color:var(--grey-soft);margin-bottom:3px;font-weight:700;}
.fb-mini-val{font-size:11px;font-weight:600;}
.fb-mini-val.mono{font-family:'Courier New',monospace;color:var(--primary);}
.fb-drag{color:#c3c9d3;font-size:13px;cursor:grab;}
.fb-del{color:var(--grey-soft);font-size:15px;cursor:pointer;text-align:right;}
.fb-del:hover{color:var(--red);}
.fb-input{border:1.5px solid var(--border);border-radius:6px;padding:6px 8px;font-size:11px;width:100%;background:var(--card-bg);color:var(--text);}
.preview-panel-admin{background:var(--bg1);border-radius:14px;padding:20px 22px;}
.preview-panel-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--grey);margin-bottom:16px;}
.pm-field{margin-bottom:14px;}
.pm-label{font-size:9.5px;font-weight:700;text-transform:uppercase;color:var(--grey);margin-bottom:5px;}
.pm-input{border:1.5px solid var(--border);border-radius:7px;background:var(--card-bg);padding:9px 12px;font-size:11px;color:var(--grey-soft);}

.req-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:820px){.req-two{grid-template-columns:1fr;}}
.req-card-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--grey);margin-bottom:16px;}
.req-field{margin-bottom:14px;}
.req-field-label{font-size:9px;text-transform:uppercase;color:var(--grey-soft);font-weight:700;margin-bottom:3px;}
.req-field-val{font-size:12.5px;color:var(--text);font-weight:600;line-height:1.5;}
.visibility-box{background:var(--bg2);border-radius:9px;padding:12px 15px;font-size:11px;color:var(--primary);font-weight:600;margin-top:10px;display:flex;align-items:center;gap:8px;}

/* utility icon circle */
.icirc{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex:none;}

@media(max-width:900px){
  .connect-nav-links{justify-content:flex-start;}
}
@media(max-width:760px){
  .admin-sidebar{position:fixed;left:-240px;z-index:500;transition:left .2s;height:100vh;top:0;background:var(--dark);}
  .admin-sidebar.open{left:0;box-shadow:20px 0 40px rgba(0,0,0,.25);}
  .admin-menu-btn{display:inline-flex !important;}
  .admin-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:400;}
  .admin-overlay.active{display:block;}
}
.admin-menu-btn{display:none;width:36px;height:36px;border-radius:9px;border:1.5px solid var(--border);background:var(--card-bg);align-items:center;justify-content:center;font-size:16px;margin-right:12px;flex:none;}