@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:         #060606;
    --surface:    #0d0d0d;
    --surface2:   #141414;
    --border:     #1a1a1a;
    --border2:    #242424;
    --gold:       #c9a96e;
    --gold-h:     #dfc07e;
    --gold-dim:   rgba(201, 169, 110, 0.12);
    --gold-glow:  rgba(201, 169, 110, 0.08);
    --text:       #ede9e1;
    --text2:      #b8b4ac;
    --muted:      #525252;
    --success:    #5a9e72;
    --warning:    #b8883a;
    --error:      #a85252;
    --radius:     2px;
    --font:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --serif:      'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --mono:       'SFMono-Regular', Consolas, monospace;
}

html { -webkit-font-smoothing: antialiased; }

body {
    background:  var(--bg);
    color:       var(--text);
    font-family: var(--font);
    font-size:   17px;
    font-weight: 400;
    line-height: 1.6;
    min-height:  100vh;
}

.container {
    max-width: 680px;
    margin:    0 auto;
    padding:   0 24px;
}

/* ── Header ─────────────────────────────────────────── */
.header {
    padding:       32px 0 28px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 64px;
}
.header .container {
    display:     flex;
    align-items: baseline;
    gap:         14px;
}
.logo {
    font-family:    var(--serif);
    font-size:      36px;
    font-weight:    500;
    letter-spacing: 0.04em;
    color:          var(--text);
}
.logo em {
    font-style:  normal;
    color:       var(--gold);
}
.platform-badge {
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--gold);
    opacity:        0.7;
    border:         1px solid rgba(201, 169, 110, 0.2);
    padding:        2px 9px;
    border-radius:  20px;
}

/* ── Main ────────────────────────────────────────────── */
.main { padding-bottom: 100px; }

/* ── Form section ────────────────────────────────────── */
.section-form {
    margin-bottom: 72px;
}

.section-eyebrow {
    font-family:    var(--serif);
    font-size:      16px;
    font-weight:    400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--muted);
    margin-bottom:  20px;
}

.input-row {
    display:       flex;
    gap:           10px;
    margin-bottom: 10px;
}

.input-row input {
    flex:          1;
    padding:       12px 16px;
    background:    var(--surface);
    border:        1px solid var(--border2);
    border-radius: var(--radius);
    color:         var(--text);
    font-family:   var(--mono);
    font-size:     15px;
    font-weight:   400;
    letter-spacing: 0.01em;
    outline:       none;
    transition:    border-color 0.2s, box-shadow 0.2s;
    min-width:     0;
}
.input-row input:focus {
    border-color: var(--gold);
    box-shadow:   0 0 0 3px var(--gold-glow);
}
.input-row input::placeholder {
    color:   var(--muted);
    opacity: 1;
}

#submit-btn {
    padding:        14px 28px;
    background:     transparent;
    border:         1px solid var(--gold);
    border-radius:  var(--radius);
    color:          var(--gold);
    font-family:    var(--font);
    font-size:      14px;
    font-weight:    500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor:         pointer;
    white-space:    nowrap;
    transition:     background 0.2s, color 0.2s;
}
#submit-btn:hover {
    background: var(--gold);
    color:      var(--bg);
}
#submit-btn:disabled {
    opacity: 0.35;
    cursor:  not-allowed;
}

.hint {
    font-size:   13px;
    color:       var(--muted);
    letter-spacing: 0.02em;
}

.btn {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    padding:        10px 20px;
    border-radius:  var(--radius);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor:         pointer;
    border:         none;
    text-decoration: none;
    transition:     background 0.2s, color 0.2s, opacity 0.2s;
}
.btn--download {
    background: var(--gold-dim);
    border:     1px solid rgba(201, 169, 110, 0.25);
    color:      var(--gold);
}
.btn--download:hover {
    background: rgba(201, 169, 110, 0.2);
    color:      var(--gold-h);
}

/* ── Alerts ──────────────────────────────────────────── */
.alert {
    padding:       11px 15px;
    border-radius: var(--radius);
    font-size:     12px;
    margin-top:    12px;
    letter-spacing: 0.01em;
}
.alert--error {
    background: rgba(168, 82, 82, 0.08);
    border:     1px solid rgba(168, 82, 82, 0.2);
    color:      var(--error);
}

/* ── Active Job Card ─────────────────────────────────── */
.job-card {
    background:    var(--surface);
    border:        1px solid var(--border2);
    border-radius: var(--radius);
    padding:       20px 22px;
    margin-bottom: 48px;
    position:      relative;
}
.job-card::before {
    content:    '';
    position:   absolute;
    top:        0; left: 0;
    right:      0; height: 1px;
    background: linear-gradient(90deg, var(--gold) 0%, transparent 60%);
    opacity:    0.4;
}
.job-card__meta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   10px;
}
.job-card__url {
    font-family:    var(--mono);
    font-size:      11px;
    color:          var(--muted);
    word-break:     break-all;
    margin-bottom:  16px;
    letter-spacing: 0.01em;
}
.job-id {
    font-family:    var(--mono);
    font-size:      10px;
    color:          var(--border2);
    letter-spacing: 0.04em;
}
.job-error {
    font-family:    var(--mono);
    font-size:      11px;
    color:          var(--error);
    margin-top:     10px;
    word-break:     break-word;
    line-height:    1.6;
}

/* ── Status Badges ───────────────────────────────────── */
.status {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding:        3px 10px;
    border-radius:  20px;
}
.status--queued {
    background: rgba(82, 82, 82, 0.15);
    color:      var(--muted);
    border:     1px solid rgba(82, 82, 82, 0.2);
}
.status--running {
    background: rgba(184, 136, 58, 0.1);
    color:      var(--warning);
    border:     1px solid rgba(184, 136, 58, 0.2);
}
.status--finished {
    background: rgba(90, 158, 114, 0.1);
    color:      var(--success);
    border:     1px solid rgba(90, 158, 114, 0.2);
}
.status--failed {
    background: rgba(168, 82, 82, 0.08);
    color:      var(--error);
    border:     1px solid rgba(168, 82, 82, 0.18);
}

/* ── Jobs List ───────────────────────────────────────── */
.section-list { }
#jobs-container {
    overflow-y:      visible;
    scrollbar-width: none;
}
#jobs-container::-webkit-scrollbar { display: none; }
.jobs-group-label {
    display:        flex;
    align-items:    center;
    gap:            8px;
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--muted);
    padding:        14px 0 8px;
    border-bottom:  1px solid var(--border);
    margin-bottom:  0;
    cursor:         pointer;
    user-select:    none;
}
.jobs-group-label:hover { color: var(--text); }
.group-toggle {
    font-size:   16px;
    line-height: 1;
    width:       14px;
    text-align:  center;
    flex-shrink: 0;
}
.group-count {
    margin-left: auto;
    font-size:   13px;
    color:       var(--muted);
}
.jobs-group { overflow: hidden; }
.jobs-group.is-collapsed { display: none; }
.section-title {
    font-family:    var(--serif);
    font-size:      18px;
    font-weight:    400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--muted);
    margin-bottom:  20px;
    padding-bottom: 12px;
    border-bottom:  1px solid var(--border);
}
.empty-state {
    color:          var(--muted);
    font-size:      12px;
    font-style:     italic;
    font-family:    var(--serif);
    letter-spacing: 0.02em;
}

.job-row {
    display:       flex;
    align-items:   center;
    gap:           14px;
    padding:       11px 0;
    border-bottom: 1px solid var(--border);
    font-size:     12px;
    transition:    background 0.15s;
}
.job-row:last-child { border-bottom: none; }
.job-thumb {
    width:         52px;
    height:        52px;
    object-fit:    cover;
    border-radius: var(--radius);
    flex-shrink:   0;
    border:        1px solid var(--border2);
}
.job-thumb--empty {
    display:       block;
    width:         52px;
    height:        52px;
    background:    var(--surface2);
    border-radius: var(--radius);
    border:        1px solid var(--border);
    flex-shrink:   0;
}
.job-row__info {
    flex:     1;
    min-width: 0;
    display:  flex;
    flex-direction: column;
    gap:      4px;
}
.job-row__top {
    display:     flex;
    align-items: center;
    gap:         10px;
}
.job-row__time {
    font-size:      12px;
    color:          var(--muted);
    letter-spacing: 0.04em;
    white-space:    nowrap;
}
.job-row__url {
    flex:          1;
    font-family:   var(--mono);
    font-size:     13px;
    color:         var(--muted);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    min-width:     0;
}
.job-row__action { flex-shrink: 0; }
.job-row__action a {
    color:          var(--gold);
    text-decoration: none;
    font-size:      11px;
    font-weight:    400;
    letter-spacing: 0.04em;
    opacity:        0.8;
    transition:     opacity 0.15s;
}
.job-row__action a:hover { opacity: 1; }
.job-delete-btn {
    flex-shrink:  0;
    background:   none;
    border:       none;
    color:        var(--muted);
    font-size:    22px;
    line-height:  1;
    cursor:       pointer;
    padding:      4px 8px;
    transition:   color 0.15s;
    opacity:      0.4;
}
.job-delete-btn:hover  { color: var(--error); opacity: 1; }
.job-delete-btn:disabled { opacity: 0.15; cursor: not-allowed; }

.job-row__id {
    font-family:    var(--mono);
    font-size:      10px;
    color:          var(--border2);
    letter-spacing: 0.04em;
}

/* ── Spinner ─────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
    display:       inline-block;
    width:         10px;
    height:        10px;
    border:        1.5px solid rgba(184, 136, 58, 0.25);
    border-top-color: var(--warning);
    border-radius: 50%;
    animation:     spin 0.9s linear infinite;
    flex-shrink:   0;
}

/* ── Footer ──────────────────────────────────────────── */
.footer {
    border-top:  1px solid var(--border);
    padding:     20px 0;
    margin-top:  60px;
}
.footer .container {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   11px;
    color:       var(--muted);
    letter-spacing: 0.06em;
}
.footer-sep { opacity: 0.3; }

/* ── Logout ──────────────────────────────────────────── */
.logout-link {
    margin-left:    auto;
    font-size:      10px;
    font-weight:    400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--muted);
    text-decoration: none;
    transition:     color 0.2s;
}
.logout-link:hover { color: var(--gold); }

/* ── Login Page ──────────────────────────────────────── */
.body--login {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      100vh;
    padding:         24px;
}

.login-wrap {
    width:     100%;
    max-width: 360px;
}

.login-card {
    background:    var(--surface);
    border:        1px solid var(--border2);
    border-radius: var(--radius);
    padding:       48px 40px 44px;
    position:      relative;
    text-align:    center;
}
.login-card::before {
    content:    '';
    position:   absolute;
    top: 0; left: 0; right: 0;
    height:     1px;
    background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
    opacity:    0.5;
}

.login-logo {
    font-family:    var(--serif);
    font-size:      32px;
    font-weight:    500;
    letter-spacing: 0.04em;
    margin-bottom:  6px;
}
.login-logo em {
    font-style: normal;
    color:      var(--gold);
}

.login-sub {
    font-size:      10px;
    font-weight:    400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          var(--muted);
    margin-bottom:  36px;
}

.login-error {
    font-size:     12px;
    color:         var(--error);
    background:    rgba(168, 82, 82, 0.08);
    border:        1px solid rgba(168, 82, 82, 0.2);
    border-radius: var(--radius);
    padding:       9px 14px;
    margin-bottom: 20px;
    text-align:    left;
}

.login-form { text-align: left; }

.login-field { margin-bottom: 12px; }
.login-field input {
    width:         100%;
    padding:       12px 14px;
    background:    var(--surface2);
    border:        1px solid var(--border2);
    border-radius: var(--radius);
    color:         var(--text);
    font-family:   var(--font);
    font-size:     13px;
    font-weight:   300;
    outline:       none;
    transition:    border-color 0.2s, box-shadow 0.2s;
}
.login-field input:focus {
    border-color: var(--gold);
    box-shadow:   0 0 0 3px var(--gold-glow);
}
.login-field input::placeholder { color: var(--muted); }

.login-btn {
    width:          100%;
    margin-top:     8px;
    padding:        13px;
    background:     transparent;
    border:         1px solid var(--gold);
    border-radius:  var(--radius);
    color:          var(--gold);
    font-family:    var(--font);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor:         pointer;
    transition:     background 0.2s, color 0.2s;
}
.login-btn:hover {
    background: var(--gold);
    color:      var(--bg);
}

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 520px) {
    .header        { margin-bottom: 44px; }
    .input-row     { flex-direction: column; }
    #submit-btn    { width: 100%; justify-content: center; }
    .section-form  { margin-bottom: 48px; }
}