*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial,sans-serif;background:#F0F4F8;color:#1a1a2e;min-height:100vh}

.header{background:linear-gradient(135deg,#1B3A6B,#2563EB);color:white;padding:16px 28px;display:flex;align-items:center;gap:14px}
.header h1{font-size:20px;font-weight:800}
.header p{font-size:12px;opacity:.75;margin-top:2px}
.header .spacer{flex:1}
.header .user{font-size:12px;opacity:.85;margin-right:10px}
.header .logout{background:rgba(255,255,255,.15);color:white;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:7px 14px;font-size:12px;font-weight:700;cursor:pointer}
.header .logout:hover{background:rgba(255,255,255,.28)}

.container{max-width:1400px;margin:0 auto;padding:22px 18px}

/* SYNC CARD */
.sync-card{background:white;border-radius:14px;padding:18px 22px;margin-bottom:16px;box-shadow:0 1px 4px rgba(0,0,0,.08);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sync-card h2{font-size:12px;color:#64748B;text-transform:uppercase;letter-spacing:.5px}
.sync-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.sync-dot.ok{background:#16A34A}
.sync-dot.error{background:#DC2626}
.sync-dot.none{background:#94A3B8}
.sync-info{font-size:12px;color:#64748B}
.sync-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.dhl-portal-actions{align-items:center}
.sms-input{width:110px;border:1px solid #CBD5E1;border-radius:8px;padding:9px 10px;font-size:13px;font-weight:700}
.sms-input.waiting{border-color:#D97706;background:#FFF7ED}
.btn-outline{padding:8px 14px;background:white;color:#1B3A6B;border:1.5px solid #1B3A6B;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer}
.btn-outline:hover{background:#EFF6FF}
.btn-outline:disabled{opacity:.5;cursor:not-allowed}

.dhl-card{background:white;border-radius:14px;padding:18px 22px;margin-bottom:16px;box-shadow:0 1px 4px rgba(0,0,0,.08);display:grid;grid-template-columns:220px minmax(260px,1fr) auto;gap:14px;align-items:center}
.dhl-card h2{font-size:12px;color:#64748B;text-transform:uppercase;letter-spacing:.5px}
.dhl-card textarea{width:100%;min-height:58px;max-height:120px;resize:vertical;border:1px solid #E2E8F0;border-radius:8px;padding:9px 11px;font-size:12px;font-family:Arial,sans-serif}
.dhl-errors{grid-column:2 / -1;color:#DC2626;font-size:12px;min-height:14px}
@media(max-width:900px){.dhl-card{grid-template-columns:1fr}.dhl-errors{grid-column:1}}

/* UPLOAD */
.upload-card{background:white;border-radius:14px;padding:22px;margin-bottom:20px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.upload-card h2{font-size:12px;color:#64748B;margin-bottom:14px;text-transform:uppercase;letter-spacing:.5px}
.upload-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:700px){.upload-grid{grid-template-columns:1fr}}
.ubox{border:2px dashed #CBD5E1;border-radius:10px;padding:16px;cursor:pointer;text-align:center;transition:all .2s}
.ubox:hover{border-color:#2563EB;background:#EFF6FF}
.ubox.loaded{border:2px solid #16A34A;background:#F0FDF4}
.ubox .icon{font-size:26px;margin-bottom:5px}
.ubox h3{font-size:13px;font-weight:700;margin-bottom:2px}
.ubox p{font-size:11px;color:#94A3B8}
.fname{margin-top:7px;font-size:11px;color:#16A34A;font-weight:700}
input[type=file]{display:none}
.import-manager{margin-top:16px;border-top:1px solid #E2E8F0;padding-top:14px}
.import-manager-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.import-manager-head h3{font-size:13px;color:#1B3A6B}
.import-manager-head span{font-size:11px;color:#64748B;font-weight:700}
.import-list{display:grid;gap:8px;max-height:360px;overflow-y:auto;padding-right:5px}
.import-list::-webkit-scrollbar{width:8px}
.import-list::-webkit-scrollbar-track{background:#EEF2F7;border-radius:999px}
.import-list::-webkit-scrollbar-thumb{background:#94A3B8;border-radius:999px}
.import-list::-webkit-scrollbar-thumb:hover{background:#64748B}
.import-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid #E2E8F0;border-radius:8px;background:#F8FAFC}
.import-title{font-size:12px;font-weight:800;color:#0F172A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.import-meta{font-size:11px;color:#64748B;margin-top:3px}
.import-type{font-size:10px;font-weight:900;color:#1B3A6B;background:#DBEAFE;border-radius:999px;padding:5px 8px;white-space:nowrap}
.import-delete{padding:6px 10px;background:#DC2626;color:white;border:none;border-radius:7px;font-size:11px;font-weight:800;cursor:pointer}
.import-delete:hover{background:#B91C1C}
.empty.small{padding:10px;font-size:12px}
@media(max-width:700px){.import-row{grid-template-columns:1fr}.import-type,.import-delete{justify-self:start}}
.btn-go{width:100%;margin-top:14px;padding:13px;background:linear-gradient(135deg,#1B3A6B,#2563EB);color:white;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer}
.btn-go:disabled{opacity:.35;cursor:not-allowed}
.btn-go:hover:not(:disabled){opacity:.9}

/* TABS */
.tabs{display:flex;gap:0;margin-bottom:20px;background:white;border-radius:12px;padding:5px;box-shadow:0 1px 4px rgba(0,0,0,.08);overflow-x:auto}
.tab{flex:1;min-width:120px;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;border:none;background:transparent;color:#64748B;transition:all .18s;white-space:nowrap}
.tab.active{background:#1B3A6B;color:white}
.tab:hover:not(.active){background:#F1F5F9}

/* DASHBOARD GRID */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:20px;align-items:start}
@media(max-width:900px){.dash-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.dash-grid{grid-template-columns:1fr}}

.kpi{background:white;border-radius:12px;padding:18px;border-left:5px solid #ccc;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.kpi .val{font-size:28px;font-weight:900;line-height:1;margin-bottom:4px}
.kpi .lbl{font-size:11px;color:#64748B;line-height:1.4}
.kpi .sub{font-size:11px;margin-top:5px;font-weight:600}
.kpi-blue  {border-color:#2563EB} .kpi-blue .val  {color:#2563EB}
.kpi-green {border-color:#16A34A} .kpi-green .val {color:#16A34A}
.kpi-red   {border-color:#DC2626} .kpi-red .val   {color:#DC2626}
.kpi-orange{border-color:#EA580C} .kpi-orange .val{color:#EA580C}
.kpi-purple{border-color:#7C3AED} .kpi-purple .val{color:#7C3AED}
.kpi-yellow{border-color:#D97706} .kpi-yellow .val{color:#D97706}
.kpi-teal  {border-color:#0F766E} .kpi-teal .val  {color:#0F766E}
.kpi-gray  {border-color:#64748B} .kpi-gray .val  {color:#64748B}

/* PANEL */
.panel{background:white;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.08);margin-bottom:18px}
.ph{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #F1F5F9;flex-wrap:wrap;gap:8px}
.ph h3{font-size:14px;font-weight:700}
.ctrl{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.si{padding:7px 11px;border:1px solid #E2E8F0;border-radius:7px;font-size:12px;width:180px}
.fs{padding:7px 9px;border:1px solid #E2E8F0;border-radius:7px;font-size:12px;background:white}
.bx{padding:7px 13px;background:#16A34A;color:white;border:none;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer}
.bx:hover{background:#15803D}

.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12px;min-width:800px}
th{background:#1B3A6B;color:white;padding:9px 11px;text-align:left;font-size:11px;white-space:nowrap}
td{padding:8px 11px;border-bottom:1px solid #F1F5F9;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#FAFBFF}
tr.rd td{background:#FFF5F5}
tr.rd:hover td{background:#FEE2E2}
tr.gn td{background:#F0FDF4}
tr.gn:hover td{background:#DCFCE7}

.b{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;white-space:nowrap}
.b-green {background:#DCFCE7;color:#15803D}
.b-yellow{background:#FEF3C7;color:#B45309}
.b-red   {background:#FEE2E2;color:#B91C1C}
.b-purple{background:#EDE9FE;color:#6D28D9}
.b-blue  {background:#DBEAFE;color:#1D4ED8}
.b-gray  {background:#F1F5F9;color:#475569}
.b-orange{background:#FFEDD5;color:#C2410C}
.b-dred  {background:#DC2626;color:white}
.b-tahsil{background:#166534;color:white}
.b-teal  {background:#CCFBF1;color:#0F766E}

.action-panel{border-left:5px solid #DC2626}
.action-head{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #F1F5F9;gap:12px}
.action-head h3{font-size:14px;font-weight:800;color:#1B3A6B}
.action-head p{font-size:12px;color:#64748B;margin-top:2px}
.action-table td{font-size:12px}
.risk-pill{display:inline-block;min-width:58px;text-align:center;padding:3px 8px;border-radius:16px;font-size:10px;font-weight:800}
.risk-pill.danger{background:#DC2626;color:white}
.risk-pill.warn{background:#FEF3C7;color:#92400E}
.risk-pill.info{background:#DBEAFE;color:#1D4ED8}
.risk-pill.loss{background:#FFEDD5;color:#C2410C}
.risk-pill.muted{background:#F1F5F9;color:#475569}
.settings-grid{padding:16px 18px;display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:12px;align-items:end}
.settings-grid label{display:flex;flex-direction:column;gap:6px}
.settings-grid label span{font-size:12px;font-weight:700;color:#64748B}
.settings-grid .si{width:100%}
.settings-note{font-size:12px;color:#64748B;line-height:1.45}
@media(max-width:700px){.settings-grid{grid-template-columns:1fr}.action-head{align-items:flex-start;flex-direction:column}}

/* CHARTS */
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;align-items:start}
.chart-col{display:flex;flex-direction:column;gap:14px;min-width:0}
@media(max-width:700px){.chart-grid{grid-template-columns:1fr}}
.chart-box{background:white;border-radius:12px;padding:18px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.chart-box h3{font-size:13px;font-weight:700;margin-bottom:14px;color:#1B3A6B}
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.bar-lbl{width:130px;font-size:11px;color:#374151;text-align:right;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;background:#F1F5F9;border-radius:4px;height:20px;position:relative}
.bar-fill{height:100%;border-radius:4px;transition:width .5s}
.bar-val{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;color:#374151}
.pie-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pie-item{display:flex;align-items:center;gap:5px;font-size:11px}
.pie-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* ALERT */
.alert-sec{background:#FEF2F2;border:2px solid #FCA5A5;border-radius:12px;margin-bottom:18px}
.alert-sec.hidden{display:none}
.alert-hd{background:#DC2626;color:white;padding:14px 20px;display:flex;align-items:center;gap:10px}
.alert-hd h3{font-size:15px;font-weight:800;flex:1}
.alert-hd .cnt{background:white;color:#DC2626;font-size:20px;font-weight:900;padding:3px 12px;border-radius:20px}
.alert-bd{padding:14px 20px}
.alert-bd p{font-size:12px;color:#7F1D1D;margin-bottom:12px;line-height:1.5}
.at th{background:#B91C1C}

.date-bar{background:white;border-radius:12px;padding:14px 18px;margin-bottom:16px;box-shadow:0 1px 4px rgba(0,0,0,.08);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.date-bar label{font-size:12px;font-weight:700;color:#64748B}
.date-input{padding:7px 10px;border:1px solid #E2E8F0;border-radius:7px;font-size:13px}
.date-bar .btn-reset{padding:7px 14px;background:#F1F5F9;color:#374151;border:1px solid #E2E8F0;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer}
.date-bar .btn-reset:hover{background:#E2E8F0}
.date-bar .date-info{font-size:12px;color:#64748B;margin-left:auto}
.results{display:none}
.results.show{display:block}
.sec{display:none}
.sec.show{display:block}
.empty{padding:22px;text-align:center;color:#94A3B8;font-size:13px}

/* LOGIN */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1B3A6B,#2563EB)}
.login-box{background:white;border-radius:16px;padding:34px 30px;width:100%;max-width:360px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.login-box .icon{font-size:34px;text-align:center;margin-bottom:8px}
.login-box h1{font-size:18px;text-align:center;color:#1B3A6B;margin-bottom:22px}
.login-box label{font-size:12px;font-weight:700;color:#64748B;display:block;margin-bottom:5px}
.login-box input{width:100%;padding:11px 12px;border:1px solid #E2E8F0;border-radius:8px;font-size:14px;margin-bottom:16px}
.login-box .password-row{display:flex;gap:8px;margin-bottom:16px}
.login-box .password-row input{margin-bottom:0;min-width:0}
.login-box .password-row button{width:auto;min-width:76px;padding:0 12px;background:#E2E8F0;color:#1B3A6B}
.login-box button{width:100%;padding:12px;background:linear-gradient(135deg,#1B3A6B,#2563EB);color:white;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer}
.login-box button:hover{opacity:.9}
.login-err{color:#DC2626;font-size:12px;margin-bottom:12px;display:none}