:root {
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;          
  --heading-font:var(--font); --heading-case:uppercase; --heading-spacing:.04em;          
  --accent:#efad42; --accent-strong:#d9932a; --on-accent:#1f2328;                     
  --link:#7f5200; --heading:#7f5200; --highlight:#c8102e; --danger:#c8102e; --on-danger:#fff;          
  --ink:#1f2328; --grey:#5b6470; --line:#e1e4e8; --bg:#f4f5f7; --card:#fff; --field-line:#c5cad1;          
  --ok:#1a7f37; --ok-bg:#e6f4ea; --ok-ink:#14532d; --err-bg:#fde8ea; --err-ink:#7a0b1c; --note-bg:#fff8e1; --busy-bg:#eef1f5;          
  --changed-bg:#fff3b0; --disabled-bg:#eceef1; --disabled-ink:#8a919b;            
  --on-header-soft:rgba(31,35,40,.12); --on-header-edge:rgba(31,35,40,.45); --on-header-press:rgba(31,35,40,.22);          
  --dot-off:#9aa4b0; --dot-green:#2ea043; --dot-amber:#f0a020; --dot-red:#7a0010; --banner-ink:#fff;          
  --scrim:rgba(0,0,0,.5); --shadow:rgba(0,0,0,.35); --shadow-strong:rgba(0,0,0,.4);          
  --kit-header:var(--accent); --kit-on-header:var(--on-accent); --kit-line:var(--highlight); --kit-sticky-bg:var(--card); --kit-banner-ink:var(--banner-ink);          
}
@media (prefers-color-scheme: dark) {
  :root { --accent:#efad42; --accent-strong:#f4c076; --on-accent:#1f2328; --link:#f4c076; --heading:#f4c076; --highlight:#c8102e; --danger:#c8102e; --on-danger:#fff;
          --ink:#e6e8eb; --grey:#9aa4b0; --line:#2d333b; --bg:#12161b; --card:#1b2027; --field-line:#3a424d;
          --ok:#6fd49a; --ok-bg:#12301f; --ok-ink:#9be0b5; --err-bg:#3a1218; --err-ink:#ffb3bd; --note-bg:#33290a; --busy-bg:#222a33;
          --changed-bg:#4a3d0a; --disabled-bg:#2a3038; --disabled-ink:#7d8794;
          --on-header-soft:rgba(31,35,40,.12); --on-header-edge:rgba(31,35,40,.45); --on-header-press:rgba(31,35,40,.22);
          --dot-off:#9aa4b0; --dot-green:#2ea043; --dot-amber:#f0a020; --dot-red:#7a0010; --banner-ink:#fff;
          --scrim:rgba(0,0,0,.65); --shadow:rgba(0,0,0,.6); --shadow-strong:rgba(0,0,0,.7); }          
}
.dry { --kit-header:#1f5fbf; --kit-on-header:#fff; --on-header-soft:rgba(255,255,255,.16); --on-header-edge:rgba(255,255,255,.45); --on-header-press:rgba(255,255,255,.28); }          



:root { --bubble-in:#fff; --bubble-out:#fdeccb; --bubble-ink:#1f2328; --unread-bg:#efad42; --unread-ink:#1f2328; --toast-bg:#323232; --toast-ink:#fff; --selected-bg:#fdf3df; --cpp-paper:#fff; }
@media (prefers-color-scheme: dark) { :root { --bubble-in:#222a33; --bubble-out:#4a3610; --bubble-ink:#e6e8eb; --unread-bg:#f4c076; --unread-ink:#1f2328; --toast-bg:#e6e7ea; --toast-ink:#1c1e21; --selected-bg:#3d2e10; --cpp-paper:#fff; } }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; font-family:var(--font); background:var(--bg); color:var(--ink); line-height:1.4; overflow-wrap:break-word; word-wrap:break-word; }
.hidden { display:none !important; }
a { color:var(--link); }
h2 { font-size:1rem; margin:0 0 12px; color:var(--heading); text-transform:uppercase; letter-spacing:.04em; }
h3 { font-size:1rem; margin:12px 0 4px; }
.muted { color:var(--grey); font-size:.9rem; }

header { background:var(--kit-header); color:var(--kit-on-header); border-bottom:4px solid var(--kit-line); padding:8px 16px; padding-top:calc(8px + env(safe-area-inset-top)); padding-left:calc(16px + env(safe-area-inset-left)); padding-right:calc(16px + env(safe-area-inset-right)); position:relative; }
.brand { display:flex; align-items:center; }
.brand img { flex:none; border-radius:7px; margin-right:10px; }
h1 { font-size:1.15rem; margin:0; line-height:1.2; min-width:0; }
.bar { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
#hello { font-size:1rem; font-weight:700; line-height:1.2; flex:1 1 auto; min-width:0; margin-right:10px; }
.btns { display:flex; flex:none; }
header button { position:relative; width:44px; height:44px; margin-left:8px; padding:0; display:block; background:var(--on-header-soft); border:1px solid var(--on-header-edge); border-radius:8px; color:inherit; cursor:pointer; touch-action:manipulation; }
.btns button:first-child { margin-left:0; }
header button:active { background:var(--on-header-press); }
header svg { display:block; width:18px; height:18px; margin:auto; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
#refresh.turning svg { -webkit-animation:turn .8s linear infinite; animation:turn .8s linear infinite; }
@-webkit-keyframes turn { to { -webkit-transform:rotate(360deg); } }
@keyframes turn { to { transform:rotate(360deg); } }
#cog-dot { position:absolute; top:4px; right:4px; width:10px; height:10px; border-radius:50%; background:var(--highlight); }
@media (min-width:600px) { .bar { margin:0; padding-left:58px; } .btns { position:absolute; top:calc(10px + env(safe-area-inset-top)); right:calc(16px + env(safe-area-inset-right)); } .signed .brand { margin-right:220px; } }

.banner { display:none; margin:0; padding:8px 16px; background:var(--kit-line); color:var(--banner-ink); text-align:center; font-weight:700; font-size:.9rem; }
.dry .banner { display:block; }
.line { padding:8px 16px; background:var(--note-bg); color:var(--ink); text-align:center; font-size:.9rem; position:-webkit-sticky; position:sticky; top:0; z-index:30; }

main { max-width:640px; margin:0 auto; padding:16px; padding-left:calc(16px + env(safe-area-inset-left)); padding-right:calc(16px + env(safe-area-inset-right)); padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; margin:0 0 16px; }
label { display:block; font-weight:600; margin:12px 0 4px; }
input[type=tel], input[type=text], input[type=search], input[type=date], select, textarea { display:block; width:100%; height:44px; padding:0 10px; font:inherit; font-size:16px; border:1px solid var(--field-line); border-radius:8px; background:var(--card); color:var(--ink); -webkit-appearance:none; }
textarea { height:auto; padding:10px; resize:none; }
button { font:inherit; cursor:pointer; }
button:disabled { opacity:.5; cursor:default; }
.primary, .secondary, .danger, .quiet { display:block; width:100%; min-height:44px; padding:12px; font-size:1rem; font-weight:600; line-height:1.2; text-align:center; text-decoration:none; border-radius:8px; margin-top:14px; border:2px solid var(--field-line); background:var(--card); color:var(--ink); }
.primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.secondary { color:var(--link); border-color:var(--link); }
.danger { background:var(--err-bg); color:var(--err-ink); border-color:var(--danger); }
.small { display:inline-block; width:auto; min-height:44px; padding:10px 14px; margin:0 8px 0 0; font-size:.9rem; }
.msg { padding:10px 12px; border-radius:8px; margin-top:12px; }
.msg.ok { background:var(--ok-bg); color:var(--ok-ink); }
.msg.err { background:var(--err-bg); color:var(--err-ink); }
.note { padding:10px 12px; border-radius:8px; margin:10px 0 0; background:var(--note-bg); font-size:.9rem; }
.foot { text-align:center; font-size:.85rem; margin:20px 0 0; }
body:not(.signed) #foot-terms { display:none; }
#version, .version { text-align:center; font-size:.8rem; color:var(--grey); margin:8px 0 0; }
#toast { position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:90; padding:12px 14px; border-radius:8px; background:var(--toast-bg); color:var(--toast-ink); text-align:center; }

.number-line { margin-bottom:8px; }
.number-label { display:block; font-size:.85rem; font-weight:700; color:var(--heading); }
.number-value { display:block; font-size:1.5rem; line-height:1.25; }
.row { display:flex; margin:8px -4px 0; }
.row > * { flex:1 1 0%; width:auto; margin:0 4px; padding:10px 4px; }
.setup-step { padding:6px 0; border-top:1px solid var(--line); }
.setup-step:first-of-type { border-top:0; }
.setup-step ol, .help-part ol { margin:4px 0 8px; padding-left:1.4rem; }

.tile { display:block; width:100%; margin:10px 0 0; padding:14px; text-align:left; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:10px; font:inherit; cursor:pointer; }
.tile strong { display:block; font-size:1.05rem; color:var(--heading); }
.one-line { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tile .muted { font-size:.85rem; }
.unread { display:inline-block; min-width:1.4rem; margin-left:6px; padding:1px 6px; border-radius:999px; background:var(--unread-bg); color:var(--unread-ink); font-size:.78rem; font-weight:700; text-align:center; }
.waiting { margin:10px 0 0; font-size:.9rem; }
.help-part { border-top:1px solid var(--line); padding:10px 0; }
.help-part summary { font-weight:600; cursor:pointer; min-height:28px; }


.chat-open .home, .chat-open #setup { display:none; }
.screen-bar { display:flex; align-items:center; position:-webkit-sticky; position:sticky; top:0; z-index:20; margin:-16px -16px 10px; padding:8px 16px; min-height:56px; background:var(--card); border-bottom:1px solid var(--line); }
.screen-bar .small { flex:none; }
.screen-bar h2 { flex:1 1 auto; min-width:0; margin:0; font-size:1.05rem; text-transform:none; letter-spacing:0; }
.screen-bar .sub { display:block; font-weight:400; font-size:.78rem; color:var(--grey); }
.screen-bar .tool { flex:none; margin:0 0 0 8px; }
.screen-note { margin:0 0 10px; font-size:.82rem; color:var(--grey); }
.list-row { display:flex; align-items:center; width:100%; min-height:64px; padding:10px 4px; text-align:left; background:none; color:var(--ink); border:0; border-bottom:1px solid var(--line); font:inherit; cursor:pointer; }
.avatar { flex:none; width:42px; height:42px; line-height:42px; margin-right:12px; border-radius:50%; text-align:center; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:.95rem; }
.list-text { flex:1 1 auto; min-width:0; }
.list-top { display:flex; align-items:baseline; }
.list-top strong { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
time { flex:none; margin-left:8px; font-size:.78rem; color:var(--grey); }
.unread-row strong, .unread-row .muted { color:var(--ink); font-weight:700; }
.empty { color:var(--grey); text-align:center; padding:18px 0; }

.bubble { display:table; max-width:85%; min-width:60%; margin:0 auto 8px 0; padding:8px 12px; border-radius:12px; background:var(--bubble-in); color:var(--bubble-ink); border:1px solid var(--line); white-space:pre-wrap; word-break:break-word; }
.bubble.out { margin:0 0 8px auto; background:var(--bubble-out); }
.bubble.found { outline:2px solid var(--highlight); }
.bubble.waits { border-style:dashed; }
.bubble.stuck { border-color:var(--danger); }
.bubble .who { display:block; font-size:.78rem; font-weight:700; color:var(--heading); margin-bottom:2px; }
.bubble .meta { display:block; margin-top:4px; font-size:.75rem; color:var(--grey); white-space:normal; }
.bubble .ways { float:right; margin:1px -4px 2px 8px; color:var(--grey); line-height:0; }
.bubble .ways svg { display:inline-block; width:14px; height:14px; margin-left:3px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bubble .quote { display:block; margin:0 0 6px; padding:4px 8px; border-left:3px solid var(--accent); background:var(--card); border-radius:4px; font-size:.85rem; white-space:normal; }
.bubble .quote strong, .bubble .quote span { display:block; }
.bubble .quote span { color:var(--grey); }
.bubble a { color:var(--link); }
.bubble .small { min-height:36px; padding:6px 10px; margin:4px 8px 0 0; white-space:normal; }
.mention { font-weight:700; color:var(--link); }
.picture { display:block; max-width:100%; max-height:260px; margin:6px 0 2px; border-radius:8px; border:1px solid var(--line); }
.file { display:inline-block; margin:6px 6px 2px 0; padding:8px 12px; min-height:36px; border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--link); font:inherit; font-size:.85rem; white-space:normal; text-align:left; cursor:pointer; }
.earlier { margin:0 0 10px; }

.writer { position:-webkit-sticky; position:sticky; bottom:0; z-index:15; margin:0 -16px -16px; padding:8px 16px; padding-bottom:calc(8px + env(safe-area-inset-bottom)); background:var(--card); border-top:1px solid var(--line); }
.write-row { display:flex; align-items:flex-end; }
.write-row textarea { flex:1 1 auto; min-width:0; width:auto; min-height:44px; max-height:10rem; padding:10px 14px; margin:0 8px; border-radius:20px; line-height:1.35; }
.write-row button { flex:none; width:44px; height:44px; min-height:44px; margin:0; padding:0; border-radius:50%; background:var(--card); color:var(--link); border:1px solid var(--field-line); }
.write-row .send { background:var(--accent); color:var(--on-accent); border:0; }
.write-row svg { display:block; width:22px; height:22px; margin:auto; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.chips .file { cursor:default; color:var(--ink); }
.chips .file button { min-height:0; margin-left:8px; padding:0 4px; border:0; background:none; color:var(--ink); font:inherit; }
.replying { display:flex; align-items:center; margin:0 0 8px; padding:6px 8px; border-left:3px solid var(--accent); background:var(--selected-bg); border-radius:4px; }
.replying .list-text strong, .replying .list-text span { display:block; }
.names button { display:block; width:100%; min-height:44px; margin:0; text-align:left; border:0; border-bottom:1px solid var(--line); background:var(--card); color:var(--ink); font:inherit; padding:8px; }


.back { position:fixed; top:0; right:0; bottom:0; left:0; z-index:60; background:var(--scrim); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px; padding-top:calc(16px + env(safe-area-inset-top)); padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
.back.top { z-index:70; }
.modal { max-width:560px; margin:0 auto; padding:16px; background:var(--card); border-radius:12px; }
.modal-head { display:flex; align-items:center; margin-bottom:8px; }
.modal-head h2 { flex:1 1 auto; min-width:0; margin:0; }
.modal-head .small { flex:none; margin:0 0 0 8px; }
.modal p { margin:6px 0; }
.modal ul, .modal ol { padding-left:1.3rem; margin:6px 0; }
.panel { position:fixed; top:0; right:0; bottom:0; left:0; z-index:50; display:flex; flex-direction:column; background:var(--bg); }
.panel-body { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px; padding-top:calc(16px + env(safe-area-inset-top)); }
.panel-body > * { max-width:560px; margin-left:auto; margin-right:auto; }
.panel-foot { flex:none; padding:10px 16px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); background:var(--card); border-top:1px solid var(--line); }
.panel-foot .row { max-width:560px; margin:0 auto; }
.panel-foot .row > * { margin:0 4px; }
.tick { display:flex; align-items:center; min-height:44px; margin:4px 0; font-weight:400; }
.tick input { width:22px; height:22px; flex:none; margin:0 10px 0 0; }
.panel-row { display:block; width:100%; min-height:56px; margin:8px auto 0; padding:10px 12px; text-align:left; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:8px; font:inherit; cursor:pointer; }
.panel-row small { display:block; color:var(--grey); }
.found-row { display:block; width:100%; padding:10px 4px; text-align:left; background:none; border:0; border-bottom:1px solid var(--line); color:var(--ink); font:inherit; cursor:pointer; }
.found-row strong, .found-row span { display:block; }
.found-row span { font-size:.85rem; color:var(--grey); }

.links { margin:0 0 16px; }
.links .row { margin:0 -4px; }
.links .row > * { padding:12px 4px; }
.cpp-note .cpp-get { display:block; margin:8px 0 0; }
.cpp-note.bad { background:var(--err-bg); color:var(--err-ink); }
.cpp-open main { max-width:1000px; }
.cpp-menu h3 { margin:16px 0 4px; color:var(--heading); }
.cpp-items { display:flex; flex-wrap:wrap; margin:0 -4px; }
.cpp-item { flex:1 1 100%; min-width:0; min-height:48px; margin:4px; padding:10px 12px; text-align:left; font:inherit; font-size:1.05rem; line-height:1.25; background:var(--card); color:var(--ink); border:1px solid var(--field-line); border-radius:8px; cursor:pointer; touch-action:manipulation; }
.cpp-item.now { border:2px solid var(--link); font-weight:700; }
@media (min-width:600px) { .cpp-item { flex-basis:45%; } }
.cpp-heading { margin:24px 0 8px; font-size:1.35rem; line-height:1.25; text-transform:none; letter-spacing:0; }
.cpp-body { font-size:18px; line-height:1.5; padding-bottom:72px; }
.cpp-body p { margin:0 0 12px; }
.cpp-body h3 { font-size:1.2rem; margin:20px 0 8px; color:var(--heading); }
.cpp-body h4 { font-size:1.05rem; margin:16px 0 6px; }
.cpp-body ul { margin:0 0 12px; padding-left:1.4rem; }
.cpp-body li { margin:0 0 6px; }
.cpp-body li.n { margin-left:1.2rem; }
.cpp-body .x { font-weight:700; cursor:pointer; }
.dw { margin:12px 0; background:var(--cpp-paper); border:1px solid var(--line); border-radius:4px; }
.dw svg { display:block; width:100%; height:auto; }
.dw text { font-family:Arial, Helvetica, sans-serif; }
.to-menu { position:fixed; right:calc(16px + env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom)); z-index:40; width:44px; height:44px; padding:0; font-size:1.3rem; line-height:1; border:0; border-radius:50%; background:var(--accent); color:var(--on-accent); opacity:.7; touch-action:manipulation; }
@media print { #toast, .writer, .to-menu { display:none; } }