*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-body);font-size:var(--text-sm);line-height:1.5;color:var(--color-text);background:var(--color-page);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit;color:inherit}a{color:var(--color-link)}::selection{background:var(--tsg-lime);color:var(--tsg-black)}:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}.app{height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-4);height:52px;border-bottom:1px solid var(--color-border);background:var(--color-surface);flex:none}.wordmark{display:flex;align-items:center;gap:var(--space-2);font-weight:700;letter-spacing:var(--tracking-tight);font-size:var(--text-base)}.wordmark img{width:22px;height:22px}.wordmark span{color:var(--color-text-muted);font-weight:500;font-size:var(--text-xs)}.search{flex:1;max-width:32rem;display:flex;align-items:center;gap:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:6px 14px;background:var(--color-surface);color:var(--color-text-muted)}.search input{flex:1;border:0;background:transparent;outline:none;color:var(--color-text);min-width:0}.search input::placeholder{color:var(--color-text-muted)}.spacer{flex:1}.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-pill);border:1px solid transparent;background:transparent;cursor:pointer;color:var(--color-text-secondary);transition:background var(--dur-hover) var(--ease-standard)}.iconbtn:hover{background:var(--color-surface-sunken);color:var(--color-text)}.menu{position:relative}.menu-pop{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-card-hover);padding:var(--space-2);z-index:20}.menu-pop .who{padding:var(--space-2) var(--space-3);font-weight:600}.menu-pop .who small{display:block;color:var(--color-text-muted);font-weight:400}.menu-pop button,.menu-pop a{display:flex;width:100%;align-items:center;gap:var(--space-2);text-align:left;padding:var(--space-2) var(--space-3);border:0;background:transparent;border-radius:var(--radius-sm);cursor:pointer;color:var(--color-text);text-decoration:none}.menu-pop button:hover,.menu-pop a:hover{background:var(--color-surface-sunken)}.banner{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-weight:500;border-bottom:1px solid var(--color-border)}.banner.offline{background:var(--tsg-yellow-soft);color:var(--tsg-ink)}.banner.error{background:var(--tsg-magenta-soft);color:var(--tsg-ink)}.banner.info{background:var(--color-panel-tint);color:var(--color-on-panel)}.banner .spacer{flex:1}.cols{flex:1;display:flex;min-height:0}.nav{width:212px;flex:none;border-right:1px solid var(--color-border);background:var(--color-surface-raised);overflow:auto;padding:var(--space-3) var(--space-2)}.navlabel{font-size:var(--text-xs);font-weight:600;color:var(--color-text-secondary);margin:var(--space-4) var(--space-3) var(--space-1)}.navitem{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;padding:6px 12px;border-radius:var(--radius-sm);font-weight:500;border:0;background:transparent;cursor:pointer;text-align:left;color:var(--color-text);transition:background var(--dur-hover) var(--ease-standard)}.navitem:hover{background:var(--color-surface-sunken)}.navitem.on{background:var(--color-pill-active-bg);color:var(--color-pill-active-text)}.navitem .n{font-size:var(--text-xs);color:var(--color-text-muted);font-variant-numeric:tabular-nums}.navitem.on .n{color:inherit;opacity:.8}.navitem .lbl{display:flex;align-items:center;gap:var(--space-2);min-width:0}.navitem .lbl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.navitem.dim{color:var(--color-text-muted)}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px var(--color-border-strong)}.list{width:372px;flex:none;border-right:1px solid var(--color-border);display:flex;flex-direction:column;min-height:0;background:var(--color-surface)}.list-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border)}.list-head h2{font-size:var(--text-base);font-weight:700;margin:0;letter-spacing:var(--tracking-tight)}.list-head .sub{font-size:var(--text-xs);color:var(--color-text-muted)}.rows{flex:1;overflow:auto}.row{display:block;width:100%;text-align:left;padding:10px var(--space-4);border:0;border-bottom:1px solid var(--color-border);background:transparent;cursor:pointer;color:var(--color-text);transition:background var(--dur-fast) var(--ease-standard)}.row:hover{background:var(--color-surface-raised)}.row.on{background:var(--color-panel-tint)}.row .l1{display:flex;align-items:center;gap:var(--space-2)}.row .who{font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row.unread .who{font-weight:700}.row .time{font-size:var(--text-xs);color:var(--color-text-muted);white-space:nowrap}.row .subj{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}.row.unread .subj{font-weight:600}.row .prev{color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs)}.row .l3{display:flex;align-items:center;gap:var(--space-2);margin-top:4px;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-2xs);font-weight:500;background:var(--color-tag-bg);color:var(--color-tag-text);border-radius:var(--radius-pill);padding:1px 8px;white-space:nowrap}.chip svg{width:11px;height:11px}.chip.brand{background:transparent;border:1px solid var(--color-border);color:var(--color-text)}.chip.status-waiting{color:var(--color-text-muted)}.chip.status-done{color:var(--color-up)}.chip.ro{color:var(--color-text-muted)}.unreaddot{width:7px;height:7px;border-radius:50%;background:var(--tsg-lime-deep);flex:none}.av{width:22px;height:22px;border-radius:50%;background:var(--color-surface-sunken);border:1px solid var(--color-border);display:inline-grid;place-items:center;font-size:9px;font-weight:600;flex:none}.av.none{border-style:dashed;color:var(--color-text-muted)}.more{margin:var(--space-3)}.thread{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--color-surface-raised)}.thead{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);background:var(--color-surface);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--space-3) var(--space-4)}.thead h3{font-size:var(--text-md);font-weight:700;letter-spacing:var(--tracking-tight);line-height:1.25;margin:0}.thead .sub{display:flex;gap:var(--space-3);align-items:center;margin-top:6px;flex-wrap:wrap;font-size:var(--text-xs);color:var(--color-text-secondary)}.tactions{display:flex;gap:var(--space-2);flex:none;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:var(--text-xs);border-radius:var(--radius-pill);padding:7px 14px;border:1px solid var(--color-border-strong);background:var(--color-pill-bg);color:var(--color-pill-text);cursor:pointer;white-space:nowrap;transition:background var(--dur-hover) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}.btn:hover{background:var(--color-surface-sunken)}.btn:active{transform:scale(.97)}.btn.pri{background:var(--btn-primary-bg);color:var(--color-on-accent);border-color:transparent}[data-theme=light] .btn.pri{color:var(--tsg-white)}.btn.pri:hover{background:var(--btn-primary-bg-hover)}.btn.pri:active{background:var(--btn-primary-bg-press)}.btn.on{background:var(--color-pill-active-bg);color:var(--color-pill-active-text);border-color:transparent}.btn:disabled{opacity:.5;cursor:default}select.btn,.btn select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.seg{display:inline-flex;border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);overflow:hidden}.seg button{border:0;background:var(--color-pill-bg);color:var(--color-pill-text);padding:6px 12px;font-size:var(--text-xs);font-weight:600;cursor:pointer}.seg button+button{border-left:1px solid var(--color-border)}.seg button.on{background:var(--color-pill-active-bg);color:var(--color-pill-active-text)}.msgs{flex:1;overflow:auto;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}.msg{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);max-width:760px;width:100%;box-shadow:var(--shadow-card)}.msg.out{align-self:flex-end;border-color:var(--color-border-strong)}.msg .mh{display:flex;justify-content:space-between;gap:var(--space-3);font-size:var(--text-xs);margin-bottom:6px;color:var(--color-text-secondary);flex-wrap:wrap}.msg .mh b{font-weight:600;color:var(--color-text)}.msg .to{font-size:var(--text-2xs);color:var(--color-text-muted);margin-bottom:6px}.mailframe{width:100%;border:0;display:block;min-height:40px}.chattext{white-space:pre-wrap;word-break:break-word}.att{display:inline-flex;gap:6px;align-items:center;margin:8px 8px 0 0;font-size:var(--text-xs);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:4px 10px;color:var(--color-text);text-decoration:none;background:var(--color-surface)}.att:hover{border-color:var(--color-border-bright)}.note{background:var(--color-tag-bg);border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);max-width:760px;width:100%;align-self:center}.note .mh{font-size:var(--text-xs);font-weight:600;margin-bottom:4px;display:flex;justify-content:space-between;gap:var(--space-3)}.note .mh span{font-weight:400;color:var(--color-text-muted)}.note p{margin:0;white-space:pre-wrap}.actline{align-self:center;font-size:var(--text-2xs);color:var(--color-text-muted)}.composer{border-top:1px solid var(--color-border);padding:var(--space-3) var(--space-5) var(--space-4);background:var(--color-surface)}.ctabs{display:flex;gap:var(--space-4);font-size:var(--text-xs);font-weight:600;margin-bottom:var(--space-2);align-items:center}.ctabs button{border:0;background:transparent;padding:0 0 4px;cursor:pointer;color:var(--color-text-muted);border-bottom:2px solid transparent}.ctabs button.on{color:var(--color-text);border-bottom-color:var(--color-text)}.ctabs .right{margin-left:auto;display:flex;gap:var(--space-2);align-items:center}.cfield{display:flex;gap:var(--space-2);align-items:center;font-size:var(--text-xs);margin-bottom:6px}.cfield label{width:28px;color:var(--color-text-muted)}.cfield input{flex:1;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:5px 8px;background:var(--color-surface)}.cbox{border:1px solid var(--color-border-strong);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);background:var(--color-surface)}.cbox textarea{width:100%;min-height:96px;border:0;resize:vertical;background:transparent;outline:none}.cbox.note{border-style:dashed;background:var(--color-tag-bg)}.cfoot{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap}.cfoot .files{display:flex;gap:6px;flex-wrap:wrap;font-size:var(--text-2xs)}.cfoot .files span{border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:1px 8px;display:inline-flex;gap:4px;align-items:center}.cfoot .files button{border:0;background:transparent;cursor:pointer;padding:0;display:inline-flex}.sendfail{display:flex;align-items:center;gap:var(--space-2);background:var(--tsg-magenta-soft);color:var(--tsg-ink);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2);font-size:var(--text-xs);font-weight:500}.sendfail .spacer{flex:1}.cust{width:264px;flex:none;border-left:1px solid var(--color-border);background:var(--color-surface);padding:var(--space-4);overflow:auto}.cust h4{font-size:var(--text-xs);font-weight:600;color:var(--color-text-secondary);margin:0 0 var(--space-2)}.cust .name{font-weight:700;font-size:var(--text-base);letter-spacing:var(--tracking-tight)}.cust .email{color:var(--color-text-muted);font-size:var(--text-xs);word-break:break-all}.placeholder{border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);padding:var(--space-3);color:var(--color-text-muted);font-size:var(--text-xs);margin-top:var(--space-4)}.kv{display:grid;grid-template-columns:auto 1fr;gap:4px var(--space-3);font-size:var(--text-xs);margin-top:var(--space-4)}.kv dt{color:var(--color-text-muted)}.kv dd{margin:0}.actlist{font-size:var(--text-2xs);color:var(--color-text-muted);margin-top:var(--space-4)}.actlist div{padding:2px 0;border-top:1px solid var(--color-border)}.state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-7) var(--space-5);color:var(--color-text-muted);gap:var(--space-2)}.state b{color:var(--color-text);font-weight:600;font-size:var(--text-base)}.state svg{width:28px;height:28px;opacity:.6}.skel{background:linear-gradient(90deg,var(--color-surface-sunken) 25%,var(--color-surface-raised) 50%,var(--color-surface-sunken) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--radius-sm)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skelrow{padding:12px var(--space-4);border-bottom:1px solid var(--color-border);display:flex;flex-direction:column;gap:6px}.skelrow .skel:nth-child(1){height:12px;width:55%}.skelrow .skel:nth-child(2){height:12px;width:85%}.skelrow .skel:nth-child(3){height:10px;width:70%}.signin{height:100%;display:grid;place-items:center;padding:var(--space-5)}.signin .card{max-width:26rem;width:100%;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-card)}.signin h1{font-size:var(--text-lg);font-weight:700;letter-spacing:var(--tracking-tight);margin:var(--space-4) 0 var(--space-2)}.signin p{color:var(--color-text-secondary);margin:0 0 var(--space-4)}.signin .btn{width:100%;justify-content:center;padding:10px 16px;font-size:var(--text-sm)}.admin{flex:1;overflow:auto;padding:var(--space-6) var(--space-5)}.admin .inner{max-width:var(--maxw-content);margin:0 auto}.admin h1{font-size:var(--text-xl);font-weight:700;letter-spacing:var(--tracking-tight);margin:0 0 var(--space-2)}.admin h2{font-size:var(--text-md);font-weight:700;margin:var(--space-6) 0 var(--space-2)}.admin p{color:var(--color-text-secondary);margin:0 0 var(--space-3);max-width:var(--maxw-prose)}.admin textarea{width:100%;min-height:96px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);background:var(--color-surface);font-family:var(--font-mono);font-size:var(--text-xs)}.admin table{width:100%;border-collapse:collapse;font-size:var(--text-xs);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.admin th{text-align:left;background:var(--color-table-head);color:var(--tsg-white);padding:8px 10px;font-weight:600}.admin td{padding:6px 10px;border-top:1px solid var(--color-border);vertical-align:middle}.admin tr:nth-child(2n) td{background:var(--color-row-shade)}[data-theme=dark] .admin tr:nth-child(2n) td{background:var(--color-surface-raised)}.admin input[type=text],.admin select{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:4px 8px;background:var(--color-surface);width:100%}.ok{color:var(--color-up);font-weight:600}.no{color:var(--color-down);font-weight:600}.toolbar{display:flex;gap:var(--space-2);align-items:center;margin-top:var(--space-3);flex-wrap:wrap}.muted{color:var(--color-text-muted)}@media(max-width:1100px){.cust{display:none}}@media(max-width:900px){.nav{width:180px}.list{width:300px}}