@layer base, layout, components, states, responsive;

@layer base {
  :root { --canvas:#f5f6f2; --paper:#fff; --ink:#1b2e29; --muted:#687260; --line:#e3e7df; --green:#2f6451; --lime:#d5f478; --lime-hover:#c6e965; --soft:#edf2e7; --danger:#a9473d; --radius:18px; font-family:Inter,"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink); background:var(--canvas); font-synthesis:none; -webkit-font-smoothing:antialiased; }
  * { box-sizing:border-box; }
  [hidden] { display:none !important; }
  body { margin:0; }
  button,input,textarea,select { font:inherit; }
  button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
  button { cursor:pointer; }
  button { color:inherit; }
  button:disabled { cursor:default; }
  button,a { touch-action:manipulation; }
  :focus-visible { outline:3px solid #6ca895; outline-offset:4px; }
  h1,h2,h3,p { margin:0; }
  a { color:inherit; }
  svg { display:block; }
  .icon { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
  .icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
  .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; }
  ::selection { background:#dceeb1; color:var(--ink); }
  ::-webkit-scrollbar { width:6px; height:6px; }
  ::-webkit-scrollbar-thumb { background:#d4dcd0; border-radius:6px; }
}

@layer layout {
  .app-shell { max-width:1320px; margin:0 auto; height:100dvh; min-height:580px; display:flex; flex-direction:column; padding:0 56px; }
  .topbar { display:flex; align-items:center; gap:30px; height:100px; min-height:100px; border-bottom:1px solid var(--line); }
  .brand { display:inline-flex; gap:12px; align-items:center; text-decoration:none; font-size:32px; font-weight:760; letter-spacing:-1.8px; }
  .brand-period { color:var(--green); }
  .brand-mark { position:relative; display:block; width:38px; height:38px; border-radius:12px; background:var(--ink); transform:rotate(-5deg); }
  .brand-mark span { position:absolute; width:22px; height:3px; background:var(--lime); left:8px; border-radius:2px; }
  .brand-mark span:first-child { top:12px; }
  .brand-mark span:last-child { top:23px; }
  .brand-mark span::after { content:""; position:absolute; width:8px; height:8px; border-top:3px solid var(--lime); border-right:3px solid var(--lime); right:0; top:-3px; transform:rotate(45deg); border-radius:1px; }
  .brand-mark span:last-child::after { right:auto; left:0; transform:rotate(-135deg); }
  .topbar-caption { color:var(--muted); font-size:13px; padding-top:6px; }
  .topbar-actions { display:flex; align-items:center; gap:23px; margin-left:auto; }
  .workspace { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 292px; gap:48px; padding-top:38px; }
  .inbox-panel { min-height:0; display:flex; flex-direction:column; }
  .inbox-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .eyebrow { font-size:10px; letter-spacing:1.8px; font-weight:750; color:var(--muted); line-height:1.6; }
  h1 { font-size:38px; letter-spacing:-1.8px; font-weight:640; line-height:1.3; margin-top:7px; }
  .heading-dot { color:#85a34a; }
  .inbox-description { color:var(--muted); font-size:13px; margin-top:7px; }
  .retention-hint { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--muted); white-space:nowrap; align-self:flex-end; padding-bottom:3px; }
  .retention-hint .icon { width:14px; height:14px; }
  .inbox-toolbar { margin-top:30px; display:flex; align-items:center; justify-content:space-between; min-height:48px; border-bottom:1px solid var(--line); padding-bottom:14px; }
  .items-scroll { min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; padding:18px 3px 12px; margin:0 -3px; }
  .items-list { display:flex; flex-direction:column; gap:12px; }
  .sidebar { display:flex; flex-direction:column; padding-bottom:28px; min-height:0; overflow:auto; scrollbar-width:thin; }
  .composer { padding-top:12px; padding-bottom:25px; flex-shrink:0; position:relative; background:var(--canvas); }
}

@layer components {
  .button { border:0; border-radius:11px; padding:12px 17px; min-height:44px; font-size:13px; font-weight:650; display:inline-flex; align-items:center; justify-content:center; gap:9px; white-space:nowrap; transition:background .18s,transform .18s,box-shadow .18s,border-color .18s; line-height:1.5; }
  .button:not(:disabled):active { transform:translateY(1px) scale(.985); }
  .button-primary { background:var(--ink); color:var(--lime); box-shadow:0 3px 0 #10221b0d; }
  .button-primary:not(:disabled):hover { background:#29473a; box-shadow:0 5px 16px #183b2020; }
  .button-quiet { background:#fff9; border:1px solid var(--line); }
  .button-quiet:hover { background:#fff; }
  .button-outline { background:transparent; border:1px solid #d7dfd2; }
  .button-outline:not(:disabled):hover { background:#f1f5eb; border-color:#bac9ae; }
  .button-danger { background:#a9473d; color:white; }
  .button-danger:not(:disabled):hover { background:#923a31; }
  .button:disabled { opacity:.5; }
  .button .icon { width:17px; height:17px; }
  .full-width { width:100%; }
  .text-button { border:0; background:transparent; padding:0; min-height:32px; display:inline-flex; align-items:center; justify-content:center; gap:7px; color:var(--green); font-size:11px; font-weight:600; text-decoration:none; transition:color .2s; }
  .text-button:hover { color:#162e23; }
  .text-button .icon { width:14px; height:14px; transition:transform .2s; }
  .text-button:hover .icon { transform:translateX(2px); }
  .icon-button { width:36px; height:36px; min-width:36px; display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; color:var(--muted); border-radius:9px; transition:background .2s,color .2s; }
  .icon-button:hover:not(:disabled) { background:#e8eddf; color:var(--ink); }
  .icon-button:disabled { opacity:.3; }
  .icon-button .icon { width:17px; height:17px; }
  .service-status { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:550; color:var(--green); }
  .status-dot,.tiny-dot { width:6px; height:6px; border-radius:50%; background:#7a9e75; display:inline-block; flex-shrink:0; }
  .service-status .status-dot { box-shadow:0 0 0 4px #82a57812; }
  .count-badge { background:#e9eedf; border-radius:6px; padding:2px 6px; font-size:10px; min-width:21px; text-align:center; }
  .device-toggle { padding:9px 12px; min-height:39px; gap:8px; font-size:11px; }
  .filters { display:flex; align-items:center; gap:4px; }
  .filter { display:flex; align-items:center; justify-content:center; gap:7px; border:0; background:transparent; color:var(--muted); font-weight:550; font-size:12px; padding:8px 13px; border-radius:8px; min-height:32px; transition:background .2s,color .2s; }
  .filter.active { color:var(--ink); background:#e8eddf; }
  .filter:hover { color:var(--ink); }
  .filter span { font-size:10px; color:#65725a; font-variant-numeric:tabular-nums; }
  .toolbar-actions { display:flex; gap:4px; }
  .search-wrap { display:flex; align-items:center; gap:10px; padding:7px 12px; margin-top:12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
  .search-wrap>.icon { width:16px; height:16px; color:var(--muted); }
  .search-wrap input { min-width:0; width:100%; border:0; outline:0; background:transparent; padding:5px 0; font-size:13px; color:var(--ink); }
  .search-wrap:focus-within { border-color:#6ca895; box-shadow:0 0 0 3px #6ca89518; }
  .item-card { background:white; border:1px solid #e2e7de; padding:19px 20px 16px; border-radius:15px; box-shadow:0 2px 5px #28382002; transition:border-color .2s,box-shadow .2s; }
  .item-card:hover { border-color:#c6d3be; box-shadow:0 4px 16px #28382005; }
  .item-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
  .item-type { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:650; letter-spacing:.1px; }
  .item-type .icon { width:14px; height:14px; color:#70906c; }
  .item-time { display:flex; align-items:center; gap:8px; font-size:11px; color:#65725a; }
  .item-delete { opacity:0; width:24px; height:24px; min-width:24px; margin:-5px -6px -5px 0; }
  .item-delete .icon { width:13px; height:13px; }
  .item-card:hover .item-delete,.item-delete:focus-visible { opacity:1; }
  .link-content { display:flex; gap:13px; align-items:center; margin-bottom:17px; }
  .link-tile { width:45px; height:45px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#eef3e8; color:#59704a; }
  .link-tile .icon { width:21px; height:21px; }
  .link-text { min-width:0; }
  .link-title { font-size:15px; font-weight:650; letter-spacing:-.25px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
  .link-address { margin-top:5px; color:#65725a; font-size:11px; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-decoration:none; }
  .link-address:hover { color:var(--green); text-decoration:underline; }
  .text-content { font-size:15px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; margin-bottom:18px; letter-spacing:-.15px; max-height:260px; overflow:auto; }
  .item-bottom { display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid #f0f2ec; padding-top:12px; }
  .item-source { min-width:0; display:flex; align-items:center; gap:6px; font-size:11px; color:#65725a; }
  .item-source .icon { width:13px; height:13px; }
  .item-source span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .item-actions { display:flex; gap:7px; }
  .item-actions .button { min-height:32px; padding:6px 10px; border-radius:7px; font-size:11px; text-decoration:none; gap:5px; }
  .item-actions .button .icon { width:12px; height:12px; }
  .copy-button { border:1px solid #e4e8df; background:white; color:#596753; min-width:67px; }
  .copy-button:hover { background:#f3f6ee; }
  .open-button { background:#eaf0e1; color:#426139; }
  .open-button:hover { background:#dfe9d1; }
  .composer-inner { border:1px solid #d8e0d0; background:#fff; border-radius:17px; padding:17px 18px 12px; box-shadow:0 5px 24px #354a2810; transition:border-color .2s,box-shadow .2s; }
  .composer-inner:focus-within { border-color:#8aa677; box-shadow:0 0 0 3px #c7d9b52b,0 5px 24px #354a280b; }
  .composer textarea { display:block; width:100%; border:0; resize:none; outline:0; color:var(--ink); background:transparent; min-height:46px; max-height:150px; font-size:14px; line-height:1.6; padding:0; scrollbar-width:thin; }
  .composer textarea::placeholder { color:#65725a; }
  .composer-controls { display:flex; align-items:center; justify-content:space-between; margin-top:5px; gap:8px; }
  .composer-left { position:relative; display:flex; align-items:center; color:#65725a; gap:6px; }
  .composer-left>.icon { width:13px; height:13px; }
  .composer-left select { appearance:none; border:0; background:transparent; padding:7px 18px 7px 0; color:#65725a; font-size:10px; cursor:pointer; max-width:180px; }
  .composer-left .select-chevron { pointer-events:none; position:absolute; right:0; width:12px; height:12px; }
  .send-button { min-height:39px; min-width:98px; background:var(--lime); border-radius:10px; padding:9px 15px; gap:19px; color:#203422; font-size:12px; box-shadow:0 2px 0 #b4d45c; }
  .send-button:hover:not(:disabled) { background:var(--lime-hover); box-shadow:0 3px 10px #c1df7f55; }
  .send-button:disabled { background:#e8eddf; color:#65725a; box-shadow:none; opacity:1; }
  .send-button .icon { width:17px; height:17px; }
  .composer-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; padding:0 2px; color:#65725a; font-size:9px; min-height:16px; }
  #composer-hint { display:flex; align-items:center; gap:6px; }
  .tiny-dot { width:4px; height:4px; background:#92a47f; }
  .shortcut-hint { color:#65725a; white-space:nowrap; font-size:9px; }
  kbd { font-family:inherit; font-size:9px; border:1px solid #e2e7da; padding:1px 4px; border-radius:3px; background:#f9faf6; }
  .composer-error,.inline-error { margin-top:10px; color:var(--danger); font-size:12px; line-height:1.6; }
  .devices-card { background:#eef1e8; border:1px solid #e3e8db; padding:22px 21px 18px; border-radius:17px; }
  .section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
  .section-heading h2 { font-size:14px; font-weight:650; letter-spacing:-.1px; }
  .small-count { font-size:10px; color:#65725a; font-variant-numeric:tabular-nums; }
  .device-row { display:flex; align-items:center; gap:11px; padding:15px 0; min-height:72px; }
  .device-row+.device-row { border-top:1px solid #dee5d6; }
  .device-icon { width:35px; height:39px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:#e2e9d9; color:#637850; flex-shrink:0; }
  .device-icon .icon { width:18px; height:18px; }
  .device-copy { flex:1; min-width:0; }
  .device-name { display:block; font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .device-meta { margin-top:5px; color:#65725a; font-size:10px; display:flex; align-items:center; gap:5px; }
  .device-meta .status-dot { width:4px; height:4px; background:#8aab76; }
  .device-meta .offline-dot { background:#bac2b2; }
  .device-current { font-size:8px; color:#65725a; background:#e2ead8; padding:3px 5px; border-radius:4px; letter-spacing:.3px; }
  .devices-card>.button { margin-top:13px; font-size:11px; min-height:40px; color:#5f774d; }
  .sidebar-join { width:100%; font-size:10px; font-weight:500; margin-top:7px; color:#65725a; }
  .little-note { padding:29px 7px 0; }
  .note-icon { width:31px; height:34px; display:flex; align-items:center; justify-content:center; color:#8da277; margin-bottom:12px; }
  .note-icon .icon { width:24px; height:24px; stroke-width:1.3; }
  .little-note h2 { font-size:13px; font-weight:650; }
  .little-note p { font-size:12px; color:#65725a; line-height:1.85; margin-top:9px; max-width:235px; }
  .little-note .text-button { font-size:10px; color:#65725a; justify-content:flex-start; margin-top:10px; }
  .little-note .text-button .icon { width:12px; height:12px; }
  .sidebar-footer { margin-top:auto; padding:35px 7px 3px; display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
  .sidebar-footer>span { font-size:8px; letter-spacing:1.6px; color:#65725a; }
  .empty-state { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px 16px 35px; text-align:center; }
  .empty-art { position:relative; height:122px; width:260px; margin-bottom:24px; display:flex; align-items:center; justify-content:center; gap:13px; }
  .empty-desktop { width:93px; height:82px; border-radius:22px; background:#e8eddc; color:#70865c; display:flex; align-items:center; justify-content:center; transform:rotate(-8deg); border:1px solid #dce5cd; }
  .empty-desktop>svg { width:51px; height:51px; fill:none; stroke:currentColor; stroke-width:1; stroke-linejoin:round; stroke-linecap:round; }
  .empty-phone { width:64px; height:96px; border-radius:20px; background:#f3f1e6; color:#aa9b70; display:flex; align-items:center; justify-content:center; transform:rotate(9deg) translateY(8px); border:1px solid #e9e3ce; }
  .empty-phone>svg { width:40px; height:58px; fill:none; stroke:currentColor; stroke-width:1; stroke-linejoin:round; stroke-linecap:round; }
  .empty-bridge { display:flex; align-items:center; gap:4px; color:#a2b287; }
  .empty-bridge span { width:3px; height:3px; border-radius:50%; background:#c1cdae; }
  .empty-bridge .icon { width:19px; }
  .art-spark { position:absolute; width:4px; height:4px; border-radius:50%; background:#c5d2ac; }
  .spark-one { left:112px; top:3px; }
  .spark-two { right:25px; bottom:0; width:7px; height:7px; background:#ded6b8; }
  .empty-kicker { color:#65725a; font-size:8px; letter-spacing:1.5px; font-weight:600; margin-bottom:11px; }
  .empty-state h2 { font-size:31px; line-height:1.25; letter-spacing:-1.25px; font-weight:580; }
  .empty-state>p:not(.empty-kicker) { color:#65725a; font-size:12px; line-height:1.85; margin-top:13px; }
  .empty-state>.button { margin-top:25px; min-height:42px; font-size:11px; }
  .empty-join { margin-top:8px; font-size:10px; color:#65725a; }
  .startup-state,.error-state,.search-empty { text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100%; padding:35px 20px; gap:16px; }
  .startup-state p { color:var(--muted); font-size:12px; }
  .search-empty>.icon { width:30px; height:30px; color:#65725a; }
  .search-empty h2,.error-state h2 { font-size:22px; letter-spacing:-.5px; font-weight:600; }
  .search-empty p,.error-state p { font-size:13px; color:var(--muted); line-height:1.8; max-width:390px; }
  .error-symbol { display:flex; justify-content:center; align-items:center; border-radius:50%; color:var(--danger); width:45px; height:45px; background:#f3e8e3; font-size:24px; }
  .spinner { width:19px; height:19px; border:2px solid #d7e1cd; border-top-color:var(--green); border-radius:50%; display:inline-block; animation:spin .75s linear infinite; flex-shrink:0; }
  .notice { display:flex; gap:9px; align-items:center; min-height:40px; padding:8px 14px; background:#f2edda; border:1px solid #e6dfc4; border-radius:9px; margin-top:12px; font-size:11px; color:#7c7147; flex-shrink:0; }
  .notice>.icon { width:15px; height:15px; }
  .notice .text-button { margin-left:auto; color:#73683c; font-size:10px; white-space:nowrap; }
  .modal { width:calc(100% - 40px); max-width:455px; border:1px solid #e1e7da; border-radius:24px; padding:27px 30px 30px; color:var(--ink); background:#fafbf7; box-shadow:0 30px 100px #1d332b2e; max-height:calc(100dvh - 48px); overflow:auto; }
  .modal::backdrop { background:#17291f55; backdrop-filter:blur(6px); }
  .modal[open] { animation:modal-in .22s cubic-bezier(.2,.8,.2,1); }
  .modal-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:23px; min-height:28px; }
  .modal-top>.icon-button { margin-right:-9px; margin-top:-5px; }
  .modal-top .eyebrow { font-size:9px; letter-spacing:1.7px; }
  .modal h2 { font-size:28px; line-height:1.2; letter-spacing:-1px; font-weight:600; }
  .modal-description { color:#65725a; font-size:12px; line-height:1.8; margin-top:13px; }
  .modal-symbol { display:flex; align-items:center; justify-content:center; width:51px; height:51px; color:#678850; background:#eaf0df; border:1px solid #e0e8d5; border-radius:15px; margin-bottom:20px; }
  .modal-symbol .icon { width:25px; height:25px; }
  .connection-tabs { display:flex; padding:4px; background:#edf1e5; border-radius:10px; margin-bottom:27px; gap:5px; }
  .connection-tabs button { flex:1; border:0; background:transparent; border-radius:7px; min-height:36px; font-size:11px; color:#65725a; }
  .connection-tabs button.active { background:#fff; box-shadow:0 1px 5px #23361b0a; color:var(--ink); font-weight:600; }
  .pair-code { display:flex; align-items:center; justify-content:center; border:1px solid #dce6ce; background:#eef4e6; min-height:90px; border-radius:14px; font-size:34px; letter-spacing:6px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:25px; padding-left:6px; }
  .pair-code-footer { display:flex; align-items:center; justify-content:space-between; margin:6px 0 18px; gap:10px; }
  .pair-code-footer>span { display:flex; align-items:center; gap:5px; color:#65725a; font-size:10px; }
  .pair-code-footer .icon { width:13px; height:13px; }
  .connection-address { padding:13px 16px; border:1px solid var(--line); border-radius:10px; font-size:11px; margin-top:20px; color:#65725a; }
  .connection-address strong { font-weight:650; color:#516645; overflow-wrap:anywhere; }
  .connection-footnote { display:flex; align-items:flex-start; gap:7px; font-size:10px; line-height:1.7; color:#65725a; padding-top:21px; border-top:1px solid var(--line); margin-top:21px; }
  .connection-footnote .icon { width:14px; height:14px; margin-top:2px; color:#8da777; }
  .join-form { margin-top:22px; }
  .join-form label { display:block; margin-bottom:9px; color:#65725a; font-size:10px; font-weight:600; }
  .code-input { width:100%; border:1px solid #d6e1c9; background:white; color:var(--ink); text-align:center; border-radius:12px; min-height:73px; font-size:31px; letter-spacing:7px; font-weight:550; padding:12px 8px 12px 15px; font-variant-numeric:tabular-nums; }
  .code-input::placeholder { color:#cad4bd; }
  .join-form>.button { margin-top:17px; }
  .phrase-box { background:#edf3e4; border:1px solid #dce7cd; border-radius:13px; padding:21px 17px; margin-top:23px; }
  .phrase-box>span { font-size:8px; letter-spacing:1.5px; color:#65725a; font-weight:600; display:block; margin-bottom:11px; }
  .phrase-box strong { font-size:21px; line-height:1.5; font-weight:600; letter-spacing:-.3px; color:#3f5e32; display:block; }
  .check-label { display:flex; align-items:flex-start; gap:9px; margin:20px 0; font-size:11px; color:#65725a; line-height:1.6; cursor:pointer; }
  .check-label input { width:17px; height:17px; margin:1px 0 0; accent-color:#577d3e; flex-shrink:0; }
  .modal-actions { display:flex; gap:10px; margin-top:22px; }
  .modal-actions>.button { flex:1; }
  .waiting-status { display:flex; align-items:center; justify-content:center; gap:9px; font-size:11px; color:#65725a; margin-top:23px; }
  .waiting-status .spinner { width:14px; height:14px; }
  .success-symbol { background:#e5efcf; color:#60803e; border-color:#d6e4bf; }
  .success-symbol .icon { stroke-width:2; }
  .devices-modal .device-list { margin:17px 0 24px; }
  .devices-modal .device-row { padding:16px 0; }
  .devices-modal .device-name { font-size:12px; }
  .devices-modal .device-meta { font-size:10px; }
  .device-policy { border-top:1px solid var(--line); color:#65725a; margin-top:18px; padding-top:17px; font-size:10px; line-height:1.8; }
  .modal-join { width:100%; margin-top:10px; }
  .danger-text { color:#92594a; margin-top:15px; font-size:10px; }
  .danger-text:hover { color:var(--danger); }
  .warning { background:#f5eae3; color:#ac7255; border-color:#eeded3; }
  .privacy-list>div { border-top:1px solid var(--line); padding-top:16px; margin-top:18px; }
  .privacy-list h3 { font-size:12px; font-weight:650; }
  .privacy-list p { color:#65725a; font-size:11px; line-height:1.85; margin-top:7px; }
  .toast { position:fixed; z-index:20; left:50%; bottom:26px; transform:translateX(-50%); background:#21392e; color:#eef6e4; border:1px solid #ffffff14; border-radius:12px; padding:13px 18px; font-size:12px; display:flex; align-items:center; gap:10px; box-shadow:0 6px 30px #142b3029; max-width:calc(100% - 32px); animation:toast-in .2s ease; }
  .toast>.icon { color:var(--lime); width:17px; height:17px; }
  .noscript { position:fixed; inset:0; background:var(--canvas); display:grid; place-items:center; padding:30px; }
}

@layer states {
  .item-card.arrived { animation:item-in .32s ease,arrival-glow 1.5s ease; }
  .copy-button.copied { color:#4a7439; border-color:#bbd59d; background:#f0f7e7; }
  .service-status.offline { color:#ad8757; }
  .service-status.offline .status-dot { background:#bd9b66; box-shadow:0 0 0 4px #bd9b6612; }
  .is-sending .send-button { gap:10px; }
  .is-sending .send-button .icon { display:none; }
  .revoked .composer { opacity:.6; }
  @keyframes spin { to { transform:rotate(360deg); } }
  @keyframes item-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
  @keyframes arrival-glow { 0%,30% { border-color:#9ac27c; background:#f6fbea; } 100% { border-color:#e2e7de; background:#fff; } }
  @keyframes modal-in { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
  @keyframes toast-in { from { opacity:0; translate:0 7px; } to { opacity:1; translate:0 0; } }
}

@layer responsive {
  @media (min-width:1600px) { .app-shell { max-width:1390px; } .workspace { padding-top:45px; gap:60px; } }
  @media (max-width:1150px) { .app-shell { padding:0 32px; } .workspace { gap:30px; grid-template-columns:minmax(0,1fr) 265px; } .retention-hint { display:none; } .devices-card { padding:20px 18px 17px; } }
  @media (max-width:900px) { .sidebar { display:none; } .workspace { display:flex; } .inbox-panel { flex:1; min-width:0; } .app-shell { max-width:790px; } .topbar-caption { display:none; } .retention-hint { display:flex; } }
  @media (max-width:600px) {
    body { height:100dvh; overflow:hidden; }
    .app-shell { height:100dvh; min-height:0; padding:env(safe-area-inset-top) 20px 0; }
    .topbar { height:74px; min-height:74px; gap:12px; }
    .brand { font-size:28px; gap:9px; letter-spacing:-1.5px; }
    .brand-mark { width:32px; height:32px; border-radius:10px; }
    .brand-mark span { left:7px; width:18px; height:2px; }
    .brand-mark span:first-child { top:10px; }
    .brand-mark span:last-child { top:20px; }
    .brand-mark span::after { width:6px; height:6px; border-width:2px; top:-2px; }
    .topbar-actions { gap:13px; }
    .service-status { font-size:9px; gap:6px; }
    .status-dot { width:5px; height:5px; }
    .device-toggle { min-height:38px; padding:7px 10px; gap:7px; background:#fff8; border-radius:10px; }
    .device-button-label { display:none; }
    .count-badge { min-width:18px; font-size:9px; padding:2px 4px; }
    .workspace { padding-top:24px; }
    .eyebrow { font-size:8px; letter-spacing:1.5px; }
    h1 { margin-top:5px; font-size:30px; letter-spacing:-1.2px; }
    .inbox-description { font-size:11px; margin-top:5px; }
    .retention-hint { display:none; }
    .inbox-toolbar { margin-top:19px; padding-bottom:10px; min-height:46px; }
    .filter { font-size:11px; min-height:34px; padding:8px 12px; }
    .toolbar-actions { gap:2px; }
    .icon-button { width:38px; height:38px; min-width:38px; }
    .items-scroll { padding-top:13px; }
    .item-card { padding:17px 16px 14px; border-radius:14px; }
    .item-delete { opacity:.65; width:28px; height:28px; min-width:28px; }
    .item-top { margin-bottom:13px; }
    .item-type { font-size:10px; }
    .item-time { gap:7px; }
    .item-time time { font-size:9px; }
    .link-title { font-size:15px; }
    .link-address { font-size:10px; }
    .text-content { font-size:14px; line-height:1.7; max-height:220px; }
    .item-source { font-size:9px; }
    .item-actions .button { min-height:36px; font-size:10px; padding:8px 11px; }
    .item-actions .button .icon { width:13px; height:13px; }
    .composer { padding:9px 0 max(13px,env(safe-area-inset-bottom)); }
    .composer::before { content:""; position:absolute; height:16px; top:-7px; left:0; right:0; background:linear-gradient(transparent,var(--canvas)); pointer-events:none; }
    .composer-inner { padding:14px 14px 11px; border-radius:16px; }
    .composer textarea { font-size:16px; line-height:1.5; min-height:43px; max-height:108px; }
    .composer-controls { margin-top:6px; }
    .composer-left select { font-size:10px; min-height:32px; }
    .send-button { min-height:42px; min-width:94px; padding:10px 13px; font-size:12px; gap:17px; }
    .composer-meta { margin-top:9px; font-size:8px; justify-content:center; }
    .shortcut-hint { display:none; }
    .composer-error { font-size:11px; margin-top:7px; }
    .empty-state { padding:20px 10px 24px; }
    .empty-art { transform:scale(.85); height:100px; margin-bottom:17px; }
    .empty-kicker { font-size:7px; }
    .empty-state h2 { font-size:28px; }
    .empty-state>p:not(.empty-kicker) { font-size:11px; line-height:1.8; margin-top:11px; }
    .empty-state>.button { margin-top:20px; min-height:43px; }
    .empty-join { min-height:37px; }
    .modal { width:calc(100% - 24px); padding:23px 24px 26px; border-radius:22px; max-height:calc(100dvh - 28px); }
    .modal h2 { font-size:27px; }
    .modal-description { font-size:12px; }
    .modal .button { min-height:46px; }
    .modal .icon-button { width:40px; height:40px; }
    .modal-top { margin-bottom:20px; }
    .code-input { font-size:30px; letter-spacing:6px; min-height:72px; }
    .phrase-box strong { font-size:20px; }
    .pair-code { font-size:32px; letter-spacing:5px; }
    .toast { bottom:calc(180px + env(safe-area-inset-bottom)); font-size:11px; white-space:nowrap; padding:12px 16px; }
    .notice { padding:9px 10px; margin-top:10px; font-size:10px; }
    .device-policy { font-size:10px; }
    .devices-modal .device-meta { font-size:10px; }
    .device-row .icon-button { width:44px; height:44px; }
  }
  @media (max-height:780px) and (min-width:601px) { .topbar { height:82px; min-height:82px; } .workspace { padding-top:24px; } .inbox-toolbar { margin-top:20px; } .empty-art { height:80px; transform:scale(.8); margin-bottom:12px; } .empty-state h2 { font-size:27px; } .empty-state { padding:18px 12px; } .empty-state>.button { margin-top:17px; } }
  @media (max-height:760px) and (max-width:600px) { .workspace { padding-top:17px; } .inbox-description { display:none; } .inbox-toolbar { margin-top:12px; } .empty-art { height:73px; transform:scale(.65); margin-bottom:7px; } .empty-state { padding:10px; } .empty-kicker { display:none; } .empty-state h2 { font-size:25px; } .empty-state>p:not(.empty-kicker) { margin-top:7px; } .empty-state>.button { margin-top:13px; } .empty-join { margin-top:2px; } }
  @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }
}