:root{
  --bg:#fdfbf8;--rail:#f7f3ed;--panel:#fff;--soft:#f5f1ea;--soft2:#efe9df;--line:#efeae2;--line2:#e3ddd3;
  --ink:#0d0d0d;--ink2:#303030;--muted:#5d5d5d;--muted2:#8f8f8f;--btn:#0d0d0d;--btnInk:#fff;--btnHover:#303030;
  --ok:#1f8a5b;--okSoft:#e4f3ea;--warn:#a86a00;--warnSoft:#fbf0dc;--bad:#c0392b;--badSoft:#fbe9e6;
  --kovi:#2d5bd7;--font:'Instrument Sans',system-ui,sans-serif;
  --spectrum:conic-gradient(#2d5bd7,#7a4fd0,#e03e6b,#e8613c,#f0a92c,#1fa386,#2d5bd7);
}
[data-theme="dark"]{
  --bg:#151413;--rail:#1a1917;--panel:#1f1e1c;--soft:#262422;--soft2:#2e2b28;--line:#2c2a27;--line2:#3a3733;
  --ink:#f3f0ea;--ink2:#d9d5ce;--muted:#a39e96;--muted2:#7d7871;--btn:#f3f0ea;--btnInk:#0d0d0d;--btnHover:#d9d5ce;
  --okSoft:#1d3328;--ok:#5fd09a;--warnSoft:#3a2f1a;--warn:#f0b54a;--badSoft:#3a201d;--bad:#ff8a7a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
button{font-family:var(--font);cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
input,textarea{font-family:var(--font);color:var(--ink)}
::placeholder{color:var(--muted2)}
canvas.kovi{display:block;width:100%;height:100%}
@keyframes kspin{to{transform:rotate(360deg)}}
@keyframes krise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes kbounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
@keyframes kpulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes kbuild{0%,8%{transform:scaleX(0);opacity:0}30%,88%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes kslide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}

.app{display:flex;height:100vh;height:100dvh;overflow:hidden}
.icon{width:36px;height:36px;border-radius:10px;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--ink2)}
.icon:hover{background:var(--soft)}
.only-sm{display:none}
.kv{display:inline-block;width:28px;height:28px;flex:none}
.kv.big{width:72px;height:72px}

/* rail */
.rail{width:264px;flex:none;background:var(--rail);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 12px;gap:6px;position:relative}
.rail-top{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 10px}
.brand{display:flex;align-items:center;gap:9px}
.brand b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.new-chat{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);font-size:14px;font-weight:600}
.new-chat:hover{border-color:var(--muted2)}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.nav a{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink2)}
.nav a:hover{background:var(--soft)}
.nav a.on{background:var(--soft2);color:var(--ink);font-weight:600}
.recent{flex:1;min-height:0;overflow-y:auto;margin-top:16px;display:flex;flex-direction:column;gap:2px}
.recent small{padding:0 12px 6px;font-size:12px;font-weight:600;color:var(--muted2)}
.recent button{text-align:left;border:0;background:transparent;padding:8px 12px;border-radius:10px;font-size:13.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent button:hover{background:var(--soft)}
.rail-bottom{position:relative;display:flex;align-items:center;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.me{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:6px;border-radius:12px;text-align:left}
.me:hover{background:var(--soft)}
.avatar{width:32px;height:32px;flex:none;border-radius:50%;background:var(--btn);color:var(--btnInk);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.avatar.lg{width:56px;height:56px;font-size:19px}
.me-t{min-width:0;display:flex;flex-direction:column}
.me-t b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-t small{font-size:12px;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sun{display:none}[data-theme="dark"] .sun{display:block}[data-theme="dark"] .moon{display:none}
.me-menu{position:absolute;left:0;right:0;bottom:56px;background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:6px;display:none;flex-direction:column;z-index:10}
.me-menu.open{display:flex;animation:krise .2s ease both}
.me-menu a,.me-menu button{display:block;text-align:left;border:0;background:transparent;padding:9px 12px;border-radius:9px;font-size:14px}
.me-menu a:hover,.me-menu button:hover{background:var(--soft)}
.scrim{display:none}

/* main */
.main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.topbar{display:none;align-items:center;gap:8px;height:52px;padding:0 10px;border-bottom:1px solid var(--line)}
.topbar b{font-size:15px;font-weight:600}
.view{display:none;flex:1;min-height:0}
.view.on{display:flex}

/* chat */
.chat-col{flex:1;min-width:0;display:flex;flex-direction:column}
.chat-scroll{flex:1;overflow-y:auto;padding:32px 20px 12px}
.chat-col.is-empty{justify-content:center}
.chat-col.is-empty .chat-scroll{flex:0 0 auto;overflow:visible;padding-bottom:20px}
.empty{max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.empty h1{margin:0;font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.025em}
.empty p{margin:0;font-size:15px;color:var(--muted)}
.chat-col:not(.is-empty) .empty{display:none}
.thread{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.m-you{align-self:flex-end;max-width:80%;padding:11px 16px;border-radius:20px;background:var(--soft2);font-size:15px;line-height:1.5;animation:krise .3s ease both;white-space:pre-wrap}
.m-kovi{display:flex;gap:12px;align-items:flex-start;animation:krise .3s ease both}
.m-dot{width:26px;height:26px;flex:none;border-radius:50%;background:var(--kovi);margin-top:1px}
.m-body{min-width:0;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.6;color:var(--ink)}
.m-body p{margin:0}
.art-chip{align-self:flex-start;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:14px;border:1px solid var(--line2);background:var(--panel);text-align:left;max-width:100%}
.art-chip:hover{border-color:var(--muted2)}
.art-chip i{width:34px;height:34px;flex:none;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:15px}
.art-chip b{display:block;font-size:14px;font-weight:600}
.art-chip small{font-size:12.5px;color:var(--muted2)}
.dots{display:flex;gap:4px;padding:8px 0}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--muted2);animation:kbounce 1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
.composer-wrap{padding:8px 20px 22px;display:flex;flex-direction:column;gap:12px;align-items:center}
.chips{width:100%;max-width:720px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chat-col:not(.is-empty) .chips{display:none}
.chip{padding:7px 13px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);font-size:13.5px;font-weight:500;color:var(--ink2)}
.chip:hover{border-color:var(--muted2);color:var(--ink)}
.ring{position:relative;width:100%;max-width:720px;padding:1.5px;border-radius:22px;isolation:isolate}
.ring .spin{position:absolute;left:50%;top:50%;width:200vmax;height:200vmax;margin:-100vmax 0 0 -100vmax;background:var(--spectrum);animation:kspin 6s linear infinite}
.ring .edge{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.ring .glow{position:absolute;inset:-10px;border-radius:32px;overflow:hidden;filter:blur(18px);opacity:.22;z-index:-1;pointer-events:none;transition:opacity .3s}
.ring.on .glow{opacity:.45}
.composer{position:relative;display:flex;align-items:flex-end;gap:10px;padding:10px 10px 10px 18px;border-radius:21px;background:var(--panel)}
.composer textarea{flex:1;resize:none;border:0;outline:none;background:transparent;font-size:16px;line-height:1.5;max-height:180px;min-height:38px;padding:7px 0;box-sizing:border-box}
.send{width:38px;height:38px;flex:none;border-radius:50%;border:0;background:var(--btn);color:var(--btnInk);display:flex;align-items:center;justify-content:center}
.send:disabled{opacity:.3;cursor:default}

/* artifact */
.artifact{width:min(480px,44%);flex:none;border-left:1px solid var(--line);background:var(--panel);display:none;flex-direction:column}
.artifact.open{display:flex;animation:kslide .3s cubic-bezier(.2,.8,.2,1) both}
.art-head{display:flex;align-items:center;justify-content:space-between;gap:10px;height:56px;padding:0 10px 0 20px;border-bottom:1px solid var(--line)}
.art-head b{font-size:15px;font-weight:600}
.art-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px}
.search{display:flex;gap:8px}
.search input{flex:1;min-width:0;height:42px;border-radius:12px;border:1px solid var(--line2);background:var(--bg);padding:0 14px;font-size:15px;outline:none}
.search input:focus{border-color:var(--muted)}
.list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.li{display:flex;align-items:center;gap:12px;padding:13px 14px;border-top:1px solid var(--line)}
.li:first-child{border-top:0}
.li .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.li b{font-size:15px;font-weight:600}
.li small{font-size:13px;color:var(--muted2)}
.li .price{font-size:14px;font-weight:600}
.steps{display:flex;flex-direction:column;gap:2px}
.st{display:flex;gap:12px;align-items:flex-start;padding:12px 0}
.st i{width:24px;height:24px;flex:none;border-radius:50%;border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:700}
.st.done i{border:0;background:var(--okSoft);color:var(--ok)}
.st.active i{border-color:var(--ink);position:relative}
.st.active i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink);animation:kpulse .9s infinite}
.st b{display:block;font-size:14.5px;font-weight:600}
.st small{font-size:13px;color:var(--muted)}
.st:not(.done):not(.active){color:var(--muted2)}
.note{padding:12px 14px;border-radius:12px;background:var(--soft);font-size:13.5px;line-height:1.5;color:var(--ink2)}
.plan-opts{display:flex;flex-direction:column;gap:8px}
.plan-opt{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;border:1.5px solid var(--line2);background:transparent;text-align:left}
.plan-opt.on{border-color:var(--ink)}
.plan-opt .rad{width:18px;height:18px;flex:none;border-radius:50%;border:1.5px solid var(--line2)}
.plan-opt.on .rad{border:5px solid var(--ink)}
.plan-opt .t{flex:1;display:flex;flex-direction:column;gap:2px}
.plan-opt b{font-size:15px}.plan-opt small{font-size:13px;color:var(--muted)}
.plan-opt .p{font-size:15px;font-weight:600}
.mini{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.mini-bar{display:flex;gap:5px;padding:9px 12px;background:var(--soft);border-bottom:1px solid var(--line)}
.mini-bar i{width:8px;height:8px;border-radius:50%;background:var(--line2)}
.mini-site{padding:18px;display:flex;flex-direction:column;gap:12px;background:#fbf6ee;color:#2a2119;min-height:220px}
.bar{display:block;border-radius:4px;transform-origin:left;animation:kbuild 3.6s ease infinite}
.inv{border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:14px}
.inv-row{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.inv-row span{color:var(--muted)}
.inv hr{border:0;height:1px;background:var(--line);margin:0}
.success{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:20px 0}
.success .ok{width:52px;height:52px;border-radius:50%;background:var(--okSoft);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700}
.success b{font-size:18px}.success small{font-size:14px;color:var(--muted)}

/* pages */
.page{overflow-y:auto}
.page-in{width:100%;max-width:1040px;margin:0 auto;padding:40px 28px 80px;display:flex;flex-direction:column;gap:28px}
.page-in.narrow{max-width:720px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.page-head h1{margin:0;font-size:28px;font-weight:600;letter-spacing:-.025em}
.page-head p{margin:6px 0 0;font-size:15px;color:var(--muted)}
.block{display:flex;flex-direction:column;gap:14px}
.block-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.block h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 16px;border-radius:999px;border:0;background:var(--btn);color:var(--btnInk);font-size:14px;font-weight:600;white-space:nowrap}
.btn:hover{background:var(--btnHover)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2)}
.btn.ghost:hover{border-color:var(--muted2);background:transparent}
.btn.sm{height:32px;padding:0 12px;font-size:13px}
.btn.full{width:100%;height:44px}
.btn:disabled{opacity:.5;cursor:default}
.link{border:0;background:transparent;padding:0;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--soft);color:var(--ink2);white-space:nowrap}
.pill.ok{background:var(--okSoft);color:var(--ok)}.pill.warn{background:var(--warnSoft);color:var(--warn)}
.pill.ok::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.sites-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.site{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.site-thumb{height:150px;padding:18px 18px 0;display:flex;background:var(--tint)}
.site-thumb .w{flex:1;background:#fff;border-radius:10px 10px 0 0;padding:12px;display:flex;flex-direction:column;gap:8px;color:#1d1d1f}
.site-thumb .w b{font-size:11px}
.site-thumb .w h4{margin:0;font-size:17px;font-weight:600;line-height:1.05;letter-spacing:-.02em;max-width:12ch}
.site-thumb .w span{flex:1;border-radius:6px;background:var(--tint);opacity:.6}
.site-body{padding:16px;display:flex;flex-direction:column;gap:12px}
.site-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.site-top b{display:block;font-size:16px;font-weight:600}
.site-top small{font-size:13px;color:var(--muted2);word-break:break-all}
.site-actions{display:flex;gap:8px}
.site.add{align-items:center;justify-content:center;gap:10px;min-height:260px;border-style:dashed;border-color:var(--line2);background:transparent;color:var(--muted)}
.site.add:hover{border-color:var(--muted2);color:var(--ink)}
.site.add i{width:44px;height:44px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:22px}
.table{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.card .table{border-radius:14px}
.tr{display:grid;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--line);font-size:14px}
.tr:first-child{border-top:0}
.tr.th{font-size:12px;font-weight:600;color:var(--muted2);padding-top:12px;padding-bottom:12px;background:var(--soft)}
.dom .tr{grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr) auto minmax(0,.9fr) auto auto}
.inv-t .tr{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto auto auto}
.tr b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.tr .m{color:var(--muted)}
.switch{width:40px;height:24px;flex:none;border-radius:999px;border:0;background:var(--line2);position:relative;transition:background .2s;padding:0}
.switch i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.switch[aria-checked="true"]{background:var(--ok)}
.switch[aria-checked="true"] i{transform:translateX(16px)}
.form{display:flex;flex-direction:column;gap:14px}
.f{display:flex;flex-direction:column;gap:6px}
.f > span{font-size:13px;font-weight:600;color:var(--ink2)}
.f input{height:44px;border-radius:12px;border:1px solid var(--line2);background:var(--bg);padding:0 14px;font-size:15px;outline:none;width:100%}
.f input:focus{border-color:var(--muted)}
.f.bad input{border-color:var(--bad)}
.err{font-size:12.5px;color:var(--bad);min-height:0}
.err:empty{display:none}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-actions{display:flex;justify-content:flex-end}
.profile-row{display:flex;align-items:center;gap:14px}
.profile-row b{display:block;font-size:16px}.profile-row small{font-size:14px;color:var(--muted)}
.row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.row b{display:block;font-size:14.5px;font-weight:600}.row small{font-size:13px;color:var(--muted)}
.sub-h{font-size:13px;font-weight:600;color:var(--muted2);margin-top:6px}
.sess{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.sess .t{flex:1}.sess b{display:block;font-size:14.5px;font-weight:600}.sess small{font-size:13px;color:var(--muted)}
.muted{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.danger{border-color:var(--badSoft)}
.danger-btn{background:transparent;color:var(--bad);border:1px solid var(--bad)}
.danger-btn:hover{background:var(--badSoft)}
.danger-btn.solid{background:var(--bad);color:#fff}
.del-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--btn);color:var(--btnInk);padding:10px 16px;border-radius:999px;font-size:14px;font-weight:500;transition:all .25s;z-index:200}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:1100px){
  .artifact{position:absolute;inset:0;width:auto;z-index:15;border-left:0}
}
@media (max-width:860px){
  .only-sm{display:inline-flex}
  .topbar{display:flex}
  .rail{position:fixed;top:0;bottom:0;left:0;z-index:50;transform:translateX(-100%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .rail.open{transform:none}
  .scrim.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:40}
  .page-in{padding:24px 16px 60px}
  .two-col{grid-template-columns:1fr}
  .dom .tr{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .dom .tr.th{display:none}
  .dom .tr > :nth-child(2),.dom .tr > :nth-child(4){grid-column:1}
  .inv-t .tr{grid-template-columns:minmax(0,1fr) auto auto}
  .inv-t .tr > :nth-child(2),.inv-t .tr.th{display:none}
  .inv-t .tr > :nth-child(4){display:none}
}

/* in-panel builder */
.artifact.wide{width:min(62%,940px)}
.artifact.wide .art-body{padding:14px 16px 16px;gap:12px}
.m-opts{display:flex;gap:8px;flex-wrap:wrap}
.bld-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.seg{display:flex;padding:3px;border-radius:999px;background:var(--soft);font-size:13px;font-weight:600}
.seg button{padding:6px 12px;border-radius:999px;border:0;background:transparent;color:var(--muted);font:inherit}
.seg button.on{background:var(--panel);color:var(--ink)}
.vers{display:flex;gap:4px;flex-wrap:wrap}
.vers button{height:30px;min-width:34px;padding:0 9px;border-radius:999px;border:0;background:transparent;color:var(--muted);font-size:12.5px;font-weight:600}
.vers button.on{background:var(--btn);color:var(--btnInk)}
.frame{flex:1;min-height:420px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--soft)}
.frame-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--soft);border-bottom:1px solid var(--line);font-size:12px;color:var(--muted2)}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.frame-bar span{margin-left:8px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame-bar b{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--muted)}
.frame-bar b::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.frame-bar b.busy{color:var(--warn)}
.frame-view{flex:1;min-height:0;overflow-y:auto;display:flex;justify-content:center;background:var(--soft2)}
/* The real preview is an iframe, which must not inherit the flex
   centring meant for the mock markup. */
iframe.frame-view{display:block;width:100%;border:0;background:#fff}
/* Kovi is regenerating the page: the old one stays visible, dimmed. */
.frame{position:relative}
.frame-busy{position:absolute;inset:33px 0 0;display:flex;align-items:center;justify-content:center;gap:10px;background:color-mix(in srgb,var(--soft2) 72%,transparent);backdrop-filter:blur(2px);font-size:14px;font-weight:600;color:var(--ink,#222)}
.frame-busy .kv-dot{animation:kvPulse 1.2s ease-in-out infinite}
@keyframes kvPulse{50%{transform:scale(.6);opacity:.5}}
.bld-hint{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.kv-dot{width:10px;height:10px;border-radius:50%;background:var(--kovi);flex:none}

.game{position:relative;flex:1;min-height:380px;background:var(--panel);overflow:hidden;touch-action:manipulation}
.game canvas{position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.game-top{position:absolute;left:16px;right:16px;top:14px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.prog{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.prog i{display:block;height:100%;background:var(--btn);transition:width .6s ease}
.game-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)}
.game-row b{font-weight:600;color:var(--ink)}
.game-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:15px;font-weight:600;color:var(--muted2);pointer-events:none;transition:opacity .4s}
.game-hint.gone{opacity:0}

.pv{width:100%;align-self:flex-start;min-height:100%;transition:max-width .4s cubic-bezier(.2,.8,.2,1),background .5s,color .5s;font-family:var(--font)}
.pv.mobile{max-width:375px}
.pv > *{animation:krise .45s ease both}
.pv [data-edit]{cursor:pointer;border-radius:6px;outline:2px solid transparent;outline-offset:3px;transition:outline-color .15s}
.pv [data-edit]:hover{outline-color:rgba(45,91,215,.55)}
.pv [data-edit].sel{outline-color:#2d5bd7}
.pv-nav,.pv-hero,.pv-pad,.pv-cards,.pv-foot{padding-left:clamp(16px,3vw,32px);padding-right:clamp(16px,3vw,32px)}
.pv-nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding-top:18px;padding-bottom:18px}
.pv-nav b{font-size:19px;font-weight:700}
.pv-nav div{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:500}
.pv-nav div span{opacity:.75}.pv-nav .pv-btn{opacity:1;padding:7px 14px;border-radius:999px;font-weight:700}
.pv-hero{padding-top:clamp(20px,4vw,48px);padding-bottom:24px;display:flex;flex-direction:column;gap:14px}
.pv-hero h3{margin:0;line-height:1.02;letter-spacing:-.03em;max-width:16ch;text-wrap:balance;transition:all .4s}
.pv-hero p{margin:0;font-size:15px;line-height:1.55;opacity:.75;max-width:42ch}
.pv-ctas{display:flex;gap:10px;flex-wrap:wrap;font-size:14px;font-weight:700}
.pv-ctas span{padding:11px 18px;border-radius:999px}
.pv-ctas .ghost{border:1.5px solid currentColor;opacity:.7}
.pv-img{height:clamp(140px,20vw,230px);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:13px;opacity:.95}
.pv-cards{padding-top:20px;padding-bottom:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.pv-cards div,.pv-block{padding:16px;border-radius:16px;display:flex;flex-direction:column;gap:8px}
.pv-cards b{font-size:17px}.pv-cards i{height:6px;border-radius:3px;background:currentColor;opacity:.15}
.pv-block{margin:0 clamp(16px,3vw,32px) 18px;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap}
.pv-block.col{flex-direction:column;align-items:stretch}
.pv-block b{font-size:20px}
.pv-slots{display:flex;gap:8px;flex-wrap:wrap;font-size:12.5px;font-weight:600}
.pv-slots span{padding:7px 12px;border-radius:999px;border:1.5px solid currentColor;opacity:.6}
.pv-pricing{padding-bottom:20px;display:flex;flex-direction:column;gap:12px}
.pv-pricing > b{font-size:22px}
.pv-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.pv-tiers div{padding:14px;border-radius:14px;border:1.5px solid currentColor;display:flex;flex-direction:column;gap:4px}
.pv-tiers b{font-size:24px}
.pv-field{height:38px;border-radius:10px}.pv-field.tall{height:70px}
.pv-chat{margin:0 clamp(16px,3vw,32px) 18px;display:flex;justify-content:flex-end}
.pv-chat span{display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;font-size:13px;font-weight:700}
.pv-chat i{width:8px;height:8px;border-radius:50%;background:#1fa386}
.pv-foot{padding-top:16px;padding-bottom:16px;display:flex;justify-content:space-between;font-size:12px;opacity:.55;border-top:1px solid currentColor}

.pop{position:fixed;z-index:60;background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 18px 40px -18px rgba(0,0,0,.35);animation:krise .18s ease both}
.pop small{font-size:12px;font-weight:600;color:var(--muted)}
.pop form{display:flex;gap:6px}
.pop input{flex:1;min-width:0;height:38px;border-radius:10px;border:1px solid var(--line2);background:var(--bg);padding:0 12px;font-size:14px;outline:none}
.pop input:focus{border-color:var(--muted)}
.pop form button{width:38px;height:38px;flex:none;border-radius:50%;border:0;background:var(--btn);color:var(--btnInk);font-weight:700}
.pop-chips{display:flex;gap:6px;flex-wrap:wrap}
.pop-chips button{padding:6px 10px;border-radius:999px;border:1px solid var(--line2);background:transparent;font-size:12.5px;font-weight:500;color:var(--ink2)}
.pop-chips button:hover{border-color:var(--muted2);color:var(--ink)}

.game-hint{white-space:nowrap}
@media (max-width:1100px){.artifact.wide{width:auto}}

/* version dropdown */
.ver-dd{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.ver-dd select{height:34px;max-width:260px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);padding:0 30px 0 12px;font-family:var(--font);font-size:13px;font-weight:600;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238f8f8f' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.ver-dd select:focus{outline:none;border-color:var(--muted)}
/* attachments */
.composer{flex-wrap:wrap}
.att,.pop-att{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 6px;border-radius:12px;background:var(--soft);font-size:13px;color:var(--ink2);max-width:100%}
.att{flex-basis:100%;margin:0 0 2px -8px}
.att[hidden],.pop-att[hidden]{display:none}
.att img,.pop-att img{width:40px;height:40px;flex:none;border-radius:8px;object-fit:cover}
.att span,.pop-att span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att button,.pop-att button{width:26px;height:26px;flex:none;border-radius:50%;border:0;background:var(--panel);font-size:16px;line-height:1;color:var(--muted)}
.clip,.pop-clip{width:38px;height:38px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;margin-left:-8px}
.clip:hover,.pop-clip:hover{background:var(--soft);color:var(--ink)}
.pop-clip{width:38px;margin-left:0;border:1px solid var(--line2)}
.m-img{display:block;max-width:220px;max-height:180px;border-radius:12px;margin-bottom:8px;object-fit:cover}
.pv-logo{width:26px;height:26px;border-radius:6px;object-fit:cover;vertical-align:-6px;margin-right:8px}

/* pinned Kovi */
.chat-col{position:relative}
.kovi-top{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.chat-col.is-empty .kovi-top{display:none}
.kt-orb{width:68px;height:68px;border-radius:50%;background:var(--panel);border:1px solid var(--line);padding:7px;box-shadow:0 10px 28px -14px rgba(0,0,0,.3)}
.kt-pill{position:relative;margin-top:-12px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line);box-shadow:0 8px 20px -14px rgba(0,0,0,.3);transition:padding .25s,border-radius .25s}
.kt-pill b{font-size:13px;font-weight:600}
.kt-pill small{display:none;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.kt-pill small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--kovi);animation:kpulse 1s ease-in-out infinite}
.kt-pill.active{padding:6px 18px;border-radius:16px}
.kt-pill.active small{display:flex}
.chat-col:not(.is-empty) .chat-scroll{padding-top:128px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 120px);mask-image:linear-gradient(to bottom,transparent 0,#000 120px)}
/* messages */
.t-div{text-align:center;font-size:12.5px;color:var(--muted2);margin:2px 0}
.msg-row{display:flex;flex-direction:column;gap:4px;animation:krise .3s ease both}
.msg-row.you{align-items:flex-end}
.msg-row.reacted{margin-bottom:10px}
.m-line{display:flex;align-items:center;gap:6px;max-width:100%;justify-content:flex-end}
.bubble-wrap{position:relative;min-width:0}
.msg-row.you .bubble-wrap{max-width:min(80%,560px)}
.m-you{max-width:none;animation:none}
.m-kovi{animation:none}
.m-acts{position:relative;display:flex;gap:2px;opacity:0;transition:opacity .15s}
.msg-row:hover .m-acts,.msg-row:focus-within .m-acts,.m-acts:has(.react-pick){opacity:1}
@media (hover:none){.m-acts{opacity:1}}
.m-acts button{width:30px;height:30px;border-radius:8px;border:0;background:transparent;color:var(--muted2);display:flex;align-items:center;justify-content:center}
.m-acts button:hover{background:var(--soft);color:var(--ink)}
.react-pick{position:absolute;bottom:36px;left:0;display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--panel);border:1px solid var(--line2);box-shadow:0 10px 24px -12px rgba(0,0,0,.3);z-index:5;animation:krise .15s ease both}
.msg-row.you .react-pick{left:auto;right:0}
.react-pick button{width:34px;height:34px;border-radius:50%;font-size:18px;color:inherit}
.react-pick button:hover{background:var(--soft);transform:scale(1.15)}
.m-react{position:absolute;right:12px;bottom:-16px;height:26px;padding:0 8px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-size:14px;line-height:1}
.msg-row.kovi .m-react{right:auto;left:0}
.m-quote{display:block;margin-bottom:6px;padding:6px 10px;border-radius:10px;background:rgba(127,127,127,.12);font-size:13px;line-height:1.4;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:420px}
.m-quote b{font-weight:600;color:var(--ink2);margin-right:6px}
.reply-bar{width:100%;max-width:720px;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:14px;background:var(--soft);font-size:13px}
.reply-bar[hidden]{display:none}
.reply-bar span{flex:1;min-width:0;display:flex;gap:8px}
.reply-bar b{font-weight:600;white-space:nowrap}
.reply-bar small{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply-bar button{width:26px;height:26px;flex:none;border-radius:50%;border:0;background:var(--panel);font-size:16px;line-height:1;color:var(--muted)}

/* kovi reactions sit inline, no overlap with actions */
.msg-row.kovi .m-react{position:static;align-self:flex-start;margin-top:8px}
.msg-row.kovi.reacted{margin-bottom:0}
.msg-row.kovi .m-acts{margin-top:2px}
.msg-row.you.reacted .m-line{margin-bottom:6px}

/* desktop sidebar toggle */
.rail{transition:margin-left .28s cubic-bezier(.2,.8,.2,1)}
.rail-open{position:absolute;top:10px;left:10px;z-index:8;display:none;background:var(--panel);border:1px solid var(--line)}
@media (min-width:861px){
  .rail-closed .rail{margin-left:-264px}
  .rail-closed .rail-open{display:inline-flex}
}
@media (max-width:860px){.hide-sm{display:none !important}}

/* ---- mic button ---- */
.mic-btn{width:38px;height:38px;flex:none;border-radius:50%;border:0;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center}
.mic-btn:hover{background:var(--soft);color:var(--ink)}

/* ---- talk mode ---- */
.talk{display:none}
.chat-col.talk-on .chat-scroll,.chat-col.talk-on .composer-wrap,.chat-col.talk-on .kovi-top{display:none}
.chat-col.talk-on .talk{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.5vh,22px);padding:24px 20px;text-align:center;animation:krise .35s ease both}
.talk-orb{width:min(220px,46vw,30vh);height:min(220px,46vw,30vh)}
.talk-state{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted)}
.talk-state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--kovi);animation:kpulse 1.2s ease-in-out infinite}
.talk-state[data-p="speaking"]::before{animation:none}
.talk-cap{min-height:96px;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:10px}
.tc-you{margin:0;font-size:15px;line-height:1.5;color:var(--muted2)}
.tc-kovi{margin:0;font-size:clamp(18px,2vw,22px);font-weight:500;line-height:1.4;letter-spacing:-.01em;text-wrap:balance}
.talk-type{display:flex;gap:8px;width:min(440px,100%)}
.talk-type[hidden]{display:none}
.talk-type input{flex:1;min-width:0;height:44px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);padding:0 16px;font-size:15px;outline:none}
.talk-type input:focus{border-color:var(--muted)}
.talk-type button{width:44px;height:44px;border-radius:50%;border:0;background:var(--btn);color:var(--btnInk);font-weight:700}
.talk-ctl{display:flex;gap:14px}
.tc-btn{width:56px;height:56px;border-radius:50%;border:0;background:var(--soft);color:var(--ink);display:flex;align-items:center;justify-content:center}
.tc-btn:hover{background:var(--soft2)}
.tc-btn .slash{display:none}
.tc-btn.muted{background:var(--badSoft);color:var(--bad)}.tc-btn.muted .slash{display:block}
.tc-btn.end{background:var(--btn);color:var(--btnInk)}
.talk-hint{margin:0;font-size:12px;color:var(--muted2)}
.talking.has-art .chat-col{flex:0 0 min(360px,36%)}
.talking.has-art .talk-orb{width:min(150px,22vh);height:min(150px,22vh)}
@media (max-width:1100px){
  .talking.has-art .artifact.open{bottom:290px}
  .talking.has-art .chat-col.talk-on .talk{position:absolute;left:0;right:0;bottom:0;height:290px;padding:10px 16px 14px;gap:8px;justify-content:flex-end;background:var(--bg);border-top:1px solid var(--line);flex-direction:row;flex-wrap:wrap}
  .talking.has-art .talk-orb{width:84px;height:84px}
  .talking.has-art .talk-cap{min-height:0;flex:1 1 200px;align-items:flex-start;text-align:left}
  .talking.has-art .talk-state,.talking.has-art .talk-hint{display:none}
  .talking.has-art .talk-ctl,.talking.has-art .talk-type{flex-basis:100%;justify-content:center}
  .talking.has-art .tc-btn{width:48px;height:48px}
}

/* ---- modal ---- */
.modal{position:fixed;inset:0;z-index:150;display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(3px);animation:krise .2s ease both}
.modal-card{position:relative;width:min(460px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:14px;animation:kpop .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes kpop{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.modal-card.center{align-items:center;text-align:center}
.modal-card.invoice{width:min(520px,100%)}
.modal-x{position:absolute;top:12px;right:12px}
.modal-card h2{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.modal-card p{margin:0;font-size:15px;line-height:1.55;color:var(--muted);max-width:36ch}
.m-hero{width:60px;height:60px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700}
.m-hero.ok{background:var(--okSoft);color:var(--ok)}.m-hero.bad{background:var(--badSoft);color:var(--bad)}
.m-hero.kovi{width:76px;height:76px;background:transparent}.m-hero.kovi .kv{width:76px;height:76px}
.m-sum{width:100%;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;text-align:left}
.m-sum div{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-top:1px solid var(--line);font-size:14px}
.m-sum div:first-child{border-top:0}
.m-sum span{color:var(--muted)}.m-sum b{font-weight:600;text-align:right;word-break:break-all}
.m-list{width:100%;display:flex;flex-direction:column;gap:10px;text-align:left}
.m-list div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:var(--soft)}
.m-list b{font-size:14.5px}.m-list span{font-size:13.5px;color:var(--muted)}
.m-actions{width:100%;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}
.center .m-actions{justify-content:center}
.m-actions .btn{flex:1 1 140px}
.m-fine{font-size:13px !important;text-align:center;max-width:none !important}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-right:40px}
.inv-head small{font-size:12px;font-weight:600;color:var(--muted2)}
.inv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px;border-radius:14px;background:var(--soft)}
.inv-grid div{display:flex;flex-direction:column;gap:2px;font-size:14px}
.inv-grid span{font-size:12px;color:var(--muted2)}
.inv-lines{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.il{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-top:1px solid var(--line);font-size:14px}
.il:first-child{border-top:0}
.il.th{font-size:12px;font-weight:600;color:var(--muted2);background:var(--soft)}
.il .m{color:var(--muted)}
.il.total{font-size:15px}
.tr.clickable{cursor:pointer}
.tr.clickable:hover{background:var(--soft)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:160;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;animation:kfall linear forwards}
@keyframes kfall{to{top:105%;transform:rotate(720deg) translateX(40px)}}

/* ---- notifications ---- */
.rail-icons{display:flex;align-items:center;gap:2px}
.bell{position:relative}
.bell-dot{position:absolute;top:4px;right:3px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--bad);color:#fff;font-size:10px;font-weight:700;font-style:normal;display:none;align-items:center;justify-content:center;line-height:1}
.bell-dot.on{display:flex}
.notif{position:absolute;top:56px;left:12px;width:min(340px,calc(100vw - 24px));background:var(--panel);border:1px solid var(--line2);border-radius:16px;z-index:60;display:none;flex-direction:column;box-shadow:0 20px 40px -20px rgba(0,0,0,.3)}
.notif.open{display:flex;animation:krise .2s ease both}
.notif-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.notif-head b{font-size:15px}.notif-head .link{font-size:13px}
.notif-list{max-height:380px;overflow-y:auto;padding:6px}
.ni{display:flex;gap:12px;align-items:flex-start;padding:11px 10px;border-radius:12px}
.ni:hover{background:var(--soft)}
.nk{width:9px;height:9px;flex:none;border-radius:50%;margin-top:6px;background:var(--line2)}
.nk.warn{background:var(--warn)}.nk.ok{background:var(--ok)}.nk.bad{background:var(--bad)}.nk.info{background:var(--muted2)}
.nt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nt b{font-size:14px;font-weight:500}.ni.unread .nt b{font-weight:700}
.nt small{font-size:12.5px;color:var(--muted)}
.ni time{font-size:12px;color:var(--muted2);white-space:nowrap}
.notif-empty{margin:0;padding:24px;text-align:center;font-size:14px;color:var(--muted)}
.banner{display:flex;align-items:center;gap:12px;margin:10px 12px 0;padding:10px 10px 10px 14px;border-radius:14px;background:var(--warnSoft);color:var(--ink);font-size:14px;flex-wrap:wrap}
.banner[hidden]{display:none}
.b-ic{width:22px;height:22px;flex:none;border-radius:50%;background:var(--warn);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
.b-t{flex:1 1 240px;line-height:1.45}
.banner .btn{height:32px}
.rail-closed .banner{margin-left:56px}

.view.page .page-in{flex:none}
.page-in > *{flex-shrink:0}


/* Voice picker, under the talk controls. Quiet by default: the voice
   is a preference, not the point of the screen. */
.talk-voice{margin-top:10px;display:flex;justify-content:center}
.talk-voice select{
  font:inherit;font-size:13px;padding:6px 28px 6px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23888' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.talk-voice select:hover{color:var(--ink);border-color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- real data: panels, account, game (KoviSites wiring) ---- */
/* Kovi can't read images yet, so the composer doesn't offer to attach one. */
.composer .clip{display:none}
.recent button.on{background:var(--soft);color:var(--ink);font-weight:600}
.recent[hidden]{display:none}
.hint{font-size:12.5px;color:var(--muted)}.hint a{text-decoration:underline}
.empty-panel{display:flex;flex-direction:column;gap:6px;padding:18px 4px;text-align:center}
.empty-panel b{font-size:16px}
.note.bad{background:var(--badSoft,#fde8e8);color:var(--bad)}
.m-fine.bad{color:var(--bad)}
.li.click{cursor:pointer}.li.click:hover{background:var(--soft)}
.li .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.li .price{font-weight:600;font-size:14px}
.bill-seg{align-self:flex-start}
.plan-opt b em{font-style:normal;font-size:11px;font-weight:700;padding:2px 7px;margin-left:6px;border-radius:999px;background:var(--kovi);color:#fff;vertical-align:2px}
.plan-inc{margin:0;padding:0 2px;list-style:none;display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--ink2)}
.plan-inc li{display:flex;gap:8px;align-items:flex-start}
.plan-inc li::before{content:"✓";color:var(--ok);font-weight:700;flex:none}
.reg-form{display:flex;flex-direction:column;gap:10px}
.reg-form .two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.reg-form input{height:40px;border-radius:10px;border:1px solid var(--line2);background:var(--bg);padding:0 12px;font:inherit;color:var(--ink)}
.bld-tools .btn.sm{margin-left:auto}
/* Phone preview: the real page at phone width, centred in the frame. */
.frame.is-mobile{align-items:center;background:var(--soft2)}
.frame.is-mobile iframe.frame-view{width:390px;max-width:100%;border-left:1px solid var(--line);border-right:1px solid var(--line)}
/* The game's score: a live number, a combo / best line under it. */
.game-score{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.game-score b{font-size:22px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.game-score small{font-size:12px;font-weight:600;color:var(--kovi);min-height:14px}
.game-hint{background:color-mix(in srgb,var(--panel) 80%,transparent);padding:8px 14px;border-radius:999px;backdrop-filter:blur(4px)}
.frame.is-mobile .frame-bar{align-self:stretch}
.f input[readonly]{color:var(--muted);background:var(--soft)}
.meter{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);margin-bottom:18px}
.meter-top{display:flex;justify-content:space-between;gap:10px;font-size:14px}.meter-top span{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.meter-bar{height:8px;border-radius:4px;background:var(--soft2);overflow:hidden}
.meter-bar i{display:block;height:100%;border-radius:4px;background:var(--ok);transition:width .6s ease}
.meter.high .meter-bar i{background:var(--warn)}.meter.full .meter-bar i{background:var(--bad)}
.meter small{font-size:12.5px;color:var(--muted)}
.hire-form{display:flex;flex-direction:column;gap:12px}
.hire-form textarea,.hire-form input:not([type=checkbox]){width:100%;border-radius:10px;border:1px solid var(--line2);background:var(--bg);padding:10px 12px;font:inherit;color:var(--ink);resize:vertical}
.hire-form input:not([type=checkbox]){height:40px;padding:0 12px}
.plan-opts.compact .plan-opt{padding:10px 12px}
.check{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--ink2)}
/* Get help: a support conversation */
.tk-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.tk-head b{flex:1 1 100%;font-size:16px}.tk-head small{flex:1;font-size:13px;color:var(--muted2)}
.tk-thread{display:flex;flex-direction:column;gap:10px}
.tk-msg{max-width:88%;padding:10px 13px;border-radius:14px;background:var(--soft);display:flex;flex-direction:column;gap:3px}
.tk-msg.cust{align-self:flex-end;background:var(--soft2)}
.tk-msg.team{align-self:flex-start;border:1px solid var(--line2);background:var(--panel)}
.tk-msg small{font-size:12px;color:var(--muted2);font-weight:600}
.tk-msg p{margin:0;font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.tk-new{font-style:normal;font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--warnSoft);color:var(--warn);margin-left:6px;vertical-align:1px}