/* Features: overview, module pages and one live view per feature. Builds on home.css primitives (.ui, .u-*). */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.fh { position: relative; padding: 64px 0 0; text-align: center; overflow: hidden; }
.fh::before { content: ''; position: absolute; left: 50%; top: -380px; width: 1040px; height: 1040px; margin-left: -520px; border-radius: 50%; border: 1px solid var(--line); pointer-events: none; }
.fh h1 { font-size: clamp(2.3rem, 5.6vw, 4.4rem); line-height: 1.03; letter-spacing: -.045em; max-width: 14em; margin: 0 auto; position: relative; }
.fh .lead { margin: 22px auto 0; max-width: 38em; position: relative; }
.fh .eyebrow { position: relative; }
.fh .h-cta { margin-top: 28px; }
.fh .stage { margin-top: 0; }
.fh-kicker { display: inline-flex; gap: 8px; align-items: center; font-size: .86rem; color: var(--ink-2); font-weight: 600; margin-bottom: 18px; position: relative; }
.fh-kicker a { text-decoration: none; color: var(--ink-3); }
.fh-kicker a:hover { color: var(--ink); }
.fh-kicker span { color: var(--line-2); }

/* Sticky feature bar on module pages */
.fsub { position: sticky; top: 68px; z-index: 40; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.fsub .wrap { display: flex; align-items: center; gap: 6px; height: 54px; overflow-x: auto; scrollbar-width: none; }
.fsub .wrap::-webkit-scrollbar { display: none; }
.fsub b { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: 10px; white-space: nowrap; }
.fsub a { flex: none; text-decoration: none; font-size: .9rem; font-weight: 600; color: var(--ink-2); padding: 7px 13px; border-radius: 999px; white-space: nowrap; transition: background .2s, color .2s; }
.fsub a:hover { color: var(--ink); background: var(--bg-soft); }
.fsub a.on { background: var(--ink); color: #fff; }

/* ── Feature sections ─────────────────────────────────────────────────── */
.fs { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr); gap: 72px; align-items: center; padding: 96px 0; border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.fs:first-child { border-top: 0; }
.fs.flip > .fs-copy { order: 2; }
.fs h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom: 16px; }
.fs .fs-copy > p { color: var(--ink-2); font-size: 1.06rem; margin: 0; max-width: 32em; }
.fs .checks { margin-top: 22px; }
.fs-num { font: 700 .78rem/1 var(--font-body); letter-spacing: .1em; color: var(--ink-3); display: flex; align-items: center; gap: 10px; margin-bottom: 16px; text-transform: uppercase; }
.fs-num i { font-style: normal; color: var(--ink); }
.fs-num::after { content: ''; flex: 0 0 38px; height: 1px; background: var(--line-2); }
@media (max-width: 920px) {
  .fs { grid-template-columns: 1fr; gap: 34px; padding: 64px 0; }
  .fs.flip > .fs-copy { order: 0; }
}

/* ── A live view: a slice of the real app ─────────────────────────────── */
.fx {
  --u-bg: #f3f4f8; --u-card: #fff; --u-line: #e6e7ee; --u-fg: #12131a; --u-muted: #5d6070; --u-subtle: #8b8e9c;
  position: relative; background: var(--u-bg); border: 1px solid #e0e1e8; border-radius: 22px; padding: 0; overflow: hidden;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13.5px; line-height: 1.45; color: var(--u-fg); text-align: left;
  box-shadow: 0 50px 90px -60px rgba(11, 11, 15, .45), 0 0 0 6px #fff, 0 0 0 7px var(--line);
}
.fx * { box-sizing: border-box; }
.fx-top { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--u-line); font-size: 12px; color: var(--u-muted); }
.fx-top .ws { width: 20px; height: 20px; border-radius: 6px; background: #111; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 10.5px; flex: none; }
.fx-top b { color: var(--u-fg); font-weight: 600; }
.fx-top .sep { color: #c4c6cf; }
.fx-top .url { margin-left: auto; background: var(--u-bg); border: 1px solid var(--u-line); border-radius: 999px; padding: 3px 10px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48%; }
.fx-body { padding: 22px; min-height: 380px; position: relative; }
.fx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.fx-head h4 { font-size: 21px; font-weight: 800; letter-spacing: -.03em; margin: 0; line-height: 1.15; }
.fx-head small { display: block; color: var(--u-muted); font-size: 12.5px; margin-top: 2px; }
.fx .u-btn { font-size: 12.5px; padding: 8px 14px; }
.fx .u-card { border-radius: 14px; }
.fx .u-row { padding: 11px 14px; }
.fx .u-row .g small { font-size: 12px; }
.fx .u-lbl { font-size: 10.5px; }
.fx-note { font-size: 11.5px; color: var(--u-subtle); }
.fx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fx-fade { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.fx-fade.on { opacity: 1; transform: none; }
.fx-pop { opacity: 0; transform: scale(.94); transition: opacity .3s, transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.fx-pop.on { opacity: 1; transform: none; }
.fx .u-btn.press { transform: scale(.93); }
.fx .flash { animation: fxflash 1.2s ease; }
@keyframes fxflash { 0% { background: #fff; } 30% { background: #e3f5e9; } 100% { background: #fff; } }
.fx-toast { position: absolute; right: 16px; bottom: 16px; background: #111; color: #fff; border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 12.5px; z-index: 8; transform: translateY(16px); opacity: 0; transition: all .35s; display: flex; gap: 8px; align-items: center; max-width: calc(100% - 32px); }
.fx-toast::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: none; }
.fx-toast.on { transform: none; opacity: 1; }
.fx-ptr { position: absolute; left: 0; top: 0; width: 20px; height: 20px; z-index: 12; pointer-events: none; opacity: 0; transition: transform .75s cubic-bezier(.5, 0, .2, 1), opacity .3s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M3 2l15 8-7 1.6L8 19z' fill='%230b0b0f' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 20px no-repeat; margin: -3px 0 0 -4px; }
.fx-ptr.on { opacity: 1; }
.fx-ptr::after { content: ''; position: absolute; left: -8px; top: -8px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.fx-ptr.clk::after { animation: clk .45s ease; }
@keyframes clk { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.5); } }
.fx .caret { display: inline-block; width: 2px; height: 1.1em; background: #111; vertical-align: -3px; margin-left: 1px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 560px) {
  .fx-body { padding: 16px; min-height: 0; }
  .fx { font-size: 12.5px; border-radius: 18px; }
  .fx-top .url { display: none; }
  .fx-head h4 { font-size: 18px; }
  .fx-grid2 { grid-template-columns: 1fr; }
}

/* Next module + note */
.demo-note { font-size: .8rem; color: var(--ink-3); max-width: 60em; margin: 18px auto 0; text-align: center; position: relative; }
.next-mod { display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--line); border-radius: 24px; padding: 34px 38px; text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s; }
.next-mod:hover { border-color: var(--ink); box-shadow: var(--shadow); }
.next-mod small { display: block; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: 8px; }
.next-mod strong { display: block; font: 800 clamp(1.6rem, 3vw, 2.3rem)/1.1 var(--font-head); letter-spacing: -.035em; }
.next-mod p { margin: 8px 0 0; color: var(--ink-2); }
.next-mod .arr { flex: none; width: 58px; height: 58px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 1.4rem; transition: transform .2s; }
.next-mod:hover .arr { transform: translateX(4px); }
@media (max-width: 560px) { .next-mod { padding: 24px; } .next-mod .arr { width: 46px; height: 46px; } }

/* ── Overview ─────────────────────────────────────────────────────────── */
.ov-hero { padding-bottom: 40px; }
.ov-index { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 56px auto 0; border: 1px solid var(--line); border-radius: 22px; background: #fff; overflow: hidden; position: relative; text-align: left; }
.ov-index a { position: relative; padding: 22px 20px 20px; text-decoration: none; color: inherit; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; transition: background .25s; }
.ov-index a:first-child { border-left: 0; }
.ov-index a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.ov-index a:hover { background: var(--bg-soft); }
.ov-index a:hover::after, .ov-index a.on::after { transform: scaleX(1); }
.ov-index small { font: 700 .74rem/1 var(--font-body); letter-spacing: .1em; color: var(--ink-3); }
.ov-index b { font: 800 1.2rem/1.2 var(--font-head); letter-spacing: -.02em; margin-top: 10px; }
.ov-index span { color: var(--ink-2); font-size: .9rem; line-height: 1.4; }
.ov-index em { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--ink-3); margin-top: auto; padding-top: 12px; }
@media (max-width: 900px) { .ov-index { grid-template-columns: 1fr 1fr; } .ov-index a { border-left: 0; border-top: 1px solid var(--line); } .ov-index a:nth-child(-n+2) { border-top: 0; } .ov-index a:nth-child(even) { border-left: 1px solid var(--line); } .ov-index a:last-child { grid-column: span 2; } }

.ov-mod { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; padding: 96px 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.ov-mod:first-child { border-top: 0; }
.ov-mod.flip > .ov-copy { order: 2; }
.ov-mod h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-bottom: 16px; }
.ov-copy > p { color: var(--ink-2); font-size: 1.04rem; }
.ov-links { list-style: none; margin: 24px 0 28px; padding: 0; border-top: 1px solid var(--line); }
.ov-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: padding .2s; }
.ov-links a::after { content: '→'; grid-row: span 2; color: var(--ink-3); transition: transform .2s, color .2s; }
.ov-links a:hover { padding-left: 8px; }
.ov-links a:hover::after { transform: translateX(3px); color: var(--ink); }
.ov-links b { font-weight: 700; font-size: .98rem; }
.ov-links span { color: var(--ink-3); font-size: .88rem; grid-column: 1; }
.ov-view .tour-chips { margin: 0 0 14px; justify-content: flex-start; }
.ov-mod.flip .ov-view .tour-chips { justify-content: flex-end; }
.ov-view .stage { max-width: none; }
@media (max-width: 980px) {
  .ov-mod { grid-template-columns: 1fr; gap: 36px; padding: 64px 0; }
  .ov-mod.flip > .ov-copy { order: 0; }
  .ov-mod.flip .ov-view .tour-chips { justify-content: flex-start; }
}

.ov-offer { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; background: var(--ink); color: #fff; border-radius: 28px; padding: 56px; position: relative; overflow: hidden; }
.ov-offer::before { content: ''; position: absolute; right: -180px; top: -220px; width: 520px; height: 520px; border-radius: 50%; border: 1px solid #2a2a33; }
.ov-offer h2 { color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.ov-offer h2 em { color: var(--sun); }
.ov-offer p { color: #c9c9d4; margin: 16px 0 26px; }
.ov-offer .btn-primary { background: #fff; color: var(--ink); }
.ov-offer .btn-ghost { color: #fff; border-color: #4a4a57; }
.ov-offer .btn-ghost:hover { border-color: #fff; }
.ov-offer-tag { display: inline-flex !important; align-items: center; gap: 10px; margin: 0 0 16px !important; font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: #fff !important; }
.ov-offer-tag .sun { width: 9px; height: 9px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgba(255, 197, 10, .2); }
.ov-plans { display: grid; gap: 10px; position: relative; }
.ov-plan { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid #2c2c36; border-radius: 16px; padding: 18px 20px; background: #121218; }
.ov-plan.pop { border-color: #fff; }
.ov-plan b { display: block; font-size: 1.05rem; }
.ov-plan small { color: #9d9daa; font-size: .84rem; }
.ov-plan .pr { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.ov-plan .pr s { color: #7c7c88; }
.ov-plan .pr strong { font: 800 1.9rem/1 var(--font-head); letter-spacing: -.04em; }
@media (max-width: 900px) { .ov-offer { grid-template-columns: 1fr; padding: 36px 24px; gap: 28px; } }

/* ── Shared view bits ─────────────────────────────────────────────────── */
.fx { --brand: #0f766e; }
.fx .ws.brand, .fm-brand .ws { background: var(--brand); color: #fff; }
.fx .u-chip.urg, .ui .u-chip.urg { background: #111; color: #fff; }
.u-badge { display: inline-flex; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; background: #eef0f4; color: #4b4e5c; transition: background .3s, color .3s; white-space: nowrap; }
.u-badge.ok { background: #e3f5e9; color: #15803d; }
.fx table, .ui .h-tbl table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fx th, .ui .h-tbl th { text-align: left; font-weight: 600; color: var(--u-subtle); font-size: 11px; letter-spacing: .04em; padding: 10px 12px; border-bottom: 1px solid var(--u-line); white-space: nowrap; }
.fx td, .ui .h-tbl td { padding: 10px 12px; border-top: 1px solid var(--u-line); white-space: nowrap; transition: background .4s, color .3s; }
.fx tbody tr:first-child td { border-top: 0; }
.fx td .u-av { width: 20px; height: 20px; font-size: 8.5px; vertical-align: middle; margin-right: 6px; display: inline-grid; }
.fx td.pos, .ui td.pos { color: #15803d; font-weight: 600; }
.fx .fm-in { display: block; min-height: 34px; border: 1px solid var(--u-line); border-radius: 9px; background: #fff; padding: 7px 10px; font-weight: 500; color: var(--u-fg); margin-top: 4px; }
.fx .fm-in.tall { min-height: 52px; }
.fx label { display: block; font-size: 11.5px; font-weight: 600; color: var(--u-muted); margin-bottom: 9px; }
.fx .fx-select { display: flex; align-items: center; gap: 7px; min-height: 34px; border: 1px solid var(--u-line); border-radius: 9px; background: #fff; padding: 6px 10px; font-weight: 500; color: var(--u-fg); margin-top: 4px; position: relative; }
.fx .fx-select::after { content: '⌄'; margin-left: auto; color: var(--u-subtle); }
.fx .fx-select .u-av { width: 20px; height: 20px; font-size: 8.5px; }
.dc-ph { color: var(--u-subtle); }
.fx-dialog { position: absolute; z-index: 9; left: 50%; top: 50%; width: min(330px, calc(100% - 32px)); background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.45), 0 0 0 1px var(--u-line); opacity: 0; transform: translate(-50%, -46%) scale(.97); transition: all .3s; pointer-events: none; }
.fx-dialog.on { opacity: 1; transform: translate(-50%, -50%); }
.fx-dialog > b { display: block; font-size: 15px; margin-bottom: 4px; }
.fx-dialog > small { display: block; color: var(--u-muted); font-size: 12px; margin-bottom: 12px; }
.fx-dialog .u-btn { margin-top: 4px; }
.fx .fx-body::after { content: ''; }
.fx .u-row .u-btn { flex: none; }
.hm { }
@media (max-width: 560px) { .fx .hm { display: none; } }

/* projects */
.pj-ms { background: #fff; border: 1px solid var(--u-line); border-radius: 14px; padding: 14px 16px 12px; margin-bottom: 14px; position: relative; }
.pj-track { position: absolute; left: 30px; right: 30px; top: 22px; height: 3px; background: #e6e7ee; border-radius: 3px; }
.pj-track i { display: block; height: 100%; background: #111; border-radius: 3px; transition: width .9s cubic-bezier(.3,.8,.3,1); }
.pj-stops { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.pj-stops span { display: flex; flex-direction: column; align-items: center; text-align: center; font-weight: 600; font-size: 12px; gap: 1px; }
.pj-stops b { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #c4c6cf; margin-bottom: 6px; transition: all .3s; }
.pj-stops small { color: var(--u-subtle); font-weight: 500; font-size: 11px; }
.pj-stops .done b { background: #111; border-color: #111; box-shadow: 0 0 0 4px #e3f5e9; }
.pj-stops .done small { color: #15803d; }
.pj-v { display: none; animation: scrIn .4s ease both; }
.pj-v.on { display: block; }
.pj-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pj-col { background: #eceef3; border-radius: 12px; padding: 8px; }
.pj-col h6 { margin: 2px 4px 8px; font-size: 12px; font-weight: 700; display: flex; justify-content: space-between; }
.pj-col h6 small { background: #e0e1e8; border-radius: 99px; padding: 0 7px; font-size: 10.5px; }
.fx .u-task { padding: 10px 11px; margin-bottom: 8px; border-radius: 10px; }
.fx .u-task b { margin: 6px 0; font-size: 12.5px; }
.fx .u-task .who { font-size: 11.5px; }
.fx .u-task .u-av { width: 20px; height: 20px; font-size: 8.5px; }
.pj-sheet { overflow: hidden; }
@media (max-width: 560px) { .pj-board { grid-template-columns: 1fr 1fr; } .pj-col:last-child { display: none; } .fx-head .u-seg { font-size: 11px; } .fx-head .u-seg span { padding: 5px 8px; } .pj-ms + .pj-v, .fx-head { flex-wrap: wrap; } }

/* my day */
.md-now { padding: 16px 18px; margin-bottom: 12px; }
.md-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 14px; border-bottom: 1px solid var(--u-line); }
.md-top b { display: block; font-size: 17px; letter-spacing: -.02em; }
.md-top small { color: var(--u-muted); font-size: 12px; }
.md-top .u-btn span { font-variant-numeric: tabular-nums; }
.md-stats { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 12px; color: var(--u-muted); font-size: 12.5px; }
.md-stats b { color: var(--u-fg); font-size: 16px; font-weight: 800; }
.md-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.md-flow .u-card { padding: 14px; }
.md-t { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; font-weight: 500; margin-top: 8px; line-height: 1.35; }
.md-t .u-check { width: 16px; height: 16px; margin-top: 1px; }
.md-t .u-check.done::after { left: 4px; top: 1px; }
.fx .u-clockin { font-size: 12.5px; padding: 7px 13px; }
@media (max-width: 560px) { .md-flow { grid-template-columns: 1fr; } .md-top { flex-direction: column; align-items: flex-start; } }

/* time */
.tm-bar { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--u-line); border-radius: 14px; padding: 10px 12px 10px 14px; margin-bottom: 10px; }
.tm-bar .timer { font-size: 12.5px; color: var(--u-muted); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 150px; }
.tm-bar .timer::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #9a9cab; margin-right: 7px; vertical-align: 1px; }
.tm-bar .timer.run { color: var(--u-fg); font-weight: 600; } .tm-bar .timer.run::before { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.tm-task { flex: 1; min-width: 0; font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-note { background: #fff; border: 1px solid var(--u-line); border-radius: 12px; padding: 9px 14px; margin-bottom: 18px; }
.tm-note small { color: var(--u-subtle); font-size: 11px; display: block; }
.tm-note div { min-height: 20px; font-weight: 500; }
.tm-table { overflow: hidden; }
.tm-table td { font-variant-numeric: tabular-nums; }
.tm-table td.live { background: #effaf2; color: #15803d; font-weight: 700; }
.tm-table tr.tot td { font-weight: 700; background: #f7f7fa; }
@media (max-width: 560px) { .tm-bar { flex-wrap: wrap; } .tm-task { order: 3; flex-basis: 100%; } .tm-bar .timer { min-width: 0; } }

/* docs */
.dc-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dc-page { background: #fff; border: 1px solid var(--u-line); border-radius: 14px; padding: 26px 30px; min-height: 300px; position: relative; }
.dc-page h5 { font-size: 22px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 10px; }
.dc-page h6 { font-size: 15px; font-weight: 700; margin: 16px 0 8px; }
.dc-p { color: #3a3d4a; margin: 0; }
.dc-line { min-height: 22px; }
.dc-menu { position: absolute; left: 30px; top: 190px; width: 210px; background: #fff; border-radius: 12px; box-shadow: 0 20px 50px -14px rgba(0,0,0,.35), 0 0 0 1px var(--u-line); padding: 6px; z-index: 5; opacity: 0; transform: translateY(-4px); transition: all .2s; pointer-events: none; max-height: 200px; overflow: hidden; }
.dc-menu.on { opacity: 1; transform: none; }
.dc-menu div { padding: 6px 10px; border-radius: 7px; font-size: 12.5px; }
.dc-menu div.sel { background: #f1f1f5; font-weight: 600; }
.dc-menu div.sel ~ div.sel { background: none; font-weight: 400; }
.dc-tasks { display: none; }
.dc-tasks.on { display: block; }
.dc-task { display: flex; align-items: center; gap: 9px; margin: 6px 0; opacity: 0; transition: opacity .2s; min-height: 22px; }
.dc-task.show { opacity: 1; }
.dc-cb { width: 16px; height: 16px; border-radius: 4px; border: 1.6px solid #c4c6cf; flex: none; position: relative; transition: all .25s; }
.dc-task.done .dc-cb { background: #111; border-color: #111; }
.dc-task.done .dc-cb::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dc-task.done span:last-child { color: var(--u-subtle); text-decoration: line-through; }
@media (max-width: 560px) { .dc-page { padding: 18px; } .dc-menu { left: 18px; top: 200px; } }

/* whiteboard */
.fx[data-fx="wb"] .fx-body { padding: 0; }
.wb2 { position: relative; height: 420px; background: #fff radial-gradient(#d9dae2 1px, transparent 1px) 0 0 / 18px 18px; overflow: hidden; }
.wb-tools { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: flex; gap: 2px; background: #fff; border-radius: 12px; padding: 5px; box-shadow: 0 6px 20px -8px rgba(0,0,0,.2), 0 0 0 1px var(--u-line); z-index: 3; }
.wb-tools i { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; position: relative; font: 700 13px/1 serif; font-style: normal; color: #333; }
.wb-tools i.on { background: #ece8ff; }
.wb-tools i::before { content: ''; display: block; }
.t-sel::before { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 11px solid #333; transform: rotate(-25deg); }
.t-rect::before { width: 13px; height: 11px; border: 1.6px solid #333; border-radius: 2px; }
.t-dia::before { width: 10px; height: 10px; border: 1.6px solid #333; transform: rotate(45deg); }
.t-ell::before { width: 13px; height: 13px; border: 1.6px solid #333; border-radius: 50%; }
.t-arr::before { width: 13px; height: 1.6px; background: #333; box-shadow: 3px -3px 0 -0.2px transparent; transform: rotate(-35deg); }
.t-pen::before { width: 12px; height: 3px; background: #333; border-radius: 2px; transform: rotate(-45deg); }
.t-txt::before { display: none !important; }
.t-sticky::before { width: 13px; height: 13px; background: #ffe066; border-radius: 2px; box-shadow: inset -3px -3px 0 #f5c93a; }
.wb-save { position: absolute; right: 14px; top: 22px; font-size: 11.5px; color: var(--u-subtle); z-index: 3; }
.wb-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.wb-lines path { fill: none; stroke: #111; stroke-width: 2; stroke-dasharray: 320; stroke-dashoffset: 320; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wb-lines path.on { transition: stroke-dashoffset .9s ease; stroke-dashoffset: 0; }
.wb-n { position: absolute; width: 150px; min-height: 92px; padding: 11px 12px; font-size: 12px; line-height: 1.35; border-radius: 4px; box-shadow: 0 10px 20px -10px rgba(0,0,0,.3); opacity: 0; transform: scale(.7) rotate(-4deg); transition: opacity .3s, transform .4s cubic-bezier(.3,1.5,.5,1); color: #3a3000; }
.wb-n b { display: block; font-size: 13px; margin-bottom: 4px; color: #1a1600; }
.wb-n.on { opacity: 1; transform: rotate(-1.5deg); }
.wb-n.drag { transform: translate(24px, -14px) rotate(2deg); box-shadow: 0 20px 34px -12px rgba(0,0,0,.35); transition: transform 1s cubic-bezier(.5,0,.2,1); }
.wb-n.y { background: #fff1a8; } .wb-n.p { background: #ffd9e8; } .wb-n.b { background: #d3ecff; } .wb-n.g { background: #d6f5dc; }
.wb-cur { position: absolute; left: 20%; top: 90%; z-index: 4; opacity: 0; transition: left 1s cubic-bezier(.5,0,.2,1), top 1s cubic-bezier(.5,0,.2,1), opacity .3s; pointer-events: none; }
.wb-cur.on { opacity: 1; }
.wb-cur i { display: block; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M3 2l15 8-7 1.6L8 19z' fill='%23f59e0b' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 16px no-repeat; }
.wb-cur span { display: inline-block; margin: 2px 0 0 12px; background: #f59e0b; color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 2px 7px; }
@media (max-width: 560px) { .wb2 { height: 360px; } .wb-n { width: 118px; min-height: 80px; font-size: 11px; padding: 9px; } .wb-tools i:nth-child(n+6):not(.t-sticky) { display: none; } }

/* weekly output */
.wo-grid td small { display: block; color: var(--u-subtle); font-size: 11px; }
.wo-grid td { font-variant-numeric: tabular-nums; }
.wo-grid td.hit { background: #effaf2; color: #15803d; font-weight: 700; }
.wo-bar { display: block; height: 7px; border-radius: 99px; background: #e6e7ee; overflow: hidden; margin-top: 7px; width: 100%; }
.wo-bar i { display: block; height: 100%; width: 0; background: #111; border-radius: 99px; transition: width .7s cubic-bezier(.3,.8,.3,1); }
.wo-bar i.amber { background: #f59e0b; }
.wo-ed .g b { display: flex; align-items: center; gap: 8px; }

/* portal */
.fx-portal { --brand: #0f766e; }
.pt-wrap { display: grid; grid-template-columns: 120px 1fr; gap: 18px; margin: -22px; }
.pt-nav { background: #fff; border-right: 1px solid var(--u-line); padding: 16px 10px; display: flex; flex-direction: column; gap: 2px; }
.pt-nav span { padding: 7px 10px; border-radius: 8px; font-size: 12.5px; color: #3a3d4a; transition: all .3s; }
.pt-nav span.on { background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); font-weight: 700; }
.pt-main { padding: 20px 22px 20px 0; }
.pt-h { font-size: 22px; font-weight: 800; letter-spacing: -.03em; margin: 2px 0 14px; }
.pt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.pt-stats .u-card { padding: 12px 14px; }
.pt-stats small, .mn-tiles small, .ps-stats small { color: var(--u-muted); font-size: 11.5px; display: block; }
.pt-stats b, .mn-tiles b, .ps-stats b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pt-prog { padding: 14px; margin-bottom: 12px; }
.pt-p { display: grid; grid-template-columns: 1fr 1.1fr 40px; gap: 10px; align-items: center; font-size: 12.5px; font-weight: 600; margin-top: 8px; }
.pt-p .wo-bar { margin: 0; } .pt-p .wo-bar i { background: var(--brand); }
.pt-p b { text-align: right; font-variant-numeric: tabular-nums; }
.pt-up { padding: 14px 0 4px; } .pt-up .u-lbl { padding: 0 14px; margin-bottom: 4px; }
.pt-up .u-chip { transition: opacity .3s; }
@media (max-width: 560px) { .pt-wrap { grid-template-columns: 1fr; margin: -16px; } .pt-nav { flex-direction: row; overflow: hidden; border-right: 0; border-bottom: 1px solid var(--u-line); padding: 8px; } .pt-nav span { white-space: nowrap; } .pt-main { padding: 14px 16px; } .pt-p { grid-template-columns: 1fr 70px 36px; } }

/* approvals */
.ap-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; gap: 10px; }
.ap-head h4 { font-size: 20px; font-weight: 800; letter-spacing: -.03em; margin: 2px 0 0; }
.ap-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.ap-video { position: relative; }
.ap-logo { position: absolute; right: 14px; top: 12px; font: 800 13px/1 'Plus Jakarta Sans'; letter-spacing: .12em; opacity: .9; transition: transform .4s; transform-origin: right top; }
.ap-logo.small { transform: scale(.7); opacity: .6; }
.ap-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.fx-portal .u-btn:not(.ghost) { background: var(--brand); }
.ap-vers { display: inline-flex; background: #e9e9ef; border-radius: 999px; padding: 3px; }
.ap-vers span { padding: 5px 12px; border-radius: 99px; font-size: 12px; color: var(--u-muted); transition: all .25s; }
.ap-vers span.on { background: #fff; color: var(--u-fg); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.ap-c { display: flex; gap: 8px; font-size: 12px; margin-top: 8px; padding: 8px; border-radius: 10px; transition: background .3s; line-height: 1.4; }
.ap-c b { display: block; font-size: 11.5px; }
.ap-c.hl { background: #fff6dc; }
.ap-c.fx-fade { display: none; } .ap-c.fx-fade.on { display: flex; }
.ap-in { margin-top: 10px; border: 1px solid var(--u-line); background: #fff; border-radius: 10px; padding: 8px 10px; font-size: 12px; min-height: 34px; }
@media (max-width: 560px) { .ap-grid { grid-template-columns: 1fr; } }

/* client chat */
.cc-wrap { display: grid; grid-template-columns: 170px 1fr; margin: -22px; min-height: 400px; }
.cc-list { background: #fff; border-right: 1px solid var(--u-line); padding: 14px 10px; }
.cc-list .u-lbl { display: block; padding: 0 6px; }
.cc-i { display: grid; grid-template-columns: 1fr auto; padding: 8px 10px; border-radius: 9px; font-size: 12.5px; }
.cc-i span { color: var(--u-muted); font-size: 11.5px; grid-column: 1; }
.cc-i em { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; background: #111; color: #fff; border-radius: 99px; font-size: 10.5px; padding: 1px 7px; transition: opacity .3s; }
.cc-i.on { background: #e9e9ef; }
.cc-thread, .ch-main { display: flex; flex-direction: column; gap: 10px; padding: 0 18px 16px; position: relative; }
.cc-hd { margin: 0 -18px 4px; padding: 12px 18px; background: #fff; border-bottom: 1px solid var(--u-line); display: flex; gap: 10px; align-items: baseline; }
.cc-hd small { color: var(--u-muted); font-size: 11.5px; }
.fx .u-m { max-width: 86%; }
.fx .u-m .bub { font-size: 12.5px; padding: 8px 12px; }
.fx .u-m .u-av { width: 22px; height: 22px; font-size: 9px; }
.cc-file .bub { display: flex; gap: 10px; align-items: center; min-width: 220px; }
.cc-doc { width: 34px; height: 40px; border-radius: 6px; background: rgba(255,255,255,.14); display: grid; place-items: center; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; flex: none; }
.cc-file .bub b { display: block; font-size: 12px; } .cc-file .bub small { font-size: 11px; opacity: .7; }
.cc-up { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.2); margin-top: 5px; overflow: hidden; width: 140px; }
.cc-up i { display: block; height: 100%; width: 0; background: #fff; transition: width 1.8s linear; }
.cc-file.done .cc-up { display: none; }
.cc-compose { margin-top: auto; background: #fff; border: 1px solid var(--u-line); border-radius: 999px; padding: 9px 14px; font-size: 12.5px; min-height: 38px; }
@media (max-width: 560px) { .cc-wrap { grid-template-columns: 1fr; margin: -16px; } .cc-list { display: none; } }

/* forms */
.fm-wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 16px; align-items: start; }
.fm-form { background: #fff; border: 1px solid var(--u-line); border-radius: 14px; padding: 16px; transition: opacity .4s, transform .4s; }
.fm-form.sent { opacity: .45; transform: scale(.98); }
.fm-brand { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.fm-brand .ws { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; }
.fm-brand b { display: block; font-size: 14px; } .fm-brand small { color: var(--u-muted); font-size: 11.5px; }
.fm-ch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.fm-ch i { font-style: normal; border: 1px solid var(--u-line); border-radius: 99px; padding: 4px 11px; color: var(--u-fg); font-weight: 500; transition: all .25s; background: #fff; }
.fm-ch i.on { background: #111; color: #fff; border-color: #111; }
.fm-send { width: 100%; justify-content: center; background: var(--brand) !important; }
.fm-tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.fm-tabs span { font-size: 11.5px; padding: 4px 10px; border-radius: 99px; color: var(--u-muted); }
.fm-tabs span.on { background: #111; color: #fff; font-weight: 600; }
.fm-new { display: none; }
.fm-new.on { display: flex; animation: rowIn .6s ease both, fxflash 1.6s ease; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .fm-wrap { grid-template-columns: 1fr; } }

/* contacts */
.ct-search { border: 1px solid var(--u-line); background: #fff; border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; min-height: 38px; font-weight: 500; }
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ct-card { display: flex; gap: 10px; padding: 12px; transition: opacity .3s, transform .3s; }
.ct-card b { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ct-card b .u-chip { font-size: 10px; padding: 1px 7px; }
.ct-card small { display: block; color: var(--u-muted); font-size: 11.5px; }
.ct-card .ct-mail { color: var(--u-subtle); }
.ct-card.out { display: none; }
@media (max-width: 560px) { .ct-grid { grid-template-columns: 1fr; } }

/* proposals */
.pr-items { padding: 6px 16px 12px; position: relative; }
.pr-hd { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-weight: 700; font-size: 12.5px; }
.pr-menu { position: absolute; right: 16px; top: 48px; width: 250px; background: #fff; border-radius: 12px; box-shadow: 0 20px 50px -14px rgba(0,0,0,.35), 0 0 0 1px var(--u-line); padding: 6px; z-index: 5; opacity: 0; transform: translateY(-4px); transition: all .2s; pointer-events: none; }
.pr-menu.on { opacity: 1; transform: none; }
.pr-menu div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12px; }
.pr-menu div span { color: var(--u-muted); white-space: nowrap; }
.pr-row { display: none; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--u-line); }
.pr-row.on { display: flex; animation: rowIn .45s ease both; }
.pr-row b { display: block; font-size: 13px; } .pr-row small { color: var(--u-muted); font-size: 11.5px; }
.pr-row > span { font-weight: 700; }
.pr-tot { display: flex; justify-content: space-between; padding: 6px 0 0; color: var(--u-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pr-tot:first-of-type { border-top: 1px solid var(--u-line); margin-top: 4px; padding-top: 10px; }
.pr-tot.big { color: var(--u-fg); font-size: 16px; font-weight: 800; padding-top: 8px; }
.pr-tot b { color: var(--u-fg); }
.pr-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.pr-line { display: flex; gap: 6px; flex-wrap: wrap; }
.pr-line span { font-size: 11.5px; color: var(--u-subtle); padding: 4px 10px 4px 22px; border-radius: 99px; background: #fff; border: 1px solid var(--u-line); position: relative; transition: all .3s; }
.pr-line span::before { content: ''; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #c4c6cf; transition: background .3s; }
.pr-line span.on { color: var(--u-fg); font-weight: 600; } .pr-line span.on::before { background: #16a34a; }

/* contracts */
.ks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ks-sign, .ks-cert { padding: 16px; }
.ks-pad { position: relative; border: 1.5px dashed #c4c6cf; border-radius: 12px; background: #fcfcfd; height: 110px; margin-bottom: 12px; }
.ks-pad svg { width: 100%; height: 100%; }
.ks-pad path { fill: none; stroke: #1d2a6b; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 640; stroke-dashoffset: 640; }
.ks-pad path.on { transition: stroke-dashoffset 1.9s ease; stroke-dashoffset: 0; }
.ks-pad small { position: absolute; left: 12px; bottom: 8px; font-size: 10.5px; color: var(--u-subtle); }
.ks-r { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--u-line); font-size: 12px; }
.ks-r span { color: var(--u-muted); } .ks-r b { text-align: right; }
.ks-r.fx-fade { display: none; } .ks-r.fx-fade.on { display: flex; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.ks-cert .u-btn { margin-top: 10px; }
@media (max-width: 560px) { .ks-grid { grid-template-columns: 1fr; } }

/* invoices */
.iv-paper { position: relative; background: #fff; border: 1px solid var(--u-line); border-radius: 14px; padding: 20px 22px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.iv-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.iv-logo { display: flex; align-items: center; gap: 9px; } .iv-logo .ws { width: 28px; height: 28px; border-radius: 8px; background: #111; color: #fff; display: grid; place-items: center; font-weight: 800; }
.iv-no { text-align: right; } .iv-no b { display: block; letter-spacing: .14em; font-size: 13px; } .iv-no small { color: var(--u-muted); font-size: 11.5px; }
.iv-bill { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--u-line); border-bottom: 1px solid var(--u-line); }
.iv-bill small, .iv-split small, .ps-info small { display: block; color: var(--u-subtle); font-size: 10.5px; letter-spacing: .04em; }
.iv-bill b, .ps-info b { font-size: 12.5px; }
.iv-lines { padding: 6px 0; }
.iv-l { display: grid; grid-template-columns: 1fr auto 80px; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--u-line); font-size: 12.5px; opacity: 0; transform: translateY(4px); transition: all .35s; }
.iv-l.on { opacity: 1; transform: none; }
.iv-l em { font-style: normal; color: var(--u-muted); } .iv-l b { text-align: right; }
.iv-split { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 10px; margin-top: 12px; font-variant-numeric: tabular-nums; }
.iv-split b { font-size: 15px; }
.iv-due { text-align: right; } .iv-due b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.iv-pay { display: flex; justify-content: space-between; margin-top: 12px; padding: 8px 12px; border-radius: 9px; background: #f7f7fa; font-size: 12px; color: var(--u-muted); }
.iv-pay b { color: var(--u-fg); }
.iv-stamp { right: 26px; top: 46%; border-color: #111; color: #111; }
.iv-mail { position: absolute; right: 16px; bottom: 60px; width: 250px; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 24px 60px -18px rgba(0,0,0,.4), 0 0 0 1px var(--u-line); z-index: 6; }
.iv-mail small { display: block; color: var(--u-subtle); font-size: 10.5px; } .iv-mail b { display: block; font-size: 12.5px; margin: 4px 0; } .iv-mail > span:not(.u-btn) { display: block; color: var(--u-muted); font-size: 11.5px; margin-bottom: 10px; }
.u-btn.brand { background: #635bff !important; }
.iv-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
@media (max-width: 560px) { .iv-bill { grid-template-columns: 1fr 1fr; } .iv-split { grid-template-columns: 1fr 1fr; } .iv-due { grid-column: span 2; text-align: left; } .iv-mail { left: 16px; right: 16px; width: auto; bottom: 64px; } .iv-paper { padding: 16px; } }

/* money */
.mn-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.mn-tiles .u-card { padding: 12px 14px; }
.mn-m b { color: #15803d; }
.mn-r td { opacity: 0; }
.mn-r.on td { opacity: 1; }
.mn-r.dim td { opacity: .3; }
.mn-exp { padding: 12px 14px; margin-top: 12px; }
.mn-e { display: flex; gap: 10px; align-items: center; font-size: 12.5px; }
.mn-e > span:first-child { color: var(--u-subtle); }
.mn-e .g { flex: 1; }
@media (max-width: 560px) { .mn-tiles { grid-template-columns: 1fr 1fr; } }

/* services */
.sv-list { display: grid; gap: 8px; }
.sv { display: grid; grid-template-columns: 1fr auto 70px; gap: 12px; align-items: center; padding: 12px 14px; }
.sv b { font-size: 13px; } .sv small { display: block; color: var(--u-muted); font-size: 11.5px; }
.sv .sv-p { text-align: right; font-size: 14px; }
.sv.off { opacity: .55; }
.sv.fx-fade { display: none; } .sv.fx-fade.on { display: grid; }
.sv-dlg .u-seg { display: flex; margin-top: 4px; width: fit-content; } .sv-dlg .u-seg span { padding: 5px 10px; font-size: 12px; transition: all .25s; }
.sv-dlg .fm-in { font-variant-numeric: tabular-nums; }

/* team chat */
.ch-wrap { display: grid; grid-template-columns: 170px 1fr; margin: -22px; min-height: 420px; }
.ch-side { background: #fff; border-right: 1px solid var(--u-line); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.ch-side .u-lbl { margin: 10px 6px 4px; display: block; } .ch-side .u-lbl:first-child { margin-top: 0; }
.ch-side > span { padding: 6px 10px; border-radius: 8px; font-size: 12.5px; color: #3a3d4a; display: flex; align-items: center; gap: 8px; }
.ch-side > span.on { background: #e9e9ef; font-weight: 700; color: var(--u-fg); }
.ch-side .u-av { width: 20px; height: 20px; font-size: 8.5px; }
.ch-side .u-dot { margin-left: auto; }
.ch-voice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 250px; }
.ch-voice .vp { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-size: 11px; flex: none; }
.ch-voice .wave { display: flex; align-items: center; gap: 2px; height: 30px; flex: 1; }
.ch-voice .wave i { width: 3px; border-radius: 2px; background: rgba(255,255,255,.35); transition: background .15s; }
.ch-voice .wave i.p { background: #fff; }
.ch-voice .vt { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .8; }
.ch-voice .meta { flex-basis: 100%; margin-top: 0; }
.fx .u-compose { font-size: 12.5px; padding: 9px 14px; }
@media (max-width: 560px) { .ch-wrap { grid-template-columns: 1fr; margin: -16px; } .ch-side { display: none; } .ch-voice { min-width: 200px; } }

/* leave */
.lv-top { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; margin-bottom: 12px; }
.lv-clock { padding: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lv-clock small { color: var(--u-muted); font-size: 11.5px; } .lv-clock b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.lv-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px; gap: 8px; }
.lv-stats small { display: block; color: var(--u-muted); font-size: 11px; } .lv-stats b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.lv-req { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; padding: 16px; }
.lv-form > b { display: block; font-size: 14px; margin-bottom: 10px; }
.lv-foot { display: flex; align-items: center; gap: 10px; }
.lv-foot .u-chip { opacity: 0; transition: opacity .3s; } .lv-foot .u-chip.show { opacity: 1; }
.lv-m { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.lv-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; font-size: 11.5px; }
.lv-g em { font-style: normal; color: var(--u-subtle); font-size: 10.5px; font-weight: 600; padding-bottom: 4px; }
.lv-g span { padding: 5px 0; border-radius: 7px; transition: all .2s; font-variant-numeric: tabular-nums; }
.lv-g span.we { color: var(--u-subtle); }
.lv-g span.rng { background: #ece8ff; color: #4b2bb5; border-radius: 0; }
.lv-g span.sel { background: #111; color: #fff; font-weight: 700; }
@media (max-width: 560px) { .lv-top, .lv-req { grid-template-columns: 1fr; } }

/* payslip */
.ps-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.ps-stats .u-card { padding: 12px 14px; } .ps-stats b { font-size: 19px; }
.ps-slip { background: #fff; border: 1px solid var(--u-line); border-radius: 14px; padding: 18px 20px; }
.ps-h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 2px solid #111; }
.ps-t { letter-spacing: .16em; font-size: 12.5px; }
.ps-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ps-info .pend { color: #a15c07; } .ps-info .paid { color: #15803d; }
.ps-slip .iv-l { grid-template-columns: 1fr auto; }
.ps-tot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; font-weight: 700; }
.ps-tot b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ps-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 12px; color: var(--u-muted); gap: 10px; }

/* hiring */
.hr-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; position: relative; }
.hr-col { background: #eceef3; border-radius: 12px; padding: 8px; min-height: 280px; }
.hr-col h6 { margin: 2px 4px 8px; font-size: 11.5px; font-weight: 700; display: flex; justify-content: space-between; }
.hr-col h6 small { background: #e0e1e8; border-radius: 99px; padding: 0 6px; font-size: 10.5px; }
.hr-c b { margin: 0 0 2px !important; font-size: 12px !important; }
.hr-c small { display: block; color: var(--u-muted); font-size: 10.5px; line-height: 1.3; }
.hr-c .u-btn { font-size: 10.5px !important; padding: 5px 9px !important; margin-top: 8px; white-space: normal; text-align: left; }
.hr-c .u-chip { margin-top: 8px; }
.hr-mover { box-shadow: 0 10px 24px -12px rgba(0,0,0,.35); border-color: #d4d4dc; position: relative; z-index: 2; }
@media (max-width: 560px) { .hr-board { grid-template-columns: repeat(5, 118px); overflow: hidden; } }

/* performance */
.pf-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.pf-board .u-row.on { background: #f7f7fa; }
.pf-rank { width: 16px; color: var(--u-subtle); font-weight: 700; font-size: 12px; }
.pf-pts { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pf-me { padding: 16px; }
.pf-ring { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.pf-ring svg { width: 92px; height: 92px; transform: rotate(-90deg); flex: none; }
.pf-ring circle { fill: none; stroke: #e6e7ee; stroke-width: 10; }
.pf-ring circle.fill { stroke: url(#orbit-grad); stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1.4s cubic-bezier(.3,.8,.3,1); }
.pf-ring b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.03em; } .pf-ring small { color: var(--u-muted); font-size: 11.5px; }
.pf-ev > div { display: flex; gap: 8px; align-items: center; font-size: 12px; padding: 7px 0; border-top: 1px solid var(--u-line); }
.pf-ev .u-chip { min-width: 36px; justify-content: center; }
@media (max-width: 700px) { .pf-grid { grid-template-columns: 1fr; } }

/* departments */
.dp-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 330px; }
.dp-lane { background: #eceef3; border-radius: 12px; padding: 10px; }
.dp-lane h6 { margin: 2px 2px 10px; font-size: 13px; font-weight: 700; } .dp-lane h6 small { display: block; font-weight: 500; color: var(--u-muted); font-size: 11px; }
.dp-in { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--u-subtle); margin: 0 2px 6px; }
.dp-slot { min-height: 8px; }
.dp-req { display: none; border: 1.5px solid #d7ccff; }
.dp-req.on { display: block; }
.dp-assign { margin-top: 8px; font-size: 11.5px !important; padding: 6px 12px !important; }
.fx .dp-req .who .r { white-space: normal; }

/* remote */
.rm-clocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.rm-c { display: flex; gap: 9px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: #fff; }
.rm-c b { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.rm-c small { color: var(--ink-3); font-size: .74rem; white-space: nowrap; }
.rm-c .u-av { position: relative; }
.rm-c .u-av::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 8px; height: 8px; border-radius: 50%; background: #c4c6cf; box-shadow: 0 0 0 2px #fff; }
.rm-c.online .u-av::after { background: #16a34a; }
.su-list { display: grid; gap: 8px; }
.su { padding: 12px 14px; display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 10px; align-items: start; }
.su-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .su-h b { font-size: 12.5px; } .su-h small { flex-basis: 100%; color: var(--u-subtle); font-size: 11px; padding-left: 32px; }
.su-q { font-size: 12px; line-height: 1.35; } .su-q small { display: block; color: var(--u-subtle); font-size: 10.5px; font-weight: 600; }
.su-q.blk { color: #a15c07; }
@media (max-width: 700px) { .rm-clocks { grid-template-columns: 1fr 1fr; } .su { grid-template-columns: 1fr 1fr; } .su-h { grid-column: span 2; } .su-q:last-child { grid-column: span 2; } }

/* command bar */
.ck-bg { position: absolute; inset: 0; padding: 22px; filter: blur(1.5px); opacity: .5; }
.ck-ghost { height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--u-line); margin-top: 10px; } .ck-ghost.s { width: 70%; }
.fx[data-fx="cmdk"] .fx-body { background: rgba(15,16,22,.28); min-height: 400px; }
.ck-box { position: relative; background: #fff; border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); overflow: hidden; margin: 10px auto 0; max-width: 520px; }
.ck-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--u-line); font-size: 14px; min-height: 52px; }
.ck-spark { width: 16px; height: 16px; flex: none; background: var(--grad); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2 5.5L19.5 11 14 13l-2 5.5L10 13 4.5 11 10 8.5z' fill='%23000'/%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'%3E%3Cpath d='M12 3l2 5.5L19.5 11 14 13l-2 5.5L10 13 4.5 11 10 8.5z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; }
.ck-sugs { padding: 8px; } .ck-sugs div { padding: 9px 10px; border-radius: 9px; font-size: 12.5px; } .ck-sugs div:first-child { background: #f1f1f5; }
.ck-sugs.gone { display: none; }
.ck-card { display: none; margin: 10px; border: 1px solid var(--u-line); border-radius: 12px; padding: 12px 14px; }
.ck-card.on { display: block; animation: scrIn .35s ease both; }
.ck-t { font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.ck-f { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-top: 1px solid var(--u-line); font-size: 12.5px; }
.ck-f span { color: var(--u-muted); } .ck-f b { display: flex; align-items: center; gap: 6px; } .ck-f .u-av { width: 20px; height: 20px; font-size: 8.5px; }
.ck-card .u-btn { margin-top: 8px; }
.ck-foot { padding: 9px 16px; background: #f7f7fa; color: var(--u-subtle); font-size: 11.5px; border-top: 1px solid var(--u-line); }
.ck-box.done { animation: ckout .5s .1s ease forwards; }
@keyframes ckout { to { opacity: 0; transform: translateY(-8px) scale(.98); } }

/* assistant */
.as-wrap { display: flex; flex-direction: column; min-height: 380px; }
.as-hello { text-align: center; padding: 34px 0 10px; transition: opacity .3s; }
.as-hello h4 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 16px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.as-sugs { display: grid; gap: 8px; max-width: 420px; margin: 0 auto; }
.as-sugs span { border: 1px solid var(--u-line); background: #fff; border-radius: 12px; padding: 10px 12px; font-size: 12.5px; text-align: left; }
.as-hello.gone { display: none; }
.as-chat { display: none; flex-direction: column; gap: 12px; }
.as-chat.on { display: flex; }
.as-ans { display: flex; gap: 10px; opacity: 0; transition: opacity .3s; } .as-ans.show { opacity: 1; }
.as-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--grad); flex: none; animation: pulse 1.2s ease-in-out infinite; }
.as-ans.fin .as-dot { animation: none; }
@keyframes pulse { 50% { transform: scale(.82); opacity: .7; } }
.as-ans p { margin: 0 0 8px; font-size: 13px; }
.as-in { margin-top: auto; display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--u-line); border-radius: 999px; padding: 6px 6px 6px 16px; font-size: 12.5px; }

/* mcp */
.mc-consent { max-width: 380px; margin: 14px auto 0; background: #fff; border: 1px solid var(--u-line); border-radius: 18px; padding: 24px; text-align: center; transition: opacity .3s; }
.mc-consent.gone { display: none; }
.mc-pair { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
.mc-app { width: 52px; height: 52px; border-radius: 14px; background: #d97757; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 11px; }
.mc-app.cq { background: #fff; border: 1px solid var(--u-line); } .mc-app.cq svg { width: 30px; height: 30px; }
.mc-link { display: flex; gap: 4px; } .mc-link i { width: 5px; height: 5px; border-radius: 50%; background: #c4c6cf; animation: dot 1.2s infinite; } .mc-link i:nth-child(2) { animation-delay: .2s; } .mc-link i:nth-child(3) { animation-delay: .4s; }
.mc-consent h4 { font-size: 19px; font-weight: 800; margin: 0 0 8px; }
.mc-consent p { color: var(--u-muted); font-size: 12.5px; margin: 0 0 12px; }
.mc-consent ul { text-align: left; margin: 0 0 16px; padding: 0; list-style: none; font-size: 12px; }
.mc-consent li { padding: 7px 0 7px 22px; border-top: 1px solid var(--u-line); position: relative; }
.mc-consent li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 10px; height: 6px; border: solid #15803d; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.mc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mc-btns .u-btn { justify-content: center; }
.mc-apps { display: none; } .mc-apps.on { display: block; animation: scrIn .4s ease both; }
.mc-log > div { display: flex; gap: 10px; align-items: center; font-size: 12px; padding: 8px 12px; background: #fff; border: 1px solid var(--u-line); border-radius: 10px; margin-bottom: 6px; }
.mc-log code { font: 600 11px/1 ui-monospace, Menlo, monospace; background: #f1ecff; color: #6f3cf0; border-radius: 6px; padding: 4px 6px; flex: none; }

/* branding */
.br-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.br-set { background: #fff; border: 1px solid var(--u-line); border-radius: 14px; padding: 16px; }
.br-h { display: block; font-size: 15px; margin-bottom: 10px; }
.br-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.br-styles div { border: 1.5px solid var(--u-line); border-radius: 12px; padding: 10px; transition: border-color .25s; }
.br-styles div.on { border-color: #111; }
.br-styles b { display: block; font-size: 12.5px; } .br-styles small { color: var(--u-muted); font-size: 11px; line-height: 1.3; display: block; }
.br-sw { display: grid; grid-template-columns: repeat(5, 26px); gap: 8px; }
.br-sw i { width: 26px; height: 26px; border-radius: 50%; transition: box-shadow .2s, transform .2s; }
.br-sw i.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; transform: scale(1.05); }
.br-logo { margin-top: 12px; }
.br-dom { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--u-line); border-radius: 9px; padding: 7px 10px; }
.br-prev { background: #fff; border: 1px solid var(--u-line); border-radius: 14px; overflow: hidden; transition: all .4s; --b: var(--brand); }
.br-prev.clean { --b: #111; }
.br-p-top { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--u-line); }
.br-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--b); color: #fff; display: grid; place-items: center; font-weight: 800; transition: background .4s; }
.br-p-nav { display: flex; gap: 4px; padding: 10px 12px 0; }
.br-p-nav span { padding: 5px 10px; border-radius: 8px; font-size: 11.5px; color: var(--u-muted); }
.br-p-nav span.on { background: color-mix(in srgb, var(--b) 12%, #fff); color: var(--b); font-weight: 700; transition: all .4s; }
.br-p-body { padding: 12px 14px 16px; }
.br-p-body > small { color: var(--u-muted); font-size: 11.5px; }
.br-p-card { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--u-line); border-radius: 10px; padding: 10px 12px; margin: 8px 0 10px; font-size: 12px; }
.br-p-chip { font-size: 10.5px; font-weight: 700; border-radius: 99px; padding: 2px 8px; color: var(--b); background: color-mix(in srgb, var(--b) 12%, #fff); transition: all .4s; white-space: nowrap; }
.br-p-bar { height: 7px; border-radius: 9px; background: #e6e7ee; overflow: hidden; margin-bottom: 12px; } .br-p-bar i { display: block; height: 100%; width: 64%; background: var(--b); transition: background .4s; }
.br-p-btn { display: inline-flex; background: var(--b); color: #fff; border-radius: 99px; padding: 8px 16px; font-weight: 600; font-size: 12px; transition: background .4s; }
@media (max-width: 700px) { .br-grid { grid-template-columns: 1fr; } }

/* ── Hero replica extras (inside the scaled .ui) ──────────────────────── */
.ui .u-task.lifted { box-shadow: 0 18px 40px -12px rgba(0,0,0,.28); z-index: 5; position: relative; }
.ui .u-task { transition: box-shadow .3s; }
.ui .u-badge { font-size: 12px; }
.ui .h-proj { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ui .h-pc { padding: 18px 20px; }
.ui .h-pc small { color: var(--u-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ui .h-pc b { display: block; font-size: 18px; letter-spacing: -.02em; margin: 2px 0 14px; }
.ui .h-pbar { height: 8px; border-radius: 9px; background: #e6e7ee; overflow: hidden; }
.ui .h-pbar i { display: block; height: 100%; width: 0; background: #111; border-radius: 9px; transition: width 1.1s cubic-bezier(.3,.8,.3,1); }
.ui .h-pm { display: flex; justify-content: space-between; color: var(--u-muted); font-size: 12.5px; margin-top: 8px; }
.ui .h-pp { display: flex; margin-top: 14px; } .ui .h-pp .u-av { width: 28px; height: 28px; font-size: 11px; box-shadow: 0 0 0 2px #fff; } .ui .h-pp .u-av + .u-av { margin-left: -6px; }
.ui .h-live .u-row { padding: 18px; }
.ui .h-lb::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; animation: pulse 1.2s infinite; }
.ui .h-lt { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 110px; text-align: right; }
.ui .ui-top .timer { font-variant-numeric: tabular-nums; }
.ui .ui-side.portal .ui-item { padding: 9px 14px; }
.ui .ui-side.portal .ui-item.on::before { background: #0f766e; }
.ui .ui-side.portal .ui-item.on { background: #e3f1ef; color: #0f766e; }
.ui .ui-ws i.brand { background: #0f766e; }
.ui.is-portal .u-btn:not(.ghost) { background: #0f766e; }
.ui .h-thumb { width: 64px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, #1e1b2e, #3b3551); flex: none; } .ui .h-thumb.s { background: linear-gradient(135deg, #e9e4d8, #d9d2c2); }
.ui .h-file { display: flex; gap: 10px; align-items: center; } .ui .h-file b { display: block; } .ui .h-file small { opacity: .7; font-size: 12px; }
.ui .h-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.ui .h-tabs span { padding: 6px 12px; border-radius: 99px; color: var(--u-muted); font-size: 13px; background: #fff; border: 1px solid var(--u-line); }
.ui .h-tabs span.on { background: #111; color: #fff; border-color: #111; }
.ui .h-cert { margin-top: 16px; padding: 18px 20px; max-width: 460px; }
.ui .h-cr { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--u-line); font-size: 13px; } .ui .h-cr span { color: var(--u-muted); }
.ui .u-stats.h-4 { grid-template-columns: repeat(4, 1fr); }
.ui .h-tbl { overflow: hidden; } .ui .h-tbl table { font-size: 13.5px; } .ui .h-tbl td, .ui .h-tbl th { padding: 13px 16px; }
.ui .h-tr { opacity: 0; transition: opacity .4s; } .ui .h-tr.on { opacity: 1; }
.ui .u-cols.h-5 { grid-template-columns: repeat(5, 1fr); }
.ui .h-foot { padding: 10px 18px; background: #f7f7fa; color: var(--u-subtle); font-size: 12px; border-top: 1px solid var(--u-line); }
.ui .h-ai { display: flex; flex-direction: column; gap: 16px; height: 100%; max-width: 760px; margin: 0 auto; }
.ui .h-ai-t { font-size: 26px; font-weight: 800; letter-spacing: -.03em; text-align: center; margin: 10px 0 10px; }
.ui .h-ai-a { background: #fff; border: 1px solid var(--u-line); border-radius: 16px; padding: 16px 18px; min-height: 130px; font-size: 14.5px; line-height: 1.55; }
.ui .h-ai-a p { margin: 0 0 8px; }
.ui .h-sty { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ui .h-sty div { border: 1.5px solid var(--u-line); border-radius: 12px; padding: 12px; } .ui .h-sty div.on { border-color: #111; }
.ui .h-sty b { display: block; } .ui .h-sty small { color: var(--u-muted); font-size: 12px; }
.ui .h-sw { display: flex; gap: 10px; flex-wrap: wrap; } .ui .h-sw i { width: 30px; height: 30px; border-radius: 50%; transition: box-shadow .2s; } .ui .h-sw i.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; }
.ui .h-prev { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; }
.ui .h-link { font-weight: 600; }
.ui .h-dom { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--u-line); border-radius: 10px; padding: 10px 12px; font-weight: 600; }
.ui.branded .ui-item.on::before { background: var(--brand); transition: background .4s; }
.ui.branded .ui-item.on { color: var(--brand); }
.ui.branded .u-btn:not(.ghost) { background: var(--brand); transition: background .4s; }
.ui.branded .h-link { color: var(--brand); }
.ui.branded .h-prev .u-chip { background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--brand); }
.ui.compact .u-cols.h-5 { grid-template-columns: repeat(4, 1fr); } .ui.compact .u-cols.h-5 .u-col:last-child { display: none; }
.ui.compact .h-proj { grid-template-columns: 1fr 1fr; }
.ui.compact .u-stats.h-4 { grid-template-columns: 1fr 1fr; }
.ui.compact .h-tbl th:nth-child(4), .ui.compact .h-tbl td:nth-child(4), .ui.compact .h-tbl th:nth-child(6), .ui.compact .h-tbl td:nth-child(6) { display: none; }
.ui.compact .u-row .u-btn.ghost { display: none; }
@media (prefers-reduced-motion: reduce) { .fx-ptr { display: none; } }
.ui .ui-item svg { width: 16px; height: 16px; flex: none; }
.ui .ui-top .search svg, .ui .ui-top .bell svg { stroke: currentColor; }
.pj-sheet th, .pj-sheet td { padding: 9px 10px; }
@media (max-width: 1280px) { .pj-sheet .hm { display: none; } }
.fs.flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr); }
.fx-dialog.on { box-shadow: 0 30px 80px -20px rgba(0,0,0,.45), 0 0 0 1px var(--u-line), 0 0 0 2000px rgba(15, 16, 22, .22); }
@media (max-width: 920px) { .fs.flip { grid-template-columns: 1fr; } }
.ct-card.sel { box-shadow: 0 0 0 2px #111; }
.ct-detail { margin-top: 10px; padding: 14px 16px; }
.ct-dh { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .ct-dh b { display: block; } .ct-dh small { color: var(--u-muted); font-size: 11.5px; } .ct-dh .u-chip { margin-left: auto; }
.ct-f { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--u-line); font-size: 12.5px; } .ct-f span { color: var(--u-muted); } .ct-f b { font-weight: 500; }
.iv-stamp { right: auto; left: 46%; top: 30px; transform: translate(-50%, 0) rotate(-8deg) scale(2); }
.iv-stamp.on { transform: translate(-50%, 0) rotate(-8deg) scale(1); }
.fx .u-seg { flex: none; }
.fx .u-seg span { white-space: nowrap; padding: 5px 10px; font-size: 12px; }
.fx-head { flex-wrap: wrap; }
.ui .h-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.ui .h-flow .u-card { padding: 18px 20px; font-weight: 500; }
.ck-f .u-av { font-size: 9px !important; }
.ov-mod.flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
@media (max-width: 980px) { .ov-mod.flip { grid-template-columns: 1fr; } }
/* Offer: light, so it doesn't compete with the final dark CTA */
.ov-offer { background: #fffbea; color: var(--ink); border: 1px solid #f5dc8a; }
.ov-offer::before { border-color: #f5e3a3; }
.ov-offer h2 { color: var(--ink); }
.ov-offer h2 em { color: var(--ink); background: linear-gradient(transparent 62%, var(--sun) 62%); padding: 0 .08em; }
.ov-offer p { color: var(--ink-2); }
.ov-offer .ov-offer-tag { color: var(--ink) !important; }
.ov-offer .btn-primary { background: var(--ink); color: #fff; }
.ov-offer .btn-ghost { color: var(--ink); border-color: #e0c870; }
.ov-offer .btn-ghost:hover { border-color: var(--ink); }
.ov-plan { background: #fff; border-color: #f0e2b0; }
.ov-plan.pop { border-color: var(--ink); box-shadow: 0 10px 30px -18px rgba(11,11,15,.4); }
.ov-plan small { color: var(--ink-3); }
.ov-plan .pr s { color: var(--ink-3); }
.ov-offer + * { }
@media (max-width: 920px) { .fs, .fs.flip { grid-template-columns: minmax(0, 1fr); } .fs-view { min-width: 0; } }
@media (max-width: 980px) { .ov-mod, .ov-mod.flip { grid-template-columns: minmax(0, 1fr); } }
.fx { max-width: 100%; }
.fx table { table-layout: auto; }
.tm-table, .wo-grid, .mn-table, .pj-sheet { overflow-x: hidden; }
@media (max-width: 560px) {
  .fx th, .fx td { padding: 8px 6px; font-size: 11px; }
  .fx th:first-child, .fx td:first-child { padding-left: 10px; }
  .fx td .u-av { display: none; }
  .pj-sheet th:nth-child(3), .pj-sheet td:nth-child(3) { display: none; }
  .mn-table th:nth-child(3), .mn-table td:nth-child(3) { display: none; }
}
@media (max-width: 560px) { .iv-stamp { display: none; } }

/* Your own storage */
.st-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; }
.st-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.st-card { display: flex; gap: 10px; align-items: center; border: 1px solid var(--u-line); background: #fff; border-radius: 12px; padding: 10px; transition: box-shadow .2s, border-color .2s; }
.st-card.on { border-color: #111; box-shadow: 0 0 0 3px rgba(17,17,17,.08); }
.st-card b { display: block; font-size: 12.5px; } .st-card small { color: #5d6070; font-size: 11px; }
.st-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #111; color: #fff; font-weight: 800; font-size: 11px; }
.st-gd { background: #1a73e8; } .st-od { background: #0364b8; } .st-db { background: #0061fe; } .st-s3 { background: #d97706; } .st-r2 { background: #f38020; } .st-nas { background: #334155; }
.st-check { padding: 14px; opacity: .45; transition: opacity .3s; display: grid; gap: 8px; align-content: start; }
.st-check.on { opacity: 1; }
.st-h { font-size: 13px; } .st-h small { display: block; color: #5d6070; font-weight: 500; }
.st-step { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; color: #5d6070; }
.st-step i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #cfd0d8; }
.st-step.ok { color: #111; } .st-step.ok i { background: #15803d; border-color: #15803d; box-shadow: inset 0 0 0 3px #fff; }
.st-step small { color: #8a8c99; font-size: 11px; font-variant-numeric: tabular-nums; }
.st-route { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; border-top: 1px solid var(--u-line); padding-top: 10px; margin-top: 2px; }
.st-check .u-chip { justify-self: start; }
/* Encrypted backups */
.bp-key { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; }
.bp-key b { display: block; font-size: 13.5px; } .bp-key small { color: #5d6070; font-size: 12px; }
.bp-key.done { border-color: #15803d; background: #f0fdf4; }
.bp-file { display: none; gap: 10px; align-items: center; margin: 10px 0 0; border: 1px dashed #cfd0d8; border-radius: 12px; padding: 10px 12px; }
.bp-file.on { display: flex; } .bp-file .st-ic { width: 38px; font-size: 9.5px; background: #fbbf24; color: #111; }
.bp-file b { display: block; font-size: 12.5px; } .bp-file small { color: #5d6070; font-size: 11px; }
.bp-list { margin-top: 12px; display: grid; gap: 6px; }
.bp-row { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 10px; align-items: center; border: 1px solid var(--u-line); background: #fff; border-radius: 12px; padding: 10px 12px; font-size: 12.5px; }
.bp-row span:not(.u-chip) { color: #5d6070; } .bp-row small { grid-column: 1 / -1; color: #8a8c99; font-size: 11px; }
@media (max-width: 640px) { .st-grid { grid-template-columns: 1fr; } }