:root { --ink:#142238; --muted:#65748a; --line:#dfe5ed; --surface:#fff; --canvas:#edf2f7; --accent:#e4572e; --accent-dark:#bd3d1c; --navy:#142c4c; --success:#13795b; --danger:#b42318; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; min-width:320px; background:linear-gradient(135deg,rgba(20,44,76,.035) 25%,transparent 25%) 0 0/28px 28px,var(--canvas); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.5; }
button,input,select { font:inherit; }
.shell { width:min(1180px,calc(100% - 32px)); margin-inline:auto; }
.topbar { color:#fff; background:var(--navy); border-bottom:4px solid var(--accent); }
.topbar__inner { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { color:inherit; text-decoration:none; font-weight:800; display:flex; align-items:center; gap:12px; }
.brand__mark { width:36px; height:36px; display:grid; place-items:center; background:var(--accent); border-radius:8px 2px; }
.topbar__section { color:#cdd7e5; font-size:.875rem; }
.topbar__actions { display:flex; align-items:center; gap:14px; }
.logout-button { padding:6px 10px; color:#fff; background:transparent; border:1px solid rgba(255,255,255,.35); border-radius:7px; cursor:pointer; }
.topbar-link { text-decoration:none; }
.page { padding:36px 0 72px; }
.intro { margin-bottom:22px; }
.intro h1 { margin:0 0 8px; font-size:clamp(2rem,5vw,3.3rem); letter-spacing:-.045em; line-height:1.05; }
.intro>p:last-child { max-width:820px; margin:0; color:var(--muted); }
.eyebrow { margin:0 0 8px; color:var(--accent-dark); font-size:.77rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
h2,h3,p { margin-top:0; }
.auth-card,.panel { background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:16px; box-shadow:0 16px 40px rgba(20,34,56,.07); }
.auth-card { padding:22px; display:grid; grid-template-columns:minmax(220px,.7fr) minmax(520px,1.3fr); gap:12px 30px; align-items:end; }
.auth-card h2 { margin-bottom:3px; }
.auth-card p { margin:0; color:var(--muted); font-size:.875rem; }
.auth-card__controls { display:grid; grid-template-columns:minmax(130px,.65fr) minmax(220px,1fr) auto; gap:10px; align-items:end; }
label span,legend { display:block; margin-bottom:6px; color:#46566d; font-size:.76rem; font-weight:750; letter-spacing:.025em; }
input,select { width:100%; min-height:42px; padding:8px 11px; color:var(--ink); background:#fff; border:1px solid #cbd5e1; border-radius:8px; outline:none; }
input:focus,select:focus { border-color:var(--navy); box-shadow:0 0 0 3px rgba(20,44,76,.1); }
.button { min-height:42px; padding:0 16px; border:0; border-radius:8px; font-weight:800; cursor:pointer; white-space:nowrap; }
.button:disabled { cursor:wait; opacity:.65; }
.button--primary { color:#fff; background:var(--accent); }
.button--primary:hover { background:var(--accent-dark); }
.button--secondary { color:var(--navy); background:#e6edf5; }
.notice { grid-column:1/-1; padding:10px 12px; border-radius:8px; font-size:.84rem; }
.notice--neutral { color:#536176; background:#f1f5f9; }
.notice--success { color:#0a6047; background:#e9f8f2; }
.notice--error { color:#8f241b; background:#fff0ed; }
.admin-workspace { display:grid; gap:20px; margin-top:20px; }
.panel { padding:24px; }
.panel__head { display:flex; justify-content:space-between; align-items:flex-start; gap:28px; margin-bottom:20px; }
.panel__head>div { display:flex; align-items:center; gap:10px; }
.panel__head h2 { margin:0; font-size:1.25rem; }
.panel__head p { max-width:560px; margin:0; color:var(--muted); font-size:.85rem; }
.step { width:30px; height:30px; display:grid; place-items:center; color:#fff; background:var(--navy); border-radius:6px; font-size:.7rem; font-weight:850; }
.form-grid { display:grid; gap:14px; align-items:end; }
.form-grid--supplier { grid-template-columns:minmax(220px,1fr) minmax(280px,1.4fr) auto; }
.form-grid--four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.form-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.form-grid--warehouse { grid-template-columns:1.25fr 1.4fr .7fr .7fr .7fr .8fr; }
.source-form { display:grid; gap:18px; }
fieldset { margin:0; padding:16px; border:1px solid var(--line); border-radius:10px; }
legend { padding:0 8px; color:var(--ink); font-size:.9rem; }
.field-help { margin:-3px 0 14px; color:var(--muted); font-size:.8rem; }
code { padding:2px 5px; background:#edf2f7; border-radius:4px; font:600 .78rem "SFMono-Regular",Consolas,monospace; }
.entity-list { display:grid; gap:1px; margin-top:18px; background:var(--line); border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.entity-row { padding:11px 14px; display:grid; grid-template-columns:minmax(220px,1.5fr) 1fr 1fr auto; gap:16px; align-items:center; background:#fff; font-size:.84rem; }
.entity-row>div { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.entity-row small { color:var(--muted); }
.entity-row>span:not(.badge) { color:var(--muted); }
.badge { display:inline-flex; width:max-content; padding:3px 8px; color:#24415f; background:#e5edf6; border-radius:999px; font-size:.7rem; font-weight:850; text-transform:uppercase; letter-spacing:.03em; }
.badge--success,.badge--succeeded { color:#096044; background:#dcf5ea; }
.badge--muted { color:#687386; background:#edf0f4; }
.badge--queued,.badge--running { color:#7b4e00; background:#fff1c9; }
.badge--failed { color:#8f241b; background:#fee4df; }
.sources-list { display:grid; gap:12px; }
.source-card { padding:18px; display:grid; grid-template-columns:minmax(0,1fr) 180px 250px; gap:22px; align-items:center; border:1px solid var(--line); border-radius:11px; background:#fff; }
.source-card__title { display:flex; align-items:center; gap:9px; }
.source-card h3 { margin:0; font-size:1rem; }
.source-card p { margin:7px 0 0; color:var(--muted); font-size:.82rem; }
.mapping { display:flex; flex-wrap:wrap; gap:5px 13px; margin-top:10px; color:var(--muted); font-size:.76rem; }
.source-error { color:var(--danger)!important; }
.source-card__stats { display:flex; flex-direction:column; border-left:1px solid var(--line); padding-left:20px; }
.source-card__stats strong { font-size:1.2rem; }
.source-card__stats span,.source-card__stats small { color:var(--muted); font-size:.75rem; }
.upload-control { display:grid; gap:8px; }
.file-input { min-height:auto; padding:7px; font-size:.76rem; }
.upload-control .button { font-size:.78rem; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:9px; }
table { width:100%; border-collapse:collapse; background:#fff; font-size:.8rem; }
th,td { padding:11px 12px; text-align:left; vertical-align:top; border-bottom:1px solid #e8edf2; }
th { color:#536176; background:#f6f8fb; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; }
.table-error { display:block; max-width:360px; margin-top:5px; color:var(--danger); }
.empty { padding:18px; color:var(--muted); text-align:center; }
.warehouse-form { margin:-4px 0 18px; padding:18px; background:#f5f8fb; border:1px solid var(--line); border-radius:10px; }
.form-actions { margin-top:14px; display:flex; justify-content:flex-end; }
.warehouse-table { min-width:980px; }
.warehouse-table td:first-child strong { display:block; font-size:.9rem; }
.button--upload { min-height:36px; padding:0 12px; color:#fff; background:var(--navy); font-size:.75rem; }
.history-panel { padding:0; }
.history-panel summary { padding:20px 24px; cursor:pointer; font-weight:850; list-style-position:inside; }
.history-content { padding:0 24px 24px; }
.history-content>.button { margin-bottom:12px; }
.modal-open { overflow:hidden; }
.modal { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:22px; }
.modal__backdrop { position:absolute; inset:0; background:rgba(10,24,43,.66); backdrop-filter:blur(3px); }
.modal__dialog { position:relative; width:min(1080px,100%); max-height:calc(100vh - 44px); overflow:auto; padding:28px; background:#fff; border-radius:16px; box-shadow:0 28px 80px rgba(0,0,0,.28); }
.modal__dialog>h2 { margin:0 0 24px; font-size:1.8rem; }
.modal__close { position:absolute; top:14px; right:16px; width:38px; height:38px; color:var(--muted); background:#edf2f7; border:0; border-radius:50%; font-size:1.5rem; cursor:pointer; }
.upload-step { display:flex; gap:13px; align-items:flex-start; margin:20px 0 14px; }
.upload-step>span { width:32px; height:32px; display:grid; flex:0 0 auto; place-items:center; color:#fff; background:var(--navy); border-radius:7px; font-weight:850; }
.upload-step h3 { margin:1px 0 2px; font-size:1.05rem; }
.upload-step p { margin:0; color:var(--muted); font-size:.82rem; }
.drop-zone { min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:24px; color:var(--navy); background:#f8fafc; border:2px dashed #aab7c7; border-radius:12px; cursor:pointer; text-align:center; }
.drop-zone:hover,.drop-zone--active { background:#edf5ff; border-color:#438dcc; }
.drop-zone strong { font-size:1rem; }
.drop-zone span { color:var(--muted); font-size:.82rem; }
.mapping-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.preview-table { margin-top:18px; max-height:230px; overflow:auto; border:1px solid var(--line); border-radius:9px; }
.preview-table table { min-width:760px; font-size:.72rem; }
.preview-table th { position:sticky; top:0; }
.modal__actions { margin-top:20px; display:flex; justify-content:flex-end; gap:10px; }
.toast { position:fixed; right:22px; bottom:22px; max-width:min(420px,calc(100% - 44px)); padding:13px 16px; color:#fff; background:var(--success); border-radius:9px; box-shadow:0 14px 34px rgba(0,0,0,.18); opacity:0; pointer-events:none; transform:translateY(12px); transition:.18s ease; }
.toast--visible { opacity:1; transform:none; }
.toast--error { background:var(--danger); }
@media(max-width:1050px){.form-grid--warehouse{grid-template-columns:repeat(3,minmax(0,1fr))}.mapping-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.auth-card,.source-card{grid-template-columns:1fr}.source-card__stats{border-left:0;border-top:1px solid var(--line);padding:12px 0 0}.form-grid--four,.form-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid--supplier{grid-template-columns:1fr 1fr}.form-grid--supplier .button{grid-column:1/-1}.entity-row{grid-template-columns:1fr 1fr}.panel__head{flex-direction:column;gap:8px}}
@media(max-width:600px){.shell{width:min(100% - 20px,1180px)}.topbar__section{display:none}.page{padding-top:22px}.auth-card,.panel{padding:17px}.auth-card__controls,.form-grid--four,.form-grid--three,.form-grid--supplier,.form-grid--warehouse,.mapping-grid{grid-template-columns:1fr}.entity-row{grid-template-columns:1fr}.panel__head>div{align-items:flex-start}.source-card{padding:14px}.modal{padding:8px}.modal__dialog{padding:20px 15px;max-height:calc(100vh - 16px)}}