/* Looks: the shared layer (2026-10-19). Every skin file sets the --lk-* tokens on :root[data-look=...];
   this file maps the pages' own variables onto them and restyles the shared parts (glass, background,
   motion, the Look switcher, rings). Page markup and IDs are untouched. Light mode only. */

/* ---------- map each page's own variables onto the look */
:root[data-look]{
  --lk-ease:cubic-bezier(.2,.8,.2,1); --lk-spring:cubic-bezier(.34,1.45,.5,1);
  --ease:var(--lk-ease); --spring:var(--lk-spring);
  --navy:var(--lk-pri); --teal:var(--lk-label); --gold:var(--lk-acc2); --paper:var(--lk-paper);
  --tint-teal:var(--lk-tint-good); --tint-gold:var(--lk-tint-warn); --tint-blue:var(--lk-tint); --tint-red:var(--lk-tint-bad);
  --glass:var(--lk-glass); --glass-hi:var(--lk-glass-hi); --glass-edge:var(--lk-edge);
  --shadow:var(--lk-shadow); --shadow-lg:var(--lk-shadow-lg);
  --line:var(--lk-line); --line-2:var(--lk-line2); --line2:var(--lk-line2); --light:var(--lk-faint);
  --accent:var(--lk-pri); --accent-ink:var(--lk-pri-deep); --tint:var(--lk-tint);
  --bg:var(--lk-paper); --surface:var(--lk-glass-hi); --soft:var(--lk-soft);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  background:var(--lk-paper); color-scheme:light;
}
:root[data-look][data-page="portal"]{--text:var(--lk-ink); --muted:var(--lk-muted)}
:root[data-look][data-page="firm"],:root[data-look][data-page="prospects"],:root[data-look][data-page="review"],:root[data-look][data-page="fsignin"]{--text:var(--lk-text); --deep:var(--lk-ink)}

html[data-look] body{background:transparent;color:var(--lk-text);font-family:var(--font)}
html[data-look][data-page="portal"] body{color:var(--lk-ink)}
html[data-look] .wash{display:none}
html[data-look] h1,html[data-look] h2,html[data-look] h3{color:var(--lk-ink)}
html[data-look] ::selection{background:var(--lk-tint);color:var(--lk-ink)}

/* ---------- the living background (each skin turns on the layers it uses) */
.lk-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--lk-paper)}
.lk-bg > *{position:absolute;display:none}
.lk-bg .lk-amb{inset:0;width:100%;height:100%}
.lk-bg i{border-radius:50%;filter:blur(var(--lk-wash-blur,90px));opacity:var(--lk-wash-op,.7);animation:lk-drift 38s ease-in-out infinite alternate;will-change:transform}
.lk-bg .b1{width:52vw;height:52vw;left:-14vw;top:-16vw;background:var(--lk-w1)}
.lk-bg .b2{width:42vw;height:42vw;right:-10vw;top:14vh;background:var(--lk-w2);animation-duration:44s;animation-delay:-8s}
.lk-bg .b3{width:40vw;height:40vw;left:28vw;bottom:-16vw;background:var(--lk-w3);animation-duration:50s;animation-delay:-14s}
.lk-bg .b4{width:30vw;height:30vw;right:18vw;bottom:8vh;background:var(--lk-w4);animation-duration:36s;animation-delay:-20s}
.lk-bg .b5{width:26vw;height:26vw;left:6vw;top:48vh;background:var(--lk-w5,transparent);animation-duration:46s;animation-delay:-4s}
@keyframes lk-drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.12)}100%{transform:translate(-4vw,-3vh) scale(.94)}}
.lk-bg .lk-glow{width:60vw;height:60vw;left:calc(var(--gx,50vw) - 30vw);top:calc(var(--gy,30vh) - 30vw);border-radius:50%;
  background:radial-gradient(closest-side,var(--lk-glow-c,transparent),transparent);transition:left .9s var(--lk-ease),top .9s var(--lk-ease)}
html.lk-hidden .lk-bg *, html.lk-hidden .lk-in, html.lk-hidden .lk-ring-fg{animation-play-state:paused!important}

/* ---------- glass everywhere */
html[data-look] .glass{background:var(--lk-glass);border:1px solid var(--lk-edge);box-shadow:var(--lk-shadow);
  backdrop-filter:var(--lk-blur);-webkit-backdrop-filter:var(--lk-blur)}
html[data-look] :is(.card,.list,.item,.tile,.empty,.waiting,.calm,.math,.panel,.note-back,.lk-glass){border-radius:var(--lk-r-card)}
html[data-look][data-page="portal"] :is(.card,.list,.item,.tile){background:var(--lk-glass);border:1px solid var(--lk-edge);box-shadow:var(--lk-shadow);
  backdrop-filter:var(--lk-blur);-webkit-backdrop-filter:var(--lk-blur)}
html[data-look][data-page="portal"] .card.flat{box-shadow:none;background:var(--lk-glass)}
html[data-look][data-page="portal"] .list{overflow:hidden}
html[data-look][data-page="portal"] .list > .li{border-top-color:var(--lk-line)}
html[data-look][data-page="portal"] .list > button.li:hover,html[data-look][data-page="portal"] .list > a.li:hover{background:var(--lk-hover)}
html[data-look][data-page="portal"] .li.total{background:var(--lk-soft)}
html[data-look][data-page="portal"] .empty{background:var(--lk-glass);border:1px dashed var(--lk-line2);backdrop-filter:var(--lk-blur);-webkit-backdrop-filter:var(--lk-blur);padding:40px 24px}
html[data-look][data-page="portal"] .math,html[data-look][data-page="portal"] .panel{background:var(--lk-glass-hi);border-color:var(--lk-line)}
html[data-look][data-page="portal"] .note-back{background:var(--lk-tint-warn)}
html[data-look] :is(input[type=email],input[type=text],input[type=search],input:not([type]),select,textarea){border-radius:8px;border:1px solid var(--lk-line2);background:var(--lk-input);color:var(--lk-ink);transition:border-color .2s,box-shadow .2s}
html[data-look] :is(input,select,textarea):focus{outline:none;border-color:var(--lk-pri);box-shadow:0 0 0 4px var(--lk-ring-focus)}
html[data-look] :focus-visible{outline:2px solid var(--lk-pri);outline-offset:2px}

/* ---------- type */
html[data-look][data-page="portal"] .view h1{font-size:clamp(28px,3.4vw,40px);font-weight:var(--lk-h-weight,800);letter-spacing:-0.03em;line-height:1.08}
html[data-look] .lk-l2.lk-l2{color:var(--lk-h2)}
html[data-look] :is(h1,h2) .lk-w{display:inline-block!important;color:inherit}
html[data-look] a.btn{text-decoration:none}
@media (max-width:430px){html[data-look][data-page="portal"] .waiting > span{display:none}}
html[data-look][data-page="portal"] .waiting > div > div:first-child{white-space:nowrap}
html[data-look][data-page="portal"] .view .empty{position:relative}
html[data-look][data-page="portal"] .view .empty::before{content:"";display:block;width:48px;height:48px;margin:0 auto 16px;border-radius:12px;background:var(--lk-tint)}
html[data-look][data-page="portal"] .view .empty::after{content:"";position:absolute;left:50%;top:52px;width:24px;height:24px;margin-left:-12px;background:var(--lk-pri);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h5'/%3E%3Cpath d='M17.5 17.5 16 16.3V14'/%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h5'/%3E%3Cpath d='M17.5 17.5 16 16.3V14'/%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3C/svg%3E") center/contain no-repeat}
html[data-look][data-page="portal"] .view h2{font-size:19px;font-weight:700;letter-spacing:-0.02em}
html[data-look] .label{color:var(--lk-label);font-weight:700;letter-spacing:var(--lk-label-track,.1em)}
html[data-look][data-page="portal"] .view .stack > div > .label:first-child,html[data-look][data-page="portal"] .month-pick .label,html[data-look][data-page="portal"] .signin .card > .label{display:flex;align-items:center;gap:8px}
html[data-look][data-page="portal"] .view .stack > div > .label:first-child::before,html[data-look][data-page="portal"] .month-pick .label::before,html[data-look][data-page="portal"] .signin .card > .label::before,
html[data-look] .head .label::before,html[data-look] .qhead .label::before,html[data-look] .closep .label::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--lk-dash);flex:none}
html[data-look][data-page="fsignin"] .label{display:flex;align-items:center;gap:8px}
html[data-look][data-page="fsignin"] .label::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--lk-dash)}
html[data-look] .muted{color:var(--lk-muted)}
html[data-look] .light{color:var(--lk-faint)}

/* ---------- buttons, chips, tags */
html[data-look] .btn{border-radius:8px;transition:transform .2s var(--lk-spring),background .2s,box-shadow .2s,border-color .2s,color .2s}
html[data-look] .btn.pri{background:var(--lk-pri-fill);border-color:transparent;color:var(--lk-on-pri);box-shadow:var(--lk-pri-shadow);position:relative;overflow:hidden}
html[data-look] .btn.pri::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--lk-ease);pointer-events:none}
html[data-look] .btn.pri:not(:disabled):hover{background:var(--lk-pri-fill-hover);transform:translateY(-2px)}
html[data-look] .btn.pri:not(:disabled):hover::after{transform:translateX(120%)}
html[data-look][data-page="portal"] .btn:not(.pri):not(.ghost){background:var(--lk-glass-hi);border-color:var(--lk-line2);color:var(--lk-ink)}
html[data-look][data-page="portal"] .btn:not(.pri):not(.ghost):not(:disabled):hover{background:#fff;transform:translateY(-1px);border-color:var(--lk-pri)}
html[data-look] .btn.ghost{color:var(--lk-pri)}
html[data-look][data-page="portal"] .btn.ghost:hover{background:var(--lk-tint)}
html[data-look] .btn.sec{background:var(--lk-glass-hi);color:var(--lk-pri);border-color:var(--lk-line2)}
html[data-look][data-page="portal"] .chip{background:var(--lk-glass-hi);border-color:var(--lk-line);border-radius:8px;transition:transform .2s var(--lk-spring),background .2s,border-color .2s,color .2s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html[data-look][data-page="portal"] .chip:hover{transform:translateY(-1px);border-color:var(--lk-line2)}
html[data-look][data-page="portal"] .chip[aria-pressed="true"]{background:var(--lk-chip-on);color:var(--lk-chip-on-text);border-color:transparent;box-shadow:var(--lk-pri-shadow)}
html[data-look][data-page="portal"] .chip[aria-pressed="true"] b{color:var(--lk-chip-on-text)}
html[data-look][data-page="portal"] .tag{border-radius:8px;background:var(--lk-soft);color:var(--lk-muted)}
html[data-look][data-page="portal"] .tag.blue{background:var(--lk-tint);color:var(--lk-pri-deep)}
html[data-look][data-page="portal"] .tap.amt{color:var(--lk-pri-deep);text-decoration-color:var(--lk-line2)}
html[data-look] .status-ic.on_track,html[data-look] .st-label.on_track{color:var(--lk-good)}
html[data-look] .status-ic.attention,html[data-look] .st-label.attention{color:var(--lk-warn)}
html[data-look] .icon-btn{border-radius:8px;background:var(--lk-glass-hi);border-color:var(--lk-line)}

/* ---------- portal shell */
html[data-look][data-page="portal"] .top{background:var(--lk-bar);border-bottom:1px solid var(--lk-bar-edge);backdrop-filter:var(--lk-blur);-webkit-backdrop-filter:var(--lk-blur);color:var(--lk-bar-text)}
html[data-look][data-page="portal"] .top .org b{color:var(--lk-bar-text)}
html[data-look][data-page="portal"] .top .org span{color:var(--lk-bar-sub)}
html[data-look][data-page="portal"] .tabs{background:var(--lk-tabs);border-top:1px solid var(--lk-bar-edge);backdrop-filter:var(--lk-blur);-webkit-backdrop-filter:var(--lk-blur)}
html[data-look][data-page="portal"] .tabs a{color:var(--lk-faint);transition:color .2s}
html[data-look][data-page="portal"] .tabs a svg{transition:transform .3s var(--lk-spring)}
html[data-look][data-page="portal"] .tabs a[aria-current="page"]{color:var(--lk-pri)}
html[data-look][data-page="portal"] .tabs a[aria-current="page"] svg{transform:translateY(-2px)}
html[data-look][data-page="portal"] .tabs a[aria-current="page"]::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--lk-tab-mark)}
html[data-look][data-page="portal"] .badge{background:var(--lk-badge);color:var(--lk-on-pri);box-shadow:0 0 0 2px var(--lk-paper)}
html[data-look][data-page="portal"] main{padding-bottom:150px}
html[data-look][data-page="portal"] .org{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center}
html[data-look][data-page="portal"] .org .lk-av{grid-row:1 / span 2}
html[data-look][data-page="portal"] .org b,html[data-look][data-page="portal"] .org span:not(.lk-av){grid-column:2}
html[data-look][data-page="portal"] :is(.top,.side) .org span.lk-av,.lk-av{display:grid;font-size:13px;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font-size:13px;font-weight:700;letter-spacing:.02em;background:var(--lk-av-bg);color:var(--lk-av-text);box-shadow:var(--lk-pri-shadow)}
@media (min-width:900px){
  html[data-look][data-page="portal"] .side{background:var(--lk-side);border-right:1px solid var(--lk-side-edge);backdrop-filter:var(--lk-blur);-webkit-backdrop-filter:var(--lk-blur);color:var(--lk-side-text)}
  html[data-look][data-page="portal"] .side .org b{color:var(--lk-side-ink)}
  html[data-look][data-page="portal"] .side .org span{color:var(--lk-side-sub)}
  html[data-look][data-page="portal"] .side nav a{color:var(--lk-side-text);transition:background .2s,color .2s,transform .2s var(--lk-spring)}
  html[data-look][data-page="portal"] .side nav a:hover{background:var(--lk-side-hover);color:var(--lk-side-ink)}
  html[data-look][data-page="portal"] .side nav a:hover svg{animation:lk-wiggle .6s var(--lk-spring)}
  html[data-look][data-page="portal"] .side nav a[aria-current="page"]{background:var(--lk-side-on);color:var(--lk-side-on-text);font-weight:600;box-shadow:var(--lk-side-on-ring)}
  html[data-look][data-page="portal"] .side nav .count{color:var(--lk-side-count);background:var(--lk-side-count-bg);border-radius:8px;padding:1px 8px}
  html[data-look][data-page="portal"] .side .sect{color:var(--lk-side-sub)}
  html[data-look][data-page="portal"] .side .who{border-top-color:var(--lk-side-edge);color:var(--lk-side-text)}
  html[data-look][data-page="portal"] .side .who #whoName{color:var(--lk-side-ink)}
  html[data-look][data-page="portal"] .side .who .muted{color:var(--lk-side-sub)}
  html[data-look][data-page="portal"] .side .who .btn.ghost{color:var(--lk-side-link)}
  html[data-look][data-page="portal"] main{padding:48px 48px 96px}
  html[data-look][data-page="portal"] main > .view{max-width:960px}
}
@keyframes lk-wiggle{30%{transform:rotate(-14deg) scale(1.18)}60%{transform:rotate(8deg) scale(1.08)}}

/* ---------- portal home */
html[data-look][data-page="portal"] .waiting{position:relative;overflow:hidden;background:var(--lk-hero);color:var(--lk-hero-text);box-shadow:var(--lk-hero-shadow);padding:24px;transition:transform .25s var(--lk-spring),box-shadow .25s}
html[data-look][data-page="portal"] .waiting b{font-size:44px;color:var(--lk-hero-num)}
html[data-look][data-page="portal"] .waiting:hover{transform:translateY(-3px)}
html[data-look][data-page="portal"] .waiting > svg:first-child{width:44px;height:44px;padding:10px;border-radius:8px;background:rgba(255,255,255,.14);box-sizing:border-box}
html[data-look][data-page="portal"] .calm{background:var(--lk-tint-good);color:var(--lk-good-ink)}
html[data-look][data-page="portal"] .step .dot{border-color:var(--lk-line2);background:var(--lk-glass-hi)}
html[data-look][data-page="portal"] .step.done .dot{background:var(--lk-step-done);border-color:transparent;color:#fff}
html[data-look][data-page="portal"] .step.current .dot{border-color:var(--lk-pri);box-shadow:0 0 0 4px var(--lk-ring-focus)}
html[data-look][data-page="portal"] .step.current .dot::after{background:var(--lk-pri)}
html[data-look][data-page="portal"] .step:not(:last-child)::before{background:var(--lk-line2)}
html[data-look][data-page="portal"] .step.done:not(:last-child)::before{background:var(--lk-step-line)}
html:not(.lk-rm)[data-look][data-page="portal"] .step.current .dot{animation:lk-pulse 2.4s ease-in-out infinite}
@keyframes lk-pulse{50%{box-shadow:0 0 0 8px transparent}}
html[data-look][data-page="portal"] .tile{padding:20px;transition:transform .25s var(--lk-spring),box-shadow .25s}
html[data-look][data-page="portal"] .tile b{font-size:26px;font-weight:800;letter-spacing:-0.03em;color:var(--lk-num)}
html[data-look][data-page="portal"] .tile:hover,html[data-look] .stat:hover{transform:translateY(-3px) perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:var(--lk-shadow-lg)}
html[data-look][data-page="portal"] .item{transition:box-shadow .25s,transform .25s var(--lk-spring)}
html[data-look][data-page="portal"] .item:hover{box-shadow:var(--lk-shadow-lg)}
html[data-look][data-page="portal"] .item.hl{border-color:var(--lk-pri);box-shadow:0 0 0 2px var(--lk-ring-focus),var(--lk-shadow)}
html[data-look][data-page="portal"] .item .amount{color:var(--lk-num);font-size:16px}
html[data-look][data-page="portal"] .group-head h3{color:var(--lk-label);font-size:11px;letter-spacing:.1em}
html[data-look] table.t th{color:var(--lk-th);background:var(--lk-th-bg)}
html[data-look] table.t td{border-bottom-color:var(--lk-line)}

/* sheet and toast */
html[data-look][data-page="portal"] dialog.sheet{background:var(--lk-sheet);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border:1px solid var(--lk-edge);box-shadow:var(--lk-shadow-lg)}
html[data-look][data-page="portal"] dialog.sheet::backdrop{background:var(--lk-scrim);backdrop-filter:blur(4px)}
html[data-look][data-page="portal"] .sheet .sh{border-bottom-color:var(--lk-line)}
html:not(.lk-rm)[data-look][data-page="portal"] dialog.sheet[open]{animation:lk-sheet .4s var(--lk-ease)}
@keyframes lk-sheet{from{opacity:0;translate:0 24px}}
html[data-look] .toast{background:var(--lk-toast);color:#fff;border-radius:8px;box-shadow:var(--lk-shadow-lg)}

/* sign-in screens */
html[data-look][data-page="portal"] .signin .card,html[data-look][data-page="fsignin"] main.card{background:var(--lk-glass);border:1px solid var(--lk-edge);box-shadow:var(--lk-shadow-lg);backdrop-filter:var(--lk-blur);-webkit-backdrop-filter:var(--lk-blur);border-radius:16px;padding:40px 32px}
html[data-look][data-page="portal"] .signin h1{font-size:30px;font-weight:800;letter-spacing:-0.03em;line-height:1.1}
html[data-look][data-page="fsignin"] h1{font-size:30px;font-weight:800;letter-spacing:-0.03em}
html[data-look][data-page="fsignin"] .dev{background:var(--lk-tint-warn);border-radius:8px}
html[data-look][data-page="fsignin"] input{background:var(--lk-input)}

/* ---------- firm dashboard and review queue */
html[data-look] .top.glass{border-radius:12px}
html[data-look] .brand{color:var(--lk-ink)}
html[data-look] .brand em{color:var(--lk-label)}
html[data-look] .head h1{font-weight:var(--lk-h-weight,800)}
html[data-look] .stat{border-radius:12px;transition:transform .25s var(--lk-spring),box-shadow .25s,background .2s}
html[data-look] .stat b{color:var(--lk-num)}
html[data-look] .stat[aria-pressed="true"]{background:var(--lk-chip-on);border-color:transparent}
html[data-look] .stat[aria-pressed="true"] b,html[data-look] .stat[aria-pressed="true"] span{color:var(--lk-chip-on-text)}
html[data-look] .panel.glass,html[data-look] .closep{border-radius:16px}
html[data-look][data-page="firm"] .cols{grid-template-columns:1fr}
html[data-look][data-page="firm"] #queue{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
html[data-look][data-page="firm"] .task{background:var(--lk-glass-hi);border:1px solid var(--lk-line);box-shadow:0 1px 0 rgba(255,255,255,.8) inset}
html[data-look][data-page="firm"] .task:hover{transform:translateY(-3px);box-shadow:var(--lk-shadow-lg);background:#fff}
html[data-look] .task .rank{background:var(--lk-tint);color:var(--lk-pri-deep);border-radius:8px}
html[data-look] .task.blocked .rank{background:var(--lk-tint-warn);color:var(--lk-warn)}
html[data-look] .task .when{color:var(--lk-pri)}
html[data-look] .task .when.late,html[data-look] .alert{color:var(--lk-bad)}
html[data-look] thead th{background:var(--lk-th-bg);color:var(--lk-th)}
html[data-look] thead th:first-child{border-radius:8px 0 0 8px}
html[data-look] thead th:last-child{border-radius:0 8px 8px 0}
html[data-look] tbody tr:hover{background:var(--lk-hover)}
html[data-look] td .nm{color:var(--lk-ink)}
html[data-look] .chip.Closed,html[data-look] .chip.Ready{background:var(--lk-tint-good);color:var(--lk-good-ink)}
html[data-look] .chip.Reviewing{background:var(--lk-tint);color:var(--lk-pri-deep)}
html[data-look] .chip.Waiting{background:var(--lk-tint-warn);color:var(--lk-warn)}
html[data-look] .chip.Setup{background:var(--lk-tint-bad);color:var(--lk-bad)}
html[data-look] .rec,html[data-look] .qcard,html[data-look][data-page="review"] .item{border-radius:12px}
html[data-look] .ok{color:var(--lk-good)} html[data-look] .off{color:var(--lk-bad)}
html[data-look] .prog span,html[data-look] .tag.teal,html[data-look] .status.approved,html[data-look] .status.fixed,html[data-look] .signed{background:var(--lk-tint-good);color:var(--lk-good-ink)}
html[data-look] .prop .acct{color:var(--lk-pri)}
html[data-look] .item.sel{box-shadow:0 0 0 2px var(--lk-pri),var(--lk-shadow)}
html[data-look] .conf i::after{background:var(--lk-good)}
html[data-look][data-page="review"] .side > div{background:var(--lk-glass-hi)}
html[data-look] .explain summary{color:var(--lk-pri)}
html[data-look] .preview code{background:var(--lk-tint);color:var(--lk-pri-deep)}

/* ---------- motion: entrances, words, reveals, spotlight */
html:not(.lk-rm) .lk-in{animation:var(--lk-in-anim,lk-rise) var(--lk-in-dur,.6s) var(--lk-ease) both;animation-delay:calc(var(--i,0) * var(--lk-stagger,45ms))}
@keyframes lk-rise{from{opacity:.01;transform:translateY(14px)}}
@keyframes lk-rise-blur{from{opacity:.01;transform:translateY(18px) scale(.97);filter:blur(6px)}}
@keyframes lk-slide{from{opacity:.01;transform:translateX(-12px)}}
html:not(.lk-rm) .view{animation:var(--lk-view-anim,lk-view) .55s var(--lk-ease) both}
@keyframes lk-view{from{opacity:0;transform:translateY(10px)}}
@keyframes lk-view-blur{from{opacity:0;transform:translateY(16px) scale(.985);filter:blur(10px)}}
.lk-w{display:inline-block}
html:not(.lk-rm) .lk-w{animation:lk-word .8s var(--lk-ease) both;animation-delay:calc(var(--d) * 55ms + 60ms)}
@keyframes lk-word{from{transform:translateY(.4em);opacity:.01;filter:blur(5px)}}
html:not(.lk-rm) .lk-rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--lk-ease),transform .8s var(--lk-ease)}
html:not(.lk-rm) .lk-rv.lk-seen{opacity:1;transform:none}
:is(.card,.tile,.item,.stat,.panel.glass,.qcard,.rec,.waiting,.calm,.lk-spot,main.card){position:relative}
html[data-look] :is(.card,.tile,.item,.stat,.panel.glass,.qcard,.rec,.waiting,.calm,main.card)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(260px circle at var(--mx,-999px) var(--my,-999px),var(--lk-spot),transparent 70%);opacity:0;transition:opacity .35s}
html[data-look] .lk-hot::after{opacity:1}
html[data-look] :is(.card,.tile,.item,.stat,.qcard,.rec,.waiting,.calm,.panel.glass,main.card) > *{position:relative;z-index:1}

/* ---------- progress rings (shown by the looks that want them) */
.lk-ring-wrap{display:none;margin-left:auto}
.lk-ring{display:inline-flex;align-items:center;gap:12px}
.lk-ring svg{width:56px;height:56px;transform:rotate(-90deg);flex:none}
.lk-ring circle{fill:none;stroke-width:6}
.lk-ring-bg{stroke:var(--lk-ring-track)}
.lk-ring-fg{stroke-linecap:round;stroke-dasharray:var(--c);stroke-dashoffset:var(--o)}
html:not(.lk-rm) .lk-ring-fg{animation:lk-ring 1.4s var(--lk-ease) both .2s}
@keyframes lk-ring{from{stroke-dashoffset:var(--c)}}
.lk-ring .s1{stop-color:var(--lk-ring-a)} .lk-ring .s2{stop-color:var(--lk-ring-b)}
.lk-ring-t{display:grid;line-height:1.1}
.lk-ring-t b{font-size:18px;font-weight:800;color:var(--lk-ink);letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.lk-ring-t small{font-size:11px;color:var(--lk-muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.lk-ring-big{float:right;margin:0 0 12px 20px}
.lk-ring-big svg{width:88px;height:88px}
.lk-ring-big .lk-ring-t b{font-size:26px}

/* ---------- the Look switcher */
.lk-sw{position:fixed;right:20px;bottom:20px;z-index:40;font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif}
/* phone portal: the switcher sits in the top bar, out of the content's way */
@media (max-width:899px){
  html[data-page="portal"] .lk-sw{top:calc(14px + env(safe-area-inset-top));bottom:auto;right:12px}
  html[data-page="portal"] .lk-sw .lk-sw-panel{top:52px;bottom:auto;transform-origin:100% 0}
  html[data-page="portal"] .top{padding-right:64px}
}
@media (max-width:899px),(max-width:1320px) and (min-width:900px){
  html[data-page="portal"] .lk-sw-btn span,html[data-page="firm"] .lk-sw-btn span,html[data-page="prospects"] .lk-sw-btn span,html[data-page="review"] .lk-sw-btn span{display:none}
  html[data-page="portal"] .lk-sw-btn,html[data-page="firm"] .lk-sw-btn,html[data-page="prospects"] .lk-sw-btn,html[data-page="review"] .lk-sw-btn{width:40px;padding:0;justify-content:center}
}
@media (min-width:900px){html[data-page="portal"] .lk-sw{bottom:24px;right:24px} html[data-page="firm"] .lk-sw,html[data-page="prospects"] .lk-sw,html[data-page="review"] .lk-sw{right:6px}}
.lk-i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lk-sw-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 12px;border-radius:8px;border:1px solid var(--lk-edge);cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  color:var(--lk-ink);background:var(--lk-glass-hi);box-shadow:var(--lk-shadow-lg);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);transition:transform .25s var(--lk-spring)}
.lk-sw-btn:hover{transform:translateY(-2px)}
.lk-sw-btn .lk-i{color:var(--lk-pri)}
html:not(.lk-rm) .lk-sw-btn:hover .lk-i{animation:lk-wiggle .6s var(--lk-spring)}
.lk-sw-panel{position:absolute;right:0;bottom:52px;width:min(340px,calc(100vw - 24px));padding:16px;border-radius:12px;border:1px solid var(--lk-edge);
  background:var(--lk-sheet);box-shadow:var(--lk-shadow-lg);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);transform-origin:100% 100%}
html:not(.lk-rm) .lk-sw-panel:not([hidden]){animation:lk-pop .35s var(--lk-spring)}
@keyframes lk-pop{from{opacity:0;transform:translateY(8px) scale(.96)}}
.lk-sw-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;color:var(--lk-ink);font-size:14px}
.lk-sw-x{width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:var(--lk-muted);cursor:pointer;display:grid;place-items:center}
.lk-sw-x:hover{background:var(--lk-soft)}
.lk-sw-grid{display:grid;gap:8px}
.lk-opt{display:grid;grid-template-columns:88px 1fr 20px;gap:12px;align-items:center;padding:8px;border-radius:8px;border:1px solid transparent;background:transparent;cursor:pointer;text-align:left;font:inherit;color:var(--lk-ink);transition:background .2s,border-color .2s}
.lk-opt:hover{background:var(--lk-soft)}
.lk-opt[aria-pressed="true"]{background:var(--lk-tint);border-color:var(--lk-line2)}
.lk-opt-t b{display:block;font-size:13px;font-weight:600}
.lk-opt-t small{display:block;font-size:12px;color:var(--lk-muted);line-height:1.35}
.lk-tick{color:var(--lk-pri);opacity:0}
.lk-opt[aria-pressed="true"] .lk-tick{opacity:1}
.lk-sw-note{margin:12px 0 0;font-size:12px;color:var(--lk-faint)}
/* the live mini-swatches: each one a tiny screen in that look */
.lk-mini{position:relative;display:block;width:88px;height:56px;border-radius:8px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 6px 14px -8px rgba(20,40,80,.4);border:1px solid rgba(28,28,30,.08)}
.lk-mini i{position:absolute;display:block}
.lk-mini .m-bg{inset:0;background-size:200% 200%}
html:not(.lk-rm) .lk-mini .m-bg{animation:lk-mini 8s ease-in-out infinite alternate}
@keyframes lk-mini{to{background-position:100% 100%}}
.lk-mini .m-side{left:0;top:0;bottom:0;width:18px}
.lk-mini .m-card{left:24px;top:8px;width:28px;height:22px;border-radius:4px;backdrop-filter:blur(4px)}
.lk-mini .m-c2{left:56px}
.lk-mini .m-n{left:4px;top:4px;width:12px;height:5px;border-radius:2px}
.lk-mini .m-l{left:4px;top:13px;width:18px;height:3px;border-radius:2px;opacity:.5}
.lk-mini .m-btn{left:24px;bottom:8px;width:30px;height:10px;border-radius:3px}
.lk-mini-showcase .m-bg{background-image:radial-gradient(circle at 15% 20%,#BCCDEA,transparent 55%),radial-gradient(circle at 85% 40%,#BFE5DC,transparent 55%),radial-gradient(circle at 50% 100%,#F2DDAA,transparent 60%);background-color:#F5F4F0}
.lk-mini-showcase .m-side{background:rgba(255,255,255,.55)} .lk-mini-showcase .m-card{background:rgba(255,255,255,.7)}
.lk-mini-showcase .m-n{background:#1A3A6B} .lk-mini-showcase .m-l{background:#0C7A6E} .lk-mini-showcase .m-btn{background:#1A3A6B}
.lk-mini-motion .m-bg{background-image:radial-gradient(circle at 15% 10%,rgba(110,150,255,.6),transparent 55%),radial-gradient(circle at 90% 30%,rgba(70,215,190,.5),transparent 55%),radial-gradient(circle at 60% 100%,rgba(160,150,255,.45),transparent 60%);background-color:#F4F6FB}
.lk-mini-motion .m-side{background:rgba(255,255,255,.5)} .lk-mini-motion .m-card{background:rgba(255,255,255,.75)}
.lk-mini-motion .m-n{background:linear-gradient(90deg,#2F6BFF,#0BA888)} .lk-mini-motion .m-l{background:#556075} .lk-mini-motion .m-btn{background:#0F1729}
.lk-mini-lifebridge .m-bg{background-image:radial-gradient(circle at 80% 0%,rgba(224,180,76,.35),transparent 50%),linear-gradient(180deg,#F4F8FB,#E4EDF5);background-color:#EEF4F9}
.lk-mini-lifebridge .m-side{background:#0E2B49} .lk-mini-lifebridge .m-card{background:#fff;box-shadow:inset 0 2px 0 #BD9B60}
.lk-mini-lifebridge .m-n{background:#BD9B60} .lk-mini-lifebridge .m-l{background:#14395E} .lk-mini-lifebridge .m-btn{background:#14395E}
.lk-mini-aurora .m-bg{background-image:radial-gradient(circle at 10% 20%,rgba(94,224,200,.75),transparent 50%),radial-gradient(circle at 80% 10%,rgba(167,139,250,.75),transparent 50%),radial-gradient(circle at 70% 100%,rgba(255,170,200,.7),transparent 55%),radial-gradient(circle at 20% 100%,rgba(124,196,255,.7),transparent 55%);background-color:#F6F5FC}
.lk-mini-aurora .m-side{background:rgba(255,255,255,.45)} .lk-mini-aurora .m-card{background:rgba(255,255,255,.55)}
.lk-mini-aurora .m-n{background:linear-gradient(90deg,#4F46E5,#06B6D4)} .lk-mini-aurora .m-l{background:#7C3AED} .lk-mini-aurora .m-btn{background:linear-gradient(90deg,#4F46E5,#7C3AED)}

/* switching looks: a soft cross-fade where the browser supports it */
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}

/* ---------- reduced motion: everything still, everything shown */
@media (prefers-reduced-motion:reduce){
  .lk-bg *,.lk-in,.lk-w,.view,.lk-ring-fg,.lk-mini .m-bg{animation:none!important}
  .lk-rv{opacity:1!important;transform:none!important}
}
@media print{.lk-bg,.lk-sw{display:none!important} html[data-look]{background:#fff}}
