:root{
    --navy-0:#0E1B2A;
    --navy-1:#152840;
    --navy-2:#1C3352;
    --line:#5FA8CB;
    --line-dim:rgba(95,168,203,0.28);
    --amber:#F2B705;
    --copper:#C8763C;
    --paper:#EDEAE0;
    --paper-dim:rgba(237,234,224,0.62);
    --green:#4FA97A;
    --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      /* This product's identity is a dark blueprint; keep it dark regardless of system theme, */
      /* but still respond if the viewer forces light explicitly via data-theme below. */
    }
  }
  :root[data-theme="light"]{
    --navy-0:#0E1B2A; --navy-1:#152840; --paper:#EDEAE0;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--navy-0);
    color:var(--paper);
    font-family:var(--font-body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  body::before{
    content:"";
    position:fixed; inset:0;
    background-image:
      linear-gradient(var(--line-dim) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-dim) 1px, transparent 1px);
    background-size:42px 42px;
    opacity:0.16;
    pointer-events:none;
    z-index:0;
  }
  .wrap{max-width:1120px; margin:0 auto; padding:0 28px; position:relative; z-index:1;}
  h1,h2,h3{font-family:var(--font-display); font-weight:600; margin:0; color:var(--paper); letter-spacing:-0.01em;}
  p{margin:0;}
  a{color:inherit;}
  ::selection{background:var(--amber); color:var(--navy-0);}
  :focus-visible{outline:2px solid var(--amber); outline-offset:3px;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  /* ---------- NAV ---------- */
  nav{
    position:sticky; top:0; z-index:20;
    background:rgba(14,27,42,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line-dim);
  }
  .nav-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 28px; max-width:1120px; margin:0 auto;}
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:1.05rem;}
  .brand svg{width:26px; height:26px; flex-shrink:0;}
  .nav-links{display:flex; gap:32px; font-size:0.92rem; color:var(--paper-dim);}
  .nav-links a{text-decoration:none; transition:color 0.15s;}
  .nav-links a:hover{color:var(--amber);}
  .nav-cta{
    background:var(--amber); color:var(--navy-0); font-family:var(--font-body); font-weight:600;
    padding:9px 18px; border-radius:3px; text-decoration:none; font-size:0.9rem;
    border:1px solid var(--amber);
  }
  @media (max-width:760px){ .nav-links{display:none;} }

  /* ---------- HERO ---------- */
  .hero{padding:88px 0 64px; position:relative; overflow:hidden;}
  .hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
  @media (max-width:860px){ .hero-grid{grid-template-columns:1fr;} }
  .kicker{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--copper); font-size:0.85rem; font-weight:500; margin-bottom:18px;
    font-family:var(--font-body);
  }
  .kicker .dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(79,169,122,0.22);}
  .hero h1{font-size:clamp(2.1rem, 4.4vw, 3.4rem); line-height:1.08; max-width:11ch;}
  .hero-sub{margin-top:22px; font-size:1.08rem; color:var(--paper-dim); max-width:46ch;}
  .hero-actions{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
  .btn-primary{
    background:var(--amber); color:var(--navy-0); font-weight:600; font-family:var(--font-body);
    padding:14px 26px; border-radius:3px; text-decoration:none; font-size:0.98rem;
    border:1px solid var(--amber);
  }
  .btn-secondary{
    color:black; font-weight:500; font-family:var(--font-body);
    padding:14px 22px; border-radius:3px; text-decoration:none; font-size:0.98rem;
    border:1px solid var(--line-dim); background:var(--amber);
  }
  .hero-meta{display:flex; gap:28px; margin-top:40px; flex-wrap:wrap;}
  .hero-meta div{font-size:0.82rem; color:var(--paper-dim);}
  .hero-meta strong{display:block; font-family:var(--font-display); font-size:1.3rem; color:var(--paper); font-weight:600;}

  /* phone mock */
  .phone-stage{position:relative; display:flex; justify-content:center;}
  .phone{
    width:270px; background:var(--navy-1); border:1px solid var(--line-dim);
    border-radius:22px; padding:14px; box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
    position:relative; z-index:2;
  }
  .phone-screen{background:var(--navy-0); border-radius:14px; padding:18px 16px; min-height:420px;}
  .ps-label{font-size:0.68rem; color:var(--copper); letter-spacing:0.02em; margin-bottom:4px;}
  .ps-title{font-family:var(--font-display); font-size:1.05rem; font-weight:600; margin-bottom:16px;}
  .ps-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line-dim); font-size:0.78rem;}
  .ps-row span:last-child{color:var(--paper-dim);}
  .ps-total{display:flex; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
  .ps-total strong{font-family:var(--font-display); color:var(--amber); font-size:1.15rem;}
  .ps-btn{
    margin-top:20px; background:var(--amber); color:var(--navy-0); text-align:center;
    padding:11px; border-radius:6px; font-weight:600; font-size:0.82rem;
  }
  .trace-svg{position:absolute; inset:-40px -60px; width:calc(100% + 120px); height:calc(100% + 80px); z-index:1; pointer-events:none;}
  .trace-path{
    fill:none; stroke:var(--line); stroke-width:1.5;
    stroke-dasharray:900; stroke-dashoffset:900;
    animation:draw 2.4s ease-out 0.3s forwards;
  }
  .trace-node{fill:var(--amber); opacity:0; animation:appear 0.4s ease-out 2.5s forwards;}
  @keyframes draw{to{stroke-dashoffset:0;}}
  @keyframes appear{to{opacity:1;}}

  /* ---------- SECTION SHELL ---------- */
  section{padding:76px 0; position:relative;}
  .section-head{max-width:52ch; margin-bottom:48px;}
  .section-head .kicker{margin-bottom:14px;}
  .section-head h2{font-size:clamp(1.6rem, 3vw, 2.2rem); line-height:1.16;}
  .section-head p{margin-top:14px; color:var(--paper-dim); font-size:1.02rem;}
  .divider{
    height:1px; background:linear-gradient(90deg, transparent, var(--line-dim) 20%, var(--line-dim) 80%, transparent);
  }

  /* ---------- FEATURES (schematic node row) ---------- */
  .feature-rail{position:relative; margin-top:8px;}
  .feature-rail::before{
    content:""; position:absolute; top:26px; left:0; right:0; height:1px;
    background:var(--line-dim);
  }
  .feature-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:40px;}
  @media (max-width:820px){ .feature-grid{grid-template-columns:1fr;} }
  .feature{position:relative; padding-top:52px;}
  .feature-node{
    position:absolute; top:16px; left:0; width:20px; height:20px; border-radius:50%;
    background:var(--navy-0); border:2px solid var(--amber);
    display:flex; align-items:center; justify-content:center;
  }
  .feature-node .inner{width:7px; height:7px; border-radius:50%; background:var(--amber);}
  .feature h3{font-size:1.15rem; margin-bottom:10px;}
  .feature p{color:var(--paper-dim); font-size:0.95rem;}

  /* ---------- QUOTE FLOW STRIP ---------- */
  .flow{
    background:var(--navy-1); border:1px solid var(--line-dim); border-radius:6px;
    padding:40px 32px; display:flex; align-items:center; gap:0; flex-wrap:wrap; justify-content:space-between;
  }
  .flow-step{display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:120px;}
  .flow-step .n{font-family:var(--font-display); color:var(--copper); font-size:0.82rem;}
  .flow-step .t{font-family:var(--font-display); font-weight:600; font-size:1rem;}
  .flow-arrow{color:var(--line); font-size:1.3rem; opacity:0.6; padding:0 6px;}
  @media (max-width:760px){ .flow{flex-direction:column; align-items:flex-start;} .flow-arrow{transform:rotate(90deg); align-self:flex-start; margin-left:4px;} }

  /* ---------- LESSON PREVIEW ---------- */
  .lesson-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  @media (max-width:820px){ .lesson-grid{grid-template-columns:1fr;} }
  .lesson-card{
    background:var(--navy-1); border:1px solid var(--line-dim); border-radius:4px; padding:24px;
    display:flex; flex-direction:column; gap:14px;
  }
  .lesson-level{font-size:0.75rem; color:var(--copper);}
  .lesson-card h3{font-size:1.05rem;}
  .lesson-card p{color:var(--paper-dim); font-size:0.9rem;}
  .lesson-diagram{
    height:88px; border:1px solid var(--line-dim); border-radius:3px; position:relative; overflow:hidden;
    background:
      linear-gradient(var(--line-dim) 1px, transparent 1px) 0 0/16px 16px,
      linear-gradient(90deg, var(--line-dim) 1px, transparent 1px) 0 0/16px 16px;
  }
  .lesson-diagram img{width:100%; height:100%; object-fit:cover;}

  /* ---------- TESTIMONIALS ---------- */
  .testi-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
  @media (max-width:760px){ .testi-grid{grid-template-columns:1fr;} }
  .testi{border-left:2px solid var(--copper); padding-left:22px;}
  .testi p{font-size:1.02rem; color:var(--paper); line-height:1.6;}
  .testi-who{margin-top:14px; font-size:0.85rem; color:var(--paper-dim);}
  .testi-who strong{color:var(--paper); font-weight:600;}

  /* ---------- BUSINESS CARD PREVIEW ---------- */
  .card-strip{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
  @media (max-width:820px){ .card-strip{grid-template-columns:1fr;} }
  .biz-card{
    background:linear-gradient(135deg, var(--navy-2), var(--navy-1));
    border:1px solid var(--copper); border-radius:8px; padding:28px; position:relative;
  }
  .biz-card::after{
    content:""; position:absolute; top:16px; right:16px; width:34px; height:34px;
    background:
      repeating-linear-gradient(0deg, var(--paper) 0 3px, transparent 3px 6px),
      repeating-linear-gradient(90deg, var(--paper) 0 3px, transparent 3px 6px);
    opacity:0.85; border-radius:2px;
  }
  .biz-card .bname{font-family:var(--font-display); font-weight:600; font-size:1.2rem;}
  .biz-card .btag{color:var(--copper); font-size:0.82rem; margin-top:4px;}
  .biz-card .bcontact{margin-top:18px; font-size:0.85rem; color:var(--paper-dim); display:flex; flex-direction:column; gap:6px;}

  /* ---------- CTA FOOTER ---------- */
  .cta-band{
    background:var(--navy-1); border-top:1px solid var(--line-dim); border-bottom:1px solid var(--line-dim);
    padding:64px 0; text-align:left;
  }
  .cta-band h2{font-size:clamp(1.6rem,3.4vw,2.4rem); max-width:16ch;}
  .cta-band-inner{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;}
  .store-badges{display:flex; gap:12px; flex-wrap:wrap;}
  .store-badge{
    border:1px solid var(--line-dim); border-radius:5px; padding:11px 18px; font-size:0.9rem; color:var(--navy-0);
    text-decoration:none; background-color: rgb(249, 204, 0);
  }

  footer{padding:36px 0 48px;}
  .footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:0.82rem; color:var(--paper-dim);}
  .footer-links{display:flex; gap:22px;}
  .footer-links a{text-decoration:none;}
  .footer-links a:hover{color:var(--amber);}

  /* ---------- SUBPAGE SHARED ---------- */
  .page-hero{padding:64px 0 48px; border-bottom:1px solid var(--line-dim);}
  .page-hero .kicker{margin-bottom:14px;}
  .page-hero h1{font-size:clamp(1.9rem, 4vw, 2.9rem); line-height:1.1; max-width:20ch;}
  .page-hero p{margin-top:16px; color:var(--paper-dim); font-size:1.05rem; max-width:56ch;}
  .breadcrumb{font-size:0.82rem; color:var(--paper-dim); margin-bottom:18px;}
  .breadcrumb a{color:var(--line); text-decoration:none;}
  .breadcrumb a:hover{color:var(--amber);}
  .prose{max-width:70ch;}
  .prose h2{font-size:1.4rem; margin-top:42px; margin-bottom:14px;}
  .prose h2:first-child{margin-top:0;}
  .prose p{color:var(--paper-dim); font-size:1rem; margin-bottom:14px;}
  .prose ul{color:var(--paper-dim); font-size:1rem; padding-left:20px; margin-bottom:14px;}
  .prose li{margin-bottom:6px;}
  .prose strong{color:var(--paper);}
  .updated{font-size:0.82rem; color:var(--copper); margin-bottom:8px;}

  /* ---------- STEP LIST (how it works) ---------- */
  .step-list{display:flex; flex-direction:column; gap:0;}
  .step-item{
    display:grid; grid-template-columns:64px 1fr; gap:24px; padding:32px 0;
    border-bottom:1px solid var(--line-dim); position:relative;
  }
  .step-item:last-child{border-bottom:none;}
  .step-num{
    font-family:var(--font-display); font-size:1.6rem; color:var(--amber); font-weight:600;
    line-height:1;
  }
  .step-item h3{font-size:1.15rem; margin-bottom:8px;}
  .step-item p{color:var(--paper-dim); font-size:0.96rem; max-width:56ch;}

  /* ---------- LEARN INDEX ---------- */
  .level-block{margin-bottom:52px;}
  .level-block h2{font-size:1.15rem; color:var(--paper); margin-bottom:4px;}
  .level-block .level-desc{color:var(--paper-dim); font-size:0.9rem; margin-bottom:22px;}
  .lesson-link-card{
    display:block; background:var(--navy-1); border:1px solid var(--line-dim); border-radius:4px;
    padding:20px 22px; text-decoration:none; transition:border-color 0.15s;
  }
  .lesson-link-card:hover{border-color:var(--amber);}
  .lesson-catalog-image{display:block;width:100%;max-height:180px;aspect-ratio:16/7;object-fit:cover;margin-bottom:12px;border-radius:4px;}
  .lesson-link-card h3{font-size:1rem; color:var(--paper); margin-bottom:6px; font-family:var(--font-display); font-weight:600;}
  .lesson-link-card p{color:var(--paper-dim); font-size:0.88rem;}
  .lesson-link-row{display:flex; justify-content:space-between; align-items:center; gap:16px;}
  .lesson-tag{font-size:0.72rem; color:var(--copper); border:1px solid var(--copper); border-radius:20px; padding:3px 10px; flex-shrink:0;}

  /* ---------- LESSON DETAIL ---------- */
  .lesson-header{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap;}
  .lesson-meta-row{display:flex; gap:18px; margin-top:12px; font-size:0.85rem; color:var(--paper-dim);}
  .diagram-large{
    height:280px; border:1px solid var(--line-dim); border-radius:6px; position:relative; overflow:hidden;
    background:
      linear-gradient(var(--line-dim) 1px, transparent 1px) 0 0/24px 24px,
      linear-gradient(90deg, var(--line-dim) 1px, transparent 1px) 0 0/24px 24px;
    margin:32px 0;
  }
  .diagram-large svg{position:absolute; inset:0; width:100%; height:100%;}
  .diagram-caption{font-size:0.82rem; color:var(--paper-dim); text-align:center; margin-top:-20px; margin-bottom:32px;}
  .quiz-box{
    background:var(--navy-1); border:1px solid var(--copper); border-radius:6px; padding:26px 28px; margin-top:38px;
  }
  .quiz-box .kicker{margin-bottom:10px;}
  .quiz-q{font-family:var(--font-display); font-weight:600; margin-bottom:16px; font-size:1.02rem;}
  .quiz-opt{
    display:block; padding:11px 14px; border:1px solid var(--line-dim); border-radius:4px;
    margin-bottom:10px; font-size:0.92rem; color:var(--paper-dim);
  }
  .lesson-nav{display:flex; justify-content:space-between; margin-top:48px; padding-top:24px; border-top:1px solid var(--line-dim); font-size:0.9rem;}
  .lesson-nav a{text-decoration:none; color:var(--paper-dim);}
  .lesson-nav a:hover{color:var(--amber);}

  /* ---------- PRICING ---------- */
  .price-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:8px;}
  @media (max-width:760px){ .price-grid{grid-template-columns:1fr;} }
  .price-card{
    background:var(--navy-1); border:1px solid var(--line-dim); border-radius:6px; padding:34px 30px;
  }
  .price-card.pro{border-color:var(--amber); position:relative;}
  .price-card .plan-name{font-family:var(--font-display); font-weight:600; font-size:1.2rem;}
  .price-card .plan-price{font-family:var(--font-display); font-size:2.2rem; font-weight:600; margin:14px 0 4px; color:var(--amber);}
  .price-card .plan-note{font-size:0.82rem; color:var(--paper-dim); margin-bottom:24px;}
  .price-list{list-style:none; padding:0; margin:0;}
  .price-list li{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-dim); font-size:0.9rem; color:var(--paper-dim);}
  .price-list li:last-child{border-bottom:none;}
  .check{color:var(--green); flex-shrink:0;}
  .cross{color:var(--paper-dim); opacity:0.4; flex-shrink:0;}
  .price-cta{
    display:block; text-align:center; margin-top:26px; padding:13px; border-radius:4px;
    font-weight:600; text-decoration:none; font-size:0.92rem;
  }
  .price-card.pro .price-cta{background:var(--amber); color:var(--navy-0);}
  .price-card:not(.pro) .price-cta{border:1px solid var(--line-dim); color:var(--paper);}

  /* ---------- FAQ ---------- */
  .faq-item{border-bottom:1px solid var(--line-dim); padding:22px 0;}
  .faq-item h3{font-size:1rem; font-family:var(--font-body); font-weight:600; margin-bottom:8px;}
  .faq-item p{color:var(--paper-dim); font-size:0.92rem;}

  /* ---------- CONTACT / SUPPORT ---------- */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
  @media (max-width:760px){ .contact-grid{grid-template-columns:1fr;} }
  .contact-option{
    display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line-dim);
  }
  .contact-option:last-child{border-bottom:none;}
  .contact-icon{
    width:36px; height:36px; border-radius:50%; border:1px solid var(--amber); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; color:var(--amber); font-size:1rem;
  }
  .contact-option h3{font-size:0.98rem; margin-bottom:4px;}
  .contact-option p{color:var(--paper-dim); font-size:0.88rem;}
  .field{margin-bottom:18px;}
  .field label{display:block; font-size:0.85rem; color:var(--paper-dim); margin-bottom:6px;}
  .field input, .field textarea{
    width:100%; background:var(--navy-0); border:1px solid var(--line-dim); border-radius:4px;
    padding:11px 13px; color:var(--paper); font-family:var(--font-body); font-size:0.92rem;
  }
  .field select,
  .epro-select{
    width:100%; min-height:44px; appearance:none; cursor:pointer;
    border:1px solid var(--line-dim); border-radius:4px;
    padding:10px 38px 10px 13px; color:var(--paper);
    background-color:var(--navy-0);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23c8c1b2' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center;
    font:inherit; color-scheme:dark;
  }
  .field input:focus, .field textarea:focus{outline:none; border-color:var(--amber);}
  .field select:focus, .epro-select:focus{outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber);}
  .field select option, .epro-select option{background:var(--navy-1); color:var(--paper);}
  .field textarea{min-height:110px; resize:vertical;}
  .file-picker{position:relative;}
  .file-picker-input{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; clip-path:inset(50%);
  }
  .file-picker-label{
    display:flex; align-items:center; gap:14px; min-height:48px;
    padding:9px 12px; border:1px dashed var(--line); border-radius:5px;
    background:var(--navy-0); color:var(--paper); cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .file-picker-label:hover{border-color:var(--amber); background:var(--navy-1);}
  .file-picker-input:focus-visible + .file-picker-label{outline:2px solid var(--amber); outline-offset:2px;}
  .file-picker-action{
    flex:0 0 auto; border:1px solid var(--copper); border-radius:3px;
    padding:7px 10px; color:var(--amber); font-size:.82rem; font-weight:600;
  }
  .file-picker-name{min-width:0; overflow:hidden; color:var(--paper-dim); font-size:.84rem; text-overflow:ellipsis; white-space:nowrap;}
  .file-picker-name.selected{color:var(--paper);}
  .epro-dialog-message{line-height:1.6; white-space:pre-line;}
  .epro-dialog-error{display:block; min-height:1.2em; margin-top:10px; color:#e08a8a; font-size:.82rem;}
  .epro-dialog-textarea{
    width:100%; box-sizing:border-box; min-height:100px; resize:vertical;
    border:1px solid var(--line-dim); border-radius:4px; padding:10px;
    background:var(--navy-0); color:var(--paper); font:inherit;
  }
  .epro-dialog-textarea:focus{outline:2px solid var(--amber); border-color:var(--amber);}

  /* ---------- TEAM (about) ---------- */
  .team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px;}
  @media (max-width:760px){ .team-grid{grid-template-columns:1fr;} }
  .team-card{background:var(--navy-1); border:1px solid var(--line-dim); border-radius:4px; padding:22px;}
  .team-avatar{
    width:44px; height:44px; border-radius:50%; background:var(--navy-2); border:1px solid var(--copper);
    display:flex; align-items:center; justify-content:center; font-family:var(--font-display); color:var(--amber);
    margin-bottom:14px; font-weight:600;
  }
  .team-card h3{font-size:0.98rem;}
  .team-card .role{font-size:0.8rem; color:var(--copper); margin-top:2px; margin-bottom:10px;}
  .team-card p{font-size:0.86rem; color:var(--paper-dim);}

  .stat-row{display:flex; gap:48px; flex-wrap:wrap; margin-top:36px;}
  .stat-row div strong{display:block; font-family:var(--font-display); font-size:1.8rem; color:var(--amber);}
  .stat-row div span{font-size:0.82rem; color:var(--paper-dim);}

  /* ---------- QUOTATION BUILDER ---------- */
  .builder-grid{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start;}
  @media (max-width:960px){ .builder-grid{grid-template-columns:1fr;} }
  .builder-panel{background:var(--navy-1); border:1px solid var(--line-dim); border-radius:6px; padding:28px;}
  .builder-panel h2{font-size:1.05rem; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line-dim);}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media (max-width:520px){ .field-row{grid-template-columns:1fr;} }

  .material-table{width:100%; border-collapse:collapse; margin-top:6px;}
  .material-table th{
    text-align:left; font-size:0.72rem; color:var(--paper-dim); font-weight:500;
    padding-bottom:8px; border-bottom:1px solid var(--line-dim);
  }
  .material-table td{padding:8px 6px 8px 0; vertical-align:middle;}
  .material-table input{
    width:100%; background:var(--navy-0); border:1px solid var(--line-dim); border-radius:4px;
    padding:8px 9px; color:var(--paper); font-family:var(--font-body); font-size:0.86rem;
  }
  .material-table input:focus{outline:none; border-color:var(--amber);}
  .material-table .col-name{width:42%;}
  .material-table .col-qty{width:16%;}
  .material-table .col-price{width:20%;}
  .material-table .col-total{width:16%; font-size:0.86rem; color:var(--paper-dim); white-space:nowrap;}
  .material-table .col-del{width:6%; text-align:center;}
  .row-del{
    background:none; border:1px solid var(--line-dim); color:var(--paper-dim); border-radius:4px;
    width:26px; height:26px; cursor:pointer; font-size:0.9rem; line-height:1;
  }
  .row-del:hover{border-color:var(--amber); color:var(--amber);}
  .btn-add-row{
    margin-top:10px; background:none; border:1px dashed var(--line-dim); color:var(--paper-dim);
    padding:9px 14px; border-radius:4px; font-size:0.85rem; cursor:pointer; width:100%;
    font-family:var(--font-body);
  }
  .btn-add-row:hover{border-color:var(--amber); color:var(--amber);}

  .totals-block{margin-top:18px; padding-top:14px; border-top:1px solid var(--line-dim);}
  .totals-row{display:flex; justify-content:space-between; font-size:0.88rem; color:var(--paper-dim); padding:6px 0;}
  .totals-row.grand{
    border-top:1px solid var(--line); margin-top:6px; padding-top:14px;
    font-family:var(--font-display); font-size:1.15rem; color:var(--paper); font-weight:600;
  }
  .totals-row.grand span:last-child{color:var(--amber);}

  .builder-actions{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}
  .btn-ghost{
    background:none; border:1px solid var(--line-dim); color:var(--paper); padding:12px 20px;
    border-radius:4px; font-family:var(--font-body); font-weight:500; font-size:0.9rem; cursor:pointer;
  }
  .btn-ghost:hover{border-color:var(--amber);}
  button.btn-primary{border:1px solid var(--amber); cursor:pointer; font-size:0.9rem;}

  /* Preview document — deliberately light, mimicking the printed/PDF output */
  .preview-doc{
    background:var(--paper); color:#1B2430; border-radius:6px; padding:34px 30px;
    position:sticky; top:96px;
  }
  .preview-doc .pv-head{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #1B2430; padding-bottom:16px; margin-bottom:20px;}
  .preview-doc .pv-brand{font-family:var(--font-display); font-weight:700; font-size:1.15rem;}
  .preview-doc .pv-brand-sub{font-size:0.72rem; color:#5b6472; margin-top:2px;}
  .preview-doc .pv-doc-id{font-size:0.72rem; color:#5b6472; text-align:right;}
  .pv-section-label{font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:#8a93a3; margin-bottom:6px; margin-top:18px;}
  .pv-client{font-size:0.88rem; line-height:1.5;}
  .pv-table{width:100%; border-collapse:collapse; margin-top:8px; font-size:0.82rem;}
  .pv-table th{text-align:left; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.03em; color:#8a93a3; padding:6px 0; border-bottom:1px solid #d8d3c4;}
  .pv-table td{padding:7px 0; border-bottom:1px solid #ece8dc;}
  .pv-table td:last-child, .pv-table th:last-child{text-align:right;}
  .pv-totals{margin-top:6px;}
  .pv-totals .pv-row{display:flex; justify-content:space-between; font-size:0.84rem; padding:5px 0; color:#4a5261;}
  .pv-totals .pv-grand{display:flex; justify-content:space-between; border-top:2px solid #1B2430; margin-top:6px; padding-top:12px; font-family:var(--font-display); font-weight:700; font-size:1.15rem;}
  .pv-footer{margin-top:26px; font-size:0.72rem; color:#8a93a3; border-top:1px solid #ece8dc; padding-top:14px;}

  @media print{
    nav, footer, .builder-panel, .page-hero, .cta-band, .print-hide{display:none !important;}
    body{background:#fff !important;}
    body::before{display:none !important;}
    .preview-doc{position:static; box-shadow:none; border-radius:0; color:#1B2430;}
    .wrap{max-width:100% !important; padding:0 !important;}
    .builder-grid{display:block !important;}
  }

  /* ---------- AUTH PAGES ---------- */
  .auth-topbar{padding:22px 28px;}
  .auth-topbar .brand{text-decoration:none;}
  .auth-shell{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:calc(100vh - 78px);
  }
  @media (max-width:860px){ .auth-shell{grid-template-columns:1fr;} }

  .auth-side{
    position:relative; overflow:hidden; min-width:0;
    background:linear-gradient(160deg, var(--navy-1) 0%, var(--navy-0) 100%);
    border-right:1px solid var(--line-dim);
    padding:56px 48px; display:flex; flex-direction:column; justify-content:space-between;
  }
  @media (max-width:860px){ .auth-side{display:none;} }
  .auth-side-quote{font-family:var(--font-display); font-size:clamp(1.3rem, 2.4vw, 1.7rem); font-weight:600; line-height:1.25; max-width:16ch; position:relative; z-index:2; word-break:break-word;}
  .auth-side-sub{color:var(--paper-dim); font-size:0.92rem; margin-top:16px; max-width:32ch; position:relative; z-index:2;}
  .auth-side-trace{position:absolute; inset:0; z-index:1; opacity:0.6; pointer-events:none;}
  .auth-side-stats{display:flex; gap:32px; position:relative; z-index:2; flex-wrap:wrap;}
  .auth-side-stats div strong{display:block; font-family:var(--font-display); color:var(--amber); font-size:1.4rem;}
  .auth-side-stats div span{font-size:0.78rem; color:var(--paper-dim);}

  .auth-form-col{display:flex; align-items:center; justify-content:center; padding:48px 28px; min-width:0;}
  .auth-card{width:100%; max-width:380px;}
  .auth-card h1{font-size:1.6rem; margin-bottom:8px;}
  .auth-card .sub{color:var(--paper-dim); font-size:0.92rem; margin-bottom:32px;}

  .phone-input-row{display:flex; gap:8px;}
  .phone-code{
    background:var(--navy-1); border:1px solid var(--line-dim); border-radius:4px;
    padding:11px 12px; color:var(--paper-dim); font-size:0.92rem; flex-shrink:0; width:70px; text-align:center;
  }
  .phone-input-row input{flex:1;}

  .otp-row{display:flex; gap:10px; margin:6px 0 4px;}
  .otp-box{
    flex:1 1 0; min-width:0; aspect-ratio:1; text-align:center; font-size:1.2rem; font-family:var(--font-display);
    background:var(--navy-0); border:1px solid var(--line-dim); border-radius:4px; color:var(--paper);
  }
  .otp-box:focus{outline:none; border-color:var(--amber);}
  .otp-meta{display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:0.82rem; color:var(--paper-dim);}
  .otp-meta a{color:var(--amber); text-decoration:none; cursor:pointer;}
  .otp-meta a.disabled{color:var(--paper-dim); pointer-events:none; opacity:0.6;}

  .auth-step{display:none;}
  .auth-step.active{display:block;}
  .password-input-row{display:flex;align-items:stretch;}
  .password-input-row input{min-width:0;flex:1;border-radius:4px 0 0 4px;}
  .password-reveal{border:1px solid var(--line-dim);border-left:0;border-radius:0 4px 4px 0;background:var(--navy-1);color:var(--paper-dim);padding:0 12px;cursor:pointer;font:inherit;font-size:.82rem;}
  .password-reveal:hover,.password-reveal:focus-visible{color:var(--amber);border-color:var(--amber);}

  .auth-divider{display:flex; align-items:center; gap:12px; margin:24px 0; color:var(--paper-dim); font-size:0.8rem;}
  .auth-divider::before, .auth-divider::after{content:""; flex:1; height:1px; background:var(--line-dim);}

  .auth-alt-link{text-align:center; font-size:0.85rem; color:var(--paper-dim); margin-top:22px;}
  .auth-alt-link a{color:var(--amber); text-decoration:none; font-weight:500;}

  .btn-block{width:100%; text-align:center; display:block; box-sizing:border-box; cursor:pointer;}
  .auth-toggle-mode{background:none; border:none; color:var(--line); font-size:0.82rem; cursor:pointer; text-decoration:underline; padding:0; font-family:var(--font-body);}

  .auth-note{font-size:0.78rem; color:var(--paper-dim); margin-top:18px; line-height:1.5;}
  .auth-note a{color:var(--paper-dim); text-decoration:underline;}

  /* ---------- APP SHELL (dashboard / profile) ---------- */
  .app-topbar{
    display:flex; justify-content:space-between; align-items:center;
    padding:16px 28px; border-bottom:1px solid var(--line-dim); background:var(--navy-0);
    position:sticky; top:0; z-index:20;
  }
  .app-topbar .brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--font-display); font-weight:600;}
  .app-topbar .brand svg{width:24px; height:24px;}
  .app-nav-links{display:flex; gap:26px; font-size:0.9rem; color:var(--paper-dim);}
  .app-nav-links a{text-decoration:none;}
  .app-nav-links a.active{color:var(--amber);}
  .app-nav-links a:hover{color:var(--paper);}
  @media (max-width:700px){ .app-nav-links{display:none;} }
  .app-user{display:flex; align-items:center; gap:12px;}
  .app-avatar{
    width:34px; height:34px; border-radius:50%; background:var(--navy-2); border:1px solid var(--copper);
    display:flex; align-items:center; justify-content:center; font-family:var(--font-display); color:var(--amber);
    font-weight:600; font-size:0.85rem; flex-shrink:0;
  }
  .app-logout-btn{
    background:none; border:1px solid var(--line-dim); color:var(--paper-dim); padding:8px 14px;
    border-radius:4px; font-size:0.82rem; cursor:pointer; font-family:var(--font-body);
  }
  .app-logout-btn:hover{border-color:var(--amber); color:var(--amber);}
  .app-main{padding:44px 0 70px;}

  /* dashboard */
  .dash-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:18px; margin-bottom:34px;}
  .dash-head h1{font-size:clamp(1.5rem,3vw,2rem);}
  .dash-head p{color:var(--paper-dim); margin-top:6px; font-size:0.95rem;}
  .quick-actions{display:flex; gap:12px; flex-wrap:wrap;}
  .quick-action{
    display:flex; align-items:center; gap:10px; background:var(--navy-1); border:1px solid var(--line-dim);
    border-radius:5px; padding:11px 18px; text-decoration:none; color:var(--paper); font-size:0.88rem; font-weight:500;
  }
  .quick-action:hover{border-color:var(--amber);}
  .quick-action .qa-dot{width:8px; height:8px; border-radius:50%; background:var(--amber); flex-shrink:0;}

  .dash-stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:32px 0;}
  @media (max-width:820px){ .dash-stat-grid{grid-template-columns:repeat(2,1fr);} }
  .dash-stat{background:var(--navy-1); border:1px solid var(--line-dim); border-radius:6px; padding:20px;}
  .dash-stat strong{display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--amber);}
  .dash-stat span{font-size:0.8rem; color:var(--paper-dim);}

  .dash-columns{display:grid; grid-template-columns:1.4fr 1fr; gap:28px; margin-top:8px;}
  @media (max-width:900px){ .dash-columns{grid-template-columns:1fr;} }

  .project-row{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    padding:16px 0; border-bottom:1px solid var(--line-dim); text-decoration:none; color:var(--paper);
  }
  .project-row:last-child{border-bottom:none;}
  .project-row .pr-name{font-weight:500; font-size:0.94rem;}
  .project-row .pr-meta{font-size:0.78rem; color:var(--paper-dim); margin-top:3px;}
  .progress-track{width:90px; height:6px; background:var(--navy-0); border-radius:4px; overflow:hidden; flex-shrink:0;}
  .progress-fill{height:100%; background:var(--amber); border-radius:4px;}

  .tool-link{display:block; padding:13px 0; border-bottom:1px solid var(--line-dim); text-decoration:none; color:var(--paper-dim); font-size:0.9rem;}
  .tool-link:last-child{border-bottom:none;}
  .tool-link:hover{color:var(--amber);}

  .learn-progress-row{display:flex; justify-content:space-between; font-size:0.86rem; margin-bottom:8px;}
  .learn-progress-track{width:100%; height:8px; background:var(--navy-0); border-radius:4px; overflow:hidden;}
  .learn-progress-fill{height:100%; background:var(--green); border-radius:4px;}

  /* profile */
  .profile-header{display:flex; align-items:center; gap:20px; margin-bottom:38px; flex-wrap:wrap;}
  .profile-avatar-lg{
    width:64px; height:64px; border-radius:50%; background:var(--navy-2); border:1px solid var(--copper);
    display:flex; align-items:center; justify-content:center; font-family:var(--font-display); color:var(--amber);
    font-weight:600; font-size:1.4rem; flex-shrink:0;
  }
  .plan-badge{
    display:inline-flex; align-items:center; gap:6px; font-size:0.76rem; padding:4px 10px; border-radius:20px;
    border:1px solid var(--line-dim); color:var(--paper-dim); margin-top:6px;
  }
  .plan-badge.pro{border-color:var(--amber); color:var(--amber);}
  .service-tag{
    display:inline-block; font-size:0.78rem; border:1px solid var(--line-dim); border-radius:20px;
    padding:5px 12px; margin:0 8px 8px 0; color:var(--paper-dim);
  }
  .danger-zone{border:1px solid #7a3b3b; border-radius:6px; padding:22px 24px; margin-top:32px;}
  .danger-zone h3{font-size:0.95rem; color:#e08a8a; margin-bottom:8px;}
  .danger-zone p{font-size:0.85rem; color:var(--paper-dim); margin-bottom:16px;}
  .btn-danger{background:var(--amber); border:1px solid #7a3b3b; color:#000000; padding:10px 18px; border-radius:4px; font-size:0.85rem; cursor:pointer; font-family:var(--font-body);}
  .btn-danger:hover{background:#7a3b3b; color:var(--paper);}

  /* ---------- INTERACTIVE QUIZ ---------- */
  button.quiz-opt{
    display:block; width:100%; text-align:left; padding:11px 14px; border:1px solid var(--line-dim);
    border-radius:4px; margin-bottom:10px; font-size:0.92rem; color:var(--paper-dim);
    background:none; cursor:pointer; font-family:var(--font-body);
  }
  button.quiz-opt:hover:not(:disabled){border-color:var(--line);}
  button.quiz-opt:disabled{cursor:default;}
  button.quiz-opt.correct{border-color:var(--green); color:var(--green);}
  button.quiz-opt.incorrect{border-color:#e08a8a; color:#e08a8a;}
  .quiz-feedback{font-size:0.85rem; margin-top:10px; display:none;}
  .quiz-feedback.show{display:block;}
  .quiz-feedback.correct-fb{color:var(--green);}
  .quiz-feedback.incorrect-fb{color:#e08a8a;}

  /* ---------- SAVE FEEDBACK / TOAST ---------- */
  .save-note{font-size:0.82rem; color:var(--green); margin-left:12px; display:none;}
  .save-note.show{display:inline;}
  .inline-actions{display:flex; align-items:center; gap:6px;}

  /* ---------- SERVICE TAGS (editable) ---------- */
  .service-tag-remove{background:none; border:none; color:inherit; margin-left:6px; cursor:pointer; font-size:0.8rem; padding:0;}
  .service-tag-add{
    display:inline-block; font-size:0.78rem; border:1px dashed var(--line-dim); border-radius:20px;
    padding:5px 12px; margin:0 8px 8px 0; color:var(--paper-dim); background:none; cursor:pointer; font-family:var(--font-body);
  }
  .service-tag-add:hover{border-color:var(--amber); color:var(--amber);}

  /* ---------- CALCULATOR PAGES ---------- */
  .calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start;}
  @media (max-width:820px){ .calc-grid{grid-template-columns:1fr;} }
  .calc-result{
    background:var(--navy-1); border:1px solid var(--amber); border-radius:6px; padding:26px; text-align:center;
  }
  .calc-result .cr-label{font-size:0.8rem; color:var(--paper-dim); text-transform:uppercase; letter-spacing:0.04em;}
  .calc-result .cr-value{font-family:var(--font-display); font-size:2.2rem; color:var(--amber); font-weight:600; margin-top:8px;}
  .calc-result .cr-sub{font-size:0.8rem; color:var(--paper-dim); margin-top:6px;}
  .calc-formula-row{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap;}
  .calc-formula-btn{
    background:none; border:1px solid var(--line-dim); color:var(--paper-dim); padding:8px 14px;
    border-radius:4px; font-size:0.82rem; cursor:pointer; font-family:var(--font-body);
  }
  .calc-formula-btn.active{border-color:var(--amber); color:var(--amber);}
  .cable-lookup-table{width:100%; border-collapse:collapse; margin-top:14px; font-size:0.85rem;}
  .cable-lookup-table th{text-align:left; color:var(--paper-dim); font-size:0.72rem; text-transform:uppercase; padding-bottom:8px; border-bottom:1px solid var(--line-dim);}
  .cable-lookup-table td{padding:8px 4px; border-bottom:1px solid var(--line-dim); color:var(--paper-dim);}
  .cable-lookup-table tr.highlight td{color:var(--amber); font-weight:600;}

  /* ---------- ADMIN ---------- */
  .admin-topbar{
    display:flex; justify-content:space-between; align-items:center;
    padding:16px 28px; border-bottom:1px solid var(--line-dim); background:var(--navy-0);
    position:sticky; top:0; z-index:20;
  }
  .admin-topbar .brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--font-display); font-weight:600;}
  .admin-badge{
    font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; color:#e08a8a;
    border:1px solid #7a3b3b; border-radius:20px; padding:3px 10px; margin-left:4px;
  }
  .admin-main{padding:40px 0 70px;}

  .admin-banner{
    background:var(--navy-1); border:1px solid var(--copper); border-radius:6px;
    padding:16px 20px; font-size:0.86rem; color:var(--paper-dim); margin-bottom:32px;
  }
  .admin-banner strong{color:var(--paper);}

  .admin-stat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:36px;}
  @media (max-width:900px){ .admin-stat-grid{grid-template-columns:repeat(2,1fr);} }
  .admin-stat{background:var(--navy-1); border:1px solid var(--line-dim); border-radius:6px; padding:18px;}
  .admin-stat strong{display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--amber);}
  .admin-stat span{font-size:0.78rem; color:var(--paper-dim);}

  .admin-search-row{display:flex; gap:12px; align-items:center; margin:0 0 20px;}
  .admin-search-row input,
  .admin-search-row select,
  .admin-table input,
  .admin-table select{
    min-height:38px; border:1px solid var(--line-dim); border-radius:4px;
    background:var(--navy-0); color:var(--paper); font:inherit; padding:8px 10px;
  }
  .admin-search-row input{flex:1; min-width:180px;}
  .admin-search-row select{min-width:190px;}
  .admin-table input{width:100%; min-width:130px;}
  .admin-table select{min-width:145px; cursor:pointer; color-scheme:dark;}
  .admin-search-row input:focus,
  .admin-search-row select:focus,
  .admin-table input:focus,
  .admin-table select:focus{outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber);}
  .admin-table select option{background:var(--navy-1); color:var(--paper);}
  .admin-user-actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
  .admin-user-actions select{min-width:130px; width:auto;}
  .admin-review-actions{display:flex; flex-wrap:wrap; gap:8px;}
  .admin-review-actions .btn-primary,
  .admin-review-actions .btn-danger{padding:6px 10px; font-size:.76rem;}
  .verification-pill{display:inline-block; border:1px solid var(--line-dim); border-radius:20px; padding:3px 9px; font-size:.75rem; white-space:nowrap;}
  .verification-pill.verified{border-color:var(--green); color:var(--green);}
  .verification-pill.unverified{border-color:var(--copper); color:var(--copper);}

  .admin-table-wrap{background:var(--navy-1); border:1px solid var(--line-dim); border-radius:6px; overflow:hidden;}
  .admin-table-head{display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line-dim);}
  .admin-table-head h2{font-size:1.05rem;}
  .admin-helper-text{margin-top:4px; font-size:.8rem; color:var(--paper-dim);}
  .admin-table{width:100%; border-collapse:collapse; font-size:0.86rem;}
  .admin-table th{text-align:left; padding:10px 20px; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--paper-dim); border-bottom:1px solid var(--line-dim);}
  .admin-table td{padding:11px 20px; border-bottom:1px solid var(--line-dim); color:var(--paper-dim); vertical-align:top;}
  .admin-table tr:last-child td{border-bottom:none;}
  .admin-table .at-desc{color:var(--paper);}
  .admin-table .at-time{white-space:nowrap; font-size:0.8rem;}
  .activity-badge{
    display:inline-block; font-size:0.72rem; padding:3px 10px; border-radius:20px; border:1px solid var(--line-dim);
  }
  .activity-badge.signup{border-color:var(--green); color:var(--green);}
  .activity-badge.login{border-color:var(--line); color:var(--line);}
  .activity-badge.quotation{border-color:var(--amber); color:var(--amber);}
  .activity-badge.profile{border-color:var(--copper); color:var(--copper);}
  .activity-badge.support{border-color:#e08a8a; color:#e08a8a;}
  .admin-empty{padding:40px 20px; text-align:center; color:var(--paper-dim); font-size:0.9rem;}
  @media(max-width:650px){
    .admin-search-row{align-items:stretch; flex-direction:column;}
    .admin-search-row input,.admin-search-row select{width:100%; min-width:0;}
    .admin-table{min-width:900px;}
    .admin-table-wrap{overflow-x:auto;}
  }

  .admin-login-shell{min-height:calc(100vh - 0px); display:flex; align-items:center; justify-content:center; padding:40px 20px;}
  .admin-login-card{width:100%; max-width:360px; text-align:center;}
  .admin-login-card .kicker{justify-content:center; display:flex;}

  /* ---------- NAV DROPDOWNS (marketing site) ---------- */
  .nav-item{position:relative;}
  .nav-trigger{
    background:none; border:none; color:var(--paper-dim); font-family:var(--font-body); font-size:0.92rem;
    display:flex; align-items:center; gap:5px; cursor:pointer; padding:4px 0;
  }
  .nav-trigger:hover, .nav-item.open .nav-trigger{color:var(--paper);}
  .nav-item.active-group .nav-trigger{color:var(--amber);}
  .nav-trigger .caret{width:9px; height:9px; transition:transform 0.15s;}
  .nav-item.open .nav-trigger .caret{transform:rotate(180deg);}

  .nav-panel{
    position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%);
    background:var(--navy-1); border:1px solid var(--line-dim); border-radius:8px;
    padding:18px; box-shadow:0 24px 48px -12px rgba(0,0,0,0.55);
    display:none; z-index:30; min-width:220px;
  }
  .nav-item.open .nav-panel{display:block;}
  .nav-item.open .nav-panel-wide{display:grid;}
  .nav-panel::before{
    content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg);
    width:11px; height:11px; background:var(--navy-1); border-left:1px solid var(--line-dim); border-top:1px solid var(--line-dim);
  }
  .nav-panel-wide{min-width:460px; display:grid; grid-template-columns:1fr 1fr; gap:4px 28px;}
  .nav-panel-pricing{min-width:360px; display:grid; grid-template-columns:1fr 1fr; gap:14px;}

  .nav-panel-heading{font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--copper); margin:14px 0 6px; padding:0 10px;}
  .nav-panel-heading:first-child{margin-top:0;}
  .nav-panel-link{
    display:block; padding:8px 10px; border-radius:4px; color:var(--paper-dim); text-decoration:none;
    font-size:0.86rem; white-space:nowrap;
  }
  .nav-panel-link:hover{background:var(--navy-2); color:var(--paper);}
  .nav-panel-footer{border-top:1px solid var(--line-dim); margin-top:12px; padding-top:12px;}
  .nav-panel-footer .nav-panel-link{color:var(--amber); font-weight:500;}

  .nav-plan-card{background:var(--navy-0); border:1px solid var(--line-dim); border-radius:6px; padding:14px;}
  .nav-plan-card .npc-name{font-family:var(--font-display); font-weight:600; font-size:0.9rem; margin-bottom:6px;}
  .nav-plan-card .npc-price{font-family:var(--font-display); color:var(--amber); font-size:1.1rem; margin-bottom:8px;}
  .nav-plan-card ul{list-style:none; padding:0; margin:0 0 10px; font-size:0.78rem; color:var(--paper-dim);}
  .nav-plan-card li{padding:2px 0;}
  .nav-plan-card a{font-size:0.8rem; color:var(--line); text-decoration:none;}

  @media (max-width:960px){ .nav-panel-wide{min-width:380px; grid-template-columns:1fr;} }

  /* ---------- APP SIDEBAR (collapses to a rail, expands on hover) ---------- */
  .app-shell-layout{position:relative; min-height:calc(100vh - 65px);}

  .app-sidebar{
    position:fixed; top:65px; left:0; bottom:0; z-index:15;
    width:64px; min-height:0; box-sizing:border-box; overflow-x:hidden; overflow-y:auto;
    border-right:1px solid var(--line-dim); background:var(--navy-1); padding:20px 12px;
    display:flex; flex-direction:column; justify-content:space-between;
    transition:width 0.2s ease, box-shadow 0.2s ease;
    overscroll-behavior-y:contain; scrollbar-gutter:stable;
    scrollbar-width:thin; scrollbar-color:var(--line-dim) var(--navy-1);
  }
  .app-sidebar::-webkit-scrollbar{ width:8px; }
  .app-sidebar::-webkit-scrollbar-track{ background:var(--navy-1); }
  .app-sidebar::-webkit-scrollbar-thumb{ background:var(--line-dim); border:2px solid var(--navy-1); border-radius:6px; }
  .app-sidebar > div:first-child, .sidebar-user{flex:0 0 auto;}
  .app-sidebar:hover, .app-sidebar:focus-within, .app-sidebar.expanded{
    width:240px; box-shadow:16px 0 40px -16px rgba(0,0,0,0.6);
  }
  .sidebar-close{display:none;}

  /* ---------- MOBILE SIDEBAR (slide-in drawer) ---------- */
  .sidebar-toggle{
    display:none; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:5px; border:1px solid var(--line-dim);
    background:none; color:var(--paper); cursor:pointer; flex-shrink:0; padding:0;
  }
  .sidebar-toggle:hover{border-color:var(--amber); color:var(--amber);}
  .sidebar-toggle svg{width:20px; height:20px;}

  .sidebar-backdrop{
    display:none; position:fixed; inset:0; top:65px; z-index:14;
    background:rgba(0,0,0,0.5); opacity:0; transition:opacity 0.2s ease;
  }

  @media (max-width:820px){
    .sidebar-toggle{display:flex;}

    .app-sidebar{
      display:flex; width:260px; max-width:80vw;
      transform:translateX(-100%); transition:transform 0.25s ease;
      box-shadow:16px 0 40px -16px rgba(0,0,0,0.6);
    }
    .app-sidebar.mobile-open{transform:translateX(0);}
    .app-sidebar .sidebar-label,
    .app-sidebar .sidebar-section-label,
    .app-sidebar .sidebar-user-text,
    .app-sidebar .sidebar-logout{ opacity:1; }
    .app-sidebar .sidebar-logout{ pointer-events:auto; }

    .sidebar-close{
      display:flex; align-items:center; justify-content:center;
      width:30px; height:30px; margin:0 0 16px auto; background:none; border:1px solid var(--line-dim);
      border-radius:5px; color:var(--paper-dim); cursor:pointer; font-size:0.9rem; padding:0;
    }
    .sidebar-close:hover{border-color:var(--amber); color:var(--amber);}

    .sidebar-backdrop.mobile-open{display:block; opacity:1;}
  }

  .sidebar-nav{display:flex; flex-direction:column; gap:2px;}
  .sidebar-link{
    display:flex; align-items:center; gap:12px; padding:10px 10px; border-radius:5px;
    color:var(--paper-dim); text-decoration:none; font-size:0.9rem; white-space:nowrap;
  }
  .sidebar-link:hover{background:var(--navy-2); color:var(--paper);}
  .sidebar-link.active{background:var(--navy-2); color:var(--amber);}
  .sidebar-link .sl-dot{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:0.7; flex-shrink:0;}
  .sidebar-icon{width:20px; flex:0 0 20px; display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-size:15px; line-height:1;}
  .sidebar-label{opacity:0; transition:opacity 0.12s ease;}
  .app-sidebar:hover .sidebar-label, .app-sidebar:focus-within .sidebar-label, .app-sidebar.expanded .sidebar-label{opacity:1;}

  .sidebar-divider{border:none; border-top:1px solid var(--line-dim); margin:16px 0;}
  .sidebar-section-label{
    font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--paper-dim);
    padding:0 10px; margin-bottom:6px; white-space:nowrap; opacity:0; transition:opacity 0.12s ease;
  }
  .app-sidebar:hover .sidebar-section-label, .app-sidebar:focus-within .sidebar-section-label, .app-sidebar.expanded .sidebar-section-label{opacity:1;}

  .sidebar-user{border-top:1px solid var(--line-dim); padding-top:16px; margin-top:16px;}
  .sidebar-user-row{display:flex; align-items:center; gap:10px; padding:0 2px; margin-bottom:12px;}
  .sidebar-user-text{opacity:0; transition:opacity 0.12s ease; white-space:nowrap; overflow:hidden;}
  .app-sidebar:hover .sidebar-user-text, .app-sidebar:focus-within .sidebar-user-text, .app-sidebar.expanded .sidebar-user-text{opacity:1;}
  .sidebar-user-name{font-size:0.86rem; color:var(--paper); font-weight:500;}
  .sidebar-user-plan{font-size:0.74rem; color:var(--paper-dim);}
  .sidebar-logout{
    width:100%; background:none; border:1px solid var(--line-dim); color:var(--paper-dim);
    padding:9px 12px; border-radius:5px; font-size:0.82rem; cursor:pointer; font-family:var(--font-body);
    white-space:nowrap; opacity:0; transition:opacity 0.12s ease;
  }
  .app-sidebar:hover .sidebar-logout, .app-sidebar:focus-within .sidebar-logout, .app-sidebar.expanded .sidebar-logout{opacity:1; pointer-events:auto;}
  .app-sidebar:not(:hover):not(:focus-within):not(.expanded) .sidebar-logout{pointer-events:none;}
  .sidebar-logout:hover{border-color:var(--amber); color:var(--amber);}

  .app-content{padding:44px 32px 70px 96px;}
  @media (max-width:820px){ .app-content{padding-left:32px;} }
  @media (max-width:600px){ .app-content{padding:32px 18px 60px;} }

  /* ---------- QUOTA BANNER (free-tier quotation limit) ---------- */
  .quota-banner{
    font-size:0.82rem; color:var(--paper-dim); padding:10px 14px; border-radius:4px;
    border:1px solid var(--line-dim); margin-top:16px;
  }
  .quota-banner:empty{display:none;}
  .quota-banner a{color:var(--amber); text-decoration:none; font-weight:500;}
  .quota-banner.quota-ok-state{border-color:var(--green); color:var(--green);}
  .quota-banner.quota-blocked-state{border-color:#7a3b3b; color:#e08a8a;}
  .btn-primary:disabled, .btn-ghost:disabled{opacity:0.4; cursor:not-allowed;}

  /* ---------- BUSINESS CARD QR SHARE ---------- */
  .bc-qr-section{margin-top:36px; text-align:center;}
  .bc-qr-box{
    display:inline-block; background:#fff; padding:14px; border-radius:10px;
    border:1px solid var(--line-dim); box-shadow:0 20px 40px -18px rgba(0,0,0,0.55); line-height:0;
  }
  .bc-qr-box svg{display:block; width:150px; height:150px;}
  .bc-qr-caption{margin-top:12px; font-size:0.8rem; color:var(--paper-dim);}
  .bc-qr-link-row{margin-top:12px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
  .bc-qr-link-row .btn-ghost{padding:8px 16px; font-size:0.8rem;}

  /* ---------- MODAL / POPUP ---------- */
  .modal-overlay{
    position:fixed; inset:0; z-index:100;
    background:rgba(14,27,42,0.72); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    opacity:0; pointer-events:none;
    transition:opacity 0.15s ease;
  }
  .modal-overlay.open{ opacity:1; pointer-events:auto; }
  .modal-card{
    width:100%; max-width:420px;
    background:var(--navy-1); border:1px solid var(--line-dim); border-radius:8px;
    padding:26px 26px 22px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
    transform:translateY(10px); opacity:0;
    transition:transform 0.18s ease, opacity 0.18s ease;
  }
  .modal-overlay.open .modal-card{ transform:translateY(0); opacity:1; }
  .modal-card h2{font-size:1.1rem; margin-bottom:6px;}
  .modal-card p{color:var(--paper-dim); font-size:0.86rem; margin-bottom:18px;}
  .modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}
  .modal-actions .btn-secondary, .modal-actions .btn-ghost{padding:10px 18px; font-size:0.88rem;}
  .btn-ghost{
    background:none; color:var(--paper-dim); font-weight:500; font-family:var(--font-body);
    padding:10px 18px; border-radius:3px; font-size:0.88rem;
    border:1px solid var(--line-dim); cursor:pointer;
  }
  .btn-ghost:hover{color:var(--paper); border-color:var(--line);}
  .modal-close{
    position:absolute; top:16px; right:16px; background:none; border:none; color:var(--paper-dim);
    font-size:1.1rem; cursor:pointer; line-height:1; padding:4px;
  }
  .modal-close:hover{color:var(--amber);}
  .modal-card{position:relative;}
  .field-error{color:#e08a8a; font-size:0.78rem; margin-top:6px; display:none;}
  .field-error.show{display:block;}

  /* ---------- LOGIN MODE TABS (customer / admin) ---------- */
  .login-mode-tabs{
    display:flex; gap:4px; background:var(--navy-1); border:1px solid var(--line-dim);
    border-radius:6px; padding:4px; margin-bottom:28px;
  }
  .login-mode-tab{
    flex:1; background:none; border:none; color:var(--paper-dim); font-family:var(--font-body);
    font-size:0.86rem; padding:9px 0; border-radius:4px; cursor:pointer;
  }
  .login-mode-tab.active{background:var(--navy-2); color:var(--paper);}