:root {
    --bg: #16181c;
    --panel: #1e2126;
    --line: #2c3037;
    --text: #e6e8ea;
    --dim: #949aa3;
    --accent: #4a9eff;
    --bad: #e05252;
    --good: #4fbf6a;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f6f7f8;
        --panel: #ffffff;
        --line: #dcdfe3;
        --text: #1c1f23;
        --dim: #646c76;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

#main { max-width: 1000px; margin: 0 auto; padding: 0 16px 64px; }

h1 { font-size: 20px; font-weight: 600; margin: 20px 0 12px; }
h2 { font-size: 15px; font-weight: 600; margin: 24px 0 8px; color: var(--dim); }

nav {
    display: flex; flex-wrap: wrap; gap: 4px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 20px;
}

nav button {
    background: none; border: 0; border-bottom: 2px solid transparent;
    color: var(--dim); padding: 10px 14px; cursor: pointer;
    font: inherit; font-size: 14px;
}
nav button:hover { color: var(--text); }
nav button.on { color: var(--text); border-bottom-color: var(--accent); }

label { display: block; margin: 12px 0 4px; font-size: 13px; color: var(--dim); }

input[type=text], input[type=password], input[type=url], select, textarea {
    width: 100%; padding: 8px 10px;
    background: var(--panel); color: var(--text);
    border: 1px solid var(--line); border-radius: 6px;
    font: inherit;
}
textarea { min-height: 180px; resize: vertical; font-family: ui-monospace, monospace; font-size: 13px; }

button.go {
    background: var(--accent); color: #fff; border: 0;
    padding: 9px 16px; border-radius: 6px; cursor: pointer; font: inherit;
}
button.go:disabled { opacity: .5; cursor: default; }
button.plain {
    background: var(--panel); color: var(--text);
    border: 1px solid var(--line); padding: 8px 14px;
    border-radius: 6px; cursor: pointer; font: inherit;
}
button.danger { color: var(--bad); }

.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }

#status {
    position: sticky; top: 0; z-index: 10;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 10px 0; font-size: 13px; color: var(--dim);
}
#status.bad { color: var(--bad); }
#status.good { color: var(--good); }

#drop {
    border: 2px dashed var(--line); border-radius: 10px;
    padding: 28px; text-align: center; color: var(--dim);
    cursor: pointer;
}
#drop.over { border-color: var(--accent); color: var(--text); }

.grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    margin-top: 12px;
}

.cell {
    background: var(--panel); border: 2px solid transparent;
    border-radius: 8px; padding: 8px; text-align: center;
    cursor: pointer; user-select: none;
}
/* The selection has to be visible. The desktop client shipped with the
   state correct and undrawn, which reads as a broken program. */
.cell.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--panel)); }
/* The tile's own background, not --line.
   
   A thumbnail with an alpha channel shows whatever is behind it, and
   --line is the grey used for borders and rules -- so a transparent PNG
   sat in a grey box inside a white tile. The placeholder icons all have
   alpha, so this was every non-image file.
   
   inherit, not --panel: a SELECTED tile is tinted with the accent colour,
   and a fixed --panel there put a white box inside a blue tile -- the same
   discontinuity, inverted. inherit follows whichever background the cell
   currently has. */
.cell img {
    width: 100%; height: 96px; object-fit: cover; border-radius: 4px;
    background: inherit;
}
.cell .name { font-size: 12px; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell .meta { font-size: 11px; color: var(--dim); }

table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
th { text-align: left; color: var(--dim); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--line); }
td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
/* A hugeurl share is 242 characters. Left alone it pushes every other
   column off the table. */
td.clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#menu {
    position: fixed; z-index: 100; display: none;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 8px; padding: 4px; min-width: 190px;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
#menu button {
    display: block; width: 100%; text-align: left;
    background: none; border: 0; color: var(--text);
    padding: 8px 12px; border-radius: 5px; cursor: pointer; font: inherit; font-size: 14px;
}
#menu button:hover { background: var(--line); }
#menu hr, #submenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* The submenu is a second panel of the same shape, positioned beside the
   first rather than nested inside it -- a nested element would be clipped
   by the parent's rounded corners and its overflow. */
#submenu {
    position: fixed; z-index: 101; display: none;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 8px; padding: 4px; min-width: 170px;
    max-height: 70vh; overflow-y: auto;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
#submenu button {
    display: block; width: 100%; text-align: left;
    background: none; border: 0; color: var(--text);
    padding: 8px 12px; border-radius: 5px; cursor: pointer; font: inherit; font-size: 14px;
}
#submenu button:hover { background: var(--line); }
#menu button.dim, #submenu button.dim { opacity: .5; cursor: default; }

dialog {
    background: var(--panel); color: var(--text);
    border: 1px solid var(--line); border-radius: 10px;
    padding: 20px; max-width: 460px;
}
dialog::backdrop { background: rgba(0,0,0,.5); }

.note { font-size: 13px; color: var(--dim); }
.result { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px; margin-top: 12px; font-size: 13px; word-break: break-all; }

/* These four were inline style attributes. The site's CSP is
   "style-src 'self'" with no unsafe-inline, which blocks a style="..."
   attribute exactly as it blocks a <style> block -- so they live here. */
.w-auto  { width: auto; }
.w-lang  { width: 110px; }
.m-0     { margin: 0; }
.picked  { border-color: var(--accent); }