:root {
  color-scheme: light;
  --navy:#101c46;
  --navy-2:#182b61;
  --blue:#0066f5;
  --cyan:#29c8df;
  --orange:#cf451c;
  --ink:#172033;
  --muted:#667085;
  --line:#d9e0eb;
  --soft:#f4f7fb;
  --ice:#edf3ff;
  --success:#087a55;
  --warn:#a74b12;
  --shadow:0 18px 55px rgba(16,28,70,.12);
}
* { box-sizing:border-box; }
html { min-height:100%; background:var(--soft); }
body { min-height:100vh; margin:0; color:var(--ink); background:var(--soft); font:15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
.loading-screen { min-height:100vh; display:grid; place-content:center; justify-items:center; gap:16px; color:#fff; background:var(--navy); }
.brand-mark { display:grid; place-items:center; width:50px; height:50px; border-radius:14px; color:var(--navy); background:linear-gradient(135deg,#fff 0 42%,var(--cyan) 43% 67%,#fff 68%); font-size:24px; font-weight:950; box-shadow:0 12px 34px #050b2670; }
.shell { min-height:100vh; display:grid; grid-template-columns:250px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; padding:24px 18px; color:#fff; background:linear-gradient(180deg,var(--navy),#0b1435); }
.brand { display:flex; gap:12px; align-items:center; padding:0 8px 24px; border-bottom:1px solid #ffffff1c; }
.brand .brand-mark { width:40px; height:40px; border-radius:11px; font-size:18px; }
.brand strong { display:block; font-size:14px; }
.brand span { display:block; margin-top:1px; color:#aebce8; font-size:11px; }
.nav { display:grid; gap:7px; margin-top:24px; }
.nav button,.nav a { display:flex; gap:10px; align-items:center; width:100%; border:0; border-radius:10px; padding:11px 12px; color:#cbd5f6; background:transparent; text-decoration:none; text-align:left; font-weight:750; }
.nav button:hover,.nav a:hover,.nav .active { color:#fff; background:#ffffff13; }
.nav .active { box-shadow:inset 3px 0 0 var(--cyan); }
.nav-icon { display:grid; place-items:center; width:23px; height:23px; border-radius:6px; color:var(--cyan); background:#29c8df19; font-size:12px; }
.sidebar-note { position:absolute; right:18px; bottom:24px; left:18px; padding:14px; border:1px solid #ffffff18; border-radius:12px; color:#aebce8; background:#ffffff09; font-size:11px; }
.main { min-width:0; }
.topbar { display:flex; align-items:center; justify-content:space-between; min-height:74px; padding:16px 32px; border-bottom:1px solid var(--line); background:#fff; }
.topbar-actions,.password-row { display:flex; gap:9px; align-items:center; }
.password-row .input { flex:1; min-width:0; }
.topbar small { display:block; color:var(--orange); font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.topbar h1 { margin:2px 0 0; color:var(--navy); font-size:22px; line-height:1.2; }
.content { max-width:1500px; margin:0 auto; padding:30px 32px 60px; }
.hero-strip { display:flex; gap:24px; align-items:flex-end; justify-content:space-between; margin-bottom:25px; padding:27px 30px; border-radius:20px; color:#fff; background:linear-gradient(115deg,var(--navy),#1b3a82); box-shadow:var(--shadow); overflow:hidden; position:relative; }
.hero-strip::after { content:""; position:absolute; width:260px; height:260px; right:-80px; top:-110px; border:1px solid #63dcf655; border-radius:50%; box-shadow:0 0 0 30px #63dcf614,0 0 0 62px #63dcf60d; }
.hero-strip > * { position:relative; z-index:1; }
.hero-strip h2 { margin:0; font-size:27px; }
.hero-strip p { max-width:730px; margin:7px 0 0; color:#d8e4ff; }
.button { display:inline-flex; gap:8px; align-items:center; justify-content:center; min-height:40px; border:1px solid var(--line); border-radius:9px; padding:9px 14px; color:var(--navy); background:#fff; font-weight:800; text-decoration:none; white-space:nowrap; }
.button:hover { border-color:#aebbd0; background:#f9fbff; }
.button.primary { color:#fff; border-color:var(--blue); background:var(--blue); }
.button.primary:hover { background:#0059d7; }
.button.orange { color:#fff; border-color:var(--orange); background:var(--orange); }
.button.ghost { color:#fff; border-color:#ffffff42; background:#ffffff12; }
.button.small { min-height:34px; padding:7px 10px; font-size:12px; }
.button:disabled { cursor:not-allowed; opacity:.5; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:25px; }
.metric { padding:19px 20px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:0 6px 20px #101c4608; }
.metric strong { display:block; color:var(--navy); font-size:29px; line-height:1; }
.metric span { display:block; margin-top:8px; color:var(--muted); font-size:12px; font-weight:750; }
.section-head { display:flex; gap:20px; align-items:end; justify-content:space-between; margin:26px 0 13px; }
.section-head h2 { margin:0; color:var(--navy); font-size:20px; }
.section-head p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.project-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
.project-card { display:grid; gap:15px; padding:19px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 8px 25px #101c4608; }
.project-card:hover { border-color:#b9c7df; transform:translateY(-1px); box-shadow:0 13px 34px #101c4612; }
.project-card-head { display:flex; gap:14px; align-items:flex-start; justify-content:space-between; }
.project-card small { color:var(--orange); font-size:10px; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
.project-card h3 { margin:3px 0 0; color:var(--navy); font-size:17px; }
.pill { display:inline-flex; align-items:center; border-radius:999px; padding:5px 9px; color:#255295; background:var(--ice); font-size:10px; font-weight:850; white-space:nowrap; }
.pill.complete { color:#086747; background:#e5f7ef; }
.pill.waiting { color:#8b4b12; background:#fff0df; }
.project-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.project-meta div { padding:9px; border-radius:9px; background:var(--soft); }
.project-meta strong { display:block; color:var(--navy); font-size:13px; }
.project-meta span { color:var(--muted); font-size:10px; }
.project-actions { display:flex; gap:8px; flex-wrap:wrap; padding-top:12px; border-top:1px solid var(--line); }
.empty { padding:45px 25px; border:1px dashed #bdc8db; border-radius:16px; color:var(--muted); background:#fff; text-align:center; }
.empty strong { display:block; margin-bottom:5px; color:var(--navy); font-size:16px; }
.panel { padding:24px; border:1px solid var(--line); border-radius:17px; background:#fff; box-shadow:0 8px 28px #101c4608; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.field { min-width:0; }
.field.full { grid-column:1/-1; }
.field label { display:block; margin-bottom:6px; color:var(--navy); font-size:12px; font-weight:850; }
.field .help { margin:5px 0 0; color:var(--muted); font-size:11px; }
.input,.select,.textarea { width:100%; border:1px solid #cfd7e4; border-radius:9px; padding:11px 12px; color:var(--ink); background:#fff; outline:none; }
.textarea { min-height:104px; resize:vertical; }
.input:focus,.select:focus,.textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px #0066f51e; }
.upload-zone { display:grid; place-items:center; min-height:180px; border:2px dashed #b8c5da; border-radius:15px; padding:25px; background:#f9fbff; text-align:center; }
.upload-zone.drag { border-color:var(--blue); background:var(--ice); }
.upload-zone input { position:absolute; width:1px; height:1px; opacity:0; }
.upload-icon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:10px; border-radius:14px; color:var(--blue); background:var(--ice); font-size:21px; }
.upload-zone strong { color:var(--navy); }
.upload-zone p { margin:5px 0 14px; color:var(--muted); font-size:12px; }
.file-chip { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:12px; padding:12px 14px; border:1px solid #bcd0f6; border-radius:11px; color:#24519a; background:var(--ice); }
.mapping { margin-top:22px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; }
table { width:100%; border-collapse:collapse; }
th { padding:10px 12px; color:#fff; background:var(--blue); font-size:11px; text-align:left; white-space:nowrap; }
td { padding:10px 12px; border-top:1px solid var(--line); vertical-align:top; font-size:12px; }
tbody tr:nth-child(even) td { background:#fbfcff; }
.form-actions { display:flex; gap:9px; justify-content:flex-end; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.notice { margin:16px 0; padding:13px 15px; border:1px solid #bfd0f3; border-radius:10px; color:#315a98; background:var(--ice); font-size:12px; }
.notice.error { color:#9c2d24; border-color:#efc4bf; background:#fff4f2; }
.notice.success { color:#086747; border-color:#b7ddcc; background:#edf9f3; }
.review-shell { min-height:100vh; background:#f4f7fb; }
.review-header { display:flex; gap:20px; align-items:center; justify-content:space-between; padding:17px clamp(18px,4vw,58px); color:#fff; background:var(--navy); }
.review-brand { display:flex; gap:12px; align-items:center; }
.review-brand .brand-mark { width:38px; height:38px; border-radius:10px; font-size:16px; }
.review-brand small { display:block; color:var(--cyan); font-size:10px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.review-brand strong { display:block; font-size:15px; }
.review-progress { min-width:240px; text-align:right; }
.review-progress span { display:block; color:#b9c7ee; font-size:10px; }
.progress-track { height:5px; margin-top:6px; overflow:hidden; border-radius:8px; background:#ffffff24; }
.progress-track i { display:block; height:100%; width:0; background:var(--cyan); transition:width .2s; }
.review-main { max-width:1500px; margin:0 auto; padding:25px clamp(16px,4vw,52px) 70px; }
.review-welcome { display:flex; gap:20px; align-items:flex-start; justify-content:space-between; margin-bottom:18px; padding:22px 24px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.review-welcome small { color:var(--orange); font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.review-welcome h1 { margin:3px 0 5px; color:var(--navy); font-size:24px; }
.review-welcome p { max-width:850px; margin:0; color:var(--muted); }
.review-toolbar { position:sticky; top:0; z-index:5; display:flex; gap:10px; align-items:center; margin-bottom:12px; padding:11px; border:1px solid var(--line); border-radius:12px; background:#fffffff2; box-shadow:0 8px 23px #101c4610; backdrop-filter:blur(12px); }
.review-toolbar .search { flex:1; }
.review-stats { color:var(--muted); font-size:12px; white-space:nowrap; }
.segment-list { display:grid; gap:11px; }
.segment { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; padding:15px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.segment.changed { border-color:#e4b195; box-shadow:inset 4px 0 0 var(--orange); }
.segment-meta { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:10px; }
.segment-meta strong { color:var(--blue); letter-spacing:.05em; text-transform:uppercase; }
.copy-box { min-height:92px; padding:12px; border:1px solid var(--line); border-radius:9px; background:#f5f7fb; white-space:pre-wrap; overflow-wrap:anywhere; }
.copy-box::before { content:"OV text"; display:block; margin-bottom:7px; color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
.translation-editor { width:100%; min-height:92px; overflow:hidden; border:1px solid #cfd7e4; border-radius:9px; padding:12px; color:var(--ink); background:#fff; outline:none; resize:vertical; }
.translation-editor:focus { border-color:var(--blue); box-shadow:0 0 0 3px #0066f51d; }
.initial-bar { display:flex; gap:10px; align-items:flex-start; justify-content:space-between; margin-top:8px; padding:8px 10px; border-radius:8px; color:#7a3b17; background:#fff1e8; font-size:10px; }
.initial-bar span { white-space:pre-wrap; overflow-wrap:anywhere; }
.initial-bar button { flex:0 0 auto; border:0; color:#8a3517; background:transparent; font-size:10px; font-weight:850; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:25px; background:radial-gradient(circle at 75% 15%,#2d5791 0,#101c46 42%,#09112e 100%); }
.login-card { width:min(100%,560px); overflow:hidden; border-radius:22px; background:#fff; box-shadow:0 32px 90px #04081e70; }
.login-head { padding:28px 32px 24px; color:#fff; background:var(--navy); border-bottom:5px solid var(--orange); }
.login-head small { color:var(--cyan); font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.login-head h1 { margin:5px 0 5px; font-size:27px; }
.login-head p { margin:0; color:#cbd6f4; }
.login-body { padding:28px 32px 32px; }
.login-body .field { margin-bottom:14px; }
.submit-dock { position:fixed; right:25px; bottom:22px; z-index:10; display:flex; gap:9px; padding:10px; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:0 16px 40px #101c4630; }
.modal-backdrop { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:20px; background:#08102b9c; backdrop-filter:blur(5px); }
.modal { width:min(100%,570px); max-height:90vh; overflow:auto; border-radius:18px; background:#fff; box-shadow:0 30px 90px #04081e80; }
.modal-head { padding:21px 24px; color:#fff; background:var(--navy); }
.modal-head h2 { margin:0; font-size:21px; }
.modal-body { padding:23px 24px; }
.modal-actions { display:flex; gap:9px; justify-content:flex-end; padding:16px 24px; border-top:1px solid var(--line); }
.toast { position:fixed; right:24px; top:24px; z-index:100; max-width:390px; padding:13px 16px; border-radius:10px; color:#fff; background:var(--navy); box-shadow:0 14px 40px #101c4640; opacity:0; transform:translateY(-10px); pointer-events:none; transition:.2s; }
.toast.show { opacity:1; transform:none; }
.toast.error { background:#9d3026; }
.hidden { display:none !important; }
@media (max-width:900px) {
  .shell { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; padding:15px; }
  .brand { padding-bottom:13px; }
  .nav { grid-template-columns:1fr 1fr; margin-top:13px; }
  .sidebar-note { display:none; }
  .metrics { grid-template-columns:1fr 1fr; }
  .form-grid { grid-template-columns:1fr; }
  .segment { grid-template-columns:1fr; }
  .segment-meta { grid-column:1; }
}
@media (max-width:600px) {
  .topbar,.content { padding-right:16px; padding-left:16px; }
  .hero-strip,.review-welcome { display:block; }
  .hero-strip .button,.review-welcome .button { margin-top:15px; }
  .metrics { grid-template-columns:1fr; }
  .project-meta { grid-template-columns:1fr; }
  .review-header { align-items:flex-start; }
  .review-progress { min-width:120px; }
  .review-toolbar { flex-wrap:wrap; }
  .review-toolbar .search { flex-basis:100%; }
}