/* ==========================================================================
   0 = Carbon theme tokens + circuit background
   Ported verbatim from carbon.interdo.me so files.interdo.me reads as the
   same site. Do not hand-edit the --circuit-art data URI.
   ========================================================================== */
:root{--bg: #140d10;--surface: #1b1116;--surface-alt: #26181e;--border: #45272f;--text: #f4eef0;--text-dim: #c0aab0;--accent: #22d3ee;--accent-text: #04171c;--danger: #ff8a8a;--danger-bg: #351619;--warn: #edc06a;--warn-bg: #302614;--radius: 8px;--shell-max: 1100px;--chat-max: 1600px;--shell-pad: 1.25rem;--prose-max: 72ch;--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--sky-deep: #0b0204;--sky-haze: #1a0509;--logo-cy: 156.5px;--circuit-reach: calc(100vh - var(--logo-cy));--circuit-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1600' viewBox='0 0 1600 1600' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M858,800H980L1040,740H1180L1240,800H1600'/%3E%3Cpath d='M742,800H620L560,860H420L360,800H0'/%3E%3Cpath d='M800,858V980L860,1040V1180L800,1240V1600'/%3E%3Cpath d='M800,742V620L740,560V420L800,360V0'/%3E%3Cpath d='M841,759L900,700H1010L1130,580V470L1290,310V0'/%3E%3Cpath d='M841,841L900,900H1010L1130,1020V1130L1290,1290V1600'/%3E%3Cpath d='M759,841L700,900H590L470,1020V1130L310,1290V1600'/%3E%3Cpath d='M759,759L700,700H590L470,580V470L310,310V0'/%3E%3Cpath d='M550,696L696,550L904,550L1050,696L1050,904L904,1050L696,1050L550,904Z'/%3E%3Cpath d='M330,605L605,330L995,330L1270,605L1270,995L995,1270L605,1270L330,995Z'/%3E%3Cpath d='M100,510L510,100L1090,100L1500,510L1500,1090L1090,1500L510,1500L100,1090Z'/%3E%3Cpath d='M904,1050V1120H1024M696,550V480H576M1270,995H1350V1085M330,605H250V515M1090,100V40H960M510,1500V1560H640'/%3E%3Ccircle cx='800' cy='800' r='58'/%3E%3Ccircle cx='800' cy='800' r='34'/%3E%3Cg fill='%23fff' stroke='none'%3E%3Ccircle cx='800' cy='800' r='13'/%3E%3Ccircle cx='980' cy='800' r='5'/%3E%3Ccircle cx='1040' cy='740' r='5'/%3E%3Ccircle cx='1180' cy='740' r='5'/%3E%3Ccircle cx='1240' cy='800' r='5'/%3E%3Ccircle cx='620' cy='800' r='5'/%3E%3Ccircle cx='560' cy='860' r='5'/%3E%3Ccircle cx='420' cy='860' r='5'/%3E%3Ccircle cx='360' cy='800' r='5'/%3E%3Ccircle cx='800' cy='980' r='5'/%3E%3Ccircle cx='860' cy='1040' r='5'/%3E%3Ccircle cx='860' cy='1180' r='5'/%3E%3Ccircle cx='800' cy='1240' r='5'/%3E%3Ccircle cx='800' cy='620' r='5'/%3E%3Ccircle cx='740' cy='560' r='5'/%3E%3Ccircle cx='740' cy='420' r='5'/%3E%3Ccircle cx='800' cy='360' r='5'/%3E%3Ccircle cx='900' cy='700' r='5'/%3E%3Ccircle cx='1010' cy='700' r='5'/%3E%3Ccircle cx='1130' cy='580' r='5'/%3E%3Ccircle cx='1130' cy='470' r='5'/%3E%3Ccircle cx='900' cy='900' r='5'/%3E%3Ccircle cx='1010' cy='900' r='5'/%3E%3Ccircle cx='1130' cy='1020' r='5'/%3E%3Ccircle cx='1130' cy='1130' r='5'/%3E%3Ccircle cx='700' cy='900' r='5'/%3E%3Ccircle cx='590' cy='900' r='5'/%3E%3Ccircle cx='470' cy='1020' r='5'/%3E%3Ccircle cx='470' cy='1130' r='5'/%3E%3Ccircle cx='700' cy='700' r='5'/%3E%3Ccircle cx='590' cy='700' r='5'/%3E%3Ccircle cx='470' cy='580' r='5'/%3E%3Ccircle cx='470' cy='470' r='5'/%3E%3Ccircle cx='1024' cy='1120' r='5'/%3E%3Ccircle cx='576' cy='480' r='5'/%3E%3Ccircle cx='1350' cy='1085' r='5'/%3E%3Ccircle cx='250' cy='515' r='5'/%3E%3Ccircle cx='960' cy='40' r='5'/%3E%3Ccircle cx='640' cy='1560' r='5'/%3E%3C/g%3E%3C/svg%3E")}
@media(prefers-color-scheme:dark){:root{--bg: #0a0507;--surface: #12090d;--surface-alt: #1b0f14;--border: #38202a;--text: #ece5e8;--text-dim: #b09aa1;--accent: #22d3ee;--accent-text: #04171c;--danger: #ff7a7a;--danger-bg: #2a1013;--warn: #e5b657;--warn-bg: #2a2114;--sky-deep: #040102;--sky-haze: #120408}
}
body:before,body:after{content:"";position:fixed;top:calc(var(--logo-cy) - var(--circuit-reach) - 200px);right:-200px;bottom:-200px;left:-200px;pointer-events:none;-webkit-mask-image:var(--circuit-art);mask-image:var(--circuit-art);-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;contain:strict}
body:before{z-index:-2;background:radial-gradient(circle 620px at 50% 50%,#ff5a5ad9,#e2203499 40%,#96122659 75%,#78102238)}
body:after{z-index:-1;background-repeat:no-repeat;background-position:center;background-image:radial-gradient(circle farthest-corner at 50% 50%,#ff283c00 1.563%,#ffa5aae6 2.031%,#ff374b47 2.344%,#ff283c00 3.125%,#ffa5aae6 4.063%,#ff374b47 4.688%,#ff283c00 6.25%,#ffa5aae6 8.125%,#ff374b47 9.375%,#ff283c00 12.5%,#ffa5aae6 16.25%,#ff374b47 18.75%,#ff283c00 25%,#ffa5aae6 32.5%,#ff374b47 37.5%,#ff283c00 50%,#ffa5aae6 65%,#ff374b47 75%,#ff283c00);background-size:100% 100%;animation:circuit-pulse 2.8s linear infinite}
@keyframes circuit-pulse{0%{background-size:100% 100%}
12.5%{background-size:109.05% 109.05%}
25%{background-size:118.92% 118.92%}
37.5%{background-size:129.68% 129.68%}
50%{background-size:141.42% 141.42%}
62.5%{background-size:154.22% 154.22%}
75%{background-size:168.18% 168.18%}
87.5%{background-size:183.4% 183.4%}
to{background-size:200% 200%}
}
html:before{content:"";position:fixed;top:calc(var(--logo-cy) - var(--circuit-reach));right:0;bottom:0;left:0;z-index:-3;pointer-events:none;background:radial-gradient(circle 340px at 50% 50%,#ffd2d280,#ff3c4666 22%,#d2142e33 48%,#0000 72%);animation:circuit-core 2.8s ease-in-out infinite}
@keyframes circuit-core{0%{opacity:1;transform:scale(1.04)}
55%{opacity:.58;transform:scale(.94)}
to{opacity:1;transform:scale(1.04)}
}
@media(prefers-reduced-motion:reduce){body:after,html:before{animation:none}
}

/* ==========================================================================
   Summary

   1 = Basic Style
   2 = Copyright
   3 = Options
   4 = Upload
   5 = Terms of service
   6 = Install
   7 = Admin
   8 = Download page

   ========================================================================== */

/* ==========================================================================
   1 = Basic Style
   ========================================================================== */

body {
  background: radial-gradient(circle 520px at 50% 50%,#ff465038,#0000 70%),radial-gradient(ellipse 90% 60% at 15% 5%,#be162c33,#0000 62%),radial-gradient(ellipse 75% 55% at 85% 80%,#780c3c3d,#0000 62%),linear-gradient(180deg,var(--sky-haze),var(--sky-deep) 55%);
  background-attachment: fixed;
  color: var(--text);
  font-family: Arial, sans-serif;
  margin: 0;
  line-height: 1.5;
}

#content {
  padding: 2em;
}

h1 a {
  display: block;
  background: url(201337.9.angle.png) no-repeat;
  background-size: 100% 100%;
  text-indent: -9999px;
  width: 194px;
  height: 185px;
  margin: 1em auto;
  position: relative;
}

h2 {
  text-align: center;
  color: var(--accent);
}

/* Add this to catch the specific TOS div from your HTML */
#content > div {
  color: var(--text);
}

/* Prose blocks need their own surface to stay legible over the circuit
   background. Every functional block in #content carries an id; the TOS
   prose is the only id-less div, so this targets it without touching
   #upload, #uploading, #upload_finished, #error_pop or #copyright. */
#content > div:not([id]) {
  max-width: var(--prose-max);
  margin: 2em auto;
  padding: 1.5em 2em;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* #content > div beats a bare .error/.message on specificity, so the danger
   colour has to be restated at that level to survive. */
#content > div.message,
#content > div.error {
  color: var(--danger);
}

fieldset {
  border: 0;
  padding: 1.5em;
  margin: 0 auto;
  border-radius: var(--radius);
  width: 20em;
  border: 7px dashed var(--border);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  min-height: 15em;
  min-width: 30em;
  position: relative;
}

legend {
  padding: 0.5em 1em;
  background: var(--surface-alt);
  color: var(--text);
  font-size: 1.2em;
  display: block;
  min-width: 8em;
  text-align: center;
}

/* Fix black links inside tables */
table a,
#content table a,
#content .tos a {
    color: var(--accent) !important;   /* same orange as the rest of #copyright */
}

/* Optional: hover effect to make it more visible */
table a:hover,
#content table a:hover,
#content .tos a:hover {
    color: color-mix(in srgb, var(--accent) 78%, white) !important;   /* lighter orange */
    text-decoration: underline;
}

input[type="submit"] {
  background: var(--accent);
  border: 0;
  padding: 0.4em 2.2em;
  font-size: 1.1em;
  color: var(--accent-text);
  border-bottom: 5px solid var(--border);
  cursor: pointer;
  display: block;
  width: fit-content;
  margin: 10px auto;
}

select,
input[type="text"],
input[type="password"] {
  border: 1;
  padding: 5px 5px;
  font-size: 1em;
}

select { width: 100%; }

input[type="submit"]:hover,
input[type="submit"]:focus {
  border: 0;
  position: relative;
  background: color-mix(in srgb, var(--accent) 78%, white);
  border-bottom: 5px solid var(--accent);
  margin-bottom: 10px;
}

.inner {
  margin-top: 3em;
}

#upload fieldset {
  background: url(upload.svg) no-repeat center;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

#upload fieldset:hover {
  border-color: var(--accent);
}

#upload > form {
  text-align: center;
}

#upload p {
  margin: 0;
}

#file_select {
  position: relative;
  width: 100%;
  height: 16em;
  cursor: pointer;
  opacity: 0;
}
  #upload.file-selected #file_select {
    opacity: 1;
    height: 2em;
  }
  #upload.file-selected fieldset {
    background-image: none;
  }


/* ==========================================================================
   2 = Copyright
   ========================================================================== */

#copyright {
  text-align: center;
  font-size: 0.8em;
  color: var(--accent);
  margin: 3em auto;
}

#copyright a {
  color: var(--accent);
  text-decoration: none;
}

#copyright a:hover,
#copyright a:focus {
  text-decoration: underline;
}

/* ==========================================================================
   3 = Options
   ========================================================================== */

#options {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 90%;
}

#options tr { height: 2.7em; }

#option_table tr:first-child {
  width: 100%;
  height: 100%;
}

#option_table td:first-child {
}

#options input[type="submit"] {
  position: relative;
  margin: 1em auto;
}

/* ==========================================================================
   4 = Upload
   ========================================================================== */

#upload_finished,
#uploading,
.message,
.info,
.error {
  text-align: center;
  color: var(--accent);
  padding-left: 3em;
}

#upload_finished > p:nth-child(1) {
  color: var(--accent);
  font-weight: bold;
}

#upload_finished div p:nth-child(1) {
  font-weight: bold;
}

#upload_finished a {
  text-decoration: none;
  color: var(--accent);
}

#uploading a {
  font-weight: bold;
  text-decoration: none;
  color: var(--accent);
}

#uploaded_percentage {
  font-size: 2em;
  font-weight: bold;
}

#upload_finished a:hover,
#uploading a:hover,
#upload_finished a:focus,
#uploading a:focus {
  text-decoration: underline;
}

.message,
.error {
  color: var(--danger);
  font-style: italic;
  font-weight: bold;
}

#upload_link_email {
  margin-left: 10px;
}

#upload_image_email {
  padding-left: 20px;
  padding-bottom: 15px;
  background: url(email.png) no-repeat;
}

/* ==========================================================================
   5 = Terms of service
   ========================================================================== */

textarea[readonly="readonly"] {
  border: 0;
  color: var(--accent);
  font-family: Arial, sans-serif;
  background: none;
  margin: auto;
  display: block;
}

textarea[readonly="readonly"] + p,
textarea[readonly="readonly"] + p + p {
  text-align: center;
  color: var(--accent);
}

textarea[readonly="readonly"] + p a,
textarea[readonly="readonly"] + p + p a {
  font-weight: bold;
  text-decoration: none;
  color: var(--accent);
}

textarea[readonly="readonly"] + p a:hover,
textarea[readonly="readonly"] + p + p a:hover,
textarea[readonly="readonly"] + p a:focus,
textarea[readonly="readonly"] + p + p a:focus {
  text-decoration: underline;
}

/* ==========================================================================
   6 = Install
   ========================================================================== */

#install fieldset,
#install + fieldset {
  width: auto;
  max-width: 50em;
  border: 7px dashed var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

#install table,
#install + fieldset table {
  width: 100%;
  border-collapse: collapse;
}

#install td,
#install + fieldset td {
  padding: 0.5em 1em;
  border-bottom: 0;
}

#install td:empty {
  width: 13.1em;
}

#install table form:nth-child(odd),
#install + fieldset tr:nth-child(odd) {
  background: var(--surface-alt);
}

#install fieldset > form {
  margin-top: 2em;
  text-align: center;
}

#install form {
  display: table;
  width: 100%;
}

#install td:last-child { text-align: left; }

#install .info { width: 19em; }

#install input[type="submit"] {
  min-width: 10.5em;
}

#install + fieldset table {
  font-size: 0.9em;
}

#install + fieldset td:first-child input[type="submit"] {
  background: none;
  padding: 0;
  color: var(--text);
  font-weight: bold;
  border-bottom: 0;
}

#install + fieldset td:first-child input[type="submit"]:hover,
#install + fieldset td:first-child input[type="submit"]:focus {
  text-decoration: underline;
}

/* ==========================================================================
   7 = Admin (improved readability)
   ========================================================================== */
#admin fieldset,
#admin + fieldset {
    width: auto;
    max-width: 60em;
    border: 7px dashed var(--border);
    border-radius: var(--radius);
}

#admin table,
#admin + fieldset table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 2px solid var(--border);
    background-color: var(--surface);
}

#admin td,
#admin + fieldset td {
    padding: 0.5em 1em;
    border: 2px solid var(--border);
    border-bottom: 0;
    color: var(--text);
}

#admin td:empty {
    width: 13.1em;
}

/* Working zebra stripes */
#admin tr:nth-child(odd),
#admin + fieldset tr:nth-child(odd) {
    background-color: var(--surface-alt);
}

#admin tr:nth-child(even),
#admin + fieldset tr:nth-child(even) {
    background-color: var(--surface);
}

#admin fieldset > form {
    margin-top: 2em;
    text-align: center;
}

#admin form {
    display: table;
    width: 100%;
}

#admin td:last-child {
    text-align: left;
}

#admin .info {
    width: 19em;
}

#admin input[type="submit"] {
    min-width: 10.5em;
}

#admin + fieldset table {
    font-size: 0.9em;
}

#admin + fieldset td:first-child input[type="submit"] {
    background: none;
    padding: 0;
    color: var(--text);
    font-weight: bold;
    border-bottom: 0;
}

#admin + fieldset td:first-child input[type="submit"]:hover,
#admin + fieldset td:first-child input[type="submit"]:focus {
    text-decoration: underline;
}
/* ==========================================================================
   8 = Download page
   ========================================================================== */

#self_destruct {
  font-weight: bold;
  color: var(--danger);
  background-image: url('pixel_bomb.png');
  background-size: 40px 40px;
  background-repeat: no-repeat;
  padding-left: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ==========================================================================
   Panel layering over the circuit background
   ========================================================================== */

#upload fieldset {
  background: url(upload.svg) no-repeat center color-mix(in srgb, var(--surface) 72%, transparent) !important;
}

#upload.file-selected fieldset {
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
}

#admin fieldset,
#admin + fieldset,
#install fieldset,
#install + fieldset {
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}