*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  background:#0b0d10;color:#e8ecef;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:#7cc8ff;text-decoration:none}
a:hover{text-decoration:underline}

/* ───── login ───── */
.login-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%,#1a2230 0%,#0b0d10 60%);
}
.login-shell{width:100%;max-width:380px}
.brand{text-align:center;margin-bottom:28px}
.brand h1{margin:8px 0 4px;font-size:28px;letter-spacing:-0.02em}
.brand .tagline{color:#8a96a4;margin:0;font-size:14px}
.logo-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,#f0b429,#cb6d17);
  color:#0b0d10;font-weight:800;font-size:28px;
  box-shadow:0 8px 28px rgba(240,180,41,.25);
}
.logo-sm{width:32px;height:32px;border-radius:8px;font-size:18px;box-shadow:none}

.card{
  background:#13171c;border:1px solid #1f262e;border-radius:14px;
  padding:24px;box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.card h2{margin:0 0 18px;font-size:18px;letter-spacing:-0.01em}
.card label{display:block;margin-bottom:14px}
.card label span{display:block;font-size:13px;color:#9aa6b3;margin-bottom:6px}
.card input[type=email],
.card input[type=password],
.card input[type=url]{
  width:100%;padding:11px 13px;border-radius:9px;
  border:1px solid #2a3441;background:#0e1318;color:#e8ecef;
  font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s;
}
.card input:focus{border-color:#f0b429;box-shadow:0 0 0 3px rgba(240,180,41,.15)}

.btn-primary{
  width:100%;padding:12px;border-radius:9px;border:0;
  background:linear-gradient(180deg,#f0b429,#d99a18);color:#1a1206;
  font-weight:700;font-size:15px;cursor:pointer;
  transition:transform .05s,filter .15s;
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:active{transform:translateY(1px)}

.btn-ghost{
  background:transparent;color:#9aa6b3;border:1px solid #2a3441;
  padding:6px 12px;border-radius:8px;cursor:pointer;font-size:13px;
}
.btn-ghost:hover{color:#e8ecef;border-color:#3b485a}

.meta{margin-top:14px;text-align:center;font-size:12px;color:#6b7785}

/* ───── flashes ───── */
.flashes{
  position:fixed;top:18px;right:18px;left:18px;display:flex;flex-direction:column;gap:8px;
  pointer-events:none;z-index:50;align-items:center;
}
.flash{
  pointer-events:auto;padding:10px 16px;border-radius:8px;font-size:14px;
  background:#13171c;border:1px solid #2a3441;max-width:520px;
}
.flash-error{border-color:#5a1f1f;background:#22100f;color:#ffb4ad}
.flash-success{border-color:#1f5a3b;background:#0f221a;color:#a8e6c1}
.flash-info{border-color:#1f3b5a;background:#0f1a22;color:#a8c8e6}

/* ───── dashboard ───── */
.topbar{background:#0e1318;border-bottom:1px solid #1f262e}
.topbar-inner{
  max-width:1100px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand-line{display:flex;align-items:center;gap:10px;font-size:16px}
.user-line{display:flex;align-items:center;gap:12px;font-size:13px;color:#9aa6b3}
.user-line .email{color:#e8ecef}
.user-line .role{
  text-transform:uppercase;font-size:11px;padding:2px 8px;
  border-radius:999px;background:#1f262e;color:#9aa6b3;letter-spacing:.05em;
}
form.inline{display:inline}

.dash{max-width:1100px;margin:0 auto;padding:24px 20px 60px}

.metrics{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;margin-bottom:22px;
}
.metric{
  background:#13171c;border:1px solid #1f262e;border-radius:12px;padding:16px 18px;
  display:flex;flex-direction:column;gap:4px;
}
.metric .num{font-size:26px;font-weight:700;letter-spacing:-0.02em}
.metric .lbl{font-size:12px;color:#8a96a4;text-transform:uppercase;letter-spacing:.06em}
.metric-rate .num{color:#f0b429}

.add-form{display:flex;gap:10px}
.add-form input{flex:1}
.add-form .btn-primary{width:auto;padding:11px 18px}

.grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:16px;margin-top:20px;
}
.grid .card{padding:18px}
.grid .card h2{font-size:15px;color:#9aa6b3;margin-bottom:12px}
.list{list-style:none;margin:0;padding:0}
.list li{
  padding:8px 0;border-top:1px solid #1f262e;font-size:13px;
  display:flex;flex-direction:column;gap:2px;
}
.list li:first-child{border-top:0}
.list li a{word-break:break-all}
.list .when{color:#6b7785;font-size:11px}
.list .err{color:#ff8a80;font-size:12px}
.empty{color:#6b7785;font-size:13px;margin:6px 0}

.processing-card{
  border:1px solid #2a323d;background:linear-gradient(180deg,#13191f,#0f141a);
  margin-top:6px;
}
.processing-row{display:flex;align-items:center;gap:14px}
.processing-text{flex:1;min-width:0}
.processing-title{
  font-size:14px;color:#f0e9d8;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.processing-meta{font-size:12px;color:#8a96a4;margin-top:2px}
.processing-spinner{
  width:18px;height:18px;border-radius:50%;
  border:2px solid #2a323d;border-top-color:#f0b429;
  animation:spin .9s linear infinite;flex:none;
}
@keyframes spin{to{transform:rotate(360deg)}}
.live-dot{
  width:8px;height:8px;border-radius:50%;background:#3ddc97;
  box-shadow:0 0 0 0 rgba(61,220,151,.6);
  animation:pulse 1.6s ease-out infinite;flex:none;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(61,220,151,.55)}
  70%{box-shadow:0 0 0 8px rgba(61,220,151,0)}
  100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}
}
.tag{
  display:inline-block;font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  padding:1px 6px;border-radius:3px;margin-right:6px;vertical-align:1px;
}
.tag-upload{background:#2a323d;color:#f0b429}

.trans-link{color:#f0b429;text-decoration:none;border-bottom:1px solid transparent}
.trans-link:hover{border-bottom-color:#f0b429}

.brand-link{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.back-link{color:#8a96a4;text-decoration:none;font-size:13px;display:inline-block;margin-bottom:8px}
.back-link:hover{color:#cbd3dc}

.trans-header{margin:8px 0 16px}
.trans-title{
  font-size:20px;letter-spacing:-0.01em;margin:0;color:#e6ecf2;
  word-break:break-all;
}
.trans-meta{color:#8a96a4;font-size:12px;margin-top:4px}

.trans-actions{display:flex;gap:10px;align-items:center;padding:14px 18px}
.trans-actions .btn-primary{width:auto;padding:9px 14px}
.btn-ghost{
  background:transparent;border:1px solid #2a323d;color:#cbd3dc;
  padding:8px 14px;border-radius:6px;cursor:pointer;font-size:13px;
  text-decoration:none;display:inline-block;
}
.btn-ghost:hover{border-color:#3a4554;color:#fff}
.copy-feedback{color:#3ddc97;font-size:12px}

.trans-card{padding:0}
.trans-text{
  margin:0;padding:20px 22px;font:14px/1.65 ui-monospace,Menlo,Consolas,monospace;
  color:#e6ecf2;white-space:pre-wrap;word-wrap:break-word;
  max-height:none;
}

.upload-form{display:flex;flex-direction:column;gap:12px}
.dropzone{
  display:block;cursor:pointer;border:2px dashed #2a323d;border-radius:10px;
  padding:26px 18px;background:#11161c;transition:border-color .15s,background .15s;
  text-align:center;outline:none;
}
.dropzone:hover,.dropzone:focus{border-color:#3a4554;background:#131a22}
.dropzone.is-drag{border-color:#f0b429;background:rgba(240,180,41,.05)}
.dz-icon{font-size:28px;color:#f0b429;line-height:1}
.dz-title{margin-top:8px;font-size:14px;color:#cbd3dc}
.dz-hint{margin-top:4px;font-size:12px;color:#6b7785}
.dz-files{
  list-style:none;margin:14px 0 0;padding:0;text-align:left;
  max-height:280px;overflow:auto;
}
.dz-files .dz-row{
  padding:8px 0;border-top:1px solid #1f262e;
  display:flex;flex-direction:column;gap:6px;
}
.dz-files .dz-row:first-child{border-top:0}
.dz-row-head{
  display:flex;justify-content:space-between;gap:10px;
  font-size:12px;color:#cbd3dc;
}
.dz-row-name{word-break:break-all;flex:1}
.dz-row-meta{color:#8a96a4;white-space:nowrap;font-variant-numeric:tabular-nums}
.dz-bar{
  height:5px;background:#1f262e;border-radius:3px;overflow:hidden;
}
.dz-bar-fill{
  height:100%;background:#f0b429;width:0;
  transition:width .15s linear;
}
.dz-uploading .dz-bar-fill{
  background:linear-gradient(90deg,#f0b429,#ffd368);
}
.dz-queued .dz-bar-fill{background:#3ddc97}
.dz-duplicate .dz-bar-fill{background:#6b7785}
.dz-duplicate .dz-row-meta{color:#8a96a4}
.dz-error .dz-bar-fill{background:#ff6b6b;width:100%!important}
.dz-error .dz-row-meta{color:#ff8a80}
.dz-queued .dz-row-meta{color:#3ddc97}
.upload-form .btn-primary{width:auto;align-self:flex-start;padding:11px 18px}
.upload-form .btn-primary:disabled{opacity:.5;cursor:not-allowed}

@media (max-width:600px){
  .add-form{flex-direction:column}
  .add-form .btn-primary{width:100%}
  .upload-form .btn-primary{width:100%}
  .user-line .role{display:none}
}