:root {
    /* Solarized Light (default) */
    --bg: #fdf6e3;
    --bg-alt: #eee8d5;
    --surface2: #eee8d5;
    --accent: #2aa198;
    --fg: #657b83;
    --fg-mute: #93a1a1;
    --fg-emph: #586e75;
    --success: #859900;
    --warning: #b58900;
    --info: #2aa198;
    --line: #93a1a1;
    --cyan: #2aa198;
    --orange: #cb4b16;
    --red: #dc322f;
    --magenta: #d33682;
    --violet: #6c71c4;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--fg);
    min-height: 100vh;
}
nav {
    background: var(--bg-alt);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--accent);
}
nav .brand {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--fg);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
nav .brand img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
nav .nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}
nav a {
    color: var(--fg-emph);
    text-decoration: none;
    font-size: 0.95rem;
}
nav a:hover { color: var(--cyan); }
nav .user-info {
    color: var(--fg-mute);
    font-size: 0.9rem;
}
.container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}
h1 { margin-bottom: 1.5rem; font-size: 1.6rem; color: var(--fg-emph); }
h2 { margin-bottom: 1rem; font-size: 1.3rem; color: var(--fg); }
.card {
    background: var(--bg-alt);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.card h3 {
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    color: var(--fg-emph);
}
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 0.6rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid rgba(147, 161, 161, 0.3);
}
th {
    color: var(--fg-mute);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}
.badge-pending { background: var(--warning); color: #fdf6e3; }
.badge-downloading { background: var(--orange); color: #fdf6e3; }
.badge-fulfilled { background: var(--success); color: #fdf6e3; }
.badge-waiting_for_release { background: var(--cyan); color: #fdf6e3; }
.badge-waiting_for_space { background: var(--magenta); color: #fdf6e3; }
.badge-deferred { background: var(--violet); color: #fdf6e3; }
.badge-unavailable, .badge-cancelled { background: var(--red); color: #fdf6e3; }
form { margin-bottom: 1rem; }
label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--fg-mute);
    font-size: 0.9rem;
}
input[type="text"], input[type="number"], select, textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--fg);
    font-size: 1rem;
    margin-bottom: 1rem;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
}
textarea { resize: vertical; min-height: 80px; }
button, .btn {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background: var(--accent);
    color: #fdf6e3;
    border: none;
    border-radius: 4px;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
}
button:hover, .btn:hover { opacity: 0.9; }
.btn-secondary {
    background: var(--surface2);
    border: 1px solid var(--line);
    color: var(--fg-emph);
}
.btn-small {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}
.flash {
    padding: 0.8rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}
.flash-success { background: rgba(133, 153, 0, 0.15); border: 1px solid var(--success); }
.flash-error { background: rgba(220, 50, 47, 0.15); border: 1px solid var(--red); }
.flash-info { background: rgba(42, 161, 152, 0.15); border: 1px solid var(--info); }
a { color: var(--accent); }
a:hover { color: var(--cyan); }
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--fg-mute);
}
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
button:focus-visible, .btn:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #002b36;
        --bg-alt: #073642;
        --surface2: #073642;
        --accent: #2aa198;
        --fg: #839496;
        --fg-mute: #586e75;
        --fg-emph: #93a1a1;
        --success: #859900;
        --warning: #b58900;
        --info: #2aa198;
        --line: #586e75;
        --cyan: #2aa198;
        --orange: #cb4b16;
        --red: #dc322f;
        --magenta: #d33682;
        --violet: #6c71c4;
    }
    .badge-pending { background: var(--warning); color: #002b36; }
    .badge-downloading { background: var(--orange); color: #002b36; }
    .badge-fulfilled { background: var(--success); color: #002b36; }
    .badge-waiting_for_release { background: var(--cyan); color: #002b36; }
    th, td { border-bottom: 1px solid rgba(88, 110, 117, 0.3); }
    input[type="text"], input[type="number"], select, textarea {
        background: var(--bg);
        border-color: var(--line);
    }
}
@media (max-width: 600px) {
    nav { flex-direction: column; gap: 0.5rem; }
    .container { padding: 0 1rem; }
}
</content>
</invoke>