:root{--blue:#1667ff;--blue-d:#0e53da;--ink:#12151d;--mineral:#f3f4f2;--paper:#fbfbfa;--line:#dfe2e7;--muted:#667181;--err:#bd3342}
*{box-sizing:border-box}
html{background:var(--mineral)}
body{margin:0;min-width:320px;background:var(--mineral);color:var(--ink);font-family:"Space Grotesk",system-ui,sans-serif;-webkit-text-size-adjust:100%}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
.shell{min-height:100vh;display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:1fr auto}
.rail{position:fixed;inset:0 auto 0 0;width:56px;background:var(--ink);display:flex;flex-direction:column;align-items:center;padding:24px 0;color:#cbd4df;z-index:5}
.rail-mark{font:400 10px "DM Mono",monospace;letter-spacing:.1em;writing-mode:vertical-rl;transform:rotate(180deg)}
.rail-blue{color:var(--blue)}
.rail-line{width:1px;flex:1;margin:18px 0;background:linear-gradient(to bottom,transparent,#405175 18%,#405175 82%,transparent)}
main{grid-column:2;width:100%;max-width:1100px;margin:0 auto;padding:0 clamp(18px,4vw,64px) 40px}
.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.wordmark{font-size:13px;letter-spacing:-.04em}.wordmark b{font-weight:700}.wordmark em{color:var(--blue);font-style:normal;font-weight:700}
.status{display:flex;align-items:center;gap:8px;color:#69707d;font:400 10px "DM Mono",monospace}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(22,103,255,.11);display:inline-block}
.link-btn{border:0;background:none;color:var(--muted);font:400 11px "DM Mono",monospace;text-decoration:underline;padding:6px}
.receipt{margin-top:28px;padding:30px clamp(18px,4vw,44px);background:var(--paper);border-top:1px solid var(--ink);border-bottom:1px solid var(--line);box-shadow:0 22px 40px rgba(27,31,38,.05);animation:in 260ms cubic-bezier(.23,1,.32,1) both}
.receipt.narrow{max-width:460px}
.receipt h1{margin:6px 0 0;font-size:clamp(24px,5vw,34px);line-height:1.05;letter-spacing:-.05em;font-weight:550;overflow-wrap:anywhere}
.micro{margin:0;color:var(--muted);font:400 10px "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.receipt-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font:500 10px "DM Mono",monospace;letter-spacing:.06em}
.title-row{display:flex;align-items:center;gap:15px;margin-top:18px}
.file-icon{display:grid;place-items:center;width:54px;height:54px;flex:none;border:1px solid #cbd3e0;background:#f0f4fa;color:var(--blue)}
.file-icon.warn{color:var(--err);background:#fff2f2;border-color:#efc9cd;margin-bottom:14px}
.meta{margin:7px 0 0;color:var(--muted);font:400 11px "DM Mono",monospace}.meta span{padding:0 6px;color:#acb4c0}
.grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(210px,.9fr);gap:18px;margin-top:26px}
.preview{min-height:220px;background:#edf0f2;display:grid;place-items:center;overflow:hidden}
.preview img{width:100%;max-height:360px;object-fit:contain;display:block}
.preview video{width:100%;max-height:360px;background:#13161e;display:block}
.audio{padding:30px;width:100%}.audio audio{width:100%}
.generic{width:100%;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:22px;background:linear-gradient(135deg,#f1f3f5 60%,#e7eeff)}
.generic .ext{font:500 30px "DM Mono",monospace;color:var(--blue)}.generic p{margin:0;color:#5e6979;font-size:12px}
.facts{margin:0;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:1fr minmax(0,1.3fr);gap:12px;min-height:54px;align-items:center;border-bottom:1px solid var(--line);font:400 11px "DM Mono",monospace}
.facts dt{color:#7b8491}.facts dd{margin:0;text-align:right;overflow-wrap:anywhere;color:#2c3545}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border:1px solid #cbd1db;background:#fff;color:var(--ink);font-weight:600;text-decoration:none;cursor:pointer;border-radius:0;transition:transform 120ms cubic-bezier(.23,1,.32,1)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.primary:hover{background:var(--blue-d)}
.btn.small{min-height:36px;padding:0 12px;font-size:13px}
.btn.danger{color:var(--err);border-color:#efc9cd}
.btn:disabled{opacity:.55;cursor:default}
.note{margin:16px 0 0;color:#78818e;font-size:12px;line-height:1.5}
.message .lead{margin:12px 0 0;color:#5b6471;line-height:1.6;max-width:520px}
.stack{display:grid;gap:12px;margin-top:18px}
.field{display:grid;gap:7px}
select,input[type=password],input[type=search],.linkbox{width:100%;min-height:48px;padding:0 12px;border:1px solid #cbd0d8;background:#fff;border-radius:0;font-size:15px}
.linkbox{font:400 12px "DM Mono",monospace}
select:focus,input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,103,255,.11)}
.error{margin:0;color:var(--err);font-size:13px}
.crumbs{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font:400 11px "DM Mono",monospace;color:var(--muted)}
.crumbs button{border:0;background:none;color:var(--blue);padding:4px 2px;cursor:pointer}
.picker,.shares{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.picker li{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.picker li:hover,.picker li.on{background:#eaf1ff}
.picker .ic{width:30px;height:30px;display:grid;place-items:center;background:#f0f4fa;color:var(--blue);font:500 10px "DM Mono",monospace;flex:none}
.picker .nm{flex:1;min-width:0;overflow-wrap:anywhere;font-size:14px}
.picker .sz{color:var(--muted);font:400 11px "DM Mono",monospace;flex:none}
.empty{padding:16px 4px;color:var(--muted);font-size:13px}
.selected,.result{padding:16px;background:#f7f8f7;border:1px solid var(--line)}
.sel-name{margin:0;font-weight:600;overflow-wrap:anywhere}
.shares li{display:grid;gap:8px;padding:14px 4px;border-bottom:1px solid var(--line)}
.shares .nm{font-weight:600;overflow-wrap:anywhere}
.shares .sub{font:400 11px "DM Mono",monospace;color:var(--muted)}
.tag{display:inline-block;padding:2px 7px;font:500 10px "DM Mono",monospace;letter-spacing:.05em;background:#eaf1ff;color:var(--blue)}
.tag.expired,.tag.revoked{background:#f1f1f1;color:#777}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}
footer{grid-column:2;display:flex;justify-content:space-between;gap:12px;padding:16px clamp(18px,4vw,64px);border-top:1px solid var(--line);color:#8a929f;font:400 9px "DM Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
@keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media (max-width:760px){.grid{grid-template-columns:1fr}}
@media (max-width:560px){.shell{grid-template-columns:0 minmax(0,1fr)}.rail{display:none}.topbar{height:68px}.actions .btn{flex:1 1 100%}footer{flex-direction:column}}