@font-face{font-family:Plex;src:url('assets/plex-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url('assets/plex-medium.woff2') format('woff2');font-style:normal;font-weight:500 700;font-display:swap}
:root{color-scheme:light;--paper:#f4f3ee;--surface:#fff;--sunken:#e9e9e2;--ink:#17302a;--muted:#56655f;--line:#dedfd6;--brand:#245b4d;--deep:#173f35;--accent:#f2a97f;--warm:#fbe7da;--cool:#e1ebee;--error:#9a2d1c;--success:#1f5a3f;--radius:14px;font:15px/1.55 Plex,'Segoe UI',sans-serif}
*{box-sizing:border-box}
body{font:inherit;margin:0;background:var(--paper);color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.58}
button[aria-busy=true]{cursor:progress}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid #b0562c;outline-offset:3px}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
h1{font-size:34px;font-weight:500;letter-spacing:-.03em;line-height:1.12}
h2{font-size:18px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
p{color:var(--muted)}
code{font:13px/1.5 ui-monospace,'SF Mono',Menlo,Consolas,monospace}

.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:22px;font-weight:500;letter-spacing:-.03em}
.brand img{display:block}

.button{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:var(--radius);border:1px solid transparent;font-weight:500;font-size:15px;text-decoration:none;transition:background .15s,border-color .15s,transform .15s}
.button:active:not(:disabled){transform:translateY(1px)}
.primary{background:var(--brand);color:#fff}
.secondary{background:var(--surface);color:var(--ink);border-color:#b7c2ba}
.accent{background:var(--accent);color:var(--deep)}
.text-button{min-height:44px;padding:10px 8px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:14px}
.danger{color:var(--error)}

.field-label{display:block;font-weight:500;font-size:14px;margin-bottom:8px}
.hint{font-size:13px;line-height:1.6;color:var(--muted)}
select,textarea{width:100%;border:1px solid #b7c2ba;border-radius:var(--radius);background:var(--surface)}
select{appearance:none;min-height:48px;padding:10px 44px 10px 16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317302a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
textarea{padding:14px 16px;resize:vertical;min-height:132px;line-height:1.65}
textarea::placeholder{color:#68746f}

.status{font-size:13px;line-height:1.55;margin-top:12px;overflow-wrap:anywhere}
.status:empty{display:none}
.status[data-phase=error]{color:var(--error)}
.status[data-phase=success]{color:var(--success)}
.status[data-phase=working]:before{content:'';display:inline-block;width:8px;height:8px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;margin-right:7px;animation:spin .8s linear infinite}

/* Toolbar popup */
.popup{width:360px;padding:18px}
.popup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.popup .brand{font-size:19px}
.icon-button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:12px;background:var(--sunken);color:var(--ink)}
.popup main{padding:22px 20px 20px;background:var(--surface);border:1px solid var(--line);border-radius:22px}
.popup h1{font-size:25px;letter-spacing:-.03em}
.destination{display:flex;gap:8px;align-items:center;margin:10px 0 22px;color:var(--muted);font-size:14px;min-width:0}
.destination svg{flex-shrink:0}
.destination strong{font-weight:400;overflow-wrap:anywhere;min-width:0}
.source-label{font-size:13px;color:var(--muted);font-weight:400}
.source-select{margin-bottom:12px}
.popup .primary{width:100%;justify-content:space-between;min-height:54px;padding:8px 8px 8px 20px;border-radius:16px}
.action-arrow{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--accent);color:var(--deep);font-size:20px;line-height:1}
.popup .status{min-height:40px;margin-top:14px}
.waiting{margin-bottom:16px;padding:14px 16px;background:var(--warm);border-radius:var(--radius)}
.waiting h2{font-size:14px;margin-bottom:4px}
.waiting p{font-size:13px;line-height:1.55;color:#5d4a3d}
.cancel{display:block;margin:2px 0 -8px -8px}
.popup[data-phase=success] h1{color:var(--success)}
.popup-footer{display:flex;gap:12px;justify-content:space-between;padding:14px 6px 0;color:var(--muted);font-size:12px}
.popup-footer a{flex-shrink:0}
.popup dialog{width:min(340px,calc(100vw - 32px));padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:0 18px 60px #17302a30}
.popup dialog::backdrop{background:#17302a66}
.popup dialog h2{font-size:19px}
.popup dialog p{margin-top:9px;font-size:13px;line-height:1.55}
.popup dialog .actions{display:flex;gap:10px;margin-top:20px}
.popup dialog .button{flex:1;min-height:44px;padding:9px 12px;border-radius:12px}
.popup dialog kbd{font:11px Plex,'Segoe UI',sans-serif;padding:2px 5px;border:1px solid #ffffff66;border-radius:5px;background:#ffffff22}

/* Privacy page */
.page-header{max-width:780px;margin:0 auto;padding:28px 32px 0;display:flex;align-items:center;justify-content:space-between}
.privacy{max-width:780px;margin:28px auto 72px;padding:48px 56px 56px;background:var(--surface);border:1px solid var(--line);border-radius:28px}
.privacy h1{margin-bottom:16px}
.privacy h2{margin-top:40px;margin-bottom:10px;font-size:20px}
.privacy p,.privacy ul{margin-top:12px;color:var(--muted)}
.privacy li{margin:8px 0}

@media(hover:hover){.primary:hover:not(:disabled){background:var(--deep)}.secondary:hover:not(:disabled){background:#f1f3ee;border-color:#8fa197}.accent:hover{background:#f6b993}.text-button:hover:not(:disabled),.icon-button:hover{background:#e2e3da;color:var(--ink)}.text-button.danger:hover:not(:disabled){background:#fbe9e3;color:var(--error)}}
@media(max-width:560px){.page-header{padding:20px 20px 0}.privacy{margin:20px 12px 40px;padding:32px 22px;border-radius:22px}.privacy h1{font-size:29px}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}