:root{--bg: #070612;--bg2: #0b0720;--text: rgba(255, 255, 255, .92);--muted: rgba(255, 255, 255, .7);--v1: #8b5cf6;--v2: #d946ef;--v3: #a78bfa;--border: rgba(255, 255, 255, .16)}body{margin:0;min-height:100vh;color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:radial-gradient(1200px 600px at 70% 10%,rgba(217,70,239,.25),transparent 55%),radial-gradient(1000px 500px at 20% 80%,rgba(139,92,246,.2),transparent 60%),linear-gradient(180deg,var(--bg),var(--bg2))}h1,h2,h3{margin:0}a{color:inherit;text-decoration:none}.muted{color:var(--muted)}.surface{background:linear-gradient(180deg,#140f2dbf,#0f0a23a6);border:1px solid var(--border);border-radius:22px;padding:20px;box-shadow:0 20px 60px #0000008c,inset 0 1px #ffffff14;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.surface.light{background:#fffffff5;color:#0f172a}.surface.light .muted{color:#475569}input[type=text],input[type=password]{width:100%;padding:12px 14px;border-radius:12px;font-size:14px;outline:none}.surface input[type=text],.surface input[type=password]{background:#ffffff0f;border:1px solid rgba(255,255,255,.18);color:var(--text)}.surface input::placeholder{color:#ffffff73}.surface.light input[type=text],.surface.light input[type=password]{background:#fff;border:1px solid rgba(0,0,0,.18);color:#0f172a}.surface.light input[type=file]{color:#0f172a}.btn-ghost{padding:10px 16px;border-radius:12px;border:1px solid var(--border);background:#ffffff0a;color:var(--text);font-weight:600;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .15s ease}.btn-ghost:hover:not(:disabled){background:#8b5cf626;border-color:var(--v1);transform:translateY(-1px)}.btn-ghost:active:not(:disabled){transform:translateY(0)}.btn-ghost:disabled{opacity:.5;cursor:not-allowed}.btn-ghost.on-light{border:1px solid rgba(255,255,255,.12);background:#0f172a;color:#fff;box-shadow:0 10px 25px #00000040}.btn-ghost.on-light:hover:not(:disabled){background:linear-gradient(120deg,#7c3aed,#8b5cf6);border-color:#8b5cf6;box-shadow:0 12px 28px #8b5cf652;transform:translateY(-1px)}.btn-ghost.on-light:active:not(:disabled){transform:translateY(0)}.preview-img{width:100%;height:100%;object-fit:contain;border-radius:10px;box-shadow:0 6px 18px #0000002e;border:0}.preview-frame{margin-top:12px;border-radius:10px;padding:0;background:transparent;border:none;box-shadow:none;height:clamp(220px,42vh,380px);max-width:440px;margin-left:auto;margin-right:auto;display:flex;align-items:center;justify-content:center;overflow:hidden}.media-card{display:flex;flex-direction:column;gap:14px}.media-card .media-meta{min-height:96px;display:flex;flex-direction:column;gap:8px}.action-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-bottom:10px}.action-row .action-btn{background:#0f172a;color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 24px #00000040}.action-row .action-btn:hover:not(:disabled){background:#0f172a;border-color:#8b5cf6;box-shadow:0 12px 26px #8b5cf647;transform:translateY(-1px)}.spinner{width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,255,255,.15);border-top:4px solid var(--v2);box-shadow:0 0 18px #d946ef73;animation:spin .9s linear infinite;margin:0 auto}@keyframes spin{to{transform:rotate(360deg)}}.alert-error{border:1px solid rgba(255,102,102,.35);background:#ff00001a;border-radius:16px;padding:12px 14px}.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.04em;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:#ffffffe6}.badge.success{background:#22c55e24;border-color:#22c55e40;color:#22c55ef2}.badge.error{background:#ef444424;border-color:#ef444440;color:#ef4444f2}@media(min-width:768px)and (max-width:1199px){.preview-frame{height:clamp(240px,42vh,400px);max-width:460px}}@media(max-width:599px){.preview-frame{height:clamp(220px,48vh,360px)}}.badge.info{background:#8b5cf624;border-color:#8b5cf640;color:#a78bfaf2}