:root { --paper:#f4f2ec; --panel:#fffdf8; --panel-muted:#edece4; --ink:#292e27; --muted:#697064; --quiet:#72796b; --line:#dddfd4; --line-dark:#c3c9b9; --clay:#ac492e; --clay-deep:#9d4028; --clay-soft:#ac492e0d; --sage:#385c45; --sage-deep:#253f33; --sage-soft:#385c4510; --forest:#253f33; --danger:#a73524; }
[data-theme="dark"] { --paper:#191e1a; --panel:#222a23; --panel-muted:#2b352c; --ink:#f0f1e7; --muted:#a5b09b; --quiet:#9ba793; --line:#394434; --line-dark:#59654f; --clay:#eda889; --clay-deep:#f4b69b; --clay-soft:#eda88912; --sage:#a9bf95; --sage-deep:#c9d8b9; --sage-soft:#a9bf9512; --forest:#2d4c3b; --danger:#ffaf99; }
body { min-width:0; line-height:1.65; }
.app-shell { width:100%; max-width:1180px; padding:0 42px 28px; margin:auto; }
.topbar { min-height:90px; padding:18px 0; }
.brand { align-items:center; gap:12px; }.brand strong { font-size:16px; font-weight:600; }.brand small { font-size:9px; letter-spacing:.14em; margin-left:3px; }
.brand-icon { display:grid; place-items:center; width:31px; height:34px; border:1px solid var(--line-dark); border-radius:3px 12px 3px 3px; color:var(--clay); font-size:24px; }
.topbar-actions { gap:16px; }.status-chip { border:0; background:none; font-size:11px; font-weight:400; padding:0; }
.service-menu summary { border:0; background:none; font-weight:400; min-height:40px; }
.service-menu nav { border-radius:12px; padding:8px; }.service-menu nav a { padding:12px; font-size:13px; }
.tool-head { display:flex; border:0; padding:42px 0 32px; align-items:center; position:relative; }
.intro-kicker { color:var(--clay)!important; font-size:10px!important; letter-spacing:.15em; margin:0 0 22px!important; }
.tool-head h1 { font-size:clamp(40px,5.4vw,66px); line-height:1.2; letter-spacing:-.055em; font-weight:500; }.tool-head h1 span { color:var(--clay); }
.tool-head p:not(.intro-kicker) { margin-top:22px; line-height:1.9; font-size:13px; }
.parcel-art { position:relative; width:320px; height:238px; margin-right:45px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); transform:rotate(-8deg); }
.parcel-art::before { content:""; position:absolute; width:360px; height:180px; border:1px solid var(--line); border-radius:50%; transform:rotate(-30deg); }
.parcel-sheet { position:relative; width:166px; height:213px; background:var(--forest); color:#e8ecdc; transform:rotate(16deg); padding:22px; box-shadow:14px 14px 0 color-mix(in srgb,var(--forest) 9%,transparent); }
.parcel-sheet::after { content:""; position:absolute; right:0; top:0; border-left:23px solid #9db091; border-top:23px solid var(--paper); }
.parcel-sheet > span { font-size:8px; letter-spacing:.14em; }.parcel-sheet i { display:block; margin:4px 0 8px; font:400 78px/.9 Georgia,serif; font-style:normal; }.parcel-sheet b { font-size:8px; letter-spacing:.13em; font-weight:400; }
.parcel-barcode { height:20px; margin-top:12px; background:repeating-linear-gradient(90deg,#dde4d0 0 1px,transparent 1px 4px,#dde4d0 4px 6px,transparent 6px 8px,#dde4d0 8px 9px,transparent 9px 13px); opacity:.7; }
.parcel-orbit { position:absolute; bottom:-20px; right:15px; font-size:8px; letter-spacing:.14em; color:var(--muted); transform:rotate(8deg); }
.transfer-meta { display:flex; align-items:center; gap:26px; padding:16px 0; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }.transfer-meta span:first-child { margin-right:auto; color:var(--sage-deep); }.transfer-meta i { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--sage); margin-right:8px; }
.transfer-tabs { display:none; }
.transfer-grid { gap:24px; border:0; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:start; }
.transfer-panel { background:var(--panel); border:1px solid var(--line); padding:28px; border-radius:12px; }
.receive-panel { background:var(--panel-muted); padding:28px; border:1px solid var(--line); min-height:360px; }
.panel-number { color:var(--muted); font-size:9px; letter-spacing:.15em; }.panel-heading { margin-bottom:24px; }.panel-heading h2 { display:flex; align-items:center; justify-content:space-between; margin-top:8px; font-size:20px; font-weight:500; letter-spacing:-.025em; }.panel-heading h2 span { font-size:24px; color:var(--sage-deep); }
.dropzone { min-height:208px; gap:8px; background:var(--paper); border-color:var(--line-dark); border-radius:8px; }.dropzone:hover { transform:translateY(-2px); }.dropzone.is-active { transform:scale(.99); }.dropzone b { font-size:16px; font-weight:500; }.dropzone > span:not(.text-button) { font-size:10px; }.drop-symbol svg { height:47px; width:42px; margin-bottom:5px; }.text-button { font-size:11px; font-weight:500; }
.control-group { margin-top:24px; }.control-group legend { font-size:11px; letter-spacing:0; font-weight:500; }.expiry-options { gap:6px; }.expiry-options label { flex:1; }.expiry-options span { min-width:0; min-height:40px; display:grid; place-items:center; font-weight:400; font-size:11px; }.expiry-options input:checked + span { color:var(--panel); background:var(--sage-deep); }
[data-theme="dark"] .expiry-options input:checked + span { color:var(--paper); }
.toggle-row { margin-top:23px; gap:12px; }.toggle-row b { font-weight:500; }.toggle-row small { font-size:10px; margin-top:4px; }.toggle-row input:focus-visible + .switch { outline:2px solid var(--clay); outline-offset:4px; }
.primary-button,.secondary-button { width:100%; min-height:46px; border-radius:7px; font-size:12px; font-weight:500; }
.primary-button { color:#f4f2ec; background:var(--forest); border-color:var(--forest); box-shadow:none; }.primary-button:hover { background:#36563f; border-color:#36563f; box-shadow:none; transform:translateY(-1px); }.primary-button:disabled { opacity:.4; transform:none; }
.secondary-button { border:1px solid var(--line-dark); color:var(--sage-deep); background:var(--panel); }.secondary-button:hover { background:var(--sage-soft); border-color:var(--sage); }
.receive-form { display:flex; flex-direction:column; gap:0; }.receive-form label { font-size:11px; font-weight:500; letter-spacing:0; }.receive-form input { width:100%; min-width:0; height:54px; padding:12px; background:var(--panel); border:1px solid var(--line-dark); border-radius:7px; color:var(--ink); font:400 13px/1.5 ui-monospace,Consolas,monospace; letter-spacing:.025em; }.receive-form input::placeholder { font-size:11px; color:var(--quiet); }
.panel-description { line-height:1.8; font-size:12px; margin-bottom:25px; }.form-error { font-size:11px; margin-top:10px; min-height:26px; }
.file-summary { min-height:125px; margin:0; padding:15px; background:var(--paper); }.file-badge { min-width:40px; padding:12px 5px; font-weight:500; }.icon-button { height:38px; width:38px; }
.result-panel { padding:22px 0 0; margin-top:24px; border-top:1px dashed var(--line-dark); background:none; }.result-title { font-size:13px; color:var(--sage-deep); margin:0 0 12px; }.receipt-caption { color:var(--muted); font-size:10px; margin:0 0 4px; }.code-row { align-items:start; gap:10px; }.code-row code { overflow-wrap:anywhere; font-size:clamp(13px,1.4vw,17px); color:var(--ink); letter-spacing:.03em; }.copy-button { min-height:30px; flex-shrink:0; font-size:11px; }.result-note { color:var(--muted); line-height:1.8; font-size:10px; }
.receive-preview { margin-top:24px; padding-top:22px; border-top:1px dashed var(--line-dark); }.receive-preview b { font-size:13px; }.receive-preview small { white-space:normal; line-height:1.8; }.receive-preview .primary-button { margin-top:16px; }
.upload-progress { margin-top:18px; }.upload-progress progress { display:block; width:100%; height:4px; border:0; accent-color:var(--sage); }.upload-progress span { display:block; color:var(--muted); font-size:10px; margin-top:5px; }
.transfer-footer { display:flex; align-items:baseline; gap:16px; padding:32px 0 10px; }.transfer-footer > span { font-size:12px; color:var(--ink); }.transfer-footer p { font-size:10px; color:var(--muted); margin:0; }.transfer-footer small { margin-left:auto; color:var(--quiet); font-size:8px; letter-spacing:.1em; }
[hidden] { display:none!important; }
.send-panel:has(#uploadResult:not([hidden])) .panel-heading { margin-bottom:30px; }
.result-panel { border:0; margin:0; padding:18px 0 0; border-top:1px dashed var(--line-dark); }
.result-title { font-size:20px; font-weight:500; margin:0 0 23px; }.result-title span { display:inline-grid; width:30px; height:30px; margin-right:10px; border:1px solid var(--sage); border-radius:50%; place-items:center; font-size:14px; }
.code-row { display:flex; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }.code-row code { flex:1; min-width:0; line-height:1.9; }.result-note { margin:17px 0 26px; }.result-panel .secondary-button { margin-top:6px; }
@media(min-width:761px) { .transfer-panel { animation:arrive .5s both; }.receive-panel { animation-delay:.08s; } }
@keyframes arrive { from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media(max-width:900px) { .app-shell { padding-inline:26px; }.parcel-art { margin-right:12px; width:265px; }.parcel-art::before { width:290px; }.transfer-panel { padding:23px; }.transfer-grid { gap:18px; }.status-chip { display:none; }.brand small { display:none; } }
@media(max-width:760px) { .app-shell { padding:0 20px 22px; }.topbar { min-height:74px; gap:12px; }.topbar-actions { gap:10px; }.tool-head { padding:35px 0 30px; }.tool-head h1 { font-size:48px; }.intro-kicker { font-size:8px!important; letter-spacing:.1em; margin-bottom:18px!important; }.tool-head p:not(.intro-kicker) { font-size:12px; margin-top:16px; }.parcel-art { width:160px; height:155px; margin:20px 12px 0 0; }.parcel-art::before { width:180px; height:125px; }.parcel-sheet { width:115px; height:150px; padding:16px; }.parcel-sheet > span,.parcel-sheet b { font-size:6px; }.parcel-sheet i { font-size:47px; margin:8px 0; }.parcel-barcode { height:15px; margin-top:8px; }.parcel-orbit { font-size:6px; bottom:-20px; right:0; }.transfer-meta { gap:14px; font-size:9px; padding:14px 0; }.transfer-meta span:first-child { display:none; }.transfer-meta span:last-child { margin-left:auto; }.transfer-tabs { display:grid; grid-template-columns:1fr 1fr; margin:6px 0 18px; border-bottom:1px solid var(--line-dark); }.transfer-tabs button { border:0; padding:13px 10px; color:var(--muted); background:none; font-size:12px; border-bottom:2px solid transparent; display:flex; justify-content:space-between; }.transfer-tabs button[aria-pressed="true"] { color:var(--sage-deep); border-bottom-color:var(--sage); }.transfer-grid { grid-template-columns:1fr; }.transfer-grid[data-mode="send"] .receive-panel,.transfer-grid[data-mode="receive"] .send-panel { display:none; }.transfer-panel { padding:24px; }.transfer-footer { align-items:start; gap:8px; flex-direction:column; padding-top:25px; }.transfer-footer small { margin:10px 0 0; }.expiry-options { display:flex; }.code-row code { font-size:15px; }.receive-form input { font-size:16px; }.receive-form input::placeholder { font-size:12px; } }
@media(max-width:390px) { .app-shell { padding-inline:16px; }.brand { gap:8px; }.brand strong { font-size:14px; }.brand-icon { width:25px; height:29px; font-size:21px; }.tool-head h1 { font-size:43px; }.parcel-art { width:120px; height:140px; margin-right:0; }.parcel-art::before { width:130px; }.parcel-sheet { width:95px; height:139px; padding:13px; }.parcel-orbit { display:none; }.intro-kicker { max-width:150px; }.transfer-panel { padding:20px; }.topbar-actions { max-width:none; gap:5px; } }
@media(max-width:760px) { .tool-head { display:grid; grid-template-columns:minmax(0,1fr) 115px; gap:10px; overflow:clip; }.tool-head > div:first-child { min-width:0; }.tool-head h1 { font-size:clamp(34px,10vw,45px); white-space:nowrap; }.parcel-art { width:100px; height:140px; margin-right:0; }.parcel-sheet { width:92px; height:135px; padding:13px; }.parcel-art::before { width:115px; }.parcel-orbit { display:none; }.tool-head p:not(.intro-kicker) { font-size:11px; }.intro-kicker { font-size:7px!important; line-height:1.9; }.brand small { display:none; } }