:root{
  --bg:#c0c0c0; --win:#dfdfdf; --edge:#fff; --shadow:#808080; --text:#000; --accent:#000080;
  --card:#ffffff; --link:#0000ee
}
:root[data-theme='aqua']{
  --bg:#e5f1ff; --win:#ecf5ff; --edge:#ffffff; --shadow:#9ab7d6; --text:#001122; --accent:#3399ff; --card:#ffffff; --link:#0077cc
}
:root[data-theme='beos']{
  --bg:#efefef; --win:#f7f7f7; --edge:#ffffff; --shadow:#bbbbbb; --text:#111; --accent:#cc0000; --card:#ffffff; --link:#0033cc
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.4 'MS Sans Serif',Tahoma,Arial,sans-serif}
a{color:var(--link)}
.window{border:2px outset var(--edge);background:var(--win);padding:8px;margin:8px}
.titlebar{display:flex;align-items:center;gap:10px;background:linear-gradient(var(--accent),#0000aa);color:#fff;border:2px outset #fff}
.titlebar h1{font-size:16px;margin:0;flex:1}
.menu a,.btn,select.theme{margin-right:6px;padding:4px 8px;border:2px outset #fff;background:#dfdfdf;color:#000;text-decoration:none;cursor:pointer}
.menu a.active{background:#c5d7ff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:12px}
.card{border:2px inset var(--shadow);background:var(--card);padding:8px}
.card h2{margin:0 0 6px 0;font-size:14px}
.footer{display:flex;justify-content:space-between;padding:8px 12px;background:#ddd;border-top:2px inset #999}
.doc{padding:16px}
.tile{display:flex;flex-direction:column;gap:6px;padding:10px;border:2px inset #999;background:#fff}
.tile h3{margin:0 0 4px 0;font-size:14px}
.tile p{margin:0;font-size:12px;color:#333}
.back{background:#dfdfdf}
.hint{font-size:12px;color:#333}
.note{font-size:12px;color:#444}
.list-uploads p{margin:4px 0}