:root{
  --bg:#060B14;
  --ink:#E8EDF5;
  --muted:#8A9BB4;
  --faint:#5C6E88;
  --accent:#4FE3C1;
  --accent-deep:#0B4A40;
  --warn:#F0B357;
  --err:#F0736A;

  --glass:rgba(9,17,29,.82);
  --glass-line:rgba(120,160,200,.16);
  --glass-line-2:rgba(120,160,200,.09);

  /* Rail width, published so the floating panels can size to the gap
     between the rails instead of sliding underneath them. */
  --rail-w:400px;

  --r:10px;
  --shadow:0 18px 50px -12px rgba(0,0,0,.75);
  --ease:cubic-bezier(.22,.9,.28,1);
}

*{box-sizing:border-box;}
/* Layout rules below set display on elements that also toggle the `hidden`
   attribute, and a class selector beats the UA's [hidden] rule. */
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter, system-ui, -apple-system, sans-serif;
  font-size:14px;
  overflow:hidden;
}
::selection{background:var(--accent);color:#04231E;}

/* --- Map layer ----------------------------------------------------------- */

/* The map carries a designed backdrop rather than a bare colour. When Google
   serves no tiles -- a blocked key, or an address with no imagery -- the roof
   outlines still sit on something that looks deliberate instead of on a black
   rectangle. Google does not fire gm_authFailure for ApiTargetBlockedMapError,
   so this is the reliable way to degrade well. */
.map-layer,.map-fallback{
  position:fixed;inset:0;
  background:
    radial-gradient(1100px 700px at 50% 44%, #0D1929 0%, #060B14 72%),
    repeating-linear-gradient(0deg, rgba(120,160,200,.05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(120,160,200,.05) 0 1px, transparent 1px 46px);
}
/* Sized by the wrapper, never positioned by us -- the API owns this element. */
#map{width:100%;height:100%;}
.map-fallback{display:grid;place-items:center;padding:40px;}

.progress{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:7;
  display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:22px;
  background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:var(--shadow);
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink);
  white-space:nowrap;animation:riseCentred .3s var(--ease) both;
}
.progress .spinner{width:12px;height:12px;}

.map-note{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;
  padding:8px 14px;border-radius:20px;
  background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);
  box-shadow:var(--shadow);white-space:nowrap;max-width:calc(100vw - 40px);
  overflow:hidden;text-overflow:ellipsis;
}
.map-fallback svg{width:min(62vmin,540px);height:auto;overflow:visible;}
.map-fallback polygon{
  cursor:pointer;transition:fill-opacity .16s var(--ease),stroke-width .16s;
  vector-effect:non-scaling-stroke;
}
.map-fallback polygon.on{fill:var(--accent);fill-opacity:.24;
                         stroke:var(--accent);stroke-width:2.5;}
.map-fallback polygon.off{fill:var(--warn);fill-opacity:.06;
                          stroke:var(--warn);stroke-width:1.5;
                          stroke-dasharray:7 5;}
.map-fallback polygon:hover{fill-opacity:.36;}
.map-fallback g circle{stroke-width:2;vector-effect:non-scaling-stroke;}
.map-fallback g.on circle{fill:var(--accent);stroke:#04231E;}
.map-fallback g.on text{fill:#04231E;}
.map-fallback g.off circle{fill:#0B1524;stroke:var(--warn);}
.map-fallback g.off text{fill:var(--warn);}

/* Darkens the edges so the floating panels stay readable over bright
   rooftops without dimming the roof itself. */
.vignette{
  position:fixed;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,11,20,.80) 0%, rgba(6,11,20,.20) 20%,
                    rgba(6,11,20,0) 34%, rgba(6,11,20,0) 66%,
                    rgba(6,11,20,.20) 80%, rgba(6,11,20,.80) 100%),
    linear-gradient(180deg, rgba(6,11,20,.42) 0%, rgba(6,11,20,0) 16%,
                    rgba(6,11,20,0) 84%, rgba(6,11,20,.42) 100%);
}

/* --- Rails --------------------------------------------------------------- */

.rail{position:fixed;top:0;bottom:0;width:var(--rail-w);padding:20px;
      display:flex;flex-direction:column;gap:16px;
      pointer-events:none;z-index:5;overflow-y:auto;overflow-x:hidden;
      scrollbar-width:thin;scrollbar-color:var(--glass-line) transparent;}
.rail::-webkit-scrollbar{width:6px;}
.rail::-webkit-scrollbar-thumb{background:var(--glass-line);border-radius:3px;}
.rail > *{pointer-events:auto;}
.rail-left{left:0;}
.rail-right{right:0;align-items:stretch;}

.card{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--glass-line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}

/* --- Brand --------------------------------------------------------------- */

.brand{display:flex;align-items:center;gap:10px;padding:2px 2px 4px;}
.mark{
  width:15px;height:15px;flex:none;position:relative;
  background:linear-gradient(135deg,var(--accent),#2AA78D);
  clip-path:polygon(50% 0,100% 46%,100% 100%,0 100%,0 46%);
}
.brand-name{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--ink);
}

/* --- Search -------------------------------------------------------------- */

.search-card{padding:0;overflow:visible;position:relative;}
.search-shell{display:flex;align-items:center;gap:11px;padding:0 15px;height:52px;
              border-radius:var(--r);transition:box-shadow .18s;}
.search-icon{width:17px;height:17px;flex:none;fill:none;stroke:var(--faint);
             stroke-width:1.7;stroke-linecap:round;transition:stroke .18s;}
.search-shell:focus-within .search-icon{stroke:var(--accent);}
/* Submit refused: the address exists in several towns and none of them is
   Helsingborg, so the product will not pick one. The list below is open and
   the message under the card says why -- this is the field itself saying it
   is waiting, rather than the search looking simply inert.
   Below the :focus-within rule on purpose. The field is focused when this
   state appears, the two selectors weigh the same, and source order is what
   decides -- above it the icon stayed accent-green and never turned. */
.search-shell.blocked{box-shadow:inset 0 0 0 1.5px rgba(240,115,106,.55);}
.search-shell.blocked .search-icon{stroke:var(--err);}
#addr{
  flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);
  font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:-.01em;
}
#addr::placeholder{color:var(--faint);}

.spinner{
  width:14px;height:14px;flex:none;border-radius:50%;
  border:1.8px solid rgba(79,227,193,.22);border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.suggest{
  list-style:none;margin:0;padding:5px;border-top:1px solid var(--glass-line-2);
  max-height:290px;overflow-y:auto;
}
.suggest li{
  padding:10px 11px;border-radius:6px;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:12.8px;color:var(--muted);
  line-height:1.45;transition:background .12s,color .12s;
}
.suggest li b{color:var(--ink);font-weight:600;}
.suggest li:hover,.suggest li[aria-selected=true]{
  background:rgba(79,227,193,.09);color:var(--ink);
}
.suggest li[aria-selected=true] b{color:var(--accent);}

/* The tagline sits straight on the map with no card behind it, so until the
   satellite tiles arrive it is grey text on Google's white loading canvas,
   and for that second it is unreadable. A shadow costs nothing over the dark
   imagery and carries the text over a bright tile too. */
.tagline{
  margin:0;padding:0 3px;font-size:13px;line-height:1.62;color:var(--muted);
  max-width:34ch;transition:opacity .4s var(--ease);
  text-shadow:0 1px 3px rgba(6,11,20,.85), 0 0 12px rgba(6,11,20,.55);
}
.tagline b{color:var(--ink);font-weight:600;}
.tagline.dim{opacity:0;pointer-events:none;}

/* --- Messages ------------------------------------------------------------ */

.msg{
  padding:13px 15px;border-radius:var(--r);font-size:12.8px;line-height:1.6;
  border:1px solid var(--glass-line);background:var(--glass);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  color:var(--muted);box-shadow:var(--shadow);
}
.msg.err{border-color:rgba(240,115,106,.42);color:#FFC3BE;
         background:rgba(52,15,13,.86);}
.msg span{color:var(--faint);}

/* --- Panel --------------------------------------------------------------- */

.panel-card{padding:20px;display:flex;flex-direction:column;gap:17px;
            animation:rise .45s var(--ease) both;}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
/* For anything centred with left:50% + translateX(-50%). `rise` ends at
   transform:none and, with fill-mode both, that wipes the centring -- which
   silently parked the progress chip half its own width to the right. */
@keyframes riseCentred{
  from{opacity:0;transform:translate(-50%,14px);}
  to{opacity:1;transform:translateX(-50%);}
}

.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.17em;
       text-transform:uppercase;color:var(--faint);margin-bottom:6px;}
.addr-found{font-family:'IBM Plex Mono',monospace;font-size:12.8px;
            color:var(--ink);line-height:1.45;}

.icon-btn{
  flex:none;width:28px;height:28px;padding:0;display:grid;place-items:center;
  background:none;border:1px solid var(--glass-line);border-radius:6px;
  cursor:pointer;transition:border-color .15s,background .15s;
}
.icon-btn svg{width:11px;height:11px;fill:none;stroke:var(--muted);
              stroke-width:1.8;stroke-linecap:round;transition:stroke .15s;}
.icon-btn:hover{border-color:var(--accent);background:rgba(79,227,193,.08);}
.icon-btn:hover svg{stroke:var(--accent);}

.readout{border-bottom:1px solid var(--glass-line-2);padding-bottom:15px;}
.readout-num{
  font-family:'IBM Plex Mono',monospace;font-size:44px;font-weight:500;
  letter-spacing:-.035em;line-height:1;color:var(--accent);
  display:flex;align-items:baseline;
  font-variant-numeric:tabular-nums;
}
.readout-num i{font-size:16px;font-style:normal;color:var(--faint);
               margin-left:8px;letter-spacing:0;}
.readout-sub{margin-top:8px;font-size:12px;color:var(--muted);}

/* --- Notice -------------------------------------------------------------- */

.notice{border:1px solid rgba(240,179,87,.34);background:rgba(48,33,12,.6);
        border-radius:8px;padding:12px 13px;}
.notice-head{display:flex;align-items:center;gap:7px;
             font-family:'IBM Plex Mono',monospace;font-size:9.5px;
             letter-spacing:.15em;text-transform:uppercase;color:var(--warn);
             margin-bottom:7px;}
.notice-head svg{width:13px;height:13px;flex:none;fill:none;stroke:var(--warn);
                 stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;}
.notice ul{margin:0;padding-left:15px;font-size:12.2px;line-height:1.6;
           color:#F5DFBB;}
.notice li + li{margin-top:4px;}

/* --- Segments ------------------------------------------------------------ */

.segs{list-style:none;margin:0;padding:0;}
.seg{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;
  padding:9px 8px;margin:0 -8px;border-radius:7px;cursor:pointer;
  transition:background .13s,opacity .13s;
}
.seg:hover{background:rgba(255,255,255,.04);}
.seg + .seg{box-shadow:inset 0 1px 0 var(--glass-line-2);}

.chips{display:flex;flex-wrap:wrap;gap:3px;max-width:52px;}
.chips i{
  width:18px;height:18px;display:grid;place-items:center;border-radius:4px;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;
  font-style:normal;border:1px solid var(--faint);color:var(--faint);
  transition:all .15s;
}
.seg.on .chips i{border-color:var(--accent);color:#04231E;background:var(--accent);}

.seg-main{min-width:0;}
.seg-dir{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.seg.off .seg-dir{color:var(--faint);}
.seg-sub{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
          color:var(--faint);margin-top:3px;}
.seg-why{display:block;font-size:10.8px;color:var(--warn);line-height:1.4;
         margin-top:3px;}
.seg-area{font-family:'IBM Plex Mono',monospace;font-size:12.5px;
          color:var(--ink);font-variant-numeric:tabular-nums;
          font-weight:500;white-space:nowrap;}
.seg.off .seg-area{color:var(--faint);text-decoration:line-through;
                   text-decoration-color:var(--faint);}
.seg.off{opacity:.62;}

.meta{font-size:10.8px;color:var(--faint);line-height:1.6;
      font-family:'IBM Plex Mono',monospace;}

/* --- Checkout ------------------------------------------------------------ */

.checkout{border-top:1px solid var(--glass-line-2);padding-top:16px;
          display:flex;flex-direction:column;gap:9px;}
.checkout label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;
                letter-spacing:.17em;text-transform:uppercase;color:var(--faint);}
.checkout input,.checkout select{
  width:100%;height:40px;padding:0 12px;color:var(--ink);
  background:rgba(255,255,255,.045);border:1px solid var(--glass-line);
  border-radius:7px;outline:none;
  font-family:'IBM Plex Mono',monospace;font-size:13px;
  transition:border-color .15s,box-shadow .15s;
}
.checkout select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),
                   linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 15px) 17px, calc(100% - 10px) 17px;
  background-size:5px 5px;background-repeat:no-repeat;}
.checkout input::placeholder{color:var(--faint);}
.checkout input:focus,.checkout select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,227,193,.14);
}
.checkout #materialField{display:flex;flex-direction:column;gap:9px;}

.primary{
  width:100%;height:44px;margin-top:5px;border:none;border-radius:7px;
  background:var(--accent);color:#04231E;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;
  letter-spacing:.02em;
  transition:background .15s,transform .08s,box-shadow .15s;
}
.primary:hover:not(:disabled){background:#6BEFD0;
  box-shadow:0 6px 22px -6px rgba(79,227,193,.5);}
.primary:active:not(:disabled){transform:translateY(1px);}
.primary:disabled{background:rgba(255,255,255,.07);color:var(--faint);
                  cursor:not-allowed;}

.fineprint{font-size:10.8px;color:var(--faint);line-height:1.55;text-align:center;}

.corner-link{
  position:fixed;right:26px;bottom:20px;z-index:4;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.09em;
  color:var(--faint);text-decoration:none;transition:color .15s;
}
.corner-link:hover{color:var(--accent);}

/* --- Account navigation --------------------------------------------------- */
/* The brand and the way into an account, on one line. Same mono/faint register
   as .corner-link, because it is the same kind of thing: a way out of the
   screen, never a call to action competing with the search field. */

.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.topnav{display:flex;align-items:center;gap:16px;}
.topnav a{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.09em;
  color:var(--faint);text-decoration:none;transition:color .15s;
  white-space:nowrap;max-width:22ch;overflow:hidden;text-overflow:ellipsis;
}
.topnav a:hover{color:var(--accent);}

/* --- Account screen ------------------------------------------------------- */

.konto-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.konto-count{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--faint);
             font-variant-numeric:tabular-nums;}
.konto-fact{display:flex;align-items:baseline;justify-content:space-between;
            gap:16px;padding:9px 0;}
.konto-fact + .konto-fact{box-shadow:inset 0 1px 0 var(--glass-line-2);}
.konto-fact span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;
                 letter-spacing:.17em;text-transform:uppercase;color:var(--faint);}
.konto-fact b{font-family:'IBM Plex Mono',monospace;font-size:12.8px;
              font-weight:450;color:var(--ink);text-align:right;word-break:break-all;}
.konto-actions{display:flex;flex-wrap:wrap;gap:10px;}
.konto-actions .ghost{flex:1;min-width:180px;height:40px;font-size:11.5px;}
.konto-note{margin:0;font-size:12.8px;line-height:1.62;color:var(--muted);}
.konto-note b{color:var(--ink);font-weight:500;}
.konto-links{display:flex;gap:14px;margin-top:7px;flex-wrap:wrap;}
.konto-link{font-family:'IBM Plex Mono',monospace;font-size:11px;
            color:var(--accent);text-decoration:none;opacity:.85;}
.konto-link:hover{opacity:1;text-decoration:underline;}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;
       padding-top:14px;border-top:1px solid var(--glass-line-2);}
.ghost.danger{border-color:rgba(240,115,106,.38);color:#FFC3BE;}
.ghost.danger:hover{border-color:var(--err);background:rgba(240,115,106,.1);}
.msg.warn{border-color:rgba(240,179,87,.42);color:#FFE1B0;
          background:rgba(52,38,13,.86);}

/* --- Secondary pages (rates, done, reports) ------------------------------ */

body.page{
  overflow:auto;
  background:radial-gradient(1000px 620px at 50% -8%, #0E1B2C 0%, #060B14 68%);
}
.sheet{max-width:680px;margin:0 auto;padding:44px 24px 80px;
       display:flex;flex-direction:column;gap:22px;}
.sheet-narrow{max-width:520px;}
.sheet-head h1{margin:0 0 10px;font-size:26px;font-weight:600;
               letter-spacing:-.022em;}
.sheet-head p{margin:0;font-size:13.5px;line-height:1.62;color:var(--muted);
              max-width:54ch;}
.sheet-card{padding:22px;display:flex;flex-direction:column;gap:16px;}

.back{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
      font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;
      color:var(--faint);text-decoration:none;transition:color .15s;}
.back svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;
          stroke-linecap:round;stroke-linejoin:round;}
.back:hover{color:var(--accent);}

.rate{display:grid;grid-template-columns:1fr auto 28px;align-items:center;
      gap:14px;padding:11px 0;}
.rate + .rate{box-shadow:inset 0 1px 0 var(--glass-line-2);}
.rate-name{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink);}
.rate-kr{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--accent);
         font-variant-numeric:tabular-nums;}
.rate-add{display:grid;grid-template-columns:1fr 150px;gap:12px;
          padding-top:16px;border-top:1px solid var(--glass-line-2);}
.rate-add > div{display:flex;flex-direction:column;gap:7px;}
.rate-add label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;
                letter-spacing:.17em;text-transform:uppercase;color:var(--faint);}
.rate-add input{
  width:100%;height:40px;padding:0 12px;color:var(--ink);
  background:rgba(255,255,255,.045);border:1px solid var(--glass-line);
  border-radius:7px;outline:none;
  font-family:'IBM Plex Mono',monospace;font-size:13px;
  transition:border-color .15s,box-shadow .15s;
}
.rate-add input::placeholder{color:var(--faint);}
.rate-add input:focus{border-color:var(--accent);
                      box-shadow:0 0 0 3px rgba(79,227,193,.14);}
.empty{font-size:13px;color:var(--muted);line-height:1.6;padding:6px 0 14px;}

.state{display:flex;gap:16px;align-items:flex-start;}
.state h1{margin:0 0 6px;font-size:19px;font-weight:600;letter-spacing:-.018em;}
.state p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted);}
.state-icon{width:38px;height:38px;flex:none;border-radius:50%;
            display:grid;place-items:center;
            border:1px solid var(--glass-line);background:rgba(255,255,255,.04);}
.state-icon .spinner{width:16px;height:16px;}
.state-icon .tick{width:19px;height:19px;fill:none;stroke:var(--accent);
                  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.state.ok .state-icon{border-color:rgba(79,227,193,.5);
                      background:rgba(79,227,193,.12);}
.state.warn .state-icon{border-color:rgba(240,179,87,.5);
                        background:rgba(240,179,87,.12);}
.state.warn h1{color:var(--warn);}

/* --- Reports (light CRM) -------------------------------------------------- */

.report-row{display:grid;grid-template-columns:1fr auto;gap:14px;
            align-items:center;padding:13px 0;}
.report-row + .report-row{box-shadow:inset 0 1px 0 var(--glass-line-2);}
.report-addr{font-family:'IBM Plex Mono',monospace;font-size:12.8px;
             color:var(--ink);line-height:1.45;}
.report-sub{font-size:11px;color:var(--faint);margin-top:4px;
            font-family:'IBM Plex Mono',monospace;}
.report-area{font-family:'IBM Plex Mono',monospace;font-size:13px;
             color:var(--accent);font-variant-numeric:tabular-nums;
             white-space:nowrap;}
.pill{display:inline-block;padding:2px 7px;border-radius:4px;font-size:9.5px;
      letter-spacing:.1em;text-transform:uppercase;
      font-family:'IBM Plex Mono',monospace;}
.pill.sent{background:rgba(79,227,193,.14);color:var(--accent);}
.pill.pending{background:rgba(240,179,87,.14);color:var(--warn);}
.pill.failed{background:rgba(240,115,106,.16);color:var(--err);}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width:1440px){
  :root{--rail-w:372px;}
}
@media (max-width:1180px){
  :root{--rail-w:336px;}
  .rail{padding:16px;}
}
@media (max-width:860px){
  /* The map stays pinned to the top and the rails scroll beneath it, so the
     roof is visible while the customer works through the segment list. */
  body{overflow:auto;}
  .map-layer,.map-fallback,.vignette{height:44vh;bottom:auto;}
  .vignette{
    background:linear-gradient(180deg, rgba(6,11,20,.72) 0%, rgba(6,11,20,0) 28%,
               rgba(6,11,20,0) 60%, rgba(6,11,20,.96) 100%);}
  :root{--rail-w:0px;}
  .rail{position:static;width:auto;padding:14px;overflow:visible;height:auto;}
  .rail-left{padding-top:calc(58vh + 14px);}
  .rail-right{padding-top:0;}
  .search-card{position:sticky;top:8px;z-index:6;}
  .corner-link{position:static;display:block;padding:4px 14px 28px;}
  .readout-num{font-size:38px;}
}

/* --- Calibration (development) -------------------------------------------
   Hand-drawn reference outlines. Deliberately looks like a tool rather than
   part of the product: it is scaffolding for checking accuracy, not a feature
   a customer should ever meet. */

.calib{
  position:fixed;left:26px;bottom:26px;z-index:8;width:296px;padding:14px;
  display:flex;flex-direction:column;gap:11px;
}
.calib-head{display:flex;justify-content:space-between;align-items:center;}
.calib-hint{margin:0;font-size:11px;line-height:1.5;color:var(--muted);}

.calib-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.calib-btn{
  padding:9px 10px;border-radius:7px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.045);border:1px solid var(--glass-line);
  color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:11px;
  line-height:1.3;transition:border-color .15s,background .15s;
}
.calib-btn i{display:block;font-style:normal;font-size:10px;color:var(--faint);
             margin-top:3px;}
.calib-btn:hover{border-color:var(--accent);}
.calib-btn.active{border-color:#FF5FBF;background:rgba(255,95,191,.13);}
.calib-btn.saved i{color:var(--accent);}

.calib-actions{display:flex;gap:6px;}
.calib-mini{
  flex:1;padding:7px 6px;border-radius:6px;cursor:pointer;
  background:rgba(255,255,255,.045);border:1px solid var(--glass-line);
  color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  transition:border-color .15s,color .15s;
}
.calib-mini:hover{border-color:var(--accent);color:var(--ink);}
.primary-mini{background:var(--accent);color:#04231E;border-color:var(--accent);
              font-weight:600;}
.primary-mini:hover{background:#6BEFD0;color:#04231E;}

.calib-compare{
  border-top:1px solid var(--glass-line-2);padding-top:10px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;line-height:1.7;
  color:var(--muted);
}
.calib-compare b{color:var(--ink);font-weight:500;}
.calib-compare .good{color:var(--accent);}
.calib-compare .bad{color:var(--err);}

@media (max-width:860px){
  .calib{position:static;width:auto;margin:14px;}
}


/* --- Expandable structure rows ------------------------------------------
   A structure is a suggestion, not a cage: the row toggles the whole
   building, the chevron opens it, and every plane inside stays individually
   switchable. */

.seg-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
         gap:10px;padding:9px 8px;margin:0 -8px;border-radius:7px;cursor:pointer;
         transition:background .13s,opacity .13s;}
.seg-row:hover{background:rgba(255,255,255,.04);}
.seg-group + .seg-group{box-shadow:inset 0 1px 0 var(--glass-line-2);}
.seg-row.off{opacity:.6;}

.tick{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--faint);
      display:grid;place-items:center;transition:all .15s;flex:none;}
.tick svg{width:11px;height:11px;fill:none;stroke:#04231E;stroke-width:2.6;
          stroke-linecap:round;stroke-linejoin:round;opacity:0;}
.seg-row.on .tick{background:var(--accent);border-color:var(--accent);}
.seg-row.on .tick svg{opacity:1;}
.seg-row.partial .tick{background:transparent;border-color:var(--accent);
                       box-shadow:inset 0 0 0 3px var(--accent);}

.chev{width:20px;height:20px;display:grid;place-items:center;border-radius:4px;
      transition:transform .18s var(--ease),background .15s;}
.chev svg{width:9px;height:9px;fill:none;stroke:var(--faint);stroke-width:2;
          stroke-linecap:round;stroke-linejoin:round;}
.chev:hover{background:rgba(255,255,255,.07);}
.seg-group.open .chev{transform:rotate(90deg);}

.faces{list-style:none;margin:0 0 6px;padding:0 0 0 28px;}
.face-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
          gap:9px;padding:6px 8px;margin:0 -8px;border-radius:6px;cursor:pointer;
          font-family:'IBM Plex Mono',monospace;font-size:11.5px;
          color:var(--muted);transition:background .13s,opacity .13s;}
.face-row:hover{background:rgba(255,255,255,.04);}
.face-row.off{opacity:.5;}
.face-row .tick{width:15px;height:15px;border-radius:4px;}
.face-row .tick svg{width:9px;height:9px;}
.face-num{color:var(--faint);}
.face-area{color:var(--ink);font-variant-numeric:tabular-nums;}

/* --- Price estimate ------------------------------------------------------ */

.estimate{border-top:1px solid var(--glass-line-2);padding-top:14px;
          display:flex;flex-direction:column;gap:8px;}
.est-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.ai-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;
          border-radius:20px;background:rgba(79,227,193,.12);
          border:1px solid rgba(79,227,193,.34);color:var(--accent);
          font-family:'IBM Plex Mono',monospace;font-size:9px;
          letter-spacing:.09em;text-transform:uppercase;}
.ai-badge svg{width:9px;height:9px;fill:currentColor;}
.est-hint{font-size:10.5px;color:var(--faint);line-height:1.5;}
.est-total{display:flex;justify-content:space-between;align-items:baseline;
           padding-top:10px;margin-top:2px;border-top:1px solid var(--glass-line-2);
           font-size:12px;color:var(--muted);}
.est-total b{font-family:'IBM Plex Mono',monospace;font-size:15px;
             color:var(--accent);font-weight:500;}
.estimate select,.estimate input{
  width:100%;height:38px;padding:0 12px;color:var(--ink);
  background:rgba(255,255,255,.045);border:1px solid var(--glass-line);
  border-radius:7px;outline:none;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;
  transition:border-color .15s,box-shadow .15s;}
.estimate select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),
                   linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 15px) 16px, calc(100% - 10px) 16px;
  background-size:5px 5px;background-repeat:no-repeat;}
.estimate input::placeholder{color:var(--faint);}
.estimate select:focus,.estimate input:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,227,193,.14);}
.estimate label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;
                letter-spacing:.17em;text-transform:uppercase;color:var(--faint);}

/* The select carries an accent ring while the AI's material pick is active,
   so 'this value was guessed' survives past the hint text. */
.estimate select.ai-guessed{
  border-color:rgba(79,227,193,.55);
  box-shadow:0 0 0 3px rgba(79,227,193,.10);
}


/* --- Panel tools ---------------------------------------------------------- */

.panel-tools{display:grid;gap:5px;grid-template-columns:repeat(3,minmax(0,1fr));}
.tool-btn{
  min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:9px 5px;border-radius:7px;cursor:pointer;
  background:rgba(255,255,255,.045);border:1px solid var(--glass-line);
  color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.01em;white-space:nowrap;
  transition:border-color .15s,color .15s,background .15s;}
.tool-btn span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.tool-btn svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;
              stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.tool-btn:hover{border-color:var(--accent);color:var(--ink);}
.tool-btn.active{border-color:var(--accent);color:var(--accent);
                 background:rgba(79,227,193,.1);}
.tool-btn:disabled{opacity:.45;cursor:wait;}

/* --- Custom (hand-drawn) faces ------------------------------------------- */

.custom-faces{list-style:none;margin:0;padding:0;}
.custom-faces:not(:empty){border-top:1px solid var(--glass-line-2);padding-top:4px;}
.custom-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;
  align-items:center;gap:9px;padding:9px 8px;margin:0 -8px;border-radius:7px;
  cursor:pointer;transition:background .13s,opacity .13s;}
.custom-row:hover{background:rgba(255,255,255,.04);}
.custom-row.off{opacity:.55;}
.custom-row .tick{width:18px;height:18px;border-radius:5px;
                  border:1.5px solid var(--faint);display:grid;place-items:center;}
.custom-row .tick svg{width:11px;height:11px;fill:none;stroke:#04231E;
                      stroke-width:2.6;stroke-linecap:round;opacity:0;}
.custom-row.on .tick{background:#B58CFF;border-color:#B58CFF;}
.custom-row.on .tick svg{opacity:1;}
.custom-name{font-size:12.5px;font-weight:600;color:var(--ink);min-width:0;
              overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.custom-name i{display:block;font-style:normal;font-family:'IBM Plex Mono',monospace;
               font-size:10px;color:#B58CFF;font-weight:400;margin-top:2px;}
.pitch-wrap{display:flex;align-items:center;gap:3px;}
.pitch-wrap i{font-style:normal;font-family:'IBM Plex Mono',monospace;
              font-size:11px;color:var(--faint);}
.pitch-input{width:38px;height:26px;padding:0 5px;text-align:right;
  background:rgba(255,255,255,.045);border:1px solid var(--glass-line);
  border-radius:6px;color:var(--ink);outline:none;
  font-family:'IBM Plex Mono',monospace;font-size:11px;}
.pitch-input:focus{border-color:var(--accent);}
.custom-area{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink);
             font-variant-numeric:tabular-nums;white-space:nowrap;}
.custom-del{width:22px;height:22px;display:grid;place-items:center;border-radius:5px;
            border:none;background:none;cursor:pointer;color:var(--faint);}
.custom-del:hover{color:var(--err);background:rgba(240,115,106,.12);}
.custom-del svg{width:10px;height:10px;fill:none;stroke:currentColor;
                stroke-width:2;stroke-linecap:round;}

/* --- Floating tool panels ------------------------------------------------ */

.tool-panel{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:8;
  width:clamp(300px, calc(100vw - 2*var(--rail-w) - 40px), 460px);
  padding:14px 16px 12px;
  display:flex;flex-direction:column;gap:10px;
  background:var(--glass);border:1px solid var(--glass-line);
  border-radius:var(--r);box-shadow:var(--shadow);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  animation:riseCentred .22s var(--ease) both;
}
.tp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.tp-title{display:flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);}
.tp-title svg{width:13px;height:13px;fill:none;stroke:var(--accent);
              stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.tp-readout{font-family:'IBM Plex Mono',monospace;font-size:14px;
            color:var(--accent);font-variant-numeric:tabular-nums;
            white-space:nowrap;}
.tp-readout.muted{color:var(--faint);font-size:12px;}

.tp-modes{display:grid;grid-template-columns:1fr 1fr;gap:5px;
  padding:3px;border-radius:8px;background:rgba(255,255,255,.04);}
.tp-mode{padding:7px 6px;border-radius:6px;border:none;cursor:pointer;
  background:none;color:var(--muted);
  font-family:'IBM Plex Mono',monospace;font-size:11px;
  transition:background .14s,color .14s;}
.tp-mode:hover{color:var(--ink);}
.tp-mode.active{background:rgba(79,227,193,.14);color:var(--accent);}

.tp-actions{display:flex;gap:6px;}
.tp-btn{flex:1;min-width:0;padding:9px 6px;border-radius:7px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--glass-line);
  color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:11px;
  white-space:nowrap;transition:border-color .14s,color .14s,background .14s;}
.tp-btn:hover:not(:disabled){border-color:var(--accent);color:var(--ink);}
.tp-btn:disabled{opacity:.4;cursor:default;}
.tp-btn.primary{background:var(--accent);border-color:var(--accent);
                color:#04231E;font-weight:600;flex:1.4;}
.tp-btn.primary:hover:not(:disabled){background:#63EBCB;color:#04231E;}
.tp-btn.primary:disabled{background:rgba(79,227,193,.22);
                         border-color:transparent;color:rgba(4,35,30,.55);}

.tp-hint{font-family:'IBM Plex Mono',monospace;font-size:10px;line-height:1.55;
         color:var(--faint);}

@media (max-width:860px){
  /* The map is only the top 44vh here, so the panel belongs against its
     bottom edge rather than the bottom of a scrolling page. */
  .tool-panel{position:absolute;top:calc(44vh - 12px);bottom:auto;
              transform:translate(-50%,-100%);}
}

/* Three across stops fitting "Justera läge" once the rail narrows. Two plus a
   full-width third reads as a deliberate layout; auto-fit wrapping left one
   lone button beside a hole. Must come after the base rule above -- same
   specificity, so source order decides. */
@media (max-width:1440px){
  .panel-tools{grid-template-columns:1fr 1fr;}
  #retryAiBtn{grid-column:1 / -1;}
}
/* Below 860 the rail is the full viewport, so three across fits again --
   until a small phone, where two plus a full-width third returns. */
@media (max-width:860px){
  .panel-tools{grid-template-columns:repeat(3,minmax(0,1fr));}
  #retryAiBtn{grid-column:auto;}
}
@media (max-width:430px){
  .panel-tools{grid-template-columns:1fr 1fr;}
  #retryAiBtn{grid-column:1 / -1;}
}

/* --- Sign-in screens ------------------------------------------------------
   Same dark sheet as /installningar and /klar: one card, one column, the
   accent reserved for the single action the screen is for. */
.form-field{display:flex;flex-direction:column;gap:7px;}
.form-field + .form-field{margin-top:14px;}
.form-field label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--faint);}
.form-field input{
  background:rgba(255,255,255,.045);border:1px solid var(--glass-line);
  border-radius:8px;color:var(--ink);font-size:14px;font-family:inherit;
  padding:11px 13px;width:100%;transition:border-color .16s var(--ease);}
.form-field input::placeholder{color:var(--faint);}
.form-field input:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px rgba(79,227,193,.12);}
.form-hint{font-size:11.5px;color:var(--faint);line-height:1.5;margin-top:7px;}

.auth-sep{display:flex;align-items:center;gap:12px;margin:4px 0;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--faint);}
.auth-sep::before,.auth-sep::after{content:'';flex:1;height:1px;
  background:var(--glass-line-2);}

.ghost{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:12px 16px;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.045);border:1px solid var(--glass-line);
  color:var(--ink);font-size:14px;font-family:inherit;font-weight:500;
  text-decoration:none;transition:border-color .16s var(--ease),
  background .16s var(--ease);}
.ghost:hover{border-color:var(--accent);background:rgba(79,227,193,.07);}
.ghost svg{width:17px;height:17px;flex:none;}

.linkrow{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:12.5px;}
.linkrow a{color:var(--muted);text-decoration:none;}
.linkrow a:hover{color:var(--accent);}


/* ===========================================================================
   The signed-in product: one header, one card, one type scale
   ---------------------------------------------------------------------------
   Everything below is the shared visual system for /konto, /installningar and
   the sign-in screens. It sits beside the map screen's own language rather
   than replacing it: same palette, same accent, same mono for numbers, but
   one card treatment (radius, border, shadow, padding) instead of a different
   one per screen.

   Naming is prefixed so nothing here can reach into the map rails by accident.
   =========================================================================== */

:root{
  --appbar-h:58px;

  /* One card. One radius. One shadow. Used by every panel on every screen. */
  --rc:14px;
  --card-bg:rgba(13,23,38,.72);
  --card-line:rgba(120,160,200,.15);
  --card-shadow:0 1px 1px rgba(0,0,0,.35), 0 14px 34px -20px rgba(0,0,0,.9);
  --card-pad:24px;

  --ring:0 0 0 3px rgba(79,227,193,.32);

  /* Spacing scale. The old screens were cramped because every gap was picked
     by hand; these five values are the only ones the new screens use. */
  --s1:8px; --s2:14px; --s3:22px; --s4:34px; --s5:52px;
}

/* --- Shared page frame ---------------------------------------------------- */

body.app{
  overflow:auto;
  background:
    radial-gradient(1200px 700px at 18% -10%, #10203A 0%, rgba(6,11,20,0) 62%),
    radial-gradient(900px 620px at 88% 4%, #0B2B2B 0%, rgba(6,11,20,0) 58%),
    var(--bg);
  background-attachment:fixed;
}
.shell{max-width:1220px;margin:0 auto;padding:var(--s4) 24px var(--s5);
       display:flex;flex-direction:column;gap:var(--s4);}
.shell-narrow{max-width:460px;padding-top:min(9vh,74px);gap:var(--s3);}

/* Keyboard users get a ring on everything, always. Pointer users never see it. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;
}

/* --- The one header ------------------------------------------------------- */

.appbar{
  position:sticky;top:0;z-index:40;height:var(--appbar-h);
  background:rgba(7,13,23,.86);
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  border-bottom:1px solid var(--glass-line-2);
}
/* On the map the header floats over a full-bleed satellite view, so it is
   fixed rather than sticky and the rails start below it. */
body.mapview .appbar{position:fixed;left:0;right:0;}
body.mapview .rail{top:var(--appbar-h);}
body.mapview .map-layer,body.mapview .map-fallback,body.mapview .vignette{
  top:var(--appbar-h);
}

.appbar-in{
  max-width:1220px;margin:0 auto;height:100%;padding:0 24px;
  display:flex;align-items:center;gap:var(--s3);
}
.appbar-brand{display:flex;align-items:center;gap:10px;text-decoration:none;
              flex:none;}
.appbar-nav{display:flex;align-items:center;gap:4px;margin-left:var(--s2);}
.appbar-nav a{
  padding:8px 13px;border-radius:8px;text-decoration:none;
  font-size:13.5px;font-weight:500;color:var(--muted);
  transition:color .15s var(--ease),background .15s var(--ease);
  white-space:nowrap;
}
.appbar-nav a:hover{color:var(--ink);background:rgba(255,255,255,.05);}
.appbar-nav a[aria-current=page]{color:var(--accent);
  background:rgba(79,227,193,.11);}
.appbar-right{margin-left:auto;display:flex;align-items:center;gap:var(--s1);}

.appbar-ghost{
  padding:8px 14px;border-radius:8px;text-decoration:none;white-space:nowrap;
  font-size:13px;font-weight:500;color:var(--muted);
  border:1px solid transparent;transition:color .15s,border-color .15s;
}
.appbar-ghost:hover{color:var(--ink);}
.appbar-cta{
  padding:8px 15px;border-radius:8px;text-decoration:none;white-space:nowrap;
  font-size:13px;font-weight:600;color:#04231E;background:var(--accent);
  transition:background .15s,box-shadow .15s;
}
.appbar-cta:hover{background:#6BEFD0;box-shadow:0 6px 20px -8px rgba(79,227,193,.6);}

/* Account menu */
.menu{position:relative;}
.menu-btn{
  display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;
  background:none;border:1px solid var(--glass-line);border-radius:22px;
  color:var(--ink);font-family:inherit;font-size:13px;cursor:pointer;
  transition:border-color .15s,background .15s;max-width:230px;
}
.menu-btn:hover{border-color:rgba(79,227,193,.5);background:rgba(255,255,255,.04);}
.menu-btn .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.menu-btn .caret{width:9px;height:9px;flex:none;fill:none;stroke:var(--faint);
                 stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
                 transition:transform .18s var(--ease);}
.menu.open .caret{transform:rotate(180deg);}
.avatar{
  width:28px;height:28px;flex:none;border-radius:50%;display:grid;
  place-items:center;background:linear-gradient(135deg,var(--accent),#2AA78D);
  color:#04231E;font-family:'IBM Plex Mono',monospace;font-size:11px;
  font-weight:600;letter-spacing:.02em;
}
.menu-pop{
  position:absolute;right:0;top:calc(100% + 9px);min-width:212px;padding:6px;
  background:rgba(11,20,34,.97);border:1px solid var(--card-line);
  border-radius:12px;box-shadow:var(--card-shadow);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:flex;flex-direction:column;gap:2px;
  animation:popIn .16s var(--ease) both;
}
@keyframes popIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.menu-pop .who-line{padding:9px 11px 11px;border-bottom:1px solid var(--glass-line-2);
                    margin-bottom:4px;}
.menu-pop .who-line b{display:block;font-size:13px;font-weight:600;color:var(--ink);
                      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.menu-pop .who-line span{display:block;margin-top:3px;font-size:11.5px;
                         color:var(--faint);overflow:hidden;
                         text-overflow:ellipsis;white-space:nowrap;}
.menu-pop a,.menu-pop button{
  display:block;width:100%;text-align:left;padding:9px 11px;border-radius:8px;
  background:none;border:none;cursor:pointer;text-decoration:none;
  color:var(--muted);font-family:inherit;font-size:13px;
  transition:background .13s,color .13s;
}
.menu-pop a:hover,.menu-pop button:hover{background:rgba(255,255,255,.06);color:var(--ink);}
.menu-pop .sep{height:1px;background:var(--glass-line-2);margin:4px 0;}

/* --- Type scale ----------------------------------------------------------- */

.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.18em;
         text-transform:uppercase;color:var(--faint);}
.h1{margin:0;font-size:30px;font-weight:600;letter-spacing:-.028em;line-height:1.16;}
.h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.018em;}
.lede{margin:0;font-size:14px;line-height:1.65;color:var(--muted);max-width:60ch;}
.tiny{font-size:11.5px;line-height:1.55;color:var(--faint);}

.band{display:flex;flex-direction:column;gap:var(--s3);}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;
           gap:var(--s2);flex-wrap:wrap;}
.band-head .h2 + .tiny{margin-top:5px;}

/* --- The one card --------------------------------------------------------- */

.ui-card{
  background:var(--card-bg);border:1px solid var(--card-line);
  border-radius:var(--rc);box-shadow:var(--card-shadow);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
}
.ui-card.pad{padding:var(--card-pad);}

/* --- Band 1: figures ------------------------------------------------------ */

.stats{display:grid;gap:var(--s2);
       grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.stat{padding:20px 22px 18px;display:flex;flex-direction:column;gap:12px;
      transition:border-color .18s var(--ease),transform .18s var(--ease);}
.stat:hover{border-color:rgba(79,227,193,.34);transform:translateY(-2px);}
.stat-num{font-family:'IBM Plex Mono',monospace;font-size:38px;font-weight:400;
          letter-spacing:-.04em;line-height:1;color:var(--ink);
          font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:7px;}
.stat-num i{font-style:normal;font-size:13px;color:var(--faint);letter-spacing:0;}
.stat.accent .stat-num{color:var(--accent);}

/* --- Band 2: the measurement grid ----------------------------------------- */

.grid{display:grid;gap:var(--s2);
      grid-template-columns:repeat(auto-fill,minmax(268px,1fr));}
.mcard{overflow:hidden;display:flex;flex-direction:column;
       transition:border-color .18s var(--ease),transform .18s var(--ease),
                  box-shadow .18s var(--ease);}
.mcard:hover{border-color:rgba(79,227,193,.36);transform:translateY(-3px);
             box-shadow:0 1px 1px rgba(0,0,0,.35),0 22px 44px -22px rgba(0,0,0,.95);}
.mcard-thumb{
  position:relative;aspect-ratio:1/1;background:#0A1322;overflow:hidden;
  border-bottom:1px solid var(--glass-line-2);display:block;
}
/* Positioned, so it paints ABOVE the placeholder tile underneath it. A
   positioned element wins over a static one whatever the source order, so an
   img left in normal flow sat behind the placeholder and every card looked
   like it had no aerial. When the image 404s the script removes it and the
   tile below is what is left. */
.mcard-thumb img{position:absolute;inset:0;width:100%;height:100%;
                 object-fit:cover;display:block;
                 transition:transform .4s var(--ease);}
.mcard:hover .mcard-thumb img{transform:scale(1.035);}
.mcard-ph{position:absolute;inset:0;display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 50% 0%, #14233A 0%, #0A1322 70%),
    repeating-linear-gradient(45deg, rgba(120,160,200,.045) 0 1px, transparent 1px 13px);}
.mcard-ph svg{width:44px;height:44px;fill:none;stroke:var(--faint);
              stroke-width:1.2;stroke-linejoin:round;opacity:.7;}
.mcard-tag{position:absolute;left:10px;top:10px;padding:4px 9px;border-radius:20px;
  background:rgba(6,11,20,.78);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);border:1px solid var(--glass-line);
  font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);}
.mcard-tag.paid{color:var(--accent);border-color:rgba(79,227,193,.45);
                background:rgba(4,35,30,.8);}

.mcard-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px;flex:1;}
.mcard-addr{font-size:14px;font-weight:600;color:var(--ink);line-height:1.4;
            letter-spacing:-.012em;
            display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
            overflow:hidden;}
.mcard-date{font-family:'IBM Plex Mono',monospace;font-size:10.5px;
            color:var(--faint);letter-spacing:.04em;}
.mcard-facts{display:flex;align-items:baseline;justify-content:space-between;
             gap:10px;padding-top:12px;border-top:1px solid var(--glass-line-2);
             margin-top:auto;}
.mcard-area{font-family:'IBM Plex Mono',monospace;font-size:19px;color:var(--ink);
            font-variant-numeric:tabular-nums;letter-spacing:-.03em;}
.mcard-area i{font-style:normal;font-size:11px;color:var(--faint);margin-left:4px;}
.mcard-value{font-family:'IBM Plex Mono',monospace;font-size:13px;
             color:var(--accent);font-variant-numeric:tabular-nums;
             text-align:right;white-space:nowrap;}
.mcard-value span{display:block;font-family:Inter,sans-serif;font-size:9.5px;
                  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
                  margin-top:3px;}
.mcard-acts{display:flex;gap:8px;}

/* --- Buttons -------------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:9px;cursor:pointer;text-decoration:none;
  border:1px solid var(--glass-line);background:rgba(255,255,255,.045);
  color:var(--ink);font-family:inherit;font-size:13px;font-weight:500;
  white-space:nowrap;
  transition:border-color .15s var(--ease),background .15s var(--ease),
             color .15s var(--ease),transform .08s;
}
.btn:hover:not(:disabled){border-color:var(--accent);background:rgba(79,227,193,.09);}
.btn:active:not(:disabled){transform:translateY(1px);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;
         stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#04231E;
             font-weight:600;}
.btn-primary:hover:not(:disabled){background:#6BEFD0;border-color:#6BEFD0;
  color:#04231E;box-shadow:0 8px 24px -10px rgba(79,227,193,.7);}
.btn-danger{border-color:rgba(240,115,106,.4);color:#FFC3BE;
            background:rgba(240,115,106,.07);}
.btn-danger:hover:not(:disabled){border-color:var(--err);
  background:rgba(240,115,106,.14);}
.btn-sm{padding:8px 12px;font-size:12px;border-radius:8px;}
.btn-block{width:100%;}
.btn-lg{padding:14px 22px;font-size:14.5px;border-radius:11px;}

/* --- Skeletons, not spinners ---------------------------------------------- */

.skel{background:linear-gradient(100deg,
        rgba(255,255,255,.045) 30%, rgba(255,255,255,.10) 50%,
        rgba(255,255,255,.045) 70%);
      background-size:220% 100%;animation:shimmer 1.5s linear infinite;
      border-radius:7px;}
@keyframes shimmer{from{background-position:140% 0;}to{background-position:-40% 0;}}
@media (prefers-reduced-motion:reduce){
  .skel{animation:none;}
  .stat:hover,.mcard:hover{transform:none;}
}
.skel-thumb{aspect-ratio:1/1;border-radius:0;}
.skel-line{height:11px;}
.skel-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;}

/* --- Empty states --------------------------------------------------------- */

.empty-state{padding:56px 30px;display:flex;flex-direction:column;
             align-items:center;text-align:center;gap:var(--s2);}
.empty-state svg.art{width:74px;height:74px;fill:none;stroke:var(--faint);
                     stroke-width:1.1;stroke-linejoin:round;opacity:.55;}
.empty-state h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.02em;}
.empty-state p{margin:0;font-size:13.5px;line-height:1.65;color:var(--muted);
               max-width:44ch;}

/* --- Band 3: the rates table ---------------------------------------------- */

.rates-table{display:flex;flex-direction:column;}
.rates-head,.rate-line{
  display:grid;grid-template-columns:minmax(0,1fr) 170px 92px;
  align-items:center;gap:var(--s2);padding:13px var(--card-pad);
}
.rates-head{padding-top:0;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
            letter-spacing:.18em;text-transform:uppercase;color:var(--faint);}
.rate-line{border-top:1px solid var(--glass-line-2);}
.rate-line:hover{background:rgba(255,255,255,.022);}
.rate-mat{font-size:13.5px;font-weight:500;color:var(--ink);}
.rate-mat i{display:block;font-style:normal;font-size:11px;color:var(--faint);
            margin-top:3px;font-weight:400;}
.rate-in{position:relative;display:flex;align-items:center;}
.rate-in input{
  width:100%;height:40px;padding:0 52px 0 13px;border-radius:9px;color:var(--ink);
  background:rgba(255,255,255,.04);border:1px solid var(--glass-line);outline:none;
  font-family:'IBM Plex Mono',monospace;font-size:13.5px;text-align:right;
  font-variant-numeric:tabular-nums;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.rate-in input:hover{background:rgba(255,255,255,.06);}
.rate-in input:focus{border-color:var(--accent);box-shadow:var(--ring);}
.rate-in input.bad{border-color:var(--err);box-shadow:0 0 0 3px rgba(240,115,106,.22);}
.rate-in u{position:absolute;right:13px;text-decoration:none;pointer-events:none;
           font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--faint);}
.rate-state{font-family:'IBM Plex Mono',monospace;font-size:10.5px;
            letter-spacing:.06em;color:var(--faint);opacity:0;
            transition:opacity .2s var(--ease);}
.rate-state.on{opacity:1;}
.rate-state.ok{color:var(--accent);}
.rate-state.err{color:var(--err);}

/* --- Band 4: quick actions ------------------------------------------------ */

.quick{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--s2);}
.quick-hero{padding:30px;display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--s2);
  background:
    radial-gradient(520px 300px at 82% 0%, rgba(79,227,193,.15) 0%, rgba(79,227,193,0) 66%),
    var(--card-bg);}
.quick-hero h3{margin:0;font-size:21px;font-weight:600;letter-spacing:-.024em;}
.quick-hero p{margin:0;font-size:13.5px;line-height:1.62;color:var(--muted);
              max-width:40ch;}
.recent{padding:var(--s2) 0;display:flex;flex-direction:column;}
.recent .eyebrow{padding:6px 22px 12px;}
.recent-row{display:flex;align-items:center;gap:12px;padding:11px 22px;
            text-decoration:none;transition:background .13s;}
.recent-row:hover{background:rgba(255,255,255,.04);}
.recent-row .dot{width:6px;height:6px;flex:none;border-radius:50%;
                 background:var(--faint);}
.recent-row.paid .dot{background:var(--accent);}
.recent-row b{flex:1;min-width:0;font-size:13px;font-weight:500;color:var(--ink);
              overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.recent-row span{font-family:'IBM Plex Mono',monospace;font-size:11px;
                 color:var(--faint);font-variant-numeric:tabular-nums;
                 white-space:nowrap;}

/* --- Settings rows -------------------------------------------------------- */

.set-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
         padding:17px var(--card-pad);flex-wrap:wrap;}
.set-row + .set-row{border-top:1px solid var(--glass-line-2);}
.set-row .set-t{min-width:0;display:flex;flex-direction:column;gap:5px;}
.set-row .set-t b{font-size:13.5px;font-weight:600;color:var(--ink);}
.set-row .set-t span{font-size:12.5px;line-height:1.6;color:var(--muted);
                     max-width:56ch;overflow-wrap:anywhere;}
.set-row .set-a{display:flex;gap:9px;flex-wrap:wrap;}
.badges{display:flex;gap:7px;flex-wrap:wrap;}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
       border-radius:20px;border:1px solid var(--glass-line);
       font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);}
.badge.on{border-color:rgba(79,227,193,.42);color:var(--accent);
          background:rgba(79,227,193,.08);}
.badge svg{width:12px;height:12px;flex:none;}

.danger-zone{border-color:rgba(240,115,106,.28);}
.danger-zone .set-row + .set-row{border-top-color:rgba(240,115,106,.16);}

/* --- Auth screens --------------------------------------------------------- */

.auth-brand{display:flex;align-items:center;gap:10px;justify-content:center;
            text-decoration:none;margin-bottom:var(--s1);}
.auth-head{text-align:center;display:flex;flex-direction:column;gap:9px;}
.auth-head .lede{margin:0 auto;}
.auth-card{padding:26px;display:flex;flex-direction:column;gap:var(--s2);}
.auth-foot{text-align:center;font-size:13px;color:var(--muted);}
.auth-foot a{color:var(--accent);text-decoration:none;font-weight:500;}
.auth-foot a:hover{text-decoration:underline;}

.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;
             letter-spacing:.18em;text-transform:uppercase;color:var(--faint);}
.field input{
  width:100%;height:46px;padding:0 14px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid var(--glass-line);
  color:var(--ink);font-family:inherit;font-size:14.5px;outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.field input::placeholder{color:var(--faint);}
.field input:hover{background:rgba(255,255,255,.06);}
.field input:focus{border-color:var(--accent);box-shadow:var(--ring);}
.field .hint{font-size:11.5px;color:var(--faint);line-height:1.5;}

.gbtn{
  display:flex;align-items:center;justify-content:center;gap:11px;
  width:100%;height:46px;border-radius:10px;cursor:pointer;text-decoration:none;
  background:#fff;border:1px solid #dadce0;color:#3c4043;
  font-family:'Roboto',Inter,system-ui,sans-serif;font-size:14.5px;font-weight:500;
  transition:box-shadow .15s var(--ease),background .15s var(--ease);
}
.gbtn:hover{background:#f7f8f8;box-shadow:0 1px 3px rgba(60,64,67,.3),
                                        0 4px 8px 3px rgba(60,64,67,.15);}
.gbtn svg{width:19px;height:19px;flex:none;}
.gbtn.off{background:rgba(255,255,255,.05);border-color:var(--glass-line);
          color:var(--faint);cursor:not-allowed;box-shadow:none;}
.gbtn.off svg{opacity:.42;filter:grayscale(1);}

.sep{display:flex;align-items:center;gap:14px;
     font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.18em;
     text-transform:uppercase;color:var(--faint);}
.sep::before,.sep::after{content:'';flex:1;height:1px;background:var(--glass-line-2);}

/* --- Inline notes --------------------------------------------------------- */

.note{padding:13px 15px;border-radius:10px;font-size:12.8px;line-height:1.6;
      border:1px solid var(--glass-line);background:rgba(255,255,255,.035);
      color:var(--muted);}
.note.err{border-color:rgba(240,115,106,.42);color:#FFC3BE;
          background:rgba(52,15,13,.6);}
.note.ok{border-color:rgba(79,227,193,.4);color:#B6F3E4;
         background:rgba(9,44,38,.55);}
.note.warn{border-color:rgba(240,179,87,.42);color:#FFE1B0;
           background:rgba(52,38,13,.6);}
.note a{color:var(--accent);}

/* --- Responsive: a roofer opens this in a van ----------------------------- */

@media (max-width:900px){
  .quick{grid-template-columns:1fr;}
  .rates-head,.rate-line{grid-template-columns:minmax(0,1fr) 140px 20px;
                         padding-left:18px;padding-right:18px;}
  .rate-state{font-size:0;}
  .rate-state.on::after{content:'';display:block;width:7px;height:7px;
                        border-radius:50%;background:currentColor;}
}
@media (max-width:720px){
  :root{--card-pad:18px;--appbar-h:54px;}
  .appbar-in{padding:0 14px;gap:var(--s1);}
  .appbar-brand .brand-name{display:none;}
  .appbar-nav{margin-left:2px;gap:2px;}
  .appbar-nav a{padding:7px 9px;font-size:12.5px;}
  .menu-btn{padding:4px;border-color:transparent;}
  .menu-btn .who,.menu-btn .caret{display:none;}
  .shell{padding:var(--s3) 14px var(--s4);gap:var(--s3);}
  .shell-narrow{padding-left:16px;padding-right:16px;}
  .h1{font-size:24px;}
  .stats{grid-template-columns:1fr 1fr;gap:10px;}
  .stat{padding:15px 16px;gap:9px;}
  .stat-num{font-size:27px;}
  .grid{grid-template-columns:1fr;}
  .empty-state{padding:40px 20px;}
  .set-row{padding:15px 18px;}
  .set-row .set-a{width:100%;}
  .set-row .set-a .btn{flex:1;}
}
/* Two figures across still fit a 375 px phone, and four numbers in a 2x2 is
   what makes it read as a dashboard rather than a list. Only a genuinely
   narrow screen drops to one. */
@media (max-width:340px){
  .stats{grid-template-columns:1fr;}
}

/* --- Admin: the operator surface -----------------------------------------
   Same palette, same card, same radius as the dashboard. What changes is the
   density: this screen is read across, not read into, so the rows are tight
   and the type is a step smaller than anything a customer sees. */

.shell-wide{max-width:1560px;}

.stats-dense{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));}
.stats-dense .stat{padding:15px 17px 14px;gap:8px;}
.stats-dense .stat-num{font-size:28px;}

.split{padding:16px var(--card-pad) 18px;}
.split-rows{display:flex;flex-direction:column;gap:9px;margin-top:12px;}
.split-row{display:grid;grid-template-columns:130px 1fr 120px;align-items:center;
           gap:var(--s2);}
.split-row b{font-size:12.5px;font-weight:500;color:var(--ink);}
.split-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.05);
           overflow:hidden;}
.split-bar i{display:block;height:100%;background:var(--accent);opacity:.7;}
.split-row span{font-family:'IBM Plex Mono',monospace;font-size:11.5px;
                color:var(--faint);text-align:right;
                font-variant-numeric:tabular-nums;}

.filter{display:flex;flex-direction:column;gap:6px;}
.filter input{
  width:250px;max-width:44vw;height:38px;padding:0 13px;border-radius:9px;
  background:rgba(255,255,255,.04);border:1px solid var(--glass-line);
  color:var(--ink);font-family:inherit;font-size:13px;outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.filter input::placeholder{color:var(--faint);}
.filter input:focus{border-color:var(--accent);box-shadow:var(--ring);}

/* The table scrolls inside its own card, so a wide operator view never makes
   the page itself scroll sideways. */
.table-wrap{overflow-x:auto;}
.dtable{width:100%;border-collapse:collapse;font-size:12.5px;}
.dtable th,.dtable td{padding:9px 14px;text-align:left;white-space:nowrap;}
.dtable th{
  position:sticky;top:0;z-index:1;background:#0C1626;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);font-weight:400;
  border-bottom:1px solid var(--glass-line);
}
.dtable th[data-sort]{cursor:pointer;user-select:none;}
.dtable th[data-sort]:hover{color:var(--ink);}
.dtable th.sorted{color:var(--accent);}
.dtable th.sorted::after{content:'';margin-left:6px;display:inline-block;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;}
.dtable th.sorted[data-dir=up]::after{border-bottom:4px solid currentColor;}
.dtable th.sorted[data-dir=down]::after{border-top:4px solid currentColor;}
.dtable tbody tr{border-top:1px solid var(--glass-line-2);}
.dtable tbody tr[data-id]{cursor:pointer;transition:background .12s;}
.dtable tbody tr[data-id]:hover{background:rgba(255,255,255,.045);}
.dtable tbody tr[data-id]:focus-visible{background:rgba(79,227,193,.08);
                                        outline:2px solid var(--accent);
                                        outline-offset:-2px;}
.dtable td.strong{font-weight:600;color:var(--ink);}
.dtable td.mono{font-family:'IBM Plex Mono',monospace;font-size:11.5px;}
.dtable td.num{text-align:right;font-variant-numeric:tabular-nums;}
.dtable th.num{text-align:right;}
.dtable td.dim{color:var(--faint);}
.dtable td.paid{color:var(--accent);}
.dtable td.addr{max-width:270px;overflow:hidden;text-overflow:ellipsis;
                color:var(--muted);}
.dtable td.none{text-align:center;color:var(--faint);padding:26px 14px;}

.tags{display:flex;gap:5px;}
.tag{display:inline-block;padding:2px 7px;margin-left:7px;border-radius:5px;
     border:1px solid var(--glass-line);font-family:'IBM Plex Mono',monospace;
     font-size:9.5px;letter-spacing:.06em;color:var(--faint);
     white-space:nowrap;}
.tags .tag{margin-left:0;}
.tag.on{border-color:rgba(79,227,193,.42);color:var(--accent);
        background:rgba(79,227,193,.08);}

@media (max-width:720px){
  .filter input{width:100%;max-width:none;}
  .split-row{grid-template-columns:96px 1fr 78px;}
  .dtable th,.dtable td{padding:8px 10px;}
}