/* ═══════════ PALETTE (identique SysCtl) ═══════════ */
:root{
  --face:#c0c0c0;
  --face-hi:#d4d0c8;
  --shadow:#808080;
  --bevel-dark:#404040;
  --highlight:#000080;
  --highlight-text:#fff;
  --titlebar:linear-gradient(180deg,#0058e6,#3a6ea5); /* Luna 2000 */
  --link:#000080;
  --link-hover:#ff0000;
}
/* ═══════════ BUREAU ═══════════ */
* { box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:Tahoma,"MS Sans Serif","Segoe UI",sans-serif;
  font-size:11px; color:#000;
  background:#008080;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.05) 0 2px, transparent 3px),
    radial-gradient(circle at 75% 65%, rgba(255,255,255,.04) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 85%, rgba(0,0,0,.12) 0 3px, transparent 4px);
  background-size:220px 220px,310px 310px,400px 400px;
  padding:14px;
}
a{ color:var(--link); }
a:hover{ color:var(--link-hover); }
::selection{ background:var(--highlight); color:var(--highlight-text); }
/* ═══════════ FENÊTRE PRINCIPALE ═══════════ */
#content{
  max-width:600px; margin:0 auto;
  background:var(--face);
  border:2px outset; border-color:#fff var(--bevel-dark) var(--bevel-dark) #fff;
  box-shadow:4px 4px 0 rgba(0,0,0,.35);
  padding:0 0 6px;
}
h1{
  display:flex; align-items:center; gap:6px;
  background:var(--titlebar); color:#fff;
  font-size:12px; font-weight:bold;
  padding:3px 8px; border-bottom:2px solid var(--bevel-dark);
}
h1 a{ color:#fff; text-decoration:none; }
h1 a:hover{ color:#ffff80; }
/* ═══════════ FORMULAIRES ═══════════ */
fieldset{
  border:2px outset; border-color:#fff var(--bevel-dark) var(--bevel-dark) #fff;
  margin:10px; padding:8px 10px 10px;
}
legend{
  background:var(--face); padding:1px 8px;
  border:1px outset; border-color:#fff var(--shadow) var(--shadow) #fff;
  font-weight:bold; color:#000;
}
table{ border-collapse:collapse; }
td{ padding:3px 6px; vertical-align:middle; }
label{ color:#000; }
input[type=text], input[type=password], input[type=file], select{
  background:#fff; border:2px inset; border-color:var(--bevel-dark) #fff #fff var(--bevel-dark);
  font:11px Tahoma,sans-serif; padding:2px 4px; color:#000;
}
select:focus, input:focus{ outline:1px dotted #000; }
input[type=checkbox]{ margin:0 4px 0 0; }
input[type=submit], button{
  background:var(--face); font:11px Tahoma,sans-serif; color:#000;
  border-top:2px solid #fff; border-left:2px solid #fff;
  border-right:2px solid var(--bevel-dark); border-bottom:2px solid var(--bevel-dark);
  padding:3px 14px; cursor:pointer; outline:none;
}
input[type=submit]:active, button:active{
  border-top:2px solid var(--bevel-dark); border-left:2px solid var(--bevel-dark);
  border-right:2px solid #fff; border-bottom:2px solid #fff;
}
#show_password{ padding:0 5px; }
#send{ font-weight:bold; }
p.config{ color:#000; padding:2px 6px; }
/* ═══════════ ÉCRAN DE MOT DE PASSE (login) ═══════════ */
.form.login fieldset{ margin:14px auto; width:fit-content; min-width:280px; }
.form.login td{ padding:6px; }
/* ═══════════ RÉSULTAT UPLOAD ═══════════ */
#uploading, #upload_finished{
  margin:10px; padding:8px;
  background:#fff; border:2px inset; border-color:var(--bevel-dark) #fff #fff var(--bevel-dark);
}
#upload_finished a{ font-weight:bold; }
#output_key{ width:240px; }
/* ═══════════ PAGE DE TÉLÉCHARGEMENT (f.php) ═══════════ */
.form.download legend{ font-size:12px; }
.form.download tr.tos td{ font-size:10px; color:#000; }
#self_destruct{ color:#800000; font-weight:bold; }
/* ═══════════ ERREURS ═══════════ */
#error_pop{
  margin:10px; padding:6px 10px;
  background:#fff; color:#800000; font-weight:bold;
  border:2px inset; border-color:var(--bevel-dark) #fff #fff var(--bevel-dark);
}
/* ═══════════ BARRE DE STATUT (footer) ═══════════ */
#copyright{
  margin:8px 10px 4px; padding:3px 6px;
  border-top:1px solid var(--bevel-dark); border-bottom:1px solid #fff;
  font-size:10px; color:#000;
}
#copyright a{ color:var(--link); }
/* ═══════════ DIVERS ═══════════ */
#jyraphe{ display:none; }
::-webkit-scrollbar{ width:14px; }
::-webkit-scrollbar-track{ background:#d4d0c8; }
::-webkit-scrollbar-thumb{
  background:var(--face);
  border:1px outset; border-color:#fff var(--bevel-dark) var(--bevel-dark) #fff;
}
@media (max-width:640px){
  body{ padding:6px; }
  #content{ max-width:100%; }
  fieldset{ margin:6px; }
}