/* flocks prototype — shared shell + components */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--font-ui); color:var(--text);
  background-color:var(--bg-base); background-image:var(--bg-grad); background-attachment:fixed;
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.5; min-height:100vh;
}
a{color:inherit}
.disp{font-family:var(--font-display);font-weight:600;font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;letter-spacing:-.01em}
.mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:500}
.tab-num{font-variant-numeric:tabular-nums}

/* ---------- layout shell ---------- */
.app{display:flex;gap:0;align-items:flex-start;padding:30px;min-height:100vh}
/* stacked-deck navigation in its own box (left) */
.rail{position:sticky;top:30px;flex:none;width:256px;height:calc(100vh - 60px);margin-right:18px;z-index:20;display:flex;flex-direction:column;gap:16px}
.rail .brand{flex:none;padding:4px 8px}
.rail .brand img{height:26px;width:auto;display:block}
.brand .m-dark{display:none}
html[data-theme="dark"] .brand .m-light{display:none}
html[data-theme="dark"] .brand .m-dark{display:block}
.rail .me{flex:none;display:flex;align-items:center;gap:11px;padding:4px 8px}
.rail .me .av{width:40px;height:40px;border-radius:50%;flex:none;background:var(--sage);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
.rail .me .nm{font-weight:600;font-size:13px;color:var(--text);line-height:1.2}
.rail .me .rl{font-size:11px;color:var(--text-2)}
.deck{position:relative;flex:1;min-height:0;overflow:visible}
.deck-item{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:18px;cursor:pointer;background:var(--surface-2);border:1px solid var(--raise-bd);box-shadow:var(--sh-soft);transform-origin:center center;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;will-change:transform,opacity}
.deck-item .chip{width:40px;height:40px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--chip);color:var(--text-2);transition:background .2s,color .2s}
.deck-item .chip svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7}
.deck-item .lab{font-weight:500;font-size:15px;color:var(--text-2);white-space:nowrap;transition:color .2s,font-size .2s}
.deck-item.active{background:var(--raise);box-shadow:var(--sh-raise);z-index:60}
.deck-item.active .chip{background:var(--accent);color:var(--accent-tx)}
.deck-item.active .lab{color:var(--text);font-weight:600;font-size:16px}
html[data-theme="dark"] .deck-item{background:#0f1012;border-color:rgba(255,255,255,.07)}
html[data-theme="dark"] .deck-item.active{background:#1c1d20}

.stage{flex:1;min-width:0;position:relative}

.app{position:relative;z-index:1}

/* ===== ambient 3D glass signature (dashboard hero) ===== */
.hero3d{position:absolute;top:-78px;right:-46px;width:500px;height:430px;pointer-events:none;z-index:0;perspective:1000px;opacity:.95}
@media(max-width:1080px){.hero3d{display:none}}
.hero3d .orb,.hero3d .pane{position:absolute;will-change:transform}
.hero3d .orb{border-radius:50%}
.hero3d .o1{width:248px;height:248px;top:42px;right:78px;
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 36%),
    radial-gradient(circle at 72% 78%, color-mix(in srgb,#38B2A0 70%, transparent) 0%, transparent 60%),
    linear-gradient(145deg, #8E9BFF 0%, #B07CF0 52%, #6E8BFF 100%);
  box-shadow:inset 0 3px 14px rgba(255,255,255,.55), inset 0 -26px 48px rgba(20,10,50,.30), 0 40px 80px rgba(40,30,90,.34);
  animation:float1 13s ease-in-out infinite}
.hero3d .o2{width:138px;height:138px;top:212px;right:248px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(150deg, #5fd0c4 0%, #6E8BFF 100%);
  box-shadow:inset 0 2px 10px rgba(255,255,255,.5), inset 0 -16px 30px rgba(10,40,60,.28), 0 26px 50px rgba(20,60,90,.30);
  animation:float2 11s ease-in-out infinite}
.hero3d .pane{width:200px;height:150px;top:8px;right:226px;border-radius:30px;
  background:linear-gradient(140deg, rgba(255,255,255,.42), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 30px 60px rgba(30,40,80,.22);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transform:rotateX(14deg) rotateY(-26deg);animation:float3 15s ease-in-out infinite}
[data-theme="dark"] .hero3d .pane{background:linear-gradient(140deg, rgba(255,255,255,.12), rgba(255,255,255,.02));border-color:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 30px 60px rgba(0,0,0,.5)}
@keyframes float1{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-18px) translateX(-8px)}}
@keyframes float2{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(14px) translateX(10px)}}
@keyframes float3{0%,100%{transform:rotateX(14deg) rotateY(-26deg) translateY(0)}50%{transform:rotateX(11deg) rotateY(-22deg) translateY(-12px)}}
@media(prefers-reduced-motion:reduce){.hero3d .orb,.hero3d .pane{animation:none}}

/* ===== ReFi-style two-zone dashboard ===== */
.dash-hero{position:relative;z-index:1;margin-bottom:20px}
.hero-head{display:flex;align-items:center;gap:14px;margin:2px 0 16px}
.hero-head .t{font-family:var(--font-display);font-weight:600;font-size:34px;line-height:1.04;letter-spacing:-.02em}
.date-pill{font-size:12.5px;color:var(--text-2);background:var(--glass-card,var(--surface-2));border:1px solid var(--glass-card-bd,var(--line-soft));border-radius:var(--r-pill);padding:7px 14px;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.dash-hero .banner{margin-bottom:16px}
.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:stretch}
.hero-chart{display:flex;flex-direction:column}
.hero-chart-body{padding:14px 20px 18px}
.att-split-h{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);margin:16px 0 12px;padding-top:16px;border-top:1px solid var(--line-soft)}
.att-split{display:flex;flex-direction:column;gap:11px}
.asplit-row{display:grid;grid-template-columns:104px 1fr 38px;align-items:center;gap:12px}
.asplit-row .as-l{font-size:12.5px;color:var(--text-2)}
.asplit-row .as-track{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.asplit-row .as-bar{height:100%;width:100%;border-radius:999px;transform-origin:left}
.asplit-row .as-v{font-weight:600;font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.hero-right{display:grid;grid-template-rows:auto 1fr;gap:16px;min-width:0}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero-stats .metric{padding:16px}
.hero-stats .metric .val{font-size:26px}
.hero-list{display:flex;flex-direction:column}
.hero-list .feed{padding:2px 18px 10px;overflow:auto}
@media(max-width:1080px){.hero-grid{grid-template-columns:1fr}.hero-head .t{font-size:28px}}

.dash-bottom{position:relative;z-index:1;background:var(--raise);border:1px solid var(--raise-bd);border-radius:var(--r-panel);box-shadow:var(--sh-raise);padding:20px 22px;margin-bottom:18px}
.bottom-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.bottom-head .ttl{font-size:18px}
.bottom-filters{display:flex;gap:8px;flex-wrap:wrap}
.bottom-nav{margin-left:auto;display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;color:var(--text-2)}
.bottom-nav button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--text);cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .12s cubic-bezier(.23,1,.32,1)}
@media(hover:hover){.bottom-nav button:hover{background:var(--hover)}}
.bottom-nav button:active{transform:scale(.94)}
.follow-cards{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:thin}
.fcard{flex:0 0 264px;scroll-snap-align:start;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-card);padding:16px;cursor:pointer;transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s ease}
@media(hover:hover){.fcard:hover{transform:translateY(-3px);box-shadow:var(--sh-raise)}}
.fcard-top{display:flex;align-items:center;gap:11px}
.fcard-top .av{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;background:var(--chip);color:var(--text)}
.fcard-id{min-width:0;flex:1}
.fcard-id .nm{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcard-id .src{font-size:12px;color:var(--text-2)}
.fc-go{flex:none;color:var(--text-2)}
.fc-go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9}
.fcard-stats{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.fc-stat{font-size:11px;color:var(--text-2);background:var(--chip);border:1px solid var(--line-soft);border-radius:var(--r-pill);padding:4px 9px}
.fcard-cta{width:100%;justify-content:center}

/* ===== Find a group — premium map ===== */
.gmap{position:relative;height:540px;border-radius:var(--r-panel);overflow:hidden;box-shadow:var(--sh-raise);border:1px solid var(--raise-bd)}
.gmap-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gmap-live{position:absolute;inset:0;z-index:1}
.gmap-live .leaflet-container{width:100%;height:100%;background:#0b0b0b;font:inherit}
.gmap-live .leaflet-control-attribution{display:none}
/* live Leaflet markers (Leaflet positions the icon root; reset its default chrome) */
.gmk{background:transparent!important;border:0!important;cursor:pointer;width:22px!important;height:22px!important}
.gmk .gpin-dot{display:block;width:22px;height:22px;border-radius:50%;background:var(--pc);border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.42);transition:transform .15s cubic-bezier(.23,1,.32,1)}
.gmk .gpin-lbl{position:absolute;left:50%;bottom:150%;transform:translateX(-50%) translateY(4px);font-size:11.5px;font-weight:600;color:#fff;background:rgba(20,22,28,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
@media(hover:hover){.gmk:hover .gpin-dot{transform:scale(1.14)}}
.gmk:hover .gpin-lbl,.gmk.sel .gpin-lbl{opacity:1;transform:translateX(-50%)}
.gmk.sel .gpin-dot{box-shadow:0 0 0 6px color-mix(in srgb,var(--pc) 34%,transparent),0 4px 12px rgba(0,0,0,.42)}
.gmk.dim{opacity:.34}
.gmk-here{width:16px!important;height:16px!important;border-radius:50%;background:#6E8BFF!important;border:3px solid #fff!important;box-shadow:0 0 0 6px rgba(110,139,255,.3),0 2px 8px rgba(0,0,0,.4)}
.gmap-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 52%,rgba(0,0,0,.34) 100%)}
.gmap-filters{position:absolute;top:16px;left:16px;right:16px;display:flex;gap:8px;flex-wrap:wrap;z-index:3}
.gpill{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:500;color:#fff;background:rgba(20,22,28,.42);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-pill);padding:8px 14px;cursor:pointer;backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);transition:background .15s}
.gpill .gpd{width:8px;height:8px;border-radius:50%;flex:none}
@media(hover:hover){.gpill:hover{background:rgba(20,22,28,.62)}}
.gpill.on{background:#fff;color:#15171c;border-color:#fff}
.gmap-pins{position:absolute;inset:0;z-index:2;pointer-events:none}
.gpin{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;border:0;background:none;padding:0;cursor:pointer;pointer-events:auto;transition:transform .18s cubic-bezier(.23,1,.32,1)}
.gpin-dot{display:block;width:22px;height:22px;border-radius:50%;background:var(--pc);border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.42)}
.gpin-lbl{position:absolute;bottom:150%;left:50%;transform:translateX(-50%) translateY(4px);font-size:11.5px;font-weight:600;color:#fff;background:rgba(20,22,28,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
@media(hover:hover){.gpin:hover{transform:translate(-50%,-50%) scale(1.12);z-index:3}}
.gpin:hover .gpin-lbl,.gpin.sel .gpin-lbl{opacity:1;transform:translateX(-50%) translateY(0)}
.gpin.sel{z-index:3}
.gpin.sel .gpin-dot{box-shadow:0 0 0 6px color-mix(in srgb,var(--pc) 34%,transparent),0 4px 12px rgba(0,0,0,.42)}
.gpin.dim{opacity:.34}
.gmap-controls{position:absolute;left:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:3}
.gmc{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font:inherit;font-size:12px;font-weight:700;color:#fff;background:rgba(20,22,28,.42);border:1px solid rgba(255,255,255,.22);cursor:pointer;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.gmc svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gmc-3d{background:#fff;color:#15171c}
.gmap-here{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:12px;color:#fff;background:rgba(20,22,28,.5);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-pill);padding:7px 14px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:3;white-space:nowrap}
.gmh-dot{width:9px;height:9px;border-radius:50%;background:#6E8BFF;box-shadow:0 0 0 4px rgba(110,139,255,.35);flex:none}
.gmap-card{position:absolute;top:16px;right:16px;width:300px;z-index:4;border-radius:20px;padding:20px;color:#fff;overflow:hidden;background:rgba(18,20,26,.5);border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 70px rgba(0,0,0,.5);backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5)}
.gmap-card::before{content:"";position:absolute;inset:0;background:linear-gradient(150deg,color-mix(in srgb,var(--pc) 42%,transparent),transparent 62%);pointer-events:none}
.gmap-card>*{position:relative}
.gmcard-x{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.gmcard-x svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.2}
.gmcard-rate{font-family:var(--font-flair);font-size:34px;font-weight:600;line-height:1}
.gmcard-rate span{font-size:15px;opacity:.7;font-family:var(--font-ui);font-weight:500}
.gmcard-name{font-family:var(--font-display);font-weight:600;font-size:20px;margin:5px 0 11px}
.gmcard-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.gmt{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;background:rgba(255,255,255,.14);border-radius:var(--r-pill);padding:4px 10px}
.gmt i{width:7px;height:7px;border-radius:50%}
.gmcard-rows{display:flex;flex-direction:column;gap:9px;margin:14px 0 16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.15)}
.gmcard-rows>div{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.gmcard-rows .k{opacity:.62}
.gmcard-cta{width:100%;justify-content:center;background:#fff;color:#15171c}
.gfind-head{display:flex;align-items:baseline;justify-content:space-between;margin:22px 0 14px}
.gfind-head .ttl{font-size:19px}
.gfind-row{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 8px}
.gfcard{flex:0 0 240px;background:var(--glass-card,var(--raise));border:1px solid var(--glass-card-bd,var(--raise-bd));border-left:3px solid var(--pc);border-radius:var(--r-card);padding:16px;cursor:pointer;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--sh-soft);transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s}
@media(hover:hover){.gfcard:hover{transform:translateY(-3px);box-shadow:var(--sh-raise)}}
.gfcard.sel{box-shadow:0 0 0 2px var(--pc),var(--sh-raise)}
.gfc-top{display:flex;align-items:center;gap:10px}
.gfc-dot{width:10px;height:10px;border-radius:50%;background:var(--pc);flex:none}
.gfc-id{flex:1;min-width:0}
.gfc-id .nm{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gfc-id .src{font-size:12px;color:var(--text-2)}
.gfc-rate{font-size:12.5px;font-weight:600;color:var(--warn);flex:none}
.gfc-meta{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.gfc-meta span{font-size:11px;color:var(--text-2);background:var(--chip);border-radius:var(--r-pill);padding:4px 9px}
.gfc-cta{width:100%;justify-content:center}
@media(max-width:760px){.gmap{height:460px}.gmap-card{width:auto;left:16px;right:16px;top:auto;bottom:62px}}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.pagehead{margin-right:auto;display:flex;flex-direction:column;gap:3px}
.pagehead .t{font-family:var(--font-display);font-weight:600;font-variation-settings:"opsz" 144;font-size:30px;letter-spacing:-.01em;line-height:1}
.pagehead .s{color:var(--text-2);font-size:13px}
.search{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--panel-bd);border-radius:var(--r-pill);padding:9px 16px;width:250px;color:var(--text-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.search input{border:0;background:transparent;outline:none;font:inherit;font-size:14px;color:var(--text);width:100%}
.search svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.iconbtn{width:42px;height:42px;border-radius:var(--r-pill);border:1px solid var(--panel-bd);background:var(--panel);color:var(--text-2);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.iconbtn:hover{color:var(--text)}
.iconbtn.on{background:var(--chip);color:var(--text);border-color:var(--line)}
.iconbtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8}
.iconbtn .dot{position:absolute;top:10px;right:11px;width:7px;height:7px;border-radius:50%;background:var(--text);border:2px solid var(--raise)}

.btn{font:inherit;font-weight:600;font-size:14px;border:0;border-radius:var(--r-pill);padding:11px 22px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform .15s,filter .2s}
.btn:active{transform:scale(.97)}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.btn-primary{background:var(--accent);color:var(--accent-tx)}
.btn-primary:hover{opacity:.9}
.btn-ghost{background:var(--panel);border:1px solid var(--panel-bd);color:var(--text);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.btn-ghost:hover{background:var(--hover)}

/* ---------- surfaces ---------- */
.panel{background:var(--panel);border:1px solid var(--panel-bd);border-radius:var(--r-panel);box-shadow:var(--sh-soft);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.card{position:relative;overflow:hidden;background:var(--glass-card,var(--raise));border:1px solid var(--glass-card-bd,var(--raise-bd));border-radius:var(--r-card);box-shadow:var(--sh-raise),inset 0 1px 0 var(--glass-card-spec,transparent);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.card::before{content:"";position:absolute;inset:0;background:var(--card-aurora);opacity:.6;pointer-events:none;z-index:0}
.card > *{position:relative;z-index:1}
.card.flat::before{display:none}
/* full mesh-gradient presets (from the reference) for feature panels / backgrounds */
.grad-green{background:radial-gradient(80% 70% at 70% 18%,#9AA48C 0%,transparent 60%),radial-gradient(90% 80% at 28% 92%,#323D2E 0%,transparent 65%),radial-gradient(70% 60% at 92% 102%,#8CC7BE 0%,transparent 60%),linear-gradient(160deg,#9AA48C,#323D2E);color:#F5F4EF}
.grad-sahara{background:radial-gradient(90% 60% at 42% 0%,#F7F7F7 0%,transparent 60%),radial-gradient(90% 70% at 50% 58%,#EDBA8D 0%,transparent 60%),radial-gradient(100% 80% at 50% 122%,#59361E 0%,transparent 60%),linear-gradient(180deg,#F7F7F7,#59361E)}
.grad-sea{background:radial-gradient(90% 70% at 60% 104%,#D2ECF2 0%,transparent 55%),radial-gradient(90% 80% at 40% 30%,#09606D 0%,transparent 60%),radial-gradient(80% 70% at 82% 8%,#075057 0%,transparent 60%),linear-gradient(180deg,#09606D,#075057);color:#F5F4EF}
.grid{display:grid;gap:18px}
.cards4{grid-template-columns:repeat(4,1fr)}
.cols{grid-template-columns:1.6fr 1fr}
@media(max-width:1080px){.cards4{grid-template-columns:repeat(2,1fr)}.cols{grid-template-columns:1fr}}
@media(max-width:720px){.app{padding:18px}}

.card-h{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 0}
.card-h .ttl{font-family:var(--font-display);font-weight:600;font-variation-settings:"opsz" 144;font-size:17px}
.card-h .sub{color:var(--text-2);font-size:12px;margin-top:2px}
a.more{color:var(--text-2);font-size:12px;text-decoration:none;font-weight:600}
a.more:hover{color:var(--text)}

/* ---------- metric cards ---------- */
.metric{padding:18px}
.metric .top{display:flex;align-items:center;justify-content:space-between;color:var(--text-2)}
.metric .ic{width:34px;height:34px;border-radius:var(--r-control);background:var(--chip);display:flex;align-items:center;justify-content:center;color:var(--text-2)}
.metric .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.metric .ic.flare{background:var(--accent);color:var(--accent-tx)}
.metric .val{font-family:var(--font-flair);font-size:32px;font-weight:600;margin-top:14px;letter-spacing:-.01em;line-height:1}
.metric .foot{display:flex;align-items:center;gap:8px;margin-top:10px}
.metric .foot .lbl{color:var(--text-2);font-size:12px}
.delta{font-family:var(--font-mono);font-size:11px;font-weight:500;padding:2px 7px;border-radius:var(--r-pill)}
.delta.up{color:var(--success);background:color-mix(in srgb,var(--success) 14%, transparent)}
.delta.down{color:var(--danger);background:color-mix(in srgb,var(--danger) 13%, transparent)}

/* ---------- segmented control ---------- */
.seg{display:flex;gap:2px;padding:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill)}
.seg button{font:inherit;font-size:12px;font-weight:500;color:var(--text-2);border:0;background:transparent;padding:5px 13px;border-radius:var(--r-pill);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--raise);color:var(--text);box-shadow:var(--sh-soft)}

.legend{display:flex;gap:16px;align-items:center}
.legend span{display:flex;align-items:center;gap:6px;color:var(--text-2);font-size:12px}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block}

/* ---------- group bars ---------- */
.barrow{display:flex;align-items:center;gap:12px;margin-top:14px}
.barrow .nm{width:96px;font-size:13px;flex:none}
.barrow .track{flex:1;height:8px;background:var(--surface-2);border-radius:var(--r-pill);overflow:hidden}
.barrow .fill{height:100%;border-radius:var(--r-pill)}
.barrow .v{width:30px;text-align:right;font-family:var(--font-mono);font-size:12px;color:var(--text-2);flex:none}

/* ---------- activity feed ---------- */
.feed{padding:4px 20px 12px}
.feed .it{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.feed .it:last-child{border-bottom:0}
.feed .av{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:var(--chip);color:var(--text-2)}
.feed .av.flare{background:var(--accent);color:var(--accent-tx)}
.feed .it p{margin:0;font-size:14px}
.feed .it .meta{color:var(--text-2);font-size:12px;margin-top:3px}
.feed .when{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-2);flex:none}

/* ---------- events ---------- */
.event{display:flex;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.event:last-child{border-bottom:0}
.event .date{width:50px;flex:none;text-align:center;border:1px solid var(--line);border-radius:var(--r-control);padding:6px 0}
.event .date .m{font-family:var(--font-mono);font-size:10px;color:var(--text-2)}
.event .date .d{font-size:18px;font-weight:600;line-height:1.1}
.event .info{flex:1;min-width:0}
.event .info .t{font-size:14px;font-weight:500}
.event .info .l{color:var(--text-2);font-size:12px;margin-top:2px}
.stack{display:flex}
.stack span{width:26px;height:26px;border-radius:50%;margin-left:-8px;border:2px solid var(--raise);background:var(--sage);color:var(--ink);font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{text-align:left;padding:10px 20px;color:var(--text-2);font-family:var(--font-mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--line)}
thead th.r,tbody td.r{text-align:right}
tbody td{padding:13px 20px;border-bottom:1px solid var(--line-soft)}
tbody tr:last-child td{border-bottom:0}
.who{display:flex;align-items:center;gap:10px}
.who .av{width:30px;height:30px;border-radius:50%;background:var(--chip);color:var(--text-2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.amt{font-family:var(--font-mono);font-weight:500}
.pill{font-family:var(--font-mono);font-size:10px;font-weight:500;padding:3px 9px;border-radius:var(--r-pill);background:var(--chip);color:var(--text-2);text-transform:uppercase;letter-spacing:.06em}
.pill.ok{background:color-mix(in srgb,var(--success) 14%, transparent);color:var(--success)}
.pill.pend{background:var(--chip);color:var(--text-2)}
.pill.stat{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);color:var(--text)}
/* directory: status tooltip, merge tag, duplicates flag */
.tipw{position:relative;cursor:help}
.tipw::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 8px);z-index:30;width:max-content;max-width:220px;padding:7px 10px;border-radius:10px;background:var(--glass-win,#1a1d23);color:var(--text);border:1px solid var(--glass-win-bd,var(--line));box-shadow:var(--sh-raise);font-family:var(--font-ui);font-size:11.5px;font-weight:400;text-transform:none;letter-spacing:0;line-height:1.4;opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease;pointer-events:none;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
@media(hover:hover){.tipw:hover::after{opacity:1;transform:translateY(0)}}
.dir-name{display:inline-flex;align-items:center;gap:8px}
.merge-tag{font:inherit;font-size:10px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);border:0;border-radius:var(--r-pill);padding:3px 8px;cursor:pointer}
@media(hover:hover){.merge-tag:hover{background:color-mix(in srgb,var(--warn) 22%,transparent)}}
.dir-dupe.flag{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
#dir-export svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sdot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;vertical-align:middle}
.fchip .sdot{width:8px;height:8px}
.feed .it .meta{display:flex;align-items:center;gap:6px}
.feed .adot{width:7px;height:7px;border-radius:50%;flex:none}

/* clickable cards + Mac-style detail windows */
[data-detail]{cursor:pointer}
.card[data-detail]{transition:transform .18s ease,box-shadow .18s ease,background .25s ease,border-color .25s ease}
.card[data-detail]:hover{transform:translateY(-2px);box-shadow:var(--sh-raise)}
.feed .it[data-detail],.event[data-detail],tbody tr[data-detail]{border-radius:10px;transition:background .15s ease}
.feed .it[data-detail]:hover,.event[data-detail]:hover,tbody tr[data-detail]:hover{background:var(--hover)}
.win-layer{position:fixed;inset:0;z-index:1000;pointer-events:none}
.win{position:absolute;width:min(580px,92vw);max-height:82vh;display:flex;flex-direction:column;background:var(--glass-win);-webkit-backdrop-filter:blur(40px) saturate(200%);backdrop-filter:blur(40px) saturate(200%);border:1px solid var(--glass-win-bd);border-radius:26px;box-shadow:0 44px 110px rgba(0,0,0,.5),0 14px 36px rgba(0,0,0,.32),inset 0 1px 0 var(--glass-win-spec);overflow:hidden;pointer-events:auto;will-change:transform,opacity}
.win::before{content:"";position:absolute;inset:0;background:var(--card-aurora);opacity:.7;pointer-events:none;z-index:0}
.win::after{content:"";position:absolute;left:0;right:0;top:0;height:150px;background:linear-gradient(180deg,var(--glass-win-spec),transparent);opacity:.55;pointer-events:none;z-index:0}
.win-bar,.win-body{position:relative;z-index:1}
.win-bar{display:flex;align-items:center;padding:15px 17px;cursor:grab;user-select:none;flex:none;background:transparent}
.win-bar:active{cursor:grabbing}
.traffic{display:flex;gap:8px;z-index:2}
.traffic i{width:12px;height:12px;border-radius:50%;display:block;cursor:pointer;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18)}
.traffic .r{background:#ff5f57}.traffic .y{background:#febc2e}.traffic .g{background:#28c840}
.win-title{position:absolute;left:0;right:0;text-align:center;font-family:var(--font-display);font-weight:600;font-size:14px;pointer-events:none;color:var(--text)}
.win-body{padding:6px 26px 26px;overflow-y:auto;flex:1}
.dh{display:flex;align-items:flex-end;gap:14px;margin-bottom:2px}
.dh-val{font-family:var(--font-flair);font-size:40px;font-weight:600;letter-spacing:-.01em;line-height:1}
.dh-sub{color:var(--text-2);font-size:13px;margin-bottom:4px}
.dsec{margin-top:24px}
.dsec-t{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);margin-bottom:10px}
.kv{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--text-2)}
.dactions{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.dactions .btn{font-size:13px;padding:9px 16px}

/* App Launcher (Launchpad-style grid) */
.launcher{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:48px 40px;background:color-mix(in srgb,var(--bg) 55%, transparent);backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);opacity:0;transition:opacity .25s ease}
.launcher.show{opacity:1}
.launcher-inner{width:100%;max-width:920px}
.launcher h2{font-family:var(--font-display);font-weight:600;font-size:22px;text-align:center;margin:0 0 4px}
.launcher .sub{text-align:center;color:var(--text-2);font-size:13px;margin:0 0 28px}
.launch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.launch-tile{display:flex;flex-direction:column;gap:11px;padding:20px;border-radius:var(--r-card);background:var(--raise);border:1px solid var(--raise-bd);box-shadow:var(--sh-soft);cursor:pointer;text-decoration:none;color:inherit;position:relative;overflow:hidden;transform:translateY(10px);opacity:0;transition:transform .26s cubic-bezier(.2,.8,.25,1),opacity .26s ease,box-shadow .18s ease}
html[data-theme="dark"] .launch-tile{background:#15161a;border-color:rgba(255,255,255,.08)}
.launcher.show .launch-tile{transform:translateY(0);opacity:1}
.launch-tile::before{content:"";position:absolute;inset:0;background:var(--card-aurora);opacity:.55;pointer-events:none}
.launch-tile>*{position:relative;z-index:1}
.launch-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-raise)}
.launch-tile .chip{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--chip);color:var(--text)}
.launch-tile .chip svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7}
.launch-tile .nm{font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px}
.launch-tile.soon{opacity:.62}
.soon-tag{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;padding:2px 6px;border-radius:var(--r-pill);background:var(--chip);color:var(--text-2)}
.launch-tile .ds{font-size:12px;color:var(--text-2);line-height:1.4}
.launch-close{position:absolute;top:24px;right:28px;width:42px;height:42px;border-radius:50%;border:1px solid var(--panel-bd);background:var(--panel);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer}
.launch-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.launch-close:hover{background:var(--hover)}

/* generic module stub page */
.stub{padding:64px 40px;text-align:center}
.stub .ic{width:64px;height:64px;border-radius:18px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;background:var(--chip);color:var(--text)}
.stub .ic svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.6}
.stub h3{font-family:var(--font-display);font-weight:600;font-size:22px;margin:0 0 6px}
.stub p{color:var(--text-2);font-size:14px;margin:0 auto;max-width:42ch}

/* ---- dashboard: Sunday attendance banner ---- */
.banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-radius:var(--r-card);background:var(--raise);border:1px solid var(--raise-bd);box-shadow:var(--sh-soft);position:relative;overflow:hidden;margin-bottom:18px}
.banner::before{content:"";position:absolute;inset:0;background:var(--card-aurora);opacity:.5;pointer-events:none}
.banner>*{position:relative;z-index:1}
.banner-l{display:flex;align-items:center;gap:14px}
.banner-icon{width:40px;height:40px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--chip);color:var(--text)}
.banner-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.banner b{font-weight:600}
.banner-sub{font-size:12px;color:var(--text-2);margin-top:2px}
.banner-r{display:flex;align-items:center;gap:8px}
.banner input{height:40px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface-2);color:var(--text);font:inherit;font-size:14px;padding:0 14px;width:110px;outline:none}

/* ---- Ask Flocks (central AI) ---- */
.ai-card{padding:20px}
.ai-head{display:flex;align-items:center;gap:10px}
.ai-badge{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--accent-tx)}
.ai-badge svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9}
.ai-head .t{font-family:var(--font-display);font-weight:600;font-size:17px}
.ai-sub{color:var(--text-2);font-size:13px;margin:6px 0 14px}
.ai-input{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line);margin-bottom:14px}
.ai-input input{flex:1;border:0;background:transparent;outline:none;font:inherit;font-size:15px;color:var(--text)}
.ai-input .send{width:34px;height:34px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-tx);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.ai-input .send svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn{font:inherit;font-size:13px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;cursor:pointer;transition:background .15s}
.chip-btn:hover{background:var(--hover)}
.ai-results{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.res-h{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);margin-bottom:2px}
.res-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-control);background:var(--surface-2);cursor:pointer;transition:background .15s}
.res-row:hover{background:var(--hover)}
.res-row .av{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:var(--chip);color:var(--text)}
.res-row .nm{font-weight:600;font-size:14px}
.res-row .mt{font-size:12px;color:var(--text-2)}
.res-row .go{margin-left:auto;color:var(--text-2)}
.res-row .go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* ---- health indicators ---- */
.health-row{margin-top:16px}
.health-row.first{margin-top:4px}
.health-row .top{display:flex;justify-content:space-between;font-size:14px;margin-bottom:7px}
.health-row .pct{font-family:var(--font-mono);font-weight:500}
.health-track{height:8px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.health-fill{height:100%;border-radius:var(--r-pill)}
.health-fill.ok{background:var(--success)} .health-fill.warn{background:var(--warn)} .health-fill.bad{background:var(--danger)}

/* ---- follow-ups (Connections) ---- */
.fu{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line-soft);cursor:pointer;border-radius:10px;transition:background .15s}
.fu:hover{background:var(--hover)}
.fu:last-child{border-bottom:0}
.fu .av{width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;background:var(--chip);color:var(--text)}
.fu .nm{font-weight:600;font-size:14px}
.fu .mt{font-size:12px;color:var(--text-2);margin-top:1px}
.fu .tag{margin-left:auto;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);background:var(--chip);padding:3px 8px;border-radius:var(--r-pill);flex:none}

/* ---- connection profile: header, step tracker, checklist, tip ---- */
.win-prof{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.win-prof .pav{width:58px;height:58px;border-radius:50%;flex:none;background:linear-gradient(140deg,#C7D3CB,#A6C7C2);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:19px;box-shadow:0 4px 14px rgba(40,52,72,.18),inset 0 1px 0 rgba(255,255,255,.5)}
.win-prof .pn{font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.1}
.win-prof .pr{font-size:13px;color:var(--text-2);margin-top:3px}
.pstats{display:flex;gap:8px;margin:18px 0 6px}
.pstat{flex:1;text-align:center;background:color-mix(in srgb,var(--raise) 50%, transparent);border:1px solid var(--glass-win-bd);border-radius:var(--r-control);padding:13px;box-shadow:inset 0 1px 0 var(--glass-win-spec)}
.pstat .pv{font-family:var(--font-flair);font-size:22px;font-weight:600;line-height:1}
.pstat .pl{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);margin-top:6px}
.stepper{display:flex;align-items:flex-start;margin:6px 0 4px}
.stepper .st{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none;width:66px;text-align:center}
.stepper .sc{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;background:color-mix(in srgb,var(--raise) 70%, transparent);color:var(--text-2);border:1px solid var(--glass-win-bd);box-shadow:var(--sh-soft),inset 0 1px 0 var(--glass-win-spec);transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.stepper .sc svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.6}
.stepper .st.done .sc{background:var(--stg,var(--accent));color:#fff;border-color:transparent;box-shadow:0 6px 16px color-mix(in srgb,var(--stg,var(--accent)) 28%, transparent)}
.stepper .st.cur .sc{background:var(--raise);color:var(--text);border:2px solid var(--stg,var(--accent));box-shadow:0 0 0 5px color-mix(in srgb,var(--stg,var(--accent)) 16%, transparent),0 6px 18px color-mix(in srgb,var(--stg,var(--accent)) 28%, transparent)}
.stepper .sl{font-size:11px;color:var(--text-2);line-height:1.3}
.stepper .st.cur .sl,.stepper .st.done .sl{color:var(--text)}
.stepper .bar{flex:1;height:2px;background:var(--line);margin-top:22px}
.stepper .bar.fill{background:var(--stg,var(--accent))}
.steplist{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.step-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-control);background:color-mix(in srgb,var(--raise) 50%, transparent);cursor:pointer;border:1px solid var(--glass-win-bd);transition:background .15s,border-color .15s,box-shadow .15s}
.step-row:hover{background:color-mix(in srgb,var(--raise) 72%, transparent)}
.step-row.next{border-color:var(--stg,var(--accent));box-shadow:0 0 0 3px color-mix(in srgb,var(--stg,var(--accent)) 13%, transparent)}
.step-box{width:22px;height:22px;border-radius:7px;flex:none;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:transparent;transition:background .15s,border-color .15s,color .15s}
.step-row.next .step-box{border-color:var(--stg,var(--accent))}
.step-row.done .step-box{background:var(--stg,var(--accent));border-color:transparent;color:#fff}
.step-box svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:3}
.step-row .sname{font-size:14px;font-weight:500}
.step-row.done .sname{color:var(--text-2);text-decoration:line-through}
.step-row .smeta{margin-left:auto;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2)}
.step-row.next .smeta{color:var(--stg,var(--accent))}
.tip{display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:16px;border-radius:var(--r-card);background:color-mix(in srgb,var(--raise) 50%, transparent);border:1px solid var(--glass-win-bd);box-shadow:inset 0 1px 0 var(--glass-win-spec)}
.tip .ta{width:34px;height:34px;border-radius:50%;flex:none;background:var(--stg,var(--accent));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px}
.tip .tt{font-weight:600;font-size:13px}
.tip .td{font-size:13px;color:var(--text-2);margin-top:2px}

/* ---- People page: sub-tabs + Connections ---- */
.subtabs{display:flex;gap:6px;margin-bottom:20px}
.subtab{font:inherit;font-size:14px;font-weight:500;color:var(--text-2);background:transparent;border:1px solid transparent;border-radius:var(--r-pill);padding:9px 18px;cursor:pointer}
.subtab.on{background:var(--raise);color:var(--text);box-shadow:var(--sh-soft);border-color:var(--raise-bd)}
.conn-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.fchip{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 14px;cursor:pointer;transition:background .15s}
.fchip:hover{background:var(--hover)}
.fchip.on{background:var(--accent);color:var(--accent-tx);border-color:transparent}
.conn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:26px;padding:6px 2px}
.conn{background:var(--raise);border:1px solid var(--raise-bd);border-radius:var(--r-card);box-shadow:var(--sh-soft);padding:18px;cursor:pointer;position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.conn::before{content:"";position:absolute;inset:0;background:var(--card-aurora);opacity:.4;pointer-events:none}
.conn>*{position:relative;z-index:1}
.conn:hover{transform:translateY(-2px);box-shadow:var(--sh-raise)}
.conn-top{display:flex;align-items:center;gap:12px}
.conn-top .av{width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;background:var(--chip);color:var(--text)}
.conn-top .who{flex:1;min-width:0}
.conn-top .nm{font-weight:600;font-size:15px}
.conn-top .src{font-size:12px;color:var(--text-2);margin-top:1px}
.conn-prog{margin-top:16px}
.prog-h{display:flex;justify-content:space-between;color:var(--text-2);margin-bottom:7px}
.ptrack{height:6px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.pfill{height:100%;border-radius:var(--r-pill);background:var(--accent)}
.csteps{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.cstep{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 11px}
.cstep.done{color:var(--text);border-color:transparent;background:color-mix(in srgb,var(--success) 15%, transparent)}
.cstep svg{width:13px;height:13px;stroke:var(--success);fill:none;stroke-width:2.6}
.conn-meta{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.chiplet{font-size:12px;color:var(--text-2);background:var(--surface-2);border-radius:var(--r-pill);padding:5px 11px}
.att{display:flex;gap:4px;margin-left:auto}
.adot{width:8px;height:8px;border-radius:50%;background:var(--line)}
.adot.on{background:var(--success)}
.conn-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.conn-foot .assg{font-size:12px;color:var(--text-2)}
.cacts{display:flex;gap:8px}
.btn.sm{font-size:13px;padding:8px 14px}

/* ---- Calendar (read-only visualiser) ---- */
.cal-bar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.cal-month{font-family:var(--font-display);font-weight:600;font-size:18px;min-width:150px}
.cal-nav{display:flex;gap:6px}
.cal-nav button{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center}
.cal-nav button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.cal-legend{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.cal-filter{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px;cursor:pointer;transition:opacity .15s}
.cal-filter i{width:9px;height:9px;border-radius:3px;display:inline-block}
.cal-filter.off{opacity:.4}
.cf-service i{background:var(--accent)} .cf-group i{background:var(--sage)} .cf-growth i{background:var(--warn)} .cf-event i{background:#4f8f86}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal-wd{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);text-align:center;padding-bottom:2px}
.cal-cell{min-height:108px;background:var(--raise);border:1px solid var(--raise-bd);border-radius:var(--r-control);padding:8px;box-shadow:var(--sh-soft)}
.cal-cell.cal-empty{background:transparent;border:0;box-shadow:none}
.cal-cell.today{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 14%, transparent)}
.cal-d{font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.cal-cell.today .cal-d{color:var(--text)}
.cal-evs{display:flex;flex-direction:column;gap:4px}
.cev{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text);text-decoration:none;background:var(--surface-2);border-radius:6px;padding:3px 7px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;transition:background .15s}
.cev:hover{background:var(--hover)}
.cev i{width:7px;height:7px;border-radius:50%;flex:none}
.cev.service i{background:var(--accent)} .cev.group i{background:var(--sage)} .cev.growth i{background:var(--warn)} .cev.event i{background:#4f8f86}
#cal-root.hide-service .cev.service,#cal-root.hide-group .cev.group,#cal-root.hide-growth .cev.growth,#cal-root.hide-event .cev.event{display:none}
@media(max-width:760px){.cal-cell{min-height:72px}.cev{font-size:10px;padding:2px 5px}.cal-month{min-width:0}}

/* ---- Teams & Rosters ---- */
.ros-team{margin-bottom:20px}
.ros-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ros-name{font-family:var(--font-display);font-weight:600;font-size:16px}
.ros-n{font-family:var(--font-mono);font-size:11px;color:var(--text-2)}
.ros{background:var(--raise);border:1px solid var(--raise-bd);box-shadow:var(--sh-soft);border-radius:var(--r-card);overflow:hidden}
.ros-row{display:grid;grid-template-columns:1fr 1.4fr 108px 92px;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.ros-row:last-child{border-bottom:0}
.ros-role{font-weight:600;font-size:14px}
.ros-person{display:flex;align-items:center;gap:10px;font-size:13px}
.ros-person .av{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;background:var(--chip);color:var(--text)}
.ros-person.open{color:var(--text-2);font-style:italic}
.rstat{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:4px 9px;border-radius:var(--r-pill);text-align:center}
.rstat.confirmed{background:color-mix(in srgb,var(--success) 14%, transparent);color:var(--success)}
.rstat.invited{background:color-mix(in srgb,var(--warn) 16%, transparent);color:var(--warn)}
.rstat.declined{background:color-mix(in srgb,var(--danger) 13%, transparent);color:var(--danger)}
.rstat.open{background:var(--surface-2);color:var(--text-2);border:1px dashed var(--line)}
.ros-act{font-size:12px}
.ai-box{position:relative;overflow:hidden;border:1px solid var(--accent);border-radius:var(--r-card);background:var(--raise);box-shadow:var(--sh-soft);padding:18px;margin-bottom:18px}
.ai-box::before{content:"";position:absolute;inset:0;background:var(--card-aurora);opacity:.6;pointer-events:none}
.ai-box>*{position:relative}
.ai-box .aih{display:flex;align-items:center;gap:10px}
.ai-box .aibadge{width:30px;height:30px;border-radius:9px;background:var(--accent);color:var(--accent-tx);display:flex;align-items:center;justify-content:center}
.ai-box .aibadge svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9}
.ai-box .ait{font-family:var(--font-display);font-weight:600;font-size:16px}
.ai-box .ais{font-size:13px;color:var(--text-2);margin:5px 0 14px}
.sug-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-control);background:var(--surface-2);margin-bottom:8px}
.sug-ic{width:34px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:9px;font-weight:600;text-transform:uppercase}
.sug-ic.fill{background:color-mix(in srgb,var(--accent) 16%, transparent);color:var(--accent)}
.sug-ic.swap{background:color-mix(in srgb,var(--warn) 16%, transparent);color:var(--warn)}
.sug-ic.flag{background:color-mix(in srgb,var(--danger) 13%, transparent);color:var(--danger)}
.sug-main{flex:1;min-width:0}
.sug-t{font-weight:600;font-size:14px}
.sug-r{font-size:12px;color:var(--text-2);margin-top:1px}
.duty{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r-card);background:var(--raise);border:1px solid var(--raise-bd);box-shadow:var(--sh-soft);margin-bottom:12px;position:relative;overflow:hidden}
.duty::before{content:"";position:absolute;inset:0;background:var(--card-aurora);opacity:.4;pointer-events:none}
.duty>*{position:relative}
.duty .dwhen{width:62px;flex:none;text-align:center;border:1px solid var(--line);border-radius:var(--r-control);padding:8px 0}
.duty .dwhen .dd{font-weight:600;font-size:15px}
.duty .dwhen .dm{font-family:var(--font-mono);font-size:10px;color:var(--text-2)}
.duty .drole{flex:1}
.duty .drt{font-weight:600;font-size:15px}
.duty .dacts{display:flex;gap:8px}
.rs-row{display:grid;grid-template-columns:60px 1fr auto 52px;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line-soft)}
.rs-row:last-child{border-bottom:0}
.rs-time{font-family:var(--font-mono);font-size:13px;color:var(--text-2)}
.rs-item{font-weight:600;font-size:14px}
.rs-who{font-size:13px;color:var(--text-2)}
.rs-dur{font-family:var(--font-mono);font-size:12px;color:var(--text-2);text-align:right}
.song-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--line-soft)}
.song-row .ri{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--chip);color:var(--text)}
.song-row .ri svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7}
.song-row .st{font-weight:600;font-size:13px}
.song-row .sk{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-2)}
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.res-link{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--r-card);background:var(--raise);border:1px solid var(--raise-bd);box-shadow:var(--sh-soft);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.res-link:hover{transform:translateY(-2px);box-shadow:var(--sh-raise)}
.res-link .ri{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--chip);color:var(--text)}
.res-link .ri svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.res-link .rt{font-weight:600;font-size:14px}
.res-link .rty{font-size:12px;color:var(--text-2)}
@media(max-width:760px){.ros-row{grid-template-columns:1fr 96px}.ros-person,.ros-act{display:none}}

/* ===== Roster planner — multi-week matrix ===== */
.rstat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.rstat-card{position:relative;overflow:hidden;display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:var(--r-card);background:var(--raise);border:1px solid var(--raise-bd);box-shadow:var(--sh-soft)}
.rstat-card::before{content:"";position:absolute;inset:0;background:var(--card-aurora);opacity:.5;pointer-events:none}
.rstat-card>*{position:relative}
.rstat-card .ic{width:40px;height:40px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center}
.rstat-card .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rstat-card .ic.good{background:color-mix(in srgb,var(--success) 16%,transparent);color:var(--success)}
.rstat-card .ic.neu{background:var(--chip);color:var(--text)}
.rstat-card .ic.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.rstat-card .ic.bad{background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger)}
.rstat-card .lbl{font-size:12.5px;color:var(--text-2);font-weight:500}
.rstat-card .big{font-family:var(--font-flair);font-weight:500;font-size:32px;line-height:1.05;letter-spacing:-.01em;margin:3px 0 2px}
.rstat-card .sub{font-size:11.5px;color:var(--text-2)}
.rstat-card.act{cursor:pointer;transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s ease}
@media(hover:hover){.rstat-card.act:hover{transform:translateY(-2px);box-shadow:var(--sh-raise)}}
.rstat-card.act:active{transform:translateY(0) scale(.99)}

.rtoolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.rsearch{flex:0 1 260px}
.rselect{display:flex;align-items:center;gap:7px;padding:0 12px;height:38px;border-radius:var(--r-control);background:var(--surface-2);border:1px solid var(--line-soft)}
.rselect .rsl{font-size:12px;color:var(--text-2)}
.rselect select{font:inherit;font-size:13px;font-weight:500;color:var(--text);background:transparent;border:0;cursor:pointer;outline:none}
.rpills{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.rpill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--text-2);padding:6px 11px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line-soft);cursor:pointer;transition:transform .15s cubic-bezier(.23,1,.32,1),background .15s ease,border-color .15s ease}
.rpill .n{font-weight:600;color:var(--text)}
.rpill i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.rpill.confirmed{color:var(--success)} .rpill.pending,.rpill.needed{color:var(--warn)} .rpill.draft{color:var(--text-2)} .rpill.declined{color:var(--danger)}
@media(hover:hover){.rpill:hover{transform:translateY(-1px);border-color:var(--line)}}
.rpill:active{transform:translateY(0) scale(.97)}
.rpill.on{background:var(--accent);border-color:var(--accent);color:var(--accent-tx)} .rpill.on .n{color:var(--accent-tx)}

.rosterx{border:1px solid var(--raise-bd);border-radius:var(--r-card);background:var(--raise);box-shadow:var(--sh-soft);overflow:auto;max-height:74vh}
.rgrid{display:grid;min-width:980px;font-size:13px}
.rcell{border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);min-height:54px;display:flex;align-items:center;padding:7px 10px}
.rgrid .rhead:last-child,.rgrid .rwk:last-child{border-right:0}
.rcorner,.rhead{position:sticky;top:0;z-index:3;background:var(--raise);flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:12px 14px}
.rcorner{left:0;z-index:5;justify-content:center;border-bottom:1px solid var(--line)}
.rcorner .cn-t{font-weight:600;font-size:13px}
.rcorner .cn-s{font-family:var(--font-mono);font-size:10.5px;color:var(--text-2)}
.rhead{border-bottom:1px solid var(--line)}
.rhead .wh-d{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.02em}
.rhead .wh-l{font-size:12px;color:var(--text-2)}
.rhead .wh-t{font-family:var(--font-mono);font-size:10px;color:var(--text-2);opacity:.85}
.rhead.special{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,var(--raise)),var(--raise))}
.rhead.special .wh-l{color:var(--accent);font-weight:600}
.rsec{grid-column:1/-1;position:sticky;left:0;display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--surface-2);border:0;border-bottom:1px solid var(--line);border-top:1px solid var(--line);font:inherit;cursor:pointer;width:100%;text-align:left;color:var(--text)}
.rsec .chev{width:16px;height:16px;stroke:var(--text-2);fill:none;stroke-width:2.2;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.rsec.collapsed .chev{transform:rotate(-90deg)}
.rsec .dot{width:8px;height:8px;border-radius:50%;flex:none}
.rsec .dot.violet{background:#7c6cff} .rsec .dot.sky{background:#3aa0e3}
.rsec .snm{font-family:var(--font-display);font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.rsec .scount{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-2)}
.rrole{position:sticky;left:0;z-index:1;background:var(--raise);font-weight:600;font-size:13px;border-right:1px solid var(--line)}
.rwk{padding:6px 8px}
.cellchip{display:flex;align-items:center;gap:8px;width:100%;border-radius:9px;padding:7px 9px;cursor:pointer;background:transparent;border:1px solid transparent;transition:background .15s ease,border-color .15s ease,transform .12s cubic-bezier(.23,1,.32,1)}
.cellchip .ci{width:16px;height:16px;flex:none;display:flex;align-items:center;justify-content:center}
.cellchip .ci svg{width:15px;height:15px;stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cellchip .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(hover:hover){.cellchip:hover{background:var(--surface-2);border-color:var(--line-soft)}}
.cellchip:active{transform:scale(.98)}
.cellchip.confirmed .ci{color:var(--success)}
.cellchip.pending .ci{color:var(--warn)}
.cellchip.draft{border:1px dashed var(--line);color:var(--text-2);font-style:italic}
.cellchip.draft .ci{color:var(--text-2);opacity:.75}
.cellchip .rm{margin-left:auto;width:19px;height:19px;flex:none;border:0;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--text-2);opacity:.45;cursor:pointer;transition:opacity .15s ease,background .15s ease,color .15s ease}
.cellchip .rm svg{width:13px;height:13px;stroke-width:2.3;fill:none}
@media(hover:hover){.cellchip.draft:hover .rm{opacity:1}.cellchip .rm:hover{background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger);opacity:1}}
.needchip{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;font-family:var(--font-mono);font-size:11px;padding:9px;border-radius:9px;background:color-mix(in srgb,var(--warn) 13%,transparent);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 32%,transparent);cursor:pointer;transition:background .15s ease,transform .12s cubic-bezier(.23,1,.32,1)}
.needchip .ci{width:13px;height:13px;display:flex} .needchip .ci svg{width:13px;height:13px;stroke-width:2.4;fill:none}
@media(hover:hover){.needchip:hover{background:color-mix(in srgb,var(--warn) 20%,transparent)}}
.needchip:active{transform:scale(.98)}
.declcell{display:flex;flex-direction:column;gap:5px;width:100%}
.declname{display:flex;align-items:center;gap:7px;color:var(--danger);text-decoration:line-through;font-size:13px}
.declname .ci{width:15px;height:15px;flex:none} .declname .ci svg{width:14px;height:14px;stroke-width:2.3;fill:none;stroke:var(--danger)}
.replace{font-family:var(--font-mono);font-size:10.5px;padding:5px 8px;border-radius:7px;background:color-mix(in srgb,var(--warn) 13%,transparent);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);cursor:pointer;text-align:center;transition:background .15s ease}
@media(hover:hover){.replace:hover{background:color-mix(in srgb,var(--warn) 20%,transparent)}}
.rgrid.flt .rwk:not(.match){opacity:.22;filter:saturate(.5);transition:opacity .2s ease,filter .2s ease}
.rgrid.flt .rwk.match{transition:opacity .2s ease}
.rlegend{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--text-2);margin-top:13px;line-height:1.55}
.rlegend svg{width:15px;height:15px;flex:none;margin-top:1px;stroke:var(--warn);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rlegend b{color:var(--text);font-weight:600}
@media(max-width:980px){.rstat-cards{grid-template-columns:repeat(2,1fr)}.rpills{margin-left:0;width:100%}}

/* ---- Groups (Life Groups) ---- */
.og-age{margin-bottom:26px}
.og-age-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.og-age-name{font-family:var(--font-display);font-weight:600;font-size:17px}
.og-coach{font-size:12px;color:var(--text-2);background:var(--surface-2);border-radius:var(--r-pill);padding:5px 12px}
.og-line{flex:1;height:1px;background:var(--line-soft)}
.og-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.og-card{position:relative;overflow:hidden;background:var(--raise);border:1px solid var(--raise-bd);box-shadow:var(--sh-soft);border-radius:var(--r-card);padding:16px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.og-card::before{content:"";position:absolute;inset:0;background:var(--card-aurora);opacity:.4;pointer-events:none}
.og-card>*{position:relative}
.og-card:hover{transform:translateY(-2px);box-shadow:var(--sh-raise)}
.og-card .ogn{font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.og-card .ogl{font-size:12px;color:var(--text-2);margin-top:3px}
.ogcap{margin-top:14px}
.ogcap-h{display:flex;justify-content:space-between;font-size:12px;color:var(--text-2);margin-bottom:6px}
.ogcap-t{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.ogcap-f{height:100%;border-radius:999px;background:var(--accent);transform-origin:left}
.ogmeta{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.ogchip{font-size:12px;color:var(--text-2);background:var(--surface-2);border-radius:var(--r-pill);padding:5px 10px}
.wwc{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--success);background:color-mix(in srgb,var(--success) 14%, transparent);border-radius:var(--r-pill);padding:3px 8px}
.pub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.pub-card{position:relative;overflow:hidden;background:var(--raise);border:1px solid var(--raise-bd);box-shadow:var(--sh-soft);border-radius:var(--r-card);padding:18px}
.pub-card::before{content:"";position:absolute;inset:0;background:var(--card-aurora);opacity:.45;pointer-events:none}
.pub-card>*{position:relative}
.pub-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pub-name{font-family:var(--font-display);font-weight:600;font-size:17px}
.pub-tag{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);background:var(--surface-2);border-radius:var(--r-pill);padding:4px 9px}
.pub-meta{font-size:13px;color:var(--text-2);margin-top:10px;line-height:1.6}
.pub-note{font-size:12px;color:var(--text-2);margin-top:6px;font-style:italic}
.pub-card .btn{width:100%;justify-content:center;margin-top:16px}
.grsrc{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .15s}
.grsrc:hover{background:var(--hover)}
.grsrc:last-child{border-bottom:0}
.grsrc .ri{width:40px;height:40px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--chip);color:var(--text)}
.grsrc .ri svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.grsrc .rt{font-weight:600;font-size:14px}
.grsrc .rm{font-size:12px;color:var(--text-2);margin-top:1px}
.grsrc .rtype{margin-left:auto;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);background:var(--surface-2);border-radius:var(--r-pill);padding:4px 10px}

/* ---- Growth Track ---- */
.gsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gstep{position:relative;overflow:hidden;background:var(--raise);border:1px solid var(--raise-bd);border-radius:var(--r-card);box-shadow:var(--sh-soft);padding:16px}
.gstep::before{content:"";position:absolute;inset:0;background:var(--card-aurora);opacity:.45;pointer-events:none}
.gstep>*{position:relative}
.gstep.current{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%, transparent),var(--sh-raise)}
.gstep .gnum{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--line)}
.gstep .gnum svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.6}
.gstep.done .gnum{background:var(--accent);color:var(--accent-tx);border-color:transparent}
.gstep.current .gnum{border:2px solid var(--accent);color:var(--text)}
.gstep .gname{font-family:var(--font-display);font-weight:600;font-size:16px;margin-top:12px}
.gstep .gsub{font-size:12px;color:var(--text-2);margin-top:2px}
.gstep .gdate{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);margin-top:10px}
.gstep .gcount{position:absolute;top:16px;right:16px;font-family:var(--font-mono);font-size:11px;color:var(--text-2)}
@media(max-width:820px){.gsteps{grid-template-columns:repeat(2,1fr)}}
.gatt{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-control);background:var(--surface-2);cursor:pointer;margin-bottom:8px;transition:background .15s}
.gatt:hover{background:var(--hover)}
.gatt.present{background:color-mix(in srgb,var(--success) 12%, transparent)}
.gatt .gbox{width:22px;height:22px;border-radius:7px;flex:none;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:transparent}
.gatt.present .gbox{background:var(--success);border-color:transparent;color:#fff}
.gatt .gbox svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:3}
.gatt .gn{font-weight:600;font-size:14px}
.gtrack-row{display:grid;grid-template-columns:1.6fr auto 1fr;align-items:center;gap:14px;padding:12px 8px;border-bottom:1px solid var(--line-soft);cursor:pointer;border-radius:10px;transition:background .15s}
.gtrack-row:hover{background:var(--hover)}
.gtrack-row:last-child{border-bottom:0}
.gtrack-who{display:flex;align-items:center;gap:11px}
.gtrack-who .av{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:var(--chip);color:var(--text)}
.gtrack-who .gtn{font-weight:600;font-size:14px}
.gdots{display:flex;gap:7px}
.gdot{width:14px;height:14px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.gdot.done{background:var(--accent);border-color:transparent}
.gdot.done svg{width:9px;height:9px;stroke:var(--accent-tx);fill:none;stroke-width:3.4}
.gdot.current{border:2px solid var(--accent);background:var(--raise)}
.gnext{font-size:12px;color:var(--text-2);text-align:right}
@media(max-width:760px){.gtrack-row{grid-template-columns:1fr auto}.gnext{display:none}}

/* ---- People > Directory ---- */
.dir-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.dir-search{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 16px;width:260px;color:var(--text-2)}
.dir-search input{border:0;background:transparent;outline:none;font:inherit;font-size:14px;color:var(--text);width:100%}
.dir-search svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.dir{background:var(--raise);border:1px solid var(--raise-bd);border-radius:var(--r-card);box-shadow:var(--sh-soft);overflow:hidden}
.dir-row{display:grid;grid-template-columns:2.2fr 108px 1.3fr 1.2fr 1.1fr;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .15s}
.dir-row:hover{background:var(--hover)}
.dir-row:last-child{border-bottom:0}
.dir-head{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);background:var(--surface-2);cursor:default}
.dir-head:hover{background:var(--surface-2)}
.dir-who{display:flex;align-items:center;gap:11px;min-width:0}
.dir-who .av{width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:var(--chip);color:var(--text)}
.dir-name{font-weight:600;font-size:14px}
.dir-sub{font-size:12px;color:var(--text-2)}
.dir-cell{font-size:13px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trend{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-family:var(--font-mono)}
.trend.up{color:var(--success)} .trend.down{color:var(--danger)} .trend.flat{color:var(--text-2)}
@media(max-width:900px){.dir-row{grid-template-columns:2fr 96px 1fr}.dir-row .hide-sm{display:none}}

/* ---- People > Visibility ---- */
.funnel{display:flex;gap:12px;margin-bottom:26px}
.fseg{flex:1;padding:18px 18px;border-radius:var(--r-card);background:var(--raise);border:1px solid var(--raise-bd);border-left:3px solid var(--stg,var(--accent));box-shadow:var(--sh-soft);position:relative;overflow:hidden}
.fseg::before{content:"";position:absolute;inset:0;background:var(--card-aurora);opacity:.4;pointer-events:none}
.fseg>*{position:relative}
.fseg .fc{font-family:var(--font-flair);font-size:28px;font-weight:600;line-height:1}
.fseg .ff{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);margin-top:9px}
.fseg .fdot{width:8px;height:8px;border-radius:50%;background:var(--stg,var(--accent));flex:none}
.fseg .ftrack{height:5px;border-radius:999px;background:var(--surface-2);margin-top:14px;overflow:hidden}
.fseg .fbar{height:100%;border-radius:999px;background:var(--stg,var(--accent))}
.vis-seg{display:flex;gap:8px;margin-top:6px}
.vis-seg .vchip{flex:1;text-align:center;background:var(--surface-2);border-radius:var(--r-control);padding:12px}
.vis-seg .vc{font-family:var(--font-flair);font-size:20px;font-weight:600}
.vis-seg .vt{font-size:11px;color:var(--text-2);margin-top:4px}
/* visibility: individuals/families toggle + family cards */
.vis-toggle{margin-bottom:20px;width:fit-content}
.fam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.fam-card{background:var(--glass-card,var(--raise));border:1px solid var(--glass-card-bd,var(--raise-bd));border-radius:var(--r-card);box-shadow:var(--sh-soft);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);padding:18px}
.fam-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.fam-name{font-family:var(--font-display);font-weight:600;font-size:15px}
.fam-stat{font-size:11px;font-family:var(--font-mono);padding:4px 9px;border-radius:var(--r-pill)}
.fam-stat.ok{background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success)}
.fam-stat.warn{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}
.fam-stat.low{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.fam-avs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:13px}
.fav{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.fam-track{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.fam-fill{height:100%;border-radius:999px}
.fam-fill.ok{background:var(--success)} .fam-fill.warn{background:var(--warn)} .fam-fill.low{background:var(--danger)}
.fam-sub{font-size:12px;color:var(--text-2);margin-top:10px}

/* ===== role switcher (rail) ===== */
.rail .me{background:transparent;border:0;cursor:pointer;width:100%;text-align:left;border-radius:12px;transition:background .15s}
@media(hover:hover){.rail .me:hover{background:var(--hover)}}
.rail .me .me-txt{flex:1;min-width:0}
.rail .me .me-cx{width:15px;height:15px;flex:none;stroke:var(--text-2);opacity:.7}
.role-menu{position:fixed;z-index:1200;min-width:210px;padding:6px;border-radius:14px;background:var(--glass-win,var(--raise));border:1px solid var(--glass-win-bd,var(--raise-bd));box-shadow:var(--sh-raise);backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);opacity:0;transform:translateY(6px);transition:opacity .16s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.role-menu.in{opacity:1;transform:translateY(0)}
.role-menu .rm-h{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-2);padding:6px 10px 4px}
.role-menu .rm-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;font:inherit;font-size:14px;color:var(--text);background:transparent;border:0;border-radius:9px;padding:9px 10px;cursor:pointer;text-align:left}
@media(hover:hover){.role-menu .rm-item:hover{background:var(--hover)}}
.role-menu .rm-item.on{font-weight:600}
.role-menu .rm-item svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2.4}
.role-menu .rm-note{font-size:11px;color:var(--text-2);padding:6px 10px 4px;line-height:1.4}

/* ===== Settings hub ===== */
.set-wrap{display:grid;grid-template-columns:218px 1fr;gap:20px;align-items:start;position:relative;z-index:1}
@media(max-width:820px){.set-wrap{grid-template-columns:1fr}}
.set-nav{display:flex;flex-direction:column;gap:4px;position:sticky;top:20px}
.set-navi{text-align:left;font:inherit;font-size:14px;font-weight:500;color:var(--text-2);background:transparent;border:0;border-radius:var(--r-control);padding:11px 14px;cursor:pointer;transition:background .15s,color .15s}
@media(hover:hover){.set-navi:hover{color:var(--text);background:var(--hover)}}
.set-navi.on{color:var(--text);background:var(--glass-card,var(--raise));border:1px solid var(--glass-card-bd,var(--raise-bd));box-shadow:var(--sh-soft);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.set-panel{padding:24px 26px}
.set-pt{font-family:var(--font-display);font-weight:600;font-size:19px;margin-bottom:14px}
.set-sub{font-weight:600;font-size:14px;margin-bottom:4px}
.set-note{font-size:13px;color:var(--text-2);margin-bottom:14px;line-height:1.55}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.set-row:last-child{border-bottom:0}
.set-lab{font-size:14px;font-weight:500;display:flex;align-items:center;gap:10px}
.set-hint{font-size:12.5px;color:var(--text-2);font-weight:400;margin-top:2px}
.set-num{width:22px;height:22px;border-radius:6px;background:var(--surface-2);color:var(--text-2);font-family:var(--font-mono);font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.set-input{font:inherit;font-size:14px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-control);padding:9px 12px;min-width:200px;max-width:52%;outline:none}
.set-input:focus{border-color:var(--accent)}
.switch{width:40px;height:23px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;flex:none;transition:background .18s}
.switch i{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .18s cubic-bezier(.23,1,.32,1)}
.switch.on{background:var(--success)}
.switch.on i{transform:translateX(17px)}
.set-table{margin-top:4px}
.set-trow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.set-trow:last-child{border-bottom:0}
.set-thead{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2)}
.set-rpill{font-size:11.5px;color:var(--text-2);background:var(--chip);border-radius:var(--r-pill);padding:3px 10px}
.movehead{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.movehead .mdot{width:8px;height:8px;border-radius:50%}
.mdot.up{background:var(--success)} .mdot.down{background:var(--danger)}

/* ---- premium motion: reveal-on-scroll, grow-in bars, hover polish ---- */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.health-fill,.pfill{width:100%;transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.chip-btn,.fchip,.res-row,.fu{transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
.metric .ic,.banner-icon{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.adot{transition:transform .2s ease,background .2s ease}
@media (hover:hover) and (pointer:fine){
  .chip-btn:hover,.fchip:hover{transform:translateY(-1px)}
  .card[data-detail]:hover .ic{transform:scale(1.1) rotate(-4deg)}
  .banner:hover .banner-icon{transform:scale(1.08) rotate(-4deg)}
  .conn:hover .adot.on{transform:scale(1.25)}
}
/* native controls follow theme; visible keyboard focus */
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
.btn:focus-visible,.iconbtn:focus-visible,.deck-item:focus-visible,.chip-btn:focus-visible,.fchip:focus-visible,.subtab:focus-visible,.seg button:focus-visible,.conn-select:focus-visible,.res-row:focus-visible,.fu:focus-visible,.dir-row:focus-visible,.conn:focus-visible,.done-row:focus-visible,.launch-tile:focus-visible,.traffic i:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible,[tabindex]:focus-visible,.gfcard:focus-visible,.fcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{touch-action:manipulation}
html{-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,h5,h6{margin:0}
.stage:focus{outline:none}
.skip-link{position:fixed;top:10px;left:10px;z-index:3000;background:var(--accent);color:var(--accent-tx);font-weight:600;font-size:14px;padding:10px 16px;border-radius:10px;box-shadow:var(--sh-raise);transform:translateY(-160%);transition:transform .2s cubic-bezier(.23,1,.32,1)}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0);outline:2px solid var(--accent);outline-offset:2px}

/* ---- Connections zones (Pat structure) ---- */
.zone{margin-bottom:26px}
.zone-h{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.zone-t{font-family:var(--font-display);font-weight:600;font-size:16px}
.zone-n{font-family:var(--font-mono);font-size:11px;color:var(--text-2)}
.zone-empty{color:var(--text-2);font-size:14px;padding:16px;background:var(--surface-2);border-radius:var(--r-card)}
.zone-sub{color:var(--text-2);margin:14px 0 8px}
.conn-grid.list{grid-template-columns:1fr}
.conn-grid.alloc-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.conn.alloc{padding:16px}
.conn.alloc .alloc-need{font-size:13px;color:var(--text-2);margin:12px 0 6px}
.conn.overdue{border-color:color-mix(in srgb,var(--warn) 55%, transparent)}
.warn-pill{background:color-mix(in srgb,var(--warn) 16%, transparent)!important;color:var(--warn)!important}
.conn-select{font:inherit;font-size:13px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;cursor:pointer;outline:none}
.viewtoggle button{font:inherit;font-size:13px}
.done-row{display:grid;grid-template-columns:34px 1.4fr auto 1fr 1fr;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r-control);cursor:pointer;transition:background .15s}
.done-row:hover{background:var(--hover)}
.done-row .av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:var(--chip);color:var(--text)}
.done-row .dn{font-weight:600;font-size:14px}
.done-row .dg,.done-row .ds{font-size:13px;color:var(--text-2)}
@media(max-width:820px){.done-row{grid-template-columns:34px 1fr auto}.done-row .dg,.done-row .ds{display:none}}

/* ===== Connections V2 — boards + filters ===== */
.cx-boards{display:flex;gap:4px;padding:4px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-control);margin-bottom:22px;width:fit-content;max-width:100%;flex-wrap:wrap}
.cx-tab{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:500;color:var(--text-2);background:transparent;border:0;border-radius:calc(var(--r-control) - 4px);padding:9px 16px;cursor:pointer;transition:background .15s ease,color .15s ease}
.cx-tab .bn{font-family:var(--font-mono);font-size:11px;padding:1px 7px;border-radius:var(--r-pill);background:var(--chip);color:var(--text-2)}
@media(hover:hover){.cx-tab:hover{color:var(--text)}}
.cx-tab.on{background:var(--raise);color:var(--text);box-shadow:var(--sh-soft)}
.cx-tab.on .bn{background:var(--accent);color:var(--accent-tx)}

.cx-prog{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.cx-pchip{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-pill);padding:7px 13px;cursor:pointer;transition:transform .14s cubic-bezier(.23,1,.32,1),background .14s ease,border-color .14s ease,color .14s ease}
.cx-pchip .pn{font-family:var(--font-mono);font-size:10.5px;opacity:.8}
@media(hover:hover){.cx-pchip:hover{border-color:var(--line);color:var(--text);transform:translateY(-1px)}}
.cx-pchip:active{transform:translateY(0) scale(.97)}
.cx-pchip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-tx)}
.cx-pchip.on .pn{opacity:1}

.cx-steprow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.cx-steplbl{font-family:var(--font-mono);font-size:11px;color:var(--text-3,var(--text-2));text-transform:uppercase;letter-spacing:.06em;margin-right:2px}
.cx-schip{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;color:var(--text-2);background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--r-pill);padding:6px 12px;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease}
.cx-schip svg{width:13px;height:13px;stroke-width:2.6;fill:none}
@media(hover:hover){.cx-schip:hover{color:var(--text);border-color:var(--text-2)}}
.cx-schip.on.tick{background:color-mix(in srgb,var(--success) 15%,transparent);border-style:solid;border-color:transparent;color:var(--success)}
.cx-schip.on.tick svg{stroke:var(--success)}
.cx-schip.on.untick{background:color-mix(in srgb,var(--danger) 13%,transparent);border-style:solid;border-color:transparent;color:var(--danger)}
.cx-editsteps{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;color:var(--text-2);background:transparent;border:0;border-radius:var(--r-pill);padding:6px 10px;cursor:pointer;margin-left:auto}
@media(hover:hover){.cx-editsteps:hover{color:var(--text);background:var(--surface-2)}}

.cx-tools{display:flex;align-items:center;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.cx-tools .viewtoggle{margin-left:auto}

/* ===== Beautiful profile-style connection card ===== */
/* ===== liquid-glass connection card (stage colour washes the whole panel + outer glow) ===== */
.conn{position:relative;padding:0;overflow:visible;border-radius:28px;
  background:
    radial-gradient(150% 124% at 50% -40%, color-mix(in srgb,var(--stg) 32%, transparent) 0%, color-mix(in srgb,var(--stg) 9%, transparent) 48%, transparent 76%),
    linear-gradient(180deg, color-mix(in srgb,var(--stg) 11%, var(--glass-card)) 0%, color-mix(in srgb,var(--stg) 4%, var(--glass-card)) 52%, var(--glass-card) 100%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.9),
    0 22px 56px -28px color-mix(in srgb,var(--stg) 40%, transparent),
    0 12px 28px rgba(30,40,60,.10);
  backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%)}
[data-theme="dark"] .conn{
  background:
    radial-gradient(150% 124% at 50% -40%, color-mix(in srgb,var(--stg) 46%, transparent) 0%, color-mix(in srgb,var(--stg) 12%, transparent) 48%, transparent 76%),
    linear-gradient(180deg, color-mix(in srgb,var(--stg) 20%, var(--glass-card)) 0%, color-mix(in srgb,var(--stg) 6%, var(--glass-card)) 52%, var(--glass-card) 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.16),
    0 26px 60px -28px color-mix(in srgb,var(--stg) 48%, transparent),
    0 14px 34px rgba(0,0,0,.5)}
.conn::before{display:none}
.conn-cover{position:relative;height:108px;overflow:visible}
.cv-blob{display:none}
.cv-badge{position:absolute;top:18px;right:18px;z-index:3;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text);
  background:color-mix(in srgb,#fff 30%, color-mix(in srgb,var(--stg) 30%, transparent));
  border:1px solid rgba(255,255,255,.6);border-radius:var(--r-pill);padding:6px 13px 6px 11px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 12px color-mix(in srgb,var(--stg) 30%, transparent),inset 0 1px 0 rgba(255,255,255,.5)}
[data-theme="dark"] .cv-badge{color:#fff;background:color-mix(in srgb,#000 30%, color-mix(in srgb,var(--stg) 42%, transparent));border:1px solid rgba(255,255,255,.22)}
.cv-badge .dot{width:7px;height:7px;border-radius:50%;background:#fff;flex:none;box-shadow:0 0 6px rgba(255,255,255,.7)}
.conn-av{position:absolute;top:46px;left:24px;z-index:3;width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:19px;color:var(--text);
  background:linear-gradient(180deg, color-mix(in srgb,#fff 86%, var(--stg)) 0%, color-mix(in srgb,#fff 70%, var(--stg)) 100%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 8px 18px color-mix(in srgb,var(--stg) 32%, rgba(0,0,0,.12)),inset 0 1px 1px rgba(255,255,255,.9)}
[data-theme="dark"] .conn-av{background:linear-gradient(180deg, color-mix(in srgb,var(--raise) 70%, var(--stg)) 0%, color-mix(in srgb,var(--raise) 88%, var(--stg)) 100%);border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 18px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.18)}
.conn-body{position:relative;z-index:2;padding:14px 22px 22px}
.conn-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.conn-head .conn-idt{min-width:0}
.conn-head .nm{font-weight:600;font-size:20px;letter-spacing:-.015em;line-height:1.15}
.conn-head .src{font-size:13px;color:var(--text-2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== opened connection card — Chloe-style profile (detail modal) ===== */
.cprof{position:relative;margin:-6px -26px 22px;padding:30px 26px 22px;overflow:hidden;
  background:
    radial-gradient(150% 120% at 50% -26%, color-mix(in srgb,var(--stg) 34%, transparent) 0%, color-mix(in srgb,var(--stg) 10%, transparent) 50%, transparent 80%),
    linear-gradient(180deg, color-mix(in srgb,var(--stg) 11%, transparent) 0%, transparent 78%);
  box-shadow:inset 0 -1px 0 var(--line-soft)}
.cprof-share{position:absolute;top:18px;right:22px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.6);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:color-mix(in srgb,#fff 36%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 8px rgba(30,40,60,.08);transition:transform .14s cubic-bezier(.23,1,.32,1)}
[data-theme="dark"] .cprof-share{border:1px solid rgba(255,255,255,.16);background:color-mix(in srgb,#fff 8%, transparent)}
.cprof-share:active{transform:scale(.94)}
.cprof-share svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.cprof-av{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:21px;color:var(--text);margin-bottom:14px;
  background:linear-gradient(180deg, color-mix(in srgb,#fff 86%, var(--stg)) 0%, color-mix(in srgb,#fff 70%, var(--stg)) 100%);
  border:1px solid rgba(255,255,255,.85);box-shadow:0 8px 18px color-mix(in srgb,var(--stg) 32%, rgba(0,0,0,.12)),inset 0 1px 1px rgba(255,255,255,.9)}
[data-theme="dark"] .cprof-av{background:linear-gradient(180deg, color-mix(in srgb,var(--raise) 70%, var(--stg)) 0%, color-mix(in srgb,var(--raise) 88%, var(--stg)) 100%);border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 18px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.18)}
.cprof-name{font-family:var(--font-display);font-weight:600;font-size:24px;line-height:1.1;letter-spacing:-.01em}
.cprof-role{font-size:14px;color:var(--text-2);margin-top:3px}
.cprof-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.cprof-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text);background:color-mix(in srgb,#fff 36%, transparent);border:1px solid rgba(255,255,255,.55);border-radius:var(--r-pill);padding:5px 11px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
[data-theme="dark"] .cprof-tag{background:color-mix(in srgb,#fff 8%, transparent);border:1px solid rgba(255,255,255,.14)}
.cprof-tag i{width:7px;height:7px;border-radius:50%;background:var(--stg);flex:none}
/* frosted stat panel — matches the card */
.cprof-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:18px 0 6px;padding:15px 6px;border-radius:18px;
  background:color-mix(in srgb,#fff 30%, transparent);border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -8px 16px -12px color-mix(in srgb,var(--stg) 40%, transparent)}
[data-theme="dark"] .cprof-stats{background:color-mix(in srgb,#fff 6%, transparent);border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -8px 16px -12px color-mix(in srgb,var(--stg) 36%, transparent)}
.cprof-stats > div{text-align:center}
.cprof-stats .cps-v{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:18px}
.cprof-stats .cps-i{width:15px;height:15px;stroke:var(--stg);fill:none;stroke-width:2.6}
.cprof-stats .cps-l{text-align:center;font-size:12px;color:var(--text-2);margin-top:4px}
.cprof-cta{display:flex;gap:12px;align-items:stretch}
.cprof-cta .btn-cta{flex:1;width:auto}
.cprof-done{width:54px;flex:none;border-radius:16px;border:1px solid rgba(255,255,255,.6);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:color-mix(in srgb,#fff 40%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 14px -6px rgba(30,40,60,.18);transition:background .15s,border-color .15s,transform .14s cubic-bezier(.23,1,.32,1)}
[data-theme="dark"] .cprof-done{border:1px solid rgba(255,255,255,.16);background:color-mix(in srgb,#fff 9%, transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.cprof-done:active{transform:scale(.95)}
@media(hover:hover){.cprof-done:hover{background:color-mix(in srgb,var(--success) 14%, transparent);border-color:color-mix(in srgb,var(--success) 40%, transparent)}}
.cprof-done svg{width:20px;height:20px;stroke:color-mix(in srgb,var(--success) 88%, var(--text));fill:none;stroke-width:2.6}
.conn-id{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.conn-id .nm{font-weight:600;font-size:16px}
.conn-id .src{font-size:12.5px;color:var(--text-2);margin-top:2px}
.conn-save{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.6);color:var(--text-2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s,transform .14s cubic-bezier(.23,1,.32,1);
  background:color-mix(in srgb,#fff 36%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 8px rgba(30,40,60,.08)}
[data-theme="dark"] .conn-save{border:1px solid rgba(255,255,255,.16);background:color-mix(in srgb,#fff 8%, transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.conn-save svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.conn-save:active{transform:scale(.94)}
@media(hover:hover){.conn-save:hover{color:var(--text);background:color-mix(in srgb,#fff 55%, transparent)}}
/* frosted inner stat panel — icon over value over label */
.conn-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0;padding:14px 4px;border-radius:18px;
  background:color-mix(in srgb,#fff 30%, transparent);border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -8px 16px -12px color-mix(in srgb,var(--stg) 40%, transparent)}
[data-theme="dark"] .conn-stats{background:color-mix(in srgb,#fff 6%, transparent);border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -8px 16px -12px color-mix(in srgb,var(--stg) 36%, transparent)}
.cstat{text-align:center;padding:2px 6px}
.cstat .ci{display:flex;align-items:center;justify-content:center;height:18px;margin-bottom:6px}
.cstat .ci svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cstat .ci.stg svg{stroke:var(--stg)}
.cstat .cv{font-weight:600;font-size:16px;line-height:1}
.cstat.late .ci svg{stroke:var(--warn)}
.cstat.late .cv{color:var(--warn)}
.cstat .cl{font-size:12px;color:var(--text-2);margin-top:4px}
/* CTA row — glossy dark pill + frosted complete button */
.conn-cta{display:flex;gap:12px;align-items:stretch}
.btn-cta{flex:1;font:inherit;font-size:15px;font-weight:600;color:#fff;border:0;border-radius:16px;padding:15px;cursor:pointer;
  background:linear-gradient(180deg, #34373d 0%, #0c0d0f 100%);
  box-shadow:0 10px 20px -6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.5);
  transition:transform .14s cubic-bezier(.23,1,.32,1),box-shadow .15s,opacity .15s}
[data-theme="dark"] .btn-cta{color:#15161a;background:linear-gradient(180deg, #ffffff 0%, #dcdde1 100%);box-shadow:0 10px 22px -8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.12)}
@media(hover:hover){.btn-cta:hover{opacity:.94}}
.btn-cta:active{transform:scale(.98)}
.cta-done{width:54px;flex:none;border-radius:16px;border:1px solid rgba(255,255,255,.6);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:color-mix(in srgb,#fff 40%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 14px -6px rgba(30,40,60,.18);
  transition:background .15s,border-color .15s,transform .14s cubic-bezier(.23,1,.32,1)}
[data-theme="dark"] .cta-done{border:1px solid rgba(255,255,255,.16);background:color-mix(in srgb,#fff 9%, transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.cta-done svg{width:20px;height:20px;stroke:color-mix(in srgb,var(--success) 88%, var(--text));fill:none;stroke-width:2.6}
.cta-done:active{transform:scale(.95)}
@media(hover:hover){.cta-done:hover{background:color-mix(in srgb,var(--success) 14%, transparent);border-color:color-mix(in srgb,var(--success) 40%, transparent)}}
/* modal CTA row keeps the secondary button beside it */
.cprof-cta .btn-cta{flex:1;width:auto}
/* list view — compact row */
.conn-grid.list .conn{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:12px 16px;border-radius:18px;overflow:hidden}
.conn-grid.list .conn-cover,.conn-grid.list .conn-stats,.conn-grid.list .cta-done{display:none}
.conn-grid.list .conn-av{position:static;width:42px;height:42px;font-size:14px}
.conn-grid.list .conn-body{display:contents}
.conn-grid.list .conn-head{display:flex;align-items:center;gap:10px}
.conn-grid.list .conn-cta{display:contents}
.conn-grid.list .btn-cta{flex:none;width:auto;padding:9px 18px}

/* pastel summary + category colour (reference-inspired) */
.cx-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:26px;padding:2px}
/* liquid-glass summary cards — match the connection card language */
.cxs{position:relative;border-radius:22px;padding:20px 22px;overflow:visible;
  background:
    radial-gradient(150% 130% at 50% -34%, color-mix(in srgb,var(--cxc) 32%, transparent) 0%, color-mix(in srgb,var(--cxc) 9%, transparent) 48%, transparent 78%),
    linear-gradient(180deg, color-mix(in srgb,var(--cxc) 10%, var(--glass-card)) 0%, var(--glass-card) 72%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.9), 0 18px 44px -26px color-mix(in srgb,var(--cxc) 42%, transparent), 0 10px 24px rgba(30,40,60,.08);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%)}
[data-theme="dark"] .cxs{
  background:
    radial-gradient(150% 130% at 50% -34%, color-mix(in srgb,var(--cxc) 46%, transparent) 0%, color-mix(in srgb,var(--cxc) 12%, transparent) 48%, transparent 78%),
    linear-gradient(180deg, color-mix(in srgb,var(--cxc) 18%, var(--glass-card)) 0%, var(--glass-card) 72%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.14), 0 22px 50px -26px color-mix(in srgb,var(--cxc) 50%, transparent), 0 12px 28px rgba(0,0,0,.5)}
.cxs .cxs-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  background:color-mix(in srgb,var(--cxc) 20%, transparent);border:1px solid rgba(255,255,255,.5);color:color-mix(in srgb,var(--cxc) 72%, var(--text));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
[data-theme="dark"] .cxs .cxs-ic{background:color-mix(in srgb,var(--cxc) 26%, transparent);border:1px solid rgba(255,255,255,.12);color:color-mix(in srgb,var(--cxc) 58%, #fff)}
.cxs .cxs-ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cxs .cxs-lbl{font-size:13px;font-weight:500;color:var(--text-2)}
.cxs .cxs-n{font-family:var(--font-flair);font-weight:500;font-size:32px;line-height:1.05;margin:5px 0 2px;color:var(--text)}
.cxs .cxs-sub{font-size:11.5px;color:var(--text-2)}
.cxs-lav{--cxc:#8E7BE8}
.cxs-peach{--cxc:#EF9B73}
.cxs-sky{--cxc:#6AA3E6}

/* dashboard pillar — integration-stage spread bar */
.pstage{display:flex;gap:3px;height:6px;margin-top:14px;border-radius:999px;overflow:hidden}
.pstage span{border-radius:999px;min-width:4px}

.agetag{font-size:11px;font-weight:600;padding:2px 9px;border-radius:var(--r-pill);white-space:nowrap;flex:none}
.a-lav{background:#ECE7FE;color:#5B4FA6}.a-peach{background:#FCE4D8;color:#A85731}.a-sky{background:#E2EDFB;color:#3F6CA6}.a-mint{background:#E1F3E8;color:#3E8159}
[data-theme="dark"] .a-lav{background:color-mix(in srgb,#8E7BE8 22%,#000);color:#c8bdf3}
[data-theme="dark"] .a-peach{background:color-mix(in srgb,#ef9b73 22%,#000);color:#f0bda0}
[data-theme="dark"] .a-sky{background:color-mix(in srgb,#6aa3e6 22%,#000);color:#b6d4f4}
[data-theme="dark"] .a-mint{background:color-mix(in srgb,#5cc488 22%,#000);color:#a9e3c2}
.conn .src{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.conn .src .srct,.cx-aname .src .srct{color:var(--text-2)}

.cx-stepbtn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-pill);padding:8px 14px;cursor:pointer;transition:color .15s ease,border-color .15s ease}
.cx-stepbtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
@media(hover:hover){.cx-stepbtn:hover{color:var(--text);border-color:var(--line)}}
.cx-stepbtn.on{color:var(--text);border-color:var(--line);background:var(--raise)}
.cx-steprow{margin-top:-2px}
.cx-steprow[hidden]{display:none}

/* stage legend — colour key + selectable filter */
.cx-prog{align-items:center}
.lg-lbl{font-family:var(--font-mono);font-size:11px;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;margin-right:2px}
.lg-chip{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-pill);padding:7px 12px;cursor:pointer;transition:transform .14s cubic-bezier(.23,1,.32,1),background .14s ease,border-color .14s ease,color .14s ease}
.lg-chip .dot{width:9px;height:9px;border-radius:50%;background:var(--stg,var(--text-2));flex:none}
.lg-chip .n{font-family:var(--font-mono);font-size:10.5px;opacity:.7}
@media(hover:hover){.lg-chip:hover{color:var(--text);border-color:var(--line);transform:translateY(-1px)}}
.lg-chip:active{transform:translateY(0) scale(.97)}
.lg-chip.on{color:var(--text);background:var(--raise);border-color:color-mix(in srgb,var(--stg,var(--text-2)) 55%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--stg,transparent) 30%,transparent),var(--sh-soft)}
.lg-chip.all.on{border-color:var(--text-2)}

/* (stage colour now comes from the glass wash + glow, not a left stripe) */
.stage-line{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.stage-pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--text);background:color-mix(in srgb,var(--stg) 14%,transparent);border-radius:var(--r-pill);padding:4px 11px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--stg);flex:none}
.conn .seg.on{background:var(--stg)}
.conn .stage-line .pc-n{color:var(--text-2)}
.conn-grid.list .stage-line{margin-bottom:7px}
@media(max-width:900px){.cx-summary{grid-template-columns:1fr}}

/* To allocate table */
.cx-introtext{font-size:13px;color:var(--text-2);margin-bottom:14px}
.cx-atable{border:1px solid var(--raise-bd);border-radius:var(--r-card);background:var(--raise);box-shadow:var(--sh-soft);overflow:hidden}
.cx-ahead,.cx-arow{display:grid;grid-template-columns:46px 1.6fr 1fr 1.4fr 1fr auto;align-items:center;gap:14px;padding:12px 18px}
.cx-ahead{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);border-bottom:1px solid var(--line)}
.cx-arow{border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .15s ease}
.cx-arow:last-child{border-bottom:0}
@media(hover:hover){.cx-arow:hover{background:var(--hover)}}
.cx-arow .av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:var(--chip);color:var(--text)}
.cx-aname .nm{font-weight:600;font-size:14px}
.cx-aname .src,.cx-aentered,.cx-aassg{font-size:12.5px;color:var(--text-2)}
.cx-new{font-family:var(--font-mono);font-size:9.5px;margin-left:8px;padding:2px 7px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--success) 16%,transparent);color:var(--success)}
.cx-aneed{font-size:13px;color:var(--text)}
.cx-aneed.warn{color:var(--warn)}
@media(max-width:900px){.cx-ahead,.cx-arow{grid-template-columns:46px 1.4fr auto}.cx-aentered,.cx-aneed,.cx-aassg{display:none}}

/* Completed by month */
.cx-month{margin-bottom:20px}
.cx-monthh{display:flex;align-items:center;gap:10px;margin:14px 0 8px}
.cx-lock,.cx-open{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:var(--r-pill)}
.cx-lock{color:var(--text-2);background:var(--surface-2)}
.cx-open{color:var(--success);background:color-mix(in srgb,var(--success) 14%,transparent)}
.cx-month.locked .done-row{opacity:.62}

/* shared modal (complete / edit steps) */
.cx-modal-ov{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;background:color-mix(in srgb,#000 48%,transparent);opacity:0;transition:opacity .18s ease}
.cx-modal-ov.in{opacity:1}
.cx-modal{width:min(440px,100%);background:var(--glass-win,var(--raise));border:1px solid var(--glass-bd,var(--raise-bd));border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.45);padding:22px;transform:scale(.94);opacity:0;transition:transform .2s cubic-bezier(.23,1,.32,1),opacity .2s ease;backdrop-filter:blur(30px) saturate(1.4);-webkit-backdrop-filter:blur(30px) saturate(1.4)}
.cx-modal-ov.in .cx-modal{transform:scale(1);opacity:1}
.cxm-h{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.cxm-h .av{width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;background:var(--chip);color:var(--text)}
.cxm-t{font-family:var(--font-display);font-weight:600;font-size:17px}
.cxm-s{font-size:13px;color:var(--text-2);margin-top:2px}
.cxm-body{margin-bottom:20px}
.cxm-l{display:block;font-size:12.5px;color:var(--text-2);margin-bottom:7px}
.cxm-sel{width:100%}
.cxm-foot{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.cxm-steps{display:flex;flex-direction:column;gap:8px}
.cxm-srow{display:flex;align-items:center;gap:10px}
.cxm-snum{width:22px;height:22px;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;border-radius:6px;background:var(--surface-2);color:var(--text-2)}
.cxm-sinput{flex:1;font:inherit;font-size:14px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-control);padding:9px 12px;outline:none}
.cxm-sinput:focus{border-color:var(--accent)}
.cxm-sdel{width:28px;height:28px;flex:none;border:0;border-radius:7px;background:transparent;color:var(--text-2);cursor:pointer;font-size:13px}
@media(hover:hover){.cxm-sdel:hover{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}}
.cxm-slock{width:28px;flex:none}
.cxm-sadd{font:inherit;font-size:13px;color:var(--accent);background:transparent;border:1px dashed var(--line);border-radius:var(--r-control);padding:9px;cursor:pointer;margin-top:2px}
@media(hover:hover){.cxm-sadd:hover{background:var(--surface-2)}}

/* iPhone: menu becomes a floating bottom dock (Mac-style) */
@media (max-width:640px){
  .app{flex-direction:column;padding:16px 14px 104px}
  .rail{position:fixed;display:flex;left:12px;right:12px;bottom:14px;top:auto;width:auto;height:auto;margin:0;
    flex-direction:row;align-items:center;justify-content:center;gap:6px;
    background:var(--panel);border:1px solid var(--panel-bd);border-radius:var(--r-pill);
    box-shadow:var(--sh-raise);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);padding:8px 10px;z-index:50}
  .rail .brand,.rail .me{display:none}
  .deck{position:static;flex:0 1 auto;min-height:0;display:flex;flex-direction:row;gap:4px;overflow:visible}
  .deck-item{position:static!important;flex:0 0 auto;width:auto;padding:10px;border-radius:14px;background:transparent;border:0;box-shadow:none;transform:none!important;opacity:1!important;top:auto!important;left:auto!important;right:auto!important}
  .deck-item .lab{display:none}
  .deck-item .chip{width:46px;height:46px;background:transparent;border:0}
  .deck-item:active .chip{background:var(--chip)}
  .deck-item.active{background:var(--accent)}
  .deck-item.active .chip{background:transparent;color:var(--accent-tx)}
  .topbar{flex-wrap:wrap}
  .search{order:3;width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}