/* Kall Feedback — Kall in 1 design tokens (design.md): bg #F6F5F1, ink #0C0F2E, cobalt #2E44FF, saffron #FFB31A, coral #FF5A4E;
   display font Bricolage, UI font Plus Jakarta Sans (self-hosted). Mobile first. */
@font-face{font-family:"Bricolage";src:url(fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Jakarta";src:url(fonts/jakarta.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{
  --bg:#F6F5F1;--surface:#fff;--surface2:#FBFAF7;--ink:#0C0F2E;--ink2:#4B5070;--ink3:#626681;--line:rgba(12,15,46,.08);--line2:rgba(12,15,46,.14);
  --cobalt:#2E44FF;--cobalt-d:#1E30D6;--cobalt-soft:#E9ECFF;--saffron:#FFB31A;--saffron-d:#B87700;--saffron-soft:#FFF1D3;--coral:#FF5A4E;--coral-d:#D93A2F;--coral-soft:#FFE3DE;
  --green:#0E9F6E;--green-soft:#DDF5EC;--slate:#3A4166;--slate-soft:#E8E9F0;--night:#0A0C1F;
  --disp:"Bricolage","Jakarta",ui-sans-serif,system-ui,sans-serif;
  --ui:"Jakarta",ui-sans-serif,-apple-system,system-ui,"Segoe UI",Arial,"Arial Hebrew","Noto Sans Hebrew",sans-serif;
  --sb:env(safe-area-inset-bottom,0px);--st:env(safe-area-inset-top,0px);
  --ease:cubic-bezier(.22,1,.36,1);
  --sh1:0 1px 2px rgba(12,15,46,.06),0 4px 14px rgba(12,15,46,.06);
  --sh2:0 2px 6px rgba(12,15,46,.08),0 18px 40px -12px rgba(12,15,46,.25);
  --pad:16px;--toph:56px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font:500 15px/1.45 var(--ui);overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;text-align:inherit}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.ic{width:20px;height:20px;flex:none;display:block}
h1,h2,h3{margin:0;letter-spacing:-.02em}
:focus-visible{outline:2.5px solid var(--cobalt);outline-offset:2px;border-radius:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;min-height:var(--toph);padding:calc(8px + var(--st)) 12px 8px;
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid transparent}
.top.scrolled{border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:9px;margin-right:auto;min-width:0}
.kmark{width:32px;height:32px;flex:none;border-radius:9px}
.wordmark{font:800 19px/1 var(--ui);letter-spacing:-.03em;white-space:nowrap}
.wordmark b{font-weight:500;color:var(--ink2)}
.pill{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 11px;border-radius:999px;background:var(--cobalt);color:#fff;font-weight:700;font-size:14px;box-shadow:var(--sh1);white-space:nowrap;flex:none}
.pill .ic{width:18px;height:18px}
.pill.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.pill.ghost.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cnt{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--coral);color:#fff;font-size:11.5px;font-weight:800;display:inline-grid;place-items:center;line-height:1}
.right{display:flex;align-items:center;gap:8px;flex:none}
.acct{display:flex;align-items:center}
.acct:empty{display:none}
.chip-in{height:38px;padding:0 14px;border-radius:999px;background:var(--cobalt);color:#fff;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:800 15px/1 var(--ui);color:#fff;background:var(--cobalt);flex:none;text-transform:uppercase}
.av.sm{width:30px;height:30px;font-size:13px}
.av.team{background:var(--saffron);color:var(--ink)}
.av.c1{background:#0E9F6E}.av.c2{background:#6A3DF5}.av.c3{background:#E83E78}.av.c4{background:#F08A00}.av.c5{background:#0C9A97}.av.c6{background:#3A4166}
@media (max-width:430px){.wordmark{font-size:18px}.top{gap:6px}.right{gap:6px}.pill.ghost span{display:none}.pill.ghost{padding:0 9px;gap:4px}}
@media (max-width:340px){.wordmark b{display:none}}

/* layout */
.app{max-width:760px;margin:0 auto;padding:6px var(--pad) calc(32px + var(--sb));outline:0}
.app.wide{max-width:1240px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh1);padding:18px}
.sec{margin:26px 2px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.sec h2{font-size:13px;font-weight:800;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em}
.sec a,.sec button{font-size:13.5px;color:var(--cobalt);font-weight:700}
.loading{display:grid;place-items:center;min-height:50vh}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--cobalt-soft);border-top-color:var(--cobalt);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* hero */
.hero{position:relative;overflow:hidden;border-radius:24px;padding:26px 22px 24px;margin-top:10px;background:var(--ink);color:#fff;box-shadow:var(--sh2)}
.hero::after{content:"";position:absolute;right:-50px;top:-60px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle at 35% 40%,var(--saffron) 0 34%,transparent 35%),radial-gradient(circle,rgba(46,68,255,.75) 0 60%,transparent 61%);opacity:.95}
.hero h1{position:relative;z-index:1;font:800 34px/1.02 var(--disp);letter-spacing:-.035em;max-width:11ch}
.hero p{position:relative;z-index:1;margin:12px 0 0;color:rgba(255,255,255,.8);font-size:15px;max-width:34ch}
.hero .btn{position:relative;z-index:1;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:999px;background:var(--cobalt);color:#fff;font-weight:800;font-size:15px;box-shadow:var(--sh1);transition:transform .15s var(--ease),background .15s}
.btn:hover{background:var(--cobalt-d)}.btn:active{transform:scale(.97)}
.btn .ic{width:19px;height:19px}
.btn.saffron{background:var(--saffron);color:var(--ink)}.btn.saffron:hover{background:#f5a60c}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line2);box-shadow:none}.btn.ghost:hover{background:var(--surface2)}
.btn.sm{height:38px;padding:0 15px;font-size:14px}
.btn[disabled],.btn.off{background:var(--slate-soft);color:var(--ink3);box-shadow:none;cursor:not-allowed;transform:none}
.points{display:grid;gap:12px;margin-top:16px}
.point{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh1)}
.point .bub{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--cobalt-soft);color:var(--cobalt)}
.point:nth-child(2) .bub{background:var(--saffron-soft);color:var(--saffron-d)}
.point:nth-child(3) .bub{background:var(--green-soft);color:var(--green)}
.point b{display:block;font:800 16px/1.2 var(--disp);letter-spacing:-.02em}
.point span{display:block;margin-top:3px;color:var(--ink2);font-size:14px}
.fine{margin:18px 4px 0;color:var(--ink3);font-size:13px}

/* my devices */
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:18px 2px 4px;flex-wrap:wrap}
.pagehead h1{font:800 30px/1.05 var(--disp);letter-spacing:-.035em}
.pagehead h1 small{font:700 15px var(--ui);color:var(--ink3);letter-spacing:0;margin-left:6px;white-space:nowrap}
.sub{margin:6px 2px 0;color:var(--ink2);font-size:14.5px}
.meter{height:8px;border-radius:99px;background:var(--slate-soft);overflow:hidden;margin:14px 2px 4px}
.meter i{display:block;height:100%;border-radius:99px;background:var(--cobalt);transition:width .4s var(--ease)}
.meter.full i{background:var(--coral)}
.cards{display:grid;gap:12px;margin-top:16px}
.dev{display:flex;align-items:center;gap:14px;padding:16px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh1);transition:transform .15s var(--ease),box-shadow .15s}
.dev:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.dev .pic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--cobalt-soft);color:var(--cobalt);flex:none}
.dev .pic .ic{width:25px;height:25px}
.dev .mid{min-width:0;flex:1}
.dev b{display:block;font:800 17px/1.2 var(--disp);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev .s{margin-top:4px;color:var(--ink2);font-size:13.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dev .chev{color:var(--ink3);width:18px;height:18px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none;display:inline-block}
.dot.offline{background:#c4c6d3}.dot.waiting{background:var(--saffron)}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:99px;background:var(--slate-soft);color:var(--slate);font-size:11.5px;font-weight:800;letter-spacing:.01em;white-space:nowrap}
.tag.green{background:var(--green-soft);color:#0a7a55}.tag.saffron{background:var(--saffron-soft);color:var(--saffron-d)}.tag.coral{background:var(--coral-soft);color:var(--coral-d)}.tag.cobalt{background:var(--cobalt-soft);color:var(--cobalt-d)}
.empty{text-align:center;padding:34px 20px}
.empty .big{width:64px;height:64px;border-radius:20px;background:var(--cobalt-soft);color:var(--cobalt);display:grid;place-items:center;margin:0 auto 14px}
.empty .big .ic{width:32px;height:32px}
.empty b{display:block;font:800 20px/1.2 var(--disp);letter-spacing:-.02em}
.empty p{margin:6px auto 16px;color:var(--ink2);max-width:34ch;font-size:14.5px}
.notice{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:14px 16px;border-radius:18px;background:var(--saffron-soft);color:#5c3d00;font-size:14px}
.notice.coral{background:var(--coral-soft);color:#7a1f17}
.notice .ic{width:20px;height:20px;margin-top:1px}
.notice b{font-weight:800}

/* enroll */
.back{display:inline-flex;align-items:center;gap:4px;margin:14px 0 0 -4px;padding:6px 10px 6px 4px;border-radius:99px;color:var(--cobalt);font-weight:800;font-size:14.5px}
.back .ic{width:18px;height:18px}
.enroll{display:grid;gap:14px;margin-top:10px}
.enroll .card h2{font:800 20px/1.15 var(--disp);letter-spacing:-.025em}
.enroll .card p{margin:6px 0 0;color:var(--ink2);font-size:14.5px}
.f{display:block;margin-top:14px;font-size:13px;font-weight:800;color:var(--ink2)}
.in{display:block;width:100%;height:46px;margin-top:6px;padding:0 14px;border-radius:14px;border:1.5px solid var(--line2);background:var(--surface);font-size:15px;font-weight:600}
.in:focus{outline:0;border-color:var(--cobalt);box-shadow:0 0 0 4px var(--cobalt-soft)}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.qrbox{text-align:center}
.qr{width:min(100%,280px);margin:4px auto 0;padding:12px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh1)}
.qr svg{display:block;width:100%;height:auto}
.code{display:inline-block;margin-top:14px;padding:8px 16px;border-radius:14px;background:var(--ink);color:#fff;font:700 22px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2em}
.qrbox .hint{margin-top:8px;color:var(--ink3);font-size:13px}
.ok{display:flex;align-items:center;gap:12px;padding:16px;border-radius:20px;background:var(--green-soft);color:#075c40;font-weight:700}
.ok .ic{width:26px;height:26px;color:var(--green)}
.steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px;counter-reset:s}
.steps li{display:flex;gap:14px;counter-increment:s}
.steps li::before{content:counter(s);flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:800 14px var(--ui)}
.steps b{display:block;font-size:15px}
.steps span{display:block;color:var(--ink2);font-size:14px;margin-top:2px}
.pulse{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--saffron);margin-right:8px;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}

/* detail */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
.fact{padding:14px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.fact span{display:block;font-size:12px;font-weight:800;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em}
.fact b{display:block;margin-top:4px;font:800 16px/1.2 var(--disp);letter-spacing:-.02em;overflow-wrap:anywhere}
.tools{display:flex;gap:10px;align-items:center;margin:22px 2px 10px}
.tools h2{font:800 20px/1 var(--disp);letter-spacing:-.025em;flex:1}
.tools .cnt2{color:var(--ink3);font-weight:700;font-size:14px}
.search{position:relative;margin:0 0 10px}
.search .ic{position:absolute;left:14px;top:14px;width:18px;height:18px;color:var(--ink3)}
.search .in{margin:0;padding-left:42px;border-radius:99px}
.chips{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.chips button{height:34px;padding:0 14px;border-radius:99px;border:1px solid var(--line2);background:var(--surface);font-weight:700;font-size:13.5px;color:var(--ink2)}
.chips button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.apps{padding:4px 6px}
.app-row{display:flex;align-items:center;gap:12px;padding:11px 10px;border-bottom:1px solid var(--line)}
.app-row:last-child{border-bottom:0}
.app-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;font:800 15px var(--ui);color:#fff}
.app-row .mid{min-width:0;flex:1}
.app-row b{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-row .pk{display:block;color:var(--ink3);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-row .v{color:var(--ink3);font-size:12.5px;font-weight:600;flex:none}
.readonly{margin-top:16px;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;background:var(--cobalt-soft);color:#1b2a99;font-size:14px}
.readonly .ic{width:20px;height:20px;margin-top:1px;flex:none}
.readonly a{font-weight:800;text-decoration:underline}

.toast{position:fixed;left:50%;bottom:calc(20px + var(--sb));transform:translateX(-50%);z-index:60;max-width:min(92vw,420px);padding:12px 18px;border-radius:16px;background:var(--ink);color:#fff;font-weight:600;font-size:14px;box-shadow:var(--sh2)}
.toast.err{background:var(--coral-d)}

@media (min-width:768px){
  :root{--pad:24px;--toph:64px}
  .top{padding-left:24px;padding-right:24px}
  .app{padding-top:14px}
  .hero{padding:44px 44px 40px;border-radius:32px}
  .hero h1{font-size:54px;max-width:12ch}
  .hero p{font-size:17px;max-width:38ch}
  .hero::after{width:380px;height:380px;right:-70px;top:-90px}
  .points{grid-template-columns:repeat(3,1fr);gap:16px}
  .point{flex-direction:column;padding:22px}
  .pagehead h1{font-size:40px}
  .cards{grid-template-columns:repeat(2,1fr);gap:16px}
  .enroll{grid-template-columns:1fr 1fr;align-items:start;gap:18px}
  .facts{grid-template-columns:repeat(4,1fr)}
  .app{max-width:960px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}