* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; font-family: Arial, Helvetica, sans-serif; }

:root {
    --mucc-blue: #0878ff;
    --mucc-blue-deep: #063d9c;
    --mucc-cyan: #00d8ff;
    --mucc-cyan-soft: #67eaff;
    --bg: #030916;
    --panel: rgba(8, 20, 38, 0.94);
    --panel-2: rgba(5, 14, 29, 0.96);
    --border: rgba(0, 190, 255, 0.25);
    --text: #eef8ff;
    --muted: #8ea8c1;
}

body {
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(circle at 12% 10%, rgba(0, 132, 255, .18), transparent 30%),
        radial-gradient(circle at 88% 78%, rgba(0, 220, 255, .12), transparent 32%),
        linear-gradient(135deg, #020713 0%, #07182e 48%, #020713 100%);
    background-attachment: fixed;
}

body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(0, 180, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 180, 255, .025) 1px, transparent 1px);
    background-size: 50px 50px;
}

a { color: var(--mucc-cyan-soft); }

.login-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 30px; }
.login-card {
    width: min(450px, 100%); padding: 42px;
    background: linear-gradient(145deg, rgba(10, 31, 59, .97), rgba(3, 11, 24, .97));
    border: 1px solid var(--border); border-radius: 22px;
    box-shadow: 0 30px 90px rgba(0,0,0,.75), 0 0 45px rgba(0,170,255,.12);
    backdrop-filter: blur(18px);
}
.login-logo { display: block; width: min(210px, 75%); height: auto; margin: 0 auto 20px; filter: drop-shadow(0 0 20px rgba(0,210,255,.25)); }
.login-card h1 { margin: 0; text-align: center; color: #fff; font-size: 29px; }
.eyebrow { color: var(--mucc-cyan); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.login-card .eyebrow { text-align: center; margin-bottom: 5px; }
.subtitle { margin: 9px 0 30px; text-align: center; color: #9bb2c9; font-size: 14px; }
label { display: block; margin: 18px 0 7px; color: #cfe0ef; font-size: 13px; font-weight: 700; }
input, select { width: 100%; padding: 13px 14px; color: #f2f8ff; background: #061221; border: 1px solid #29445f; border-radius: 8px; outline: none; font-size: 14px; transition: .2s; }
input::placeholder { color: #62788e; }
input:focus, select:focus { border-color: var(--mucc-cyan); box-shadow: 0 0 0 3px rgba(0,210,255,.12), 0 0 18px rgba(0,150,255,.08); }
select option { background: #08182b; color: #fff; }
button { font-family: inherit; }
.primary-button, .submit-button {
    border: 1px solid #00d9ff; border-radius: 9px; padding: 14px 28px;
    color: #02101b; background: linear-gradient(135deg, #55edff, #0878ff);
    font-weight: 900; letter-spacing: 1px; cursor: pointer;
    box-shadow: 0 8px 25px rgba(0,0,0,.35), 0 0 20px rgba(0,200,255,.14); transition: .2s;
}
.primary-button:hover, .submit-button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.login-card .primary-button { width: 100%; margin-top: 25px; }
.primary-button:disabled, .submit-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.error { padding: 11px 13px; background: rgba(150,30,45,.20); border: 1px solid rgba(255,90,110,.38); border-radius: 7px; color: #ffb8c2; font-size: 14px; }

.page { width: 100%; min-height: 100vh; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:14px 38px; background:linear-gradient(90deg, rgba(2,10,22,.99), rgba(6,28,55,.97), rgba(2,10,22,.99)); border-bottom:1px solid rgba(0,200,255,.22); box-shadow:0 5px 25px rgba(0,0,0,.5); backdrop-filter:blur(15px); }
.brand-link { display:flex; align-items:center; gap:15px; color:inherit; text-decoration:none; }
.header-logo { width:64px; height:64px; object-fit:contain; filter:drop-shadow(0 0 13px rgba(0,205,255,.25)); }
.brand-link h1 { margin:0; color:#f5fbff; font-size:23px; }
.brand-link p { margin:3px 0 0; color:#7894ae; font-size:11px; text-transform:uppercase; letter-spacing:2px; }
.user-area { display:flex; align-items:center; justify-content:flex-end; gap:10px; color:#b9cce0; font-size:13px; flex-wrap:wrap; }
.user-label { white-space:nowrap; }
.role-badge, .you-badge { display:inline-block; padding:4px 8px; border-radius:999px; font-size:10px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }
.role-badge.admin { color:#001321; background:#55eaff; }
.role-badge.user { color:#bcd5eb; background:#18324d; border:1px solid #31506e; }
.you-badge { color:#001321; background:#9befff; margin-left:5px; }
.nav-button, .logout-button { color:#8deeff; text-decoration:none; padding:8px 12px; border:1px solid rgba(0,210,255,.28); border-radius:7px; transition:.2s; }
.nav-button:hover, .logout-button:hover { color:#02101b; background:#43e7ff; }

.content { width:min(1120px, calc(100% - 40px)); margin:42px auto 60px; }
.message { margin-bottom:20px; padding:13px 16px; border:1px solid rgba(0,220,255,.30); border-radius:9px; background:rgba(0,160,255,.09); color:#b9f4ff; }
.success-message { border-color:rgba(0,255,170,.28); background:rgba(0,180,120,.10); color:#a9ffdf; }
.warning { margin-bottom:24px; padding:22px; border:1px solid rgba(255,190,40,.32); border-radius:14px; background:linear-gradient(135deg,rgba(80,60,8,.30),rgba(25,25,5,.30)); }
.warning strong { color:#ffd35a; font-size:17px; }
.warning p { color:#c7bfa5; line-height:1.5; }
.card { background:linear-gradient(145deg, var(--panel), var(--panel-2)); border:1px solid rgba(0,190,255,.16); border-radius:15px; box-shadow:0 25px 70px rgba(0,0,0,.45); backdrop-filter:blur(14px); }
.card-header { display:flex; justify-content:space-between; gap:20px; padding:25px 25px 18px; }
.card-header h2, .page-heading h2 { margin:4px 0 7px; color:#f2fbff; font-size:25px; }
.card-header p, .page-heading p { margin:0; color:#88a3bc; line-height:1.5; }
.page-heading { margin-bottom:24px; }
.page-heading h2 { font-size:32px; }
.instructions { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 25px 20px; }
.instruction-item { display:flex; gap:11px; padding:14px; border:1px solid rgba(0,180,255,.12); border-radius:10px; background:rgba(0,100,180,.055); }
.instruction-number { display:flex; flex:0 0 29px; width:29px; height:29px; align-items:center; justify-content:center; border-radius:50%; color:#001321; background:linear-gradient(135deg,#54ebff,#0878ff); font-weight:900; }
.instruction-item strong { color:#dff8ff; font-size:13px; }
.instruction-item p { margin:4px 0 0; color:#7791aa; font-size:12px; line-height:1.4; }
.torrent-list { padding:0 25px; }
.torrent-row { display:grid; grid-template-columns:45px 1fr 210px; gap:14px; align-items:center; padding:9px 0; }
.row-number { display:flex; justify-content:center; align-items:center; width:34px; height:34px; border-radius:50%; background:#081a2d; border:1px solid #244763; color:#80a1bd; font-size:13px; }
.torrent-input-area label, .category-area label { margin-top:0; }
.drop-zone { position:relative; min-height:74px; padding:9px 12px; border:1px dashed #2b536f; border-radius:9px; background:#061321; cursor:pointer; transition:.2s; }
.drop-zone:hover, .drop-zone.drag-over { border-color:var(--mucc-cyan); background:rgba(0,170,255,.08); box-shadow:0 0 20px rgba(0,190,255,.08); }
.magnet-input { border:0; padding:4px 0; background:transparent; box-shadow:none; }
.magnet-input:focus { box-shadow:none; }
.torrent-file-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.drop-message { display:flex; align-items:center; gap:9px; color:#7691aa; font-size:11px; }
.drop-message strong { color:#a9c4da; font-size:12px; }
.drop-icon { display:flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:50%; color:#001321; background:#43e7ff; font-weight:900; }
.file-selected { display:none; margin-top:5px; color:#69eaff; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.torrent-settings { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 25px; padding-top:18px; border-top:1px solid rgba(100,160,200,.10); }
.setting { padding:12px 14px; border-radius:8px; background:rgba(0,0,0,.15); }
.setting strong { display:block; color:#bcd8eb; font-size:12px; }
.setting span { display:block; margin-top:4px; color:#6f8ba5; font-size:12px; }
.form-actions { display:flex; justify-content:center; padding:0 25px 25px; }

.management-card { margin-bottom:24px; }
.management-form { padding:0 25px 25px; }
.form-grid { display:grid; gap:15px; }
.form-grid.three { grid-template-columns:1fr 1fr 180px; }
.management-form .primary-button { margin-top:20px; }
.user-table-wrap { overflow-x:auto; padding:0 25px 25px; }
.user-table { width:100%; min-width:950px; border-collapse:collapse; }
.user-table th { padding:12px 10px; text-align:left; color:#6f8ca6; font-size:10px; text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid rgba(0,190,255,.18); }
.user-table td { padding:13px 10px; border-bottom:1px solid rgba(100,150,190,.10); vertical-align:middle; color:#d7e8f5; }
.user-table tr:last-child td { border-bottom:0; }
.inline-form { display:flex; align-items:center; gap:7px; }
.inline-form input, .inline-form select { width:145px; padding:9px 10px; }
.inline-form select { width:90px; }
.small-button, .danger-button { border:1px solid rgba(0,210,255,.30); border-radius:6px; padding:8px 10px; color:#8eeeff; background:#0a2036; cursor:pointer; font-size:10px; font-weight:900; letter-spacing:.7px; }
.small-button:hover { color:#001321; background:#43e7ff; }
.danger-button { color:#ff9ca8; border-color:rgba(255,90,110,.30); background:#27131a; }
.danger-button:hover { color:#fff; background:#a82d42; }
.disabled-action { color:#60778d; font-size:11px; }
.management-error { margin-bottom:20px; }

@media (max-width: 850px) {
    .topbar { padding:12px 18px; align-items:flex-start; }
    .user-area { max-width:50%; }
    .user-label { display:none; }
    .instructions, .torrent-settings { grid-template-columns:1fr; }
    .form-grid.three { grid-template-columns:1fr; }
}

@media (max-width: 750px) {
    .header-logo { width:52px; height:52px; }
    .brand-link h1 { font-size:18px; }
    .brand-link p { display:none; }
    .content { width:calc(100% - 24px); margin:30px auto; }
    .torrent-row { grid-template-columns:34px 1fr; gap:10px; margin-bottom:12px; }
    .torrent-row > div:nth-child(2), .torrent-row > div:nth-child(3) { grid-column:2; }
    .torrent-list, .card-header, .management-form, .user-table-wrap { padding-left:15px; padding-right:15px; }
    .instructions, .torrent-settings { margin-left:15px; margin-right:15px; }
    .login-card { padding:30px 25px; }
    .topbar { flex-direction:column; }
    .user-area { max-width:none; width:100%; justify-content:flex-start; }
}