/* ============================================================================
   upload.moddy-blossom.at — "Übertragungskanal"
   Signature: the channel between two peers. Sender end = cyan, receiver = amber.
   ========================================================================== */

/* ---- fonts (self-hosted, no external tracking) ---------------------------- */
@font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/fonts/hanken-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/fonts/hanken-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/fonts/hanken-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Space Mono';src:url('/fonts/space-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('/fonts/space-mono-700.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---- tokens --------------------------------------------------------------- */
:root{
  --bg:#0A0D13; --surface:#131925; --surface-2:#18202E; --surface-3:#1F2838;
  --line:#283143; --line-2:#3A4760;
  --txt:#E9EDF5; --dim:#8993A7; --faint:#5B6679;
  --cy:#34E5D1; --cy-soft:rgba(52,229,209,.14); --cy-ink:#042520;
  --am:#FFB13C; --am-soft:rgba(255,177,60,.14); --am-ink:#2A1700;
  --rd:#FF5C72; --rd-soft:rgba(255,92,114,.13);
  /* list identity — deliberately off the cyan/amber entry+sharing axis, so "list" reads as its
     own kind by colour: violet chips/headers vs. cyan entry cards. */
  --li:#A78BFF; --li-soft:rgba(167,139,250,.15); --li-line:rgba(167,139,250,.38); --li-ink:#150A2E;

  --accent:var(--cy); --accent-soft:var(--cy-soft); --accent-ink:var(--cy-ink);

  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'Space Mono','SF Mono',ui-monospace,monospace;

  --r-s:8px; --r-m:12px; --r-l:18px; --r-xl:26px;
  --shadow:0 18px 50px -12px rgba(0,0,0,.6);
  --maxw:680px;
}
body[data-peer="receiver"]{ --accent:var(--am); --accent-soft:var(--am-soft); --accent-ink:var(--am-ink); }

*{box-sizing:border-box;margin:0;padding:0}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--txt);
  min-height:100dvh; line-height:1.55; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 500px at 15% -10%, rgba(52,229,209,.07), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(255,177,60,.05), transparent 55%);
  background-attachment:fixed;
}
body[data-peer="receiver"]{
  background-image:
    radial-gradient(900px 520px at 85% -10%, rgba(255,177,60,.09), transparent 60%),
    radial-gradient(700px 480px at 0% 0%, rgba(52,229,209,.045), transparent 55%);
}
a{color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ---- layout shell --------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.app{min-height:100dvh;display:flex;flex-direction:column}

header.bar{
  position:sticky;top:0;z-index:30;
  backdrop-filter:blur(14px);background:rgba(10,13,19,.72);
  border-bottom:1px solid var(--line);
}
.bar-in{max-width:var(--maxw);margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em}
.brand .glyph{color:var(--accent);font-size:15px;transform:translateY(1px)}
.brand b{font-weight:700}.brand .dot{color:var(--accent)}
.bar-spacer{flex:1}
.bar-meta{display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:11.5px;color:var(--dim)}
.pill{display:inline-flex;align-items:center;gap:7px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-soft)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.icon-btn{background:transparent;border:1px solid var(--line);color:var(--dim);width:34px;height:34px;border-radius:9px;cursor:pointer;display:grid;place-items:center;transition:.18s}
.icon-btn:hover{color:var(--txt);border-color:var(--line-2);background:var(--surface)}

main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:42px 0 70px}

/* ---- eyebrow / headings --------------------------------------------------- */
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
h1.lead{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,5vw,42px);line-height:1.04;letter-spacing:-.03em;margin-bottom:12px}
h1.lead em{font-style:normal;color:var(--accent)}
.sub{color:var(--dim);font-size:15.5px;max-width:46ch}

/* ---- the channel: signature element -------------------------------------- */
.channel{--gap:0;position:relative;display:flex;align-items:center;gap:0;margin:30px 0 8px;height:34px}
.node{width:13px;height:13px;border-radius:50%;flex:0 0 auto;position:relative;z-index:2}
.node.a{background:var(--cy);box-shadow:0 0 14px var(--cy)}
.node.b{background:var(--am);box-shadow:0 0 14px var(--am)}
.node.idle{background:var(--surface-3);box-shadow:none;border:1.5px solid var(--line-2)}
.wire{flex:1;height:2px;position:relative;background:linear-gradient(90deg,var(--cy),var(--am));border-radius:2px;opacity:.5}
.wire.idle{background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px);opacity:.7}
.wire .pkt{position:absolute;top:50%;width:6px;height:6px;border-radius:50%;background:#fff;transform:translateY(-50%);filter:drop-shadow(0 0 6px #fff);opacity:0}
.channel.active .wire{opacity:.9}
.channel.active .wire .pkt{animation:flow 1.8s linear infinite;opacity:1}
.channel.active .wire .pkt:nth-child(2){animation-delay:.6s}
.channel.active .wire .pkt:nth-child(3){animation-delay:1.2s}
@keyframes flow{0%{left:-2%}100%{left:102%}}
.channel-labels{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--faint);margin-top:-2px}
.channel-labels .a{color:var(--cy)}.channel-labels .b{color:var(--am)}

/* ---- card / panel --------------------------------------------------------- */
.panel{background:linear-gradient(180deg,var(--surface),var(--surface) 60%,var(--surface-2));border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow)}

/* ---- dropzone ------------------------------------------------------------- */
.drop{
  position:relative;border:1.5px dashed var(--line-2);border-radius:var(--r-l);
  background:var(--surface);padding:46px 26px;text-align:center;cursor:pointer;
  transition:border-color .2s,background .2s,transform .12s;overflow:hidden;
}
.drop:hover{border-color:var(--accent);background:var(--surface-2)}
.drop.over{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.006)}
.drop.over::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at center,var(--accent-soft),transparent 70%)}
.drop .arrow{font-size:30px;color:var(--accent);line-height:1}
.drop h3{font-family:var(--font-display);font-weight:500;font-size:19px;margin:14px 0 5px;letter-spacing:-.01em}
.drop p{color:var(--dim);font-size:14px}
.drop .or{color:var(--faint);font-size:12.5px;margin-top:8px}
.drop kbd{font-family:var(--font-mono);font-size:11px;background:var(--surface-3);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--dim)}

/* ---- file rows ------------------------------------------------------------ */
.files{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.file{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-m)}
.file .ic{width:34px;height:34px;border-radius:8px;background:var(--surface-3);display:grid;place-items:center;color:var(--accent);flex:0 0 auto;font-size:15px}
.file .meta{flex:1;min-width:0}
.file .nm{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file .sz{font-family:var(--font-mono);font-size:11.5px;color:var(--faint)}
.file .x{background:none;border:none;color:var(--faint);cursor:pointer;font-size:16px;padding:4px;border-radius:6px;transition:.15s}
.file .x:hover{color:var(--rd);background:var(--rd-soft)}

/* ---- options -------------------------------------------------------------- */
.opts{margin-top:18px;display:flex;flex-direction:column;gap:16px}
.field label.lbl{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.seg{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.seg button{font-family:var(--font-body);font-size:12.5px;padding:10px 4px;background:var(--surface-2);border:1px solid var(--line);color:var(--dim);border-radius:9px;cursor:pointer;transition:.16s;font-weight:500}
.seg button .t{display:block;font-size:11px;color:var(--faint);font-family:var(--font-mono);margin-top:2px}
.seg button:hover{border-color:var(--line-2);color:var(--txt)}
.seg button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--txt)}
.seg button[aria-pressed="true"] .t{color:var(--accent)}
.pw-row{display:flex;gap:10px;align-items:center}
.pw-row input{flex:1}
.toggle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;font-size:13.5px;color:var(--dim)}
.toggle input{display:none}
.toggle .tr{width:38px;height:22px;border-radius:11px;background:var(--surface-3);border:1px solid var(--line);position:relative;transition:.18s}
.toggle .tr::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--faint);transition:.18s}
.toggle input:checked + .tr{background:var(--accent-soft);border-color:var(--accent)}
.toggle input:checked + .tr::after{transform:translateX(16px);background:var(--accent)}

input[type=text],input[type=password]{
  width:100%;font-family:var(--font-body);font-size:14px;color:var(--txt);
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;transition:.16s;
}
input::placeholder{color:var(--faint)}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ---- buttons -------------------------------------------------------------- */
.btn{font-family:var(--font-display);font-weight:500;font-size:15px;letter-spacing:-.01em;border:none;border-radius:12px;padding:13px 20px;cursor:pointer;transition:.16s;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08);box-shadow:0 8px 24px -8px var(--accent)}
.btn.primary:disabled{opacity:.45;cursor:not-allowed;filter:none;box-shadow:none}
.btn.ghost{background:var(--surface-2);color:var(--txt);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--line-2);background:var(--surface-3)}
.btn.block{width:100%}
.btn .sp{width:15px;height:15px;border:2px solid var(--accent-ink);border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- result: link + qr ---------------------------------------------------- */
.result{margin-top:18px;display:flex;flex-direction:column;gap:16px}
.linkbox{display:flex;gap:10px;align-items:stretch}
.linkfield{flex:1;min-width:0;display:flex;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:0 4px 0 13px}
.linkfield code{font-family:var(--font-mono);font-size:12.5px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;padding:12px 0}
.copy-btn{flex:0 0 auto;background:var(--accent);color:var(--accent-ink);border:none;border-radius:9px;padding:9px 15px;font-family:var(--font-display);font-weight:500;font-size:13.5px;cursor:pointer;margin:4px;transition:.16s}
.copy-btn:hover{filter:brightness(1.08)}
.copy-btn.done{background:var(--surface-3);color:var(--accent)}
.share-grid{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.qr{background:#fff;border-radius:14px;padding:12px;width:128px;height:128px;display:grid;place-items:center}
.qr img,.qr canvas{width:104px;height:104px;display:block;image-rendering:pixelated}
.qr-hint{font-family:var(--font-mono);font-size:10.5px;color:var(--faint);text-align:center;margin-top:7px}

/* ---- status rows ---------------------------------------------------------- */
.status{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.srow{display:flex;align-items:center;gap:12px;font-size:13.5px}
.srow .led{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--faint)}
.srow.on .led{background:var(--accent);box-shadow:0 0 9px var(--accent)}
.srow.warn .led{background:var(--am);box-shadow:0 0 9px var(--am)}
.srow .k{color:var(--dim)}
.srow .v{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--txt)}
.bar-track{height:6px;background:var(--surface-3);border-radius:4px;overflow:hidden;margin-top:2px}
.bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent));border-radius:4px;transition:width .35s ease}
.note{font-size:12.5px;color:var(--faint);display:flex;gap:8px;align-items:flex-start}
.note .i{color:var(--accent);flex:0 0 auto}

/* ---- ring progress (receiver) -------------------------------------------- */
.ring-wrap{display:grid;place-items:center;margin:8px 0 4px}
.ring{position:relative;width:150px;height:150px}
.ring svg{transform:rotate(-90deg)}
.ring .track{stroke:var(--surface-3)}
.ring .fill{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .35s ease}
.ring .pct{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-weight:500;font-size:30px}
.ring .pct small{font-size:13px;color:var(--dim);font-family:var(--font-mono);display:block;text-align:center;margin-top:-2px}

/* ---- login ---------------------------------------------------------------- */
.center-card{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login{width:100%;max-width:380px;padding:34px 30px}
.login .brand{justify-content:center;font-size:22px;margin-bottom:6px}
.login .eyebrow{text-align:center}
.login form{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.sso-login{margin-top:18px}
.sso-login>span{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:12px;margin-bottom:12px}
.sso-login>span::before,.sso-login>span::after{content:"";height:1px;flex:1;background:var(--line)}
.sso-login .btn{text-decoration:none}
.sso-login .btn[aria-disabled="true"]{pointer-events:none}
.err{color:var(--rd);font-size:13px;background:var(--rd-soft);border:1px solid rgba(255,92,114,.3);border-radius:9px;padding:9px 12px;display:none}
.err.show{display:block}

/* ---- toast ---------------------------------------------------------------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--surface-3);border:1px solid var(--line-2);color:var(--txt);padding:11px 17px;border-radius:11px;font-size:13.5px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s;z-index:50}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- modal (change password) --------------------------------------------- */
.modal-backdrop{position:fixed;inset:0;z-index:60;background:rgba(6,8,12,.66);backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px;animation:fade .2s ease both}
.modal{width:100%;max-width:380px;padding:24px 24px 26px}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.modal-head h3{font-family:var(--font-display);font-weight:500;font-size:19px;letter-spacing:-.01em}
.modal form{margin-top:16px;display:flex;flex-direction:column;gap:11px}
.ok-msg{color:var(--accent);font-size:13px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:9px;padding:9px 12px;display:none}
.ok-msg.show{display:block}
.settings-modal{max-width:520px;max-height:calc(100dvh - 48px);overflow:auto}
.settings-modal h4{font-family:var(--font-display);font-size:15px;font-weight:500;margin-top:18px}
.token-settings{border-top:1px solid var(--line);margin-top:24px;padding-top:2px}
.token-settings form{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:10px}
.token-settings form .err,.token-settings form .btn{grid-column:1/-1}
.token-settings form .token-admin-scope{grid-column:1/-1}
.token-once{margin:14px 0;padding:13px;border:1px solid var(--am);background:var(--am-soft);border-radius:10px}
.token-once label{display:block;color:var(--am);font-size:12px;margin-bottom:7px}
#token-value{width:100%;resize:none;font-family:var(--font-mono);font-size:11px;overflow-wrap:anywhere}
#token-list{margin-top:14px}
#token-list .clip-item{padding:11px 12px}
#token-list .clip-actions{margin-top:8px}
.key-backup-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 8px}
.key-backup-actions .btn{flex:1 1 145px}
#my-shares-backup-status:not(:empty){
  color:var(--accent);background:var(--accent-soft);border:1px solid rgba(52,229,209,.28);
  border-radius:9px;padding:9px 12px
}

/* ---- misc ----------------------------------------------------------------- */
.hidden{display:none !important}
.fade-in{animation:fade .4s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
footer.foot{padding:26px 0;text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--faint);letter-spacing:.04em}
footer.foot b{color:var(--dim);font-weight:400}
footer.foot a{color:var(--dim);text-underline-offset:3px}
.login-help{display:block;width:max-content;margin:18px auto 0;color:var(--dim);font-size:13px;text-underline-offset:4px}
.login-help:hover{color:var(--accent)}

/* ---- Hilfe & Anleitung --------------------------------------------------- */
.help-shell{scroll-behavior:smooth}
.help-shell .bar-in{max-width:1160px}
.help-brand{text-decoration:none}
.help-current{font:700 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(52,229,209,.32);background:var(--accent-soft);border-radius:999px;padding:7px 10px}
.help-main{display:block;max-width:1160px;margin:0 auto;padding:54px 24px 90px}
.help-hero{position:relative;overflow:hidden;padding:54px clamp(24px,6vw,72px);border:1px solid var(--line);border-radius:var(--r-xl);background:linear-gradient(145deg,rgba(52,229,209,.1),var(--surface) 42%,rgba(255,177,60,.06));box-shadow:var(--shadow)}
.help-hero::after{content:"?";position:absolute;right:28px;top:-56px;color:rgba(52,229,209,.055);font:700 260px/1 var(--font-display);pointer-events:none}
.help-hero h1{position:relative;max-width:780px;font:500 clamp(36px,6vw,64px)/.98 var(--font-display);letter-spacing:-.045em}
.help-hero h1 em{font-style:normal;color:var(--accent)}
.help-hero>p{position:relative;max-width:720px;margin-top:20px;color:var(--dim);font-size:18px;line-height:1.65}
.help-hero-actions{position:relative;display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.help-promise-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:40px}
.help-promise-grid>div{display:grid;grid-template-columns:auto 1fr;gap:1px 12px;align-items:center;padding:16px;background:rgba(10,13,19,.45);border:1px solid var(--line);border-radius:var(--r-m)}
.help-promise-grid .help-symbol{grid-row:1/3;color:var(--accent);font:500 22px/1 var(--font-display)}
.help-promise-grid strong{font:500 14px/1.3 var(--font-display)}
.help-promise-grid small{color:var(--faint);font-size:11.5px;line-height:1.4}
.help-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:54px;align-items:start;margin-top:52px}
.help-toc{position:sticky;top:84px;display:flex;flex-direction:column;padding:18px;border:1px solid var(--line);border-radius:var(--r-l);background:rgba(19,25,37,.82);backdrop-filter:blur(12px)}
.help-toc strong{margin-bottom:11px;font:500 14px/1.3 var(--font-display)}
.help-toc a{padding:5px 0;color:var(--dim);font-size:12.5px;text-decoration:none;transition:.15s}
.help-toc a:hover{color:var(--accent);transform:translateX(2px)}
.help-content{min-width:0}
.help-section{scroll-margin-top:88px;padding:8px 0 68px;border-bottom:1px solid var(--line)}
.help-section+.help-section{padding-top:62px}
.help-kicker{margin-bottom:10px;color:var(--accent);font:700 10.5px/1.4 var(--font-mono);letter-spacing:.16em;text-transform:uppercase}
.help-content h2{font:500 clamp(27px,4vw,38px)/1.12 var(--font-display);letter-spacing:-.025em;margin-bottom:18px}
.help-content h3{font:500 19px/1.3 var(--font-display);letter-spacing:-.01em;margin:30px 0 10px}
.help-content p{max-width:72ch;color:var(--dim);font-size:15.5px;line-height:1.7}
.help-content strong{color:var(--txt)}
.help-content code{font-family:var(--font-mono);font-size:.88em;color:var(--txt)}
.help-steps{list-style:none;display:grid;gap:12px;margin:24px 0}
.help-steps li{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:17px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m)}
.help-steps li>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--accent-soft);color:var(--accent);font:700 12px/1 var(--font-mono)}
.help-steps li strong{font:500 16px/1.35 var(--font-display)}
.help-steps li p{margin-top:4px;font-size:14px;line-height:1.55}
.help-steps.compact li{padding:14px 16px}
.help-callout{margin:22px 0;padding:16px 18px;border:1px solid rgba(52,229,209,.3);border-left:4px solid var(--cy);border-radius:var(--r-m);background:var(--cy-soft);color:var(--dim);font-size:14px;line-height:1.6}
.help-callout.warning{border-color:rgba(255,177,60,.32);border-left-color:var(--am);background:var(--am-soft)}
.help-callout.danger{border-color:rgba(255,92,114,.32);border-left-color:var(--rd);background:var(--rd-soft)}
.help-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.help-card-grid.two{grid-template-columns:repeat(2,1fr)}
.help-card{padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m)}
.help-card>span{display:block;color:var(--accent);font-size:20px;margin-bottom:13px}
.help-card h3{margin:0 0 6px;font-size:16px}
.help-card p{font-size:13.5px;line-height:1.5}
.help-list{display:grid;gap:10px;margin:16px 0 24px;padding-left:21px;color:var(--dim)}
.help-list li{padding-left:5px;font-size:15px;line-height:1.6}
.help-list li::marker{color:var(--accent)}
.help-list.checks{list-style:"✓  "}
.help-table-wrap{overflow-x:auto;margin:20px 0 28px;border:1px solid var(--line);border-radius:var(--r-m)}
.help-table{width:100%;min-width:620px;border-collapse:collapse;background:var(--surface)}
.help-table th,.help-table td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.5}
.help-table th{color:var(--faint);background:var(--surface-2);font:700 10px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.help-table td{color:var(--dim)}
.help-table tbody tr:last-child td{border-bottom:0}
.help-table.security td:nth-child(2){color:var(--accent)}
.help-code{overflow:auto;margin:18px 0;padding:18px;background:#07090e;border:1px solid var(--line);border-radius:var(--r-m);color:var(--txt);font:12.5px/1.75 var(--font-mono)}
.help-inline-link{color:var(--accent);text-underline-offset:4px}
.help-faq{margin-top:10px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.help-faq summary{padding:16px 18px;cursor:pointer;color:var(--txt);font:500 15px/1.4 var(--font-display);list-style:none}
.help-faq summary::-webkit-details-marker{display:none}
.help-faq summary::after{content:"+";float:right;color:var(--accent);font:400 20px/1 var(--font-mono)}
.help-faq[open] summary::after{content:"−"}
.help-faq p{padding:0 18px 18px;font-size:14px}
.help-end{text-align:center;padding:72px 20px 16px}
.help-end .glyph{display:block;color:var(--accent);font-size:22px;margin-bottom:14px}
.help-end h2{margin-bottom:9px}
.help-end p{margin:0 auto 22px}

@media(max-width:850px){
  .help-layout{grid-template-columns:1fr;gap:36px}
  .help-toc{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:4px 14px}
  .help-toc strong{grid-column:1/-1}
  .help-card-grid{grid-template-columns:repeat(2,1fr)}
  .help-promise-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .help-main{padding:26px 15px 64px}
  .help-hero{padding:34px 20px}
  .help-hero h1{font-size:38px}
  .help-hero>p{font-size:16px}
  .help-hero-actions .btn{width:100%}
  .help-toc{grid-template-columns:repeat(2,1fr)}
  .help-card-grid,.help-card-grid.two{grid-template-columns:1fr}
  .help-section{padding-bottom:48px}
  .help-section+.help-section{padding-top:46px}
  .help-steps li{grid-template-columns:34px 1fr;padding:14px 13px;gap:11px}
  .help-steps li>span{width:30px;height:30px}
  .help-current{display:none}
}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width:560px){
  .seg{grid-template-columns:repeat(3,1fr)}
  .share-grid{grid-template-columns:1fr}
  .qr{margin:0 auto}
  h1.lead{font-size:30px}
  main{padding:28px 0 50px}
}

/* ---- a11y ----------------------------------------------------------------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.05ms !important}
  .channel.active .wire .pkt{opacity:.9}
}

/* ---- folder picker / folder entry ---------------------------------------- */
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
.linklike:hover{opacity:.82}

/* ============================================================================
   Zwischenablage — "Ablage-Board"
   Signatur-Übertrag: die linke Kante jeder Karte kodiert ihre Reichweite auf
   demselben Farbkanal wie der Übertragungskanal — privat (neutral, nichts
   gesendet) · geteilt (cyan, Draht zu bekannten Konten) · Link aktiv (amber,
   offener Kanal an jeden, der den Link hält). So liest man Exposition auf einen
   Blick, und Liste/Kopf/Composer/Einträge heben sich klar voneinander ab.
   ========================================================================== */

/* ---- shared base (recipient /c page + owner tab) -------------------------- */
.clip-toolbar { display: flex; gap: 10px; margin-bottom: 14px; }
.clip-toolbar input { flex: 1; }
.clip-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.clip-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--surface); }
.clip-head { display: flex; align-items: center; gap: 10px; }
.clip-title { font-family: var(--font-display); font-weight: 500; font-size: 15.5px; letter-spacing: -.01em;
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip-desc { margin: 7px 0 0; color: var(--dim); font-size: 13px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.clip-meta { margin: 9px 0 0; font-family: var(--font-mono); font-size: 11px; color: var(--dim); letter-spacing: .01em; }
.clip-fallback { width: 100%; margin-top: 10px; min-height: 80px; font-family: var(--font-mono); }

/* ---- visibility badge: a small mono chip with a status dot ----------------- */
.clip-head .pill{ margin-left: auto; flex: 0 1 auto; min-width: 0; max-width: 66%;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .02em; line-height: 1.35;
  color: var(--dim); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px 4px 8px; white-space: normal; text-align: right; }
.clip-head .pill::before{ content:""; flex:0 0 auto; align-self:center; width:6px; height:6px; border-radius:50%; background: currentColor; box-shadow:0 0 7px -1px currentColor; }
/* modifiers must out-specify the two-class ".clip-head .pill" base, hence the compound selector */
.clip-head .pill.clip-badge-shared{ color:#63efdd; background: var(--cy-soft); border-color: rgba(52,229,209,.4); }
.clip-head .pill.clip-badge-link  { color:#ffc25e; background: var(--am-soft); border-color: rgba(255,177,60,.42); }

/* ---- entry actions: quiet by default, content comes first ------------------ */
.clip-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.clip-actions .btn{
  font-family: var(--font-body); font-weight: 500; font-size: 12.5px; letter-spacing: 0;
  padding: 6px 11px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid transparent; color: var(--dim);
  transition: color .14s, background .14s, border-color .14s;
}
.clip-actions .btn:hover{ color: var(--txt); background: var(--surface-3); border-color: var(--line-2); }

/* ---- zielgerichtetes Postfach ------------------------------------------- */
.mail-tab{position:relative}
.mail-unread{position:absolute;right:2px;top:1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  display:grid;place-items:center;background:var(--rd);color:#fff;font:700 9px/1 var(--font-mono);box-shadow:0 0 0 2px var(--bg)}
.mail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}
.mail-head h1{font:500 34px/1.1 var(--font-display);margin-top:4px}
.mail-setup{padding:24px;max-width:650px;margin:24px auto}
.mail-setup h3{font:500 20px/1.2 var(--font-display);margin-bottom:8px}
.mail-setup-actions,.mail-toolbar,.mail-send-options{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mail-toolbar{justify-content:space-between;margin-bottom:14px}
.mail-seg{width:min(360px,100%)}
.mail-list .clip-item{cursor:pointer;transition:border-color .16s,transform .14s}
.mail-list .clip-item:hover{border-color:var(--line-2);transform:translateY(-1px)}
.mail-list .clip-item.mail-unread-row{border-left:4px solid var(--accent)}
.mail-summary{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mail-summary-main{min-width:0}
.mail-subject{font:500 15px/1.35 var(--font-display);overflow-wrap:anywhere}
.mail-counterpart,.mail-time,.mail-state{color:var(--faint);font:11px/1.45 var(--font-mono)}
.mail-state{flex:0 0 auto;text-align:right}
.mail-modal{max-width:680px;max-height:calc(100dvh - 36px);overflow:auto}
.mail-modal form{gap:9px}
.mail-recipient-results{max-height:180px;overflow:auto}
.mail-recipient-results button{width:100%;text-align:left}
.mail-recipient-results .clip-item{padding:9px 11px}
.mail-send-options{justify-content:space-between;margin:7px 0}
.mail-recovery-code{display:block;white-space:pre-wrap;overflow-wrap:anywhere;padding:14px;margin:12px 0;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);font:12px/1.55 var(--font-mono)}
.mail-aggregates{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:14px 0}
.mail-aggregate{border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--surface-2)}
.mail-aggregate b{display:block;font:500 13px var(--font-display)}
.mail-aggregate span{color:var(--faint);font:11px var(--font-mono)}
.mail-item-content{white-space:pre-wrap;overflow-wrap:anywhere;max-height:280px;overflow:auto;margin-top:8px;
  padding:12px;border-radius:9px;background:var(--bg);font:12px/1.55 var(--font-mono)}
.mail-privacy{margin-top:24px;border-top:1px solid var(--line);padding-top:16px}
.mail-privacy summary{cursor:pointer;color:var(--muted);font:500 14px var(--font-display)}
.mail-privacy-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px 20px;margin:16px 0}
.mail-privacy .danger:hover{color:var(--rd);border-color:rgba(255,92,114,.36);background:var(--rd-soft)}
@media(max-width:620px){.mail-head{align-items:stretch;flex-direction:column}.mail-head .btn{width:100%}.mail-toolbar{align-items:stretch}.mail-seg{width:100%}}
/* primary action (kopieren / herunterladen) — the first chip, gets the accent */
#clip-list .clip-item .clip-actions .btn:first-child,
#shared-list .clip-item .clip-actions .btn:first-child{
  color: var(--accent); background: var(--accent-soft); border-color: rgba(52,229,209,.22); }
#clip-list .clip-item .clip-actions .btn:first-child:hover,
#shared-list .clip-item .clip-actions .btn:first-child:hover{ filter: brightness(1.12); border-color: var(--accent); }
/* destructive (löschen) — the trailing chip on OWNER cards only (scoped to #clips-view so the
   /c recipient page, which also owns a #clip-list, never turns its non-destructive last button red) */
#clips-view #clip-list .clip-item .clip-actions .btn:last-child:hover,
#list-detail .clip-actions .btn:last-child:hover{ color: var(--rd); background: var(--rd-soft); border-color: rgba(255,92,114,.36); }

/* ---- list navigation: violet chips (list identity, distinct from cyan entry cards) --------- */
#clips-view .clip-toolbar{ align-items:flex-start; }   /* scoped: the /c search toolbar keeps its own alignment */
.list-chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; flex:1; min-width:0; }
.list-chip{ display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--dim);
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
  padding:7px 13px; transition:color .15s, background .15s, border-color .15s; }
.list-chip:hover{ color:var(--txt); border-color:var(--line-2); }
.list-chip .lc-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:34vw; }
.list-chip .lc-count{ font-family:var(--font-mono); font-size:10.5px; color:var(--dim);
  background:var(--surface-3); border-radius:999px; padding:1px 7px; flex:0 0 auto; }
/* a real list carries the violet identity marker + tint */
.list-chip:not(.all){ color:#c9bcff; }
.list-chip:not(.all)::before{ content:""; flex:0 0 auto; width:8px; height:8px; border-radius:2px;
  background:var(--li); box-shadow:0 0 8px -1px var(--li); }
.list-chip.active{ color:var(--li-ink); background:var(--li); border-color:var(--li); }
.list-chip.active .lc-count{ color:var(--li-ink); background:rgba(21,10,46,.16); }
.list-chip.active::before{ background:var(--li-ink); box-shadow:none; }
/* "Alle Einträge" is the no-list state — neutral, turns cyan (entry colour) when active */
.list-chip.all.active{ color:var(--cy-ink); background:var(--cy); border-color:var(--cy); }

/* ---- writer tab shell ------------------------------------------------------ */
#clips-view{ display:flex; flex-direction:column; gap:12px; }
#clips-view .clip-toolbar{ margin-bottom:0; }
#clips-view .clip-toolbar select{ flex:1; }
#clips-view select,
#clips-view textarea{
  width:100%;font-family:var(--font-body);font-size:14px;color:var(--txt);
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;transition:.16s;
}
#clips-view textarea{resize:vertical}
#clips-view textarea::placeholder{color:var(--faint)}
#clips-view select:focus,#clips-view textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
#clip-content{min-height:140px}
#clip-desc{min-height:72px}
#clip-read{align-self:flex-start}

/* ---- list context header (#list-detail): a distinct band, not a card ------- */
#list-detail.clip-item{
  position:relative; margin:2px 0 4px; padding:13px 16px 13px 17px;
  background:linear-gradient(180deg,var(--li-soft),var(--surface) 78%);
  border:1px solid var(--li-line); border-left:3px solid var(--li); border-radius:12px;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
}
#list-detail .clip-head{ flex:1 1 auto; min-width:180px; align-items:baseline; gap:11px; }
#list-detail .clip-head::before{ content:"LISTE"; font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.24em; color:var(--li); align-self:center;
  border:1px solid var(--li-line); border-radius:5px; padding:3px 6px; background:var(--li-soft); }
#list-detail .clip-title{ flex:0 1 auto; font-weight:600; font-size:17px; }
#list-detail .pill{ margin-left:0; position:relative; top:1px; }
#list-detail .clip-actions{ margin:0; flex:0 0 auto; }

/* ---- composer (#new-entry): a real "create" affordance, not a raw <details> */
#new-entry{ border:1px dashed var(--line-2); border-radius:12px; background:var(--surface);
  transition:border-color .16s, background .16s; }
#new-entry:hover{ border-color:var(--accent); }
#new-entry[open]{ border-style:solid; border-color:var(--line-2); display:flex; flex-direction:column; padding:0 16px 16px; }
#new-entry summary{ list-style:none; cursor:pointer; padding:13px 16px; user-select:none;
  font-family:var(--font-display); font-weight:500; font-size:14.5px; color:var(--accent);
  display:flex; align-items:center; gap:11px; letter-spacing:-.005em; }
#new-entry summary::-webkit-details-marker{ display:none; }
#new-entry summary::before{ content:"+"; flex:0 0 auto; width:22px; height:22px; border-radius:7px;
  background:var(--accent-soft); color:var(--accent); border:1px solid rgba(52,229,209,.28);
  display:grid; place-items:center; font-family:var(--font-mono); font-size:15px; line-height:1;
  transition:transform .18s; }
/* summary breaks out of the container's 16px side padding so it stays full-bleed (border spans
   the whole width); the body controls sit inside the padding, so their width:100% no longer overflows */
#new-entry[open] summary{ color:var(--txt); border-bottom:1px solid var(--line); margin:0 -16px 14px; }
#new-entry[open] summary::before{ transform:rotate(45deg); }
#new-entry .linklike{ align-self:flex-start; font-size:12.5px; }

/* ---- count line: a section divider between composer and list --------------- */
#clip-count, #shared-count{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); text-align:left; display:flex; align-items:center; gap:12px; margin:8px 2px 0; }
#clip-count::after, #shared-count::after{ content:""; flex:1; height:1px;
  background:linear-gradient(90deg,var(--line),transparent); }
#clip-count:empty, #shared-count:empty{ display:none; }

/* ---- owner entry cards: the exposure rail ---------------------------------
   Scoped to "#clips-view #clip-list" so it never leaks onto (a) the list header band
   (#list-detail, which carries its own accent border) nor (b) the /c recipient page,
   which reuses the id #clip-list on a different document. */
#clips-view #clip-list .clip-item{ position:relative; padding-left:17px; transition:border-color .16s, transform .14s; }
#clips-view #clip-list .clip-item::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:4px;
  border-radius:0 4px 4px 0; background:var(--line-2); }
#clips-view #clip-list .clip-item.exp-shared::before{ background:var(--cy); box-shadow:0 0 12px -2px var(--cy); }
#clips-view #clip-list .clip-item.exp-link::before{ background:var(--am); box-shadow:0 0 12px -2px var(--am); }
#clips-view #clip-list .clip-item:hover{ border-color:var(--line-2); transform:translateY(-1px); }
#shared-view .clip-item:hover{ border-color:var(--line-2); }

@media (max-width:560px){
  #list-detail.clip-item{ gap:8px 10px; }
  #list-detail .clip-head{ min-width:100%; }
  .clip-actions .btn{ font-size:12px; padding:6px 10px; }
  /* let a long "geteilt mit …" badge drop under the title instead of overflowing the card */
  .clip-head{ flex-wrap:wrap; }
  .clip-head .pill{ max-width:100%; }
}

/* ---- Datei-Vorschau (Bild / Text / PDF / Video / Audio) ---------------------------------- */
.preview-img{ max-width:100%; border-radius:10px; display:block; }
.preview-text{
  max-width:100%; max-height:420px; overflow:auto; margin:0;
  padding:12px 14px; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid var(--line-2, rgba(255,255,255,.14));
  font:12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space:pre-wrap; word-break:break-word; color:var(--ink, #e8e8ef);
}
.preview-frame{
  width:100%; height:70vh; min-height:360px; display:block;
  border-radius:10px; border:1px solid var(--line-2, rgba(255,255,255,.14)); background:#fff;
}
.preview-media{ max-width:100%; width:100%; border-radius:10px; display:block; }
.share-link{ word-break:break-all; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; }
@media (max-width:560px){ .preview-frame{ height:60vh; } }