/* Radio Diabolus Share | Dark Iron UI | Designrevision 1.0.4.1
   Reines CSS-Update. Bestehende PHP-Routen, Sessions, Daten und API bleiben unveraendert. */
:root {
  color-scheme:dark;
  --accent:#e3283d;
  --bg:#08090b;
  --panel:#111114;
  --surface:#19171b;
  --border:#3f272d;
  --border-strong:#7d2634;
  --text:#f3eff0;
  --muted:#b6aaae;
  --body-font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --head-font:"Arial Narrow","Roboto Condensed","Franklin Gothic Medium",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body {
  min-height:100vh;margin:0;
  background:
    radial-gradient(ellipse 48% 37% at 94% -10%,rgba(120,16,34,.13),transparent 75%),
    radial-gradient(ellipse 37% 43% at -13% 49%,rgba(84,14,26,.07),transparent 80%),
    linear-gradient(160deg,#08090b 0%,#0c0b0e 50%,#070709 100%);
  background-attachment:fixed;
  color:var(--text);font:14px/1.6 var(--body-font);
  -webkit-font-smoothing:antialiased;
}
body::before {
  content:"";position:fixed;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent 8%,#7c1b2b 30%,#c62a42 60%,transparent 95%);
  pointer-events:none;z-index:5;
}
.grain {
  position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.19;
  background-image:repeating-linear-gradient(0deg,transparent 0,transparent 42px,rgba(211,75,93,.065) 43px,transparent 44px),repeating-linear-gradient(90deg,transparent 0,transparent 42px,rgba(211,75,93,.045) 43px,transparent 44px);
  mask-image:linear-gradient(#000,transparent 70%);
}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.shell{max-width:1320px;margin:0 auto;padding:0 35px}

/* Navigation: Links und Logout-Formular identisch auf der Vertikalachse. */
.topbar {
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:89px;padding:12px 0;
  border-bottom:1px solid #54232d;
  box-shadow:0 18px 34px -35px #e72e49;
}
.brand{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}
.brand-icon {
  display:block;width:56px;height:56px;object-fit:cover;flex:0 0 auto;
  border:1px solid #8f2b39;border-radius:12px;background:#100b0d;
  box-shadow:0 0 20px rgba(205,24,49,.23);
}
.brand span{display:block;min-width:0}
.brand strong {
  display:block;color:#eee8e9;font:800 21px/1.05 var(--head-font);
  letter-spacing:.6px;text-shadow:0 0 13px #a42a3d44;white-space:nowrap;
}
.brand small {
  display:block;margin-top:5px;font:700 9px/1.3 var(--body-font);
  letter-spacing:2.2px;color:#e5a6ae;white-space:nowrap;
}
.topbar nav {
  display:flex;flex:0 1 auto;align-items:center;justify-content:flex-end;
  gap:clamp(6px,1.1vw,15px);min-width:0;flex-wrap:nowrap;
}
.topbar nav>a,.topbar nav>.inline,.topbar nav>.inline>.navbtn {
  display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  flex:0 0 auto;min-height:40px;margin:0;
  font:700 10px/1.25 var(--body-font);letter-spacing:.7px;
  text-transform:uppercase;white-space:nowrap;color:#d8cfd2;
}
.topbar nav>a{padding:0 2px;border-bottom:2px solid transparent}
.topbar nav>a:hover,.topbar nav>a:focus-visible{color:#fff;border-bottom-color:var(--accent)}
.topbar nav>.inline{padding:0}
.topbar nav>.inline>.navbtn {
  appearance:none;padding:0 11px;border:1px solid #70303d;border-radius:6px;
  background:#201318;color:#f1dee2;
}
.topbar nav>.inline>.navbtn:hover,.topbar nav>.inline>.navbtn:focus-visible{
  background:#4b1b27;border-color:#cc4255;color:#fff;
}

/* Ruhigere Typografie statt ueberbreiter Impact-Buchstaben. */
.hero{max-width:990px;padding:55px 0 35px}
.hero.compact{padding:43px 0 26px}
.eyebrow {
  font:800 11px/1.5 var(--body-font);letter-spacing:2.5px;
  text-transform:uppercase;color:#fa6376;
}
.hero h1 {
  font:800 clamp(48px,6.3vw,76px)/1.07 var(--head-font);
  letter-spacing:-1.5px;text-transform:uppercase;
  margin:18px 0 18px;color:#f0ebec;
  text-shadow:0 2px 16px rgba(0,0,0,.45);
}
.hero h1 em{font-style:normal;color:#ec354b;text-shadow:none}
.hero p{font-size:15px;line-height:1.75;max-width:720px;color:#c4b9be;margin:0}
/* dezent, damit das Logo Formulare und Text nicht ueberlagert */
.hero:not(.compact){background:linear-gradient(100deg,transparent 68%,rgba(8,9,11,.38)),url('rd-share-icon.png') right 3% center/210px no-repeat}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}
.panel {
  min-width:0;border:1px solid var(--border);border-top:2px solid #9b3040;
  border-radius:12px;padding:28px;
  background:linear-gradient(140deg,#171417 0%,#111114 48%,#0f1012 100%);
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}
.panel:focus-within{border-color:#944154}
.panel.narrow{max-width:800px;margin-bottom:55px}
.panel h2,.section-title,.section-head h2 {
  margin:0 0 18px;color:#f0e9eb;
  font:800 clamp(19px,2.15vw,24px)/1.22 var(--head-font);
  text-transform:uppercase;letter-spacing:.15px;
  overflow-wrap:anywhere;
}
.panel p{color:#c2b6bb;line-height:1.65}
.info-panel .info-num{font:800 44px/1.1 var(--head-font);color:#ee4055;margin:10px 0}
.info-panel ul{list-style:none;margin:0;padding:0}
.info-panel li{padding:15px 0;border-top:1px solid #302328}
.info-panel li strong{display:block;color:#f2e9ed;font-size:13px}
.info-panel li span{color:var(--muted);font-size:12px}

.dropzone {
  position:relative;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:9px;text-align:center;min-height:225px;padding:24px;
  border:1.5px dashed #9e3c4c;border-radius:10px;
  background:radial-gradient(circle at 50% 0,rgba(112,31,48,.23),transparent 68%),#0f0e11;
  transition:background .2s,border-color .2s;
}
.dropzone:hover,.dropzone.dragging{border-color:#ef425c;background:#1c1117}
.dropzone input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.upload-symbol{
  display:grid;place-items:center;width:65px;height:65px;border:1px solid #8d3544;
  border-radius:50%;background:#281219;font:400 40px/1 var(--body-font);color:#f06477;
}
.dropzone strong{font:800 20px/1.3 var(--head-font);letter-spacing:.25px;color:#f6e9ec}
.dropzone p,.dropzone small{margin:0;color:#b4a6ab}
.picked{font-size:12px;word-break:break-word;color:#d7b2bc;margin:13px 0 22px}

.fields,.mail-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.mail-fields{margin:22px 0 13px}
.fields label,.mail-fields label,.panel>form>label,.stack label {
  display:flex;flex-direction:column;gap:8px;color:#dfd2d6;
  font-size:12px;font-weight:650;letter-spacing:0;
}
input,select,textarea {
  min-width:0;width:100%;padding:12px 13px;color:#f2ecee;background:#0b0c0e;
  border:1px solid #624049;border-radius:6px;outline:none;
}
input::placeholder,textarea::placeholder{color:#988b90}
input:focus,select:focus,textarea:focus {
  border-color:#e14c62;box-shadow:0 0 0 3px rgba(227,40,61,.14);
}
input[type=checkbox]{width:auto;min-width:auto;accent-color:var(--accent)}
textarea{resize:vertical}
.primary {
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;margin-top:22px;padding:15px 20px;
  color:white;background:#a91b31;border:1px solid #d73b52;border-radius:6px;
  font:800 15px/1.25 var(--body-font);letter-spacing:.55px;text-transform:uppercase;
  transition:background .15s;
}
.primary:hover{background:#c4263f}
.primary:disabled{opacity:.55;cursor:wait}
.smallbtn,.btn,.data-table button {
  display:inline-flex;align-items:center;justify-content:center;
  background:#481b27;border:1px solid #923849;color:#f4edef;
  border-radius:5px;padding:9px 12px;
  font:700 11px/1.3 var(--body-font);white-space:nowrap;
}
.smallbtn:hover,.btn:hover,.data-table button:hover{background:#702338}
.under{display:block;color:var(--muted);margin-top:12px}
.notice{margin-bottom:18px;padding:13px 16px;border:1px solid #934154;border-radius:7px;background:#301920;color:#f5c6cf}
.meta{font-size:12px;color:#c0abb4;margin-bottom:18px}
.note{padding:12px 17px;border-left:3px solid var(--accent);background:#23171b;margin:15px 0 20px;white-space:pre-wrap}
.file-row{display:flex;align-items:center;gap:13px;padding:17px 0;border-top:1px solid #38262d}
.file-logo{color:#e3495f;font-size:24px}
.file-label{flex:1;min-width:0}
.file-label strong{display:block;overflow-wrap:anywhere}
.file-label small{color:var(--muted)}

.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:22px 0}
.stat{padding:22px;border:1px solid #472a32;background:#141114;border-radius:9px}
.stat strong{display:block;font:800 30px/1.15 var(--head-font);color:#f0e9eb}
.stat span{font-size:12px;color:var(--muted)}
.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.admin-grid>.panel{align-self:start}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:34px 0 12px}
.section-head h2{margin:0}
.tablewrap{overflow-x:auto}
.data-table{border-collapse:collapse;width:100%;text-align:left}
.data-table th{padding:13px 10px;color:#d6b2bd;font-size:11px;letter-spacing:.45px;border-bottom:1px solid #533039}
.data-table td{padding:14px 10px;font-size:12px;vertical-align:middle;border-bottom:1px solid #332329}
.data-table code,.linkfield{word-break:break-word;color:#e8afbd}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.actions input,.actions select{max-width:200px}
.stack{display:grid;gap:16px}
.checkline{display:flex!important;flex-direction:row!important;align-items:center;gap:9px!important}
.hint,.subtle{color:var(--muted);font-size:12px}
.mono{font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;word-break:break-all}
.alert{color:#fc8596}
footer{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:28px 0;margin-top:70px;border-top:1px solid #3a262e;
  color:#958a8e;font-size:10px;font-weight:700;letter-spacing:.7px;
}
.key-output{padding:16px;border-radius:7px;background:#2b1d14;border:1px solid #885d37;color:#ffdda9;word-break:break-all}
.center-card{max-width:500px;margin:58px auto}
.secret{color:#e9a9b5}
.form-inline{display:flex;align-items:center;gap:8px}
.form-inline input{flex:1}
.link-copy{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.link-copy input{flex:1;min-width:180px}
.pill{display:inline-block;border:1px solid #68414c;border-radius:50px;color:#debcc5;padding:3px 9px;font-size:11px}
.pill.dead{color:#b6a5a9;border-color:#4d4245}
.overflow{overflow-wrap:anywhere}
.upload-progress{margin-top:14px}
.upload-progress progress{width:100%;height:12px;accent-color:var(--accent)}
.upload-progress small{display:block;color:#cdb1b9;margin-top:6px}
.botfield{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;left:-10000px!important}
.upload-form>.checkline{margin-top:16px!important;font-size:12px!important;color:#d7bdc4!important}
:focus-visible{outline:2px solid #f05f74;outline-offset:2px}

@media (max-width:1180px){
  .topbar{flex-wrap:wrap;justify-content:center;gap:10px 20px}
  .topbar nav{width:100%;justify-content:center;flex-wrap:wrap;row-gap:2px}
  .hero:not(.compact){background-size:170px}
}
@media (max-width:850px){
  .shell{padding:0 22px}
  .layout,.admin-grid{grid-template-columns:minmax(0,1fr)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero:not(.compact){background-image:none}
}
@media (max-width:570px){
  .shell{padding:0 15px}
  .topbar{padding:15px 0;gap:10px}
  .brand-icon{width:49px;height:49px}
  .brand strong{font-size:19px}
  .brand small{font-size:8px;letter-spacing:1.4px}
  .topbar nav{justify-content:center;column-gap:9px;row-gap:2px}
  .topbar nav>a,.topbar nav>.inline,.topbar nav>.inline>.navbtn{font-size:9px;min-height:35px;letter-spacing:.15px}
  .topbar nav>.inline>.navbtn{padding:0 8px}
  .hero{padding:35px 0 25px}.hero.compact{padding:28px 0 22px}
  .hero h1{font-size:clamp(42px,10.5vw,58px);letter-spacing:-.8px}
  .fields,.mail-fields{grid-template-columns:1fr}
  .panel{padding:19px}
  .cards{gap:8px}
  .stat{padding:15px}
  .file-row{gap:9px;flex-wrap:wrap}
  .smallbtn{font-size:10px;padding:8px}
  .link-copy input{min-width:150px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}