/* Datuma portal — shared styles (C-2 re-host) */
:root {
  --navy:#1a1a2e; --navy-2:#232341; --navy-3:#2d2d4d;
  --orange:#e94560; --orange-2:#ff6b7f;
  --text:#ffffff; --muted:#a0a0b8; --border:#33334d; --grey:#6b6b85;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; min-height:100vh; background:var(--navy); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.layout { display:flex; flex-direction:column; min-height:100vh; }

/* Top bar */
.topbar { position:sticky; top:0; z-index:10; background:var(--navy-2); border-bottom:1px solid var(--border); }
.topbar-inner { max-width:1100px; margin:0 auto; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; letter-spacing:0.3px; }
.brand .dot { width:10px; height:10px; border-radius:2px; background:var(--orange); display:inline-block; }
.tagline { color:var(--muted); font-size:12px; font-weight:400; letter-spacing:0.3px; }

/* Nav */
.nav { background:var(--navy); border-bottom:1px solid var(--border); }
.nav-inner { max-width:1100px; margin:0 auto; padding:0 18px; display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.nav-inner::-webkit-scrollbar { display:none; }
.nav-link { padding:14px 14px; font-size:14px; font-weight:500; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; }
.nav-link:hover { color:var(--text); }
.nav-link.active { color:var(--orange); border-bottom-color:var(--orange); }

/* Main */
main.page { flex:1; max-width:1100px; width:100%; margin:0 auto; padding:28px 18px 60px; }
h1 { font-size:26px; margin:0 0 8px; line-height:1.25; }
.lead { color:var(--muted); font-size:15px; margin:0 0 24px; max-width:62ch; line-height:1.55; }
.card { background:var(--navy-2); border:1px solid var(--border); border-radius:12px; padding:22px; margin-bottom:18px; }
.card h2 { font-size:16px; margin:0 0 8px; color:var(--text); }
.card p { margin:0 0 8px; color:var(--muted); font-size:14px; line-height:1.55; }
.muted { color:var(--muted); }
.pill { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px; letter-spacing:0.4px; text-transform:uppercase; background:rgba(233,69,96,0.12); color:var(--orange); border:1px solid rgba(233,69,96,0.35); }

.grid { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:720px) { .grid.cols-2 { grid-template-columns:1fr 1fr; } }

.form-row { display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; }
.input { flex:1; min-width:220px; background:var(--navy-3); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:10px 12px; font-size:14px; font-family:inherit; }
.input:focus { outline:none; border-color:var(--orange); }
.btn { background:var(--orange); color:#fff; border:0; padding:10px 18px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; min-height:40px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.btn:hover:not(:disabled) { background:var(--orange-2); }
.btn:disabled { opacity:0.6; cursor:wait; }
.btn.secondary { background:transparent; border:1px solid var(--border); color:var(--text); }
.btn.secondary:hover { border-color:var(--orange); color:var(--orange); }
.placeholder { border:1px dashed var(--border); border-radius:10px; padding:22px; text-align:center; color:var(--muted); font-size:14px; }

/* Upload page */
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.drop-card { padding:18px; }
.dropzone { border:2px dashed var(--border); border-radius:12px; padding:44px 18px; text-align:center; cursor:pointer; transition:border-color 0.15s, background 0.15s; }
.dropzone:hover, .dropzone:focus-visible { border-color:var(--orange); background:rgba(233,69,96,0.04); outline:none; }
.dropzone.drag { border-color:var(--orange); background:rgba(233,69,96,0.08); }
.dz-icon { font-size:36px; color:var(--orange); }
.dz-title { font-size:17px; font-weight:600; margin-top:8px; }
.dz-sub { margin-top:4px; font-size:13px; }
.linkish { background:transparent; border:0; color:var(--orange); cursor:pointer; padding:0; text-decoration:underline; font:inherit; }
.progress-bar { height:6px; background:var(--navy-3); border-radius:3px; overflow:hidden; margin-top:14px; }
.progress-bar-fill { height:100%; width:0; background:var(--orange); transition:width 0.2s; }
.saved-banner { display:flex; align-items:center; gap:12px; background:rgba(233,69,96,0.06); border:1px solid rgba(233,69,96,0.25); border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size:13px; color:var(--text); flex-wrap:wrap; }
.map-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.mtable .c-src { width:30%; }
.mtable .c-tgt { width:28%; }
.mtable .c-badge { width:14%; white-space:nowrap; }
.mtable .c-note { width:28%; }
.mtable code { background:rgba(255,255,255,0.05); padding:2px 6px; border-radius:4px; font-size:12px; color:var(--text); }
.mtable select.field-sel { width:100%; padding:8px 10px; font-size:13px; }
.mtable tr.row-unmapped { background:rgba(233,180,69,0.05); }
.mtable tr.row-unmapped .c-src code { background:rgba(233,180,69,0.18); color:#f5d87d; }
.badge { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:0.2px; }
.b-green { background:rgba(64,192,128,0.14); color:#6ad0a0; border:1px solid rgba(64,192,128,0.4); }
.b-blue  { background:rgba(88,145,255,0.14); color:#8ab4ff; border:1px solid rgba(88,145,255,0.4); }
.b-orange{ background:rgba(255,164,69,0.14); color:#ffbc6d; border:1px solid rgba(255,164,69,0.45); }
.b-grey  { background:rgba(160,160,184,0.14); color:var(--muted); border:1px solid var(--border); }
.b-red   { background:rgba(233,69,96,0.14);  color:var(--orange); border:1px solid rgba(233,69,96,0.4); }
.split-prev { margin-top:8px; font-size:12px; color:var(--muted); }
.split-prev .sp-row { padding:2px 0; }
.split-prev .sp-orig { color:var(--muted); }
.split-prev .sp-first, .split-prev .sp-last { color:var(--text); font-weight:500; }
.toggle { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); cursor:pointer; margin-top:6px; }
.quality-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:10px; padding:14px; margin-top:16px; }
.q-stat { text-align:center; }
.q-n { font-size:24px; font-weight:700; color:var(--text); }
.q-l { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.6px; margin-top:2px; }
.process-row { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; margin-top:20px; }
.warn { color:#ffbc6d; font-size:13px; background:rgba(255,164,69,0.08); border:1px solid rgba(255,164,69,0.3); padding:6px 12px; border-radius:6px; }
.btn-lg { padding:14px 30px; font-size:16px; min-width:260px; }
@media (max-width:720px) {
  .quality-grid { grid-template-columns:repeat(2,1fr); }
  .mtable .c-src, .mtable .c-tgt, .mtable .c-badge, .mtable .c-note { width:auto; }
}

/* Protection page */
.form-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; }
.fld { display:flex; flex-direction:column; gap:6px; grid-column:span 2; }
.fld-wide { grid-column:span 3; }
.fld-submit { grid-column:span 6; justify-content:flex-end; align-items:flex-start; }
.fld span { font-size:12px; color:var(--muted); letter-spacing:0.2px; }
.fld .input { min-width:0; }
.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.toolbar #q { flex:1; min-width:200px; }
.tblwrap { overflow-x:auto; border:1px solid var(--border); border-radius:10px; }
.ptable { width:100%; border-collapse:collapse; min-width:680px; }
.ptable th, .ptable td { text-align:left; padding:12px 12px; font-size:13px; vertical-align:middle; }
.ptable thead th { background:rgba(255,255,255,0.03); color:var(--muted); font-weight:500; font-size:11px; letter-spacing:0.6px; text-transform:uppercase; border-bottom:1px solid var(--border); }
.ptable tbody tr + tr { border-top:1px solid var(--border); }
.ptable .name { font-weight:600; color:var(--text); }
.ptable .sub { font-size:12px; color:var(--muted); margin-top:2px; word-break:break-all; }
.ptable .c-actions { text-align:right; white-space:nowrap; }
.ptable .muted { color:var(--muted); }
.pill-reason { background:rgba(255,255,255,0.05); color:var(--text); border:1px solid var(--border); }
.dot-status { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.st-active { background:#40c080; box-shadow:0 0 0 3px rgba(64,192,128,0.14); }
.st-inactive { background:#8a8aa0; }
.btn-mini { background:transparent; border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; margin-left:6px; }
.btn-mini:hover:not(:disabled) { border-color:var(--orange); color:var(--orange); }
.btn-mini.btn-danger:hover:not(:disabled) { border-color:#ff6b7f; color:#ff6b7f; }
.btn-mini:disabled { opacity:0.5; cursor:wait; }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--orange); color:#fff; padding:10px 18px; border-radius:8px; font-size:14px; opacity:0; transition:opacity 0.2s; pointer-events:none; z-index:99; }
.toast.show { opacity:1; }
.toast.error { background:#8b1e3f; }
@media (max-width:720px) {
  .form-grid { grid-template-columns:repeat(2, 1fr); }
  .fld, .fld-wide { grid-column:span 2; }
  .fld-submit { grid-column:span 2; justify-content:stretch; }
  .fld-submit .btn { width:100%; }
}

/* Review page */
.wrap { max-width:780px; margin:0 auto; padding:20px 16px 80px; }
.review-header { margin-bottom:20px; }
.review-header .brand-label { font-weight:700; color:var(--orange); letter-spacing:0.5px; font-size:14px; text-transform:uppercase; }
.review-header h1 { font-size:22px; margin:6px 0 4px; line-height:1.3; }
.review-header .sub { color:var(--muted); font-size:14px; }
.review-header .progress { margin-top:12px; font-size:13px; color:var(--muted); }
.review-header .progress strong { color:var(--text); }
.rv-card { background:var(--navy-2); border:1px solid var(--border); border-radius:10px; padding:16px; margin-bottom:16px; transition:opacity 0.2s ease; }
.rv-card.card-decided { opacity:0.55; }
.rv-card .card-header { display:flex; flex-wrap:wrap; gap:6px; font-size:13px; margin-bottom:12px; }
.score { color:var(--orange); font-weight:600; }
.reason { color:var(--muted); }
.contacts { display:flex; flex-direction:column; gap:10px; }
.contact { background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:8px; padding:12px; }
.contact-name { font-weight:600; font-size:15px; margin-bottom:8px; }
.contact-row { font-size:13px; line-height:1.5; display:flex; gap:8px; word-break:break-word; }
.contact-row .lbl { color:var(--muted); min-width:90px; flex-shrink:0; }
.vs { text-align:center; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:2px; margin:2px 0; }
.rv-actions { display:flex; gap:10px; margin-top:14px; }
.rv-actions .btn { flex:1; min-height:44px; font-size:15px; }
.btn-merge { background:var(--orange); }
.btn-merge:hover:not(:disabled) { background:var(--orange-2); }
.btn-keep { background:transparent; border:1px solid var(--border); }
.btn-keep:hover:not(:disabled) { border-color:var(--orange); color:var(--orange); }
.decided { text-align:center; padding:10px; background:rgba(255,255,255,0.04); border-radius:8px; color:var(--muted); font-size:13px; font-weight:500; }
.empty { text-align:center; padding:40px 20px; color:var(--muted); }
@media (min-width:600px) {
  .contacts { flex-direction:row; align-items:stretch; }
  .contact { flex:1; }
  .vs { writing-mode:vertical-rl; transform:rotate(180deg); margin:0 4px; }
}

/* Footer */
footer.foot { max-width:1100px; margin:0 auto; padding:18px; color:var(--grey); font-size:12px; }
footer.foot a { color:var(--grey); text-decoration:underline; }
@media (max-width:600px) {
  .topbar-inner { padding:12px 14px; }
  .nav-inner { padding:0 14px; }
  main.page { padding:22px 14px 60px; }
  h1 { font-size:22px; }
}

/* Blocked state */
.blocked { text-align:center; padding:60px 20px; }
.blocked h1 { color:var(--orange); }