:root {
  --navy: #000080;
  --teal: #008080;
  --silver: #c0c0c0;
  --yellow: #ffff00;
}
* { box-sizing: border-box; }
body {
  font-family: Verdana, Geneva, 'Comic Sans MS', system-ui, sans-serif;
  background: var(--teal);
  color: #000;
  margin: 0;
  padding: 0;
}
a { color: var(--navy); }
header.site {
  background: var(--navy);
  color: #fff;
  padding: 0.6rem 1rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
header.site .brand { font-weight: bold; font-size: 1.2rem; }
header.site nav { display: flex; gap: 0.8rem; margin-left: auto; flex-wrap: wrap; }
header.site nav a { color: var(--yellow); text-decoration: none; }
header.site nav a:hover { text-decoration: underline; }
main {
  max-width: 900px;
  margin: 1.5rem auto;
  background: var(--silver);
  border: 3px outset #fff;
  padding: 1.5rem;
}
h1, h2 { color: var(--navy); }
.card {
  background: #fff;
  border: 2px inset var(--silver);
  padding: 1rem;
  margin: 1rem 0;
}
input, textarea, select {
  font-family: inherit;
  padding: 0.35rem;
  border: 2px inset var(--silver);
  width: 100%;
  max-width: 28rem;
}
textarea { min-height: 16rem; width: 100%; max-width: 100%; font-family: 'Courier New', monospace; }
button {
  font-family: inherit;
  padding: 0.4rem 1rem;
  border: 2px outset #fff;
  background: var(--silver);
  cursor: pointer;
}
button:active { border-style: inset; }
.quota-bar { background: #fff; border: 1px solid #000; height: 1.2rem; max-width: 28rem; }
.quota-bar > span { display: block; height: 100%; background: var(--navy); }
.file-tree a { display: block; padding: 0.15rem 0; font-family: 'Courier New', monospace; }
.msg-ok { color: #060; } .msg-err { color: #900; }
marquee { color: var(--navy); font-weight: bold; }
footer.site { text-align: center; color: #eee; padding: 1rem; font-size: 0.8rem; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid var(--silver); padding: 0.3rem; text-align: left; font-size: 0.85rem; }