@layer tokens, base, components, pages, admin;

@layer tokens {
  :root {
    --navy-900:#0A2540; --navy-700:#12365E; --navy-500:#1E4E82; --navy-100:#DCE6F2; --navy-50:#F2F6FB;
    --green-600:#1E7A46; --green-50:#E7F3EC;
    --ink:#0F172A; --slate-700:#334155; --slate-500:#64748B; --slate-300:#CBD5E1;
    --slate-200:#E2E8F0; --slate-100:#F1F5F9; --slate-50:#F8FAFC; --surface:#FFFFFF;
    --warning:#B45309; --warning-50:#FEF3C7; --danger:#B91C1C; --danger-50:#FEE2E2;
    --font:'Libre Franklin',-apple-system,'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
    --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
    --radius-sm:4px; --radius:6px; --radius-lg:10px; --radius-pill:999px;
    --shadow-sm:0 1px 2px rgba(15,23,42,.06);
    --shadow:0 1px 3px rgba(15,23,42,.10),0 1px 2px rgba(15,23,42,.06);
    --shadow-lg:0 6px 18px rgba(10,37,64,.12);
    --ring:0 0 0 3px rgba(30,78,130,.15);
  }
}

@layer base {
  *{box-sizing:border-box;}
  body{font-family:var(--font);margin:0;color:var(--slate-700);background:var(--slate-50);
       font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;}
  h1,h2,h3{color:var(--ink);margin:0 0 var(--space-4);font-weight:700;}
  h1{font-size:28px;} h2{font-size:22px;font-weight:600;} h3{font-size:18px;font-weight:600;}
  a{color:var(--navy-700);}
  .num{font-variant-numeric:tabular-nums;}
  :focus-visible{outline:none;border-color:var(--navy-500);box-shadow:var(--ring);}
}

@layer components {
  .container{max-width:760px;margin:24px auto;padding:0 16px;}

  .topbar{background:var(--navy-900);color:#fff;padding:0 20px;height:54px;
          display:flex;align-items:center;justify-content:space-between;}
  .topbar .brand{font-weight:800;letter-spacing:.8px;font-size:16px;color:#fff;text-decoration:none;}
  .topbar nav{display:flex;gap:4px;margin-left:24px;}
  .topbar nav a{color:#C9D8EC;text-decoration:none;font-size:13px;font-weight:500;
                padding:7px 12px;border-radius:var(--radius);}
  .topbar nav a:hover{background:rgba(255,255,255,.08);color:#fff;}
  .topbar nav a.active{background:rgba(255,255,255,.12);color:#fff;}
  .topbar .right{display:flex;align-items:center;gap:14px;font-size:12px;color:#9DC0EA;}
  .topbar .right a,.topbar .right button{color:#9DC0EA;background:none;border:0;cursor:pointer;
                                         font-size:12px;text-decoration:none;font-family:inherit;}

  .btn,button[type=submit]{font-family:inherit;font-weight:600;font-size:14px;padding:10px 18px;
       border-radius:var(--radius);border:1px solid transparent;cursor:pointer;}
  .btn-primary,button[type=submit]{background:var(--navy-700);color:#fff;}
  .btn-primary:hover,button[type=submit]:hover{background:var(--navy-500);}
  .btn-pay,.btn-approve{background:var(--green-600);color:#fff;}
  .btn-reject{background:var(--danger);color:#fff;}
  .btn-secondary,.btn-back{background:var(--surface);color:var(--slate-700);border-color:var(--slate-300);}
  .btn-ghost{background:transparent;color:var(--navy-700);border-color:transparent;text-decoration:underline;}
  /* button[type=submit] variant needed to outrank the .btn-primary,button[type=submit] rule above */
  .btn-danger,.btn-delete,button[type=submit].btn-delete{background:transparent;color:var(--danger);border:none;
                          text-decoration:underline;font-size:13px;padding:0;cursor:pointer;}
  .btn:disabled,.btn-next:disabled{background:var(--slate-200);color:#94a3b8;cursor:not-allowed;}

  label{display:block;font-size:12px;font-weight:600;color:var(--slate-700);margin:0 0 5px;}
  input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--slate-300);
       border-radius:var(--radius-sm);font-family:inherit;font-size:16px;color:var(--ink);
       background:var(--surface);}
  input[readonly]{background:var(--slate-100);color:var(--slate-500);cursor:not-allowed;}
  input.error{border-color:var(--danger);box-shadow:0 0 0 3px rgba(185,28,28,.12);}
  .hint{font-size:11px;color:var(--slate-500);margin-top:4px;}
  .error{color:var(--danger);}

  .card,.panel{background:var(--surface);border:1px solid var(--slate-200);
       border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm);}
  .section-label{text-transform:uppercase;letter-spacing:1.2px;font-size:11px;font-weight:700;
       color:#94a3b8;margin:0 0 8px;}

  .badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:var(--radius-pill);display:inline-block;}
  .status-quoted{background:var(--navy-100);color:var(--navy-700);}
  .status-paid{background:var(--warning-50);color:var(--warning);}
  .status-purchased,.status-active{background:var(--green-50);color:var(--green-600);}
  .status-failed,.status-rejected,.status-expired{background:var(--danger-50);color:var(--danger);}
  .status-pending{background:var(--warning-50);color:var(--warning);}
  .chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;
        padding:5px 11px;border-radius:var(--radius-pill);background:var(--green-50);color:var(--green-600);}

  .alert{display:flex;gap:10px;padding:11px 14px;border-radius:8px;font-size:13px;
         line-height:1.5;margin-bottom:10px;}
  .alert-danger{background:var(--danger-50);border:1px solid #FCA5A5;color:#7F1D1D;}
  .alert-warn{background:var(--warning-50);border:1px solid #FDE68A;color:#92400E;}
  .alert-info{background:var(--navy-50);border:1px solid var(--navy-100);color:var(--navy-700);}

  table{width:100%;border-collapse:collapse;font-size:13px;}
  th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#94a3b8;
     font-weight:700;padding:8px 10px;border-bottom:1px solid var(--slate-200);}
  td{padding:11px 10px;border-bottom:1px solid var(--slate-100);color:var(--slate-700);}
  tbody tr:hover td{background:var(--slate-50);}

  .wiz-progress{display:flex;align-items:center;margin-bottom:24px;}
  .wiz-progress .step{display:flex;align-items:center;gap:7px;}
  .wiz-progress .dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
       justify-content:center;font-size:12px;font-weight:700;background:var(--slate-200);color:var(--slate-500);}
  .wiz-progress .name{font-size:12px;font-weight:600;color:var(--slate-500);}
  .wiz-progress .step.done .dot{background:var(--green-600);color:#fff;}
  .wiz-progress .step.done .name{color:var(--green-600);}
  .wiz-progress .step.current .dot{background:var(--navy-700);color:#fff;box-shadow:0 0 0 4px var(--navy-100);}
  .wiz-progress .step.current .name{color:var(--navy-700);}
  .wiz-progress .connector{height:2px;flex:1;background:var(--slate-200);margin:0 8px;}
  .wiz-progress .connector.fill{background:var(--green-600);}

  .empty{text-align:center;padding:34px 20px;}
  .empty .icon{width:46px;height:46px;border-radius:12px;background:var(--navy-50);
       display:inline-flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:12px;}
  .empty p{color:var(--slate-500);font-size:13px;margin:0 0 14px;}
  .skeleton{background:linear-gradient(90deg,var(--slate-100) 25%,var(--slate-200) 37%,var(--slate-100) 63%);
       background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:var(--radius);}
  @keyframes sk{0%{background-position:100% 0;}100%{background-position:0 0;}}
  .hidden{display:none !important;}
}

.order-actions { white-space: nowrap; }
.order-actions a { margin-right: 10px; }

.wiz-step { display: none; }
.wiz-step.visible { display: block; }

.wiz-step h2 { font-size: 20px; font-weight: 700; margin: 0 0 20px; color: var(--navy-700); }

.wiz-section { margin-bottom: 20px; }
.wiz-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--slate-500); margin-bottom: 8px;
}


.wiz-hint {
  background: var(--warning-50); border-left: 3px solid #f59e0b;
  padding: 8px 12px; font-size: 13px; color: var(--warning);
  border-radius: 0 6px 6px 0; margin-bottom: 10px;
}
.wiz-error {
  background: var(--danger-50); border-left: 3px solid #ef4444;
  padding: 8px 12px; font-size: 13px; color: var(--danger);
  border-radius: 0 6px 6px 0; margin-bottom: 10px;
  display: none;
}
.wiz-error.visible { display: block; }

.wiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.btn-next {
  background: var(--navy-700); color: #fff; border: 0;
  padding: 10px 18px; border-radius: var(--radius); cursor: pointer; font-size: 14px; font-weight: 600;
}
.btn-next:disabled { opacity: .6; cursor: not-allowed; }

.addr-pick-btn {
  display: block; width: 100%; text-align: left;
  background: var(--navy-50); border: 1px dashed #93c5fd;
  border-radius: 6px; padding: 8px 12px; font-size: 13px;
  color: var(--navy-700); cursor: pointer; margin-bottom: 10px;
}
.addr-pick-wrap { position: relative; }
.addr-pick-select {
  display: none; position: absolute; top: 38px; left: 0; right: 0; z-index: 10;
  background: #fff; border: 1px solid var(--slate-300); border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1); padding: 4px 0;
}
.addr-pick-select.open { display: block; }
.addr-pick-option {
  padding: 10px 14px; cursor: pointer; font-size: 13px;
}
.addr-pick-option:hover { background: var(--slate-100); }

.country-badge {
  display: inline-block; background: var(--green-50); color: var(--green-600);
  border-radius: 4px; font-size: 11px; padding: 2px 7px;
  margin-left: 6px; font-weight: 600;
}

.cn-hk-toggle { display: flex; gap: 0; margin-bottom: 10px; }
.cn-hk-toggle button {
  flex: 1; padding: 8px; border: 1px solid var(--slate-300); background: var(--slate-50);
  cursor: pointer; font-size: 13px; color: var(--slate-700);
}
.cn-hk-toggle button:first-child { border-radius: 6px 0 0 6px; }
.cn-hk-toggle button:last-child  { border-radius: 0 6px 6px 0; border-left: none; }
.cn-hk-toggle button.selected { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }

.customs-table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.customs-table th { font-size: 11px; color: var(--slate-500); font-weight: 600; text-align: left; padding: 4px 4px 6px; }
.customs-table td { padding: 3px 4px; }
.customs-table input, .customs-table select { padding: 6px; font-size: 13px; }
.btn-remove-row { background: none; border: none; color: var(--slate-500); cursor: pointer; font-size: 15px; padding: 4px; }
.btn-remove-row:hover { color: var(--danger); }
.btn-add-item { background: none; border: none; color: var(--navy-700); cursor: pointer; font-size: 13px; padding: 4px 0; }

.quote-price {
  text-align: center; font-size: 36px; font-weight: 800;
  color: var(--navy-700); padding: 16px 0 4px;
}
.quote-meta { text-align: center; font-size: 13px; color: var(--slate-500); margin-bottom: 20px; }
.quote-countdown { font-weight: 600; color: var(--warning); }

#product-list { display: flex; flex-direction: column; gap: 10px; }
.product-card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; background: var(--surface); border: 1px solid var(--slate-300);
  border-radius: var(--radius-lg); padding: 12px 14px; cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.product-card:hover { border-color: var(--navy-500); box-shadow: var(--shadow-sm); }
.product-card:focus-visible { outline: none; border-color: var(--navy-500); box-shadow: var(--ring); }
.product-card.active { border-color: var(--navy-700); background: var(--navy-50); }
.product-card.loading { cursor: wait; opacity: .7; }
.pc-radio {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--slate-300); position: relative; transition: border-color .15s;
}
.product-card.active .pc-radio { border-color: var(--navy-700); }
.product-card.active .pc-radio::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--navy-700);
}
.pc-main { flex: 1; min-width: 0; }
.pc-name { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.pc-transit { display: block; font-size: 12px; color: var(--slate-500); margin-top: 2px; }
.pc-price { text-align: right; flex-shrink: 0; line-height: 1.3; }
.pc-amount { display: block; font-size: 16px; font-weight: 700; color: var(--navy-700); }
.pc-currency { font-size: 11px; color: var(--slate-500); }
.product-card.active .pc-amount { color: var(--navy-900); }

.summary-table { width: 100%; font-size: 14px; }
.summary-table td { padding: 6px 0; border-bottom: 1px solid var(--slate-100); }
.summary-table td:first-child { color: var(--slate-500); width: 90px; }
.summary-table tr:last-child td { border: none; }

.prohibited-box {
  background: var(--danger-50); border-radius: 6px; padding: 12px;
  font-size: 13px; color: var(--danger); display: flex; gap: 10px; align-items: flex-start;
  margin-top: 16px;
}
.prohibited-box input[type=checkbox] { margin-top: 2px; flex-shrink: 0; width: auto; display: inline; }
.consent-box {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 16px 0 12px; font-size: 13px; color: var(--slate-700);
}
.consent-box input[type=checkbox] { margin-top: 2px; flex-shrink: 0; width: auto; display: inline; }

.admin-wrap { display: flex; min-height: 100vh; }
.admin-sidebar { width: 180px; background: var(--navy-900); flex-shrink: 0; padding: 20px 0; }
.admin-logo { color: #fff; font-weight: 700; font-size: 13px; padding: 0 16px 20px; letter-spacing: .5px; text-transform: uppercase; }
.admin-sidebar a { display: block; color: #C9D8EC; text-decoration: none; padding: 10px 16px; font-size: 13px; }
.admin-sidebar a:hover { background: rgba(255,255,255,.1); color: #fff; }
.admin-sidebar a.active { background: rgba(255,255,255,.15); color: #fff; border-left: 3px solid #9DC0EA; }
.admin-sidebar-sep { border-top: 1px solid rgba(255,255,255,.15); margin: 12px 0; }
.admin-main { flex: 1; padding: 24px 28px; background: var(--slate-50); }
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.stat-card { background: #fff; border-radius: 8px; padding: 16px 20px; border: 1px solid var(--slate-200); }
.stat-card .s-label { font-size: 11px; color: var(--slate-500); text-transform: uppercase; font-weight: 600; margin-bottom: 6px; }
.stat-card .s-value { font-size: 26px; font-weight: 800; color: var(--navy-700); }
.stat-card .s-value.green { color: var(--green-600); }
.admin-filter-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-filter-tabs a { padding: 5px 14px; border-radius: 20px; font-size: 13px; text-decoration: none; background: var(--slate-200); color: var(--slate-700); }
.admin-filter-tabs a.active { background: var(--navy-700); color: #fff; }
.admin-service-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.admin-service-table th { font-size: 11px; color: var(--slate-500); font-weight: 600; text-align: left; padding: 4px; }
.admin-service-table td { padding: 3px 4px; }
.admin-service-table input { padding: 6px 8px; font-size: 13px; }
@media (max-width:900px){
  .admin-wrap{flex-direction:column;}
  .admin-sidebar{width:100%;display:flex;gap:4px;overflow-x:auto;padding:10px;}
  .admin-sidebar .admin-logo{display:none;}
  .admin-sidebar-sep{display:none;}
}

.reg-type-cards {
  display: flex;
  gap: 16px;
  margin: 24px 0;
}
.reg-type-card {
  flex: 1;
  border: 2px solid var(--slate-300);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.reg-type-card:hover {
  border-color: var(--navy-500);
}
.reg-type-card-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.customs-card { border: 1px solid var(--slate-300); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.customs-card.invalid { border-color: #f59e0b; }
.customs-card-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--slate-50); cursor: pointer; user-select: none; }
.customs-card-header:hover { background: var(--slate-100); }
.card-arrow { font-size: 10px; color: var(--slate-500); transition: transform .15s; width: 10px; text-align: center; flex-shrink: 0; }
.customs-card.open .card-arrow { transform: rotate(90deg); }
.card-summary { flex: 1; min-width: 0; overflow: hidden; }
.card-desc { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.card-meta { font-size: 11px; color: var(--slate-500); margin-top: 1px; }
.card-badges { display: flex; gap: 4px; flex-shrink: 0; }
.badge-green { background: var(--green-50); color: var(--green-600); }
.badge-amber { background: var(--warning-50); color: var(--warning); }
.badge-yellow { background: var(--warning-50); color: var(--warning); border: 1px solid #fde68a; }
.btn-remove-card { background: none; border: none; color: var(--slate-300); font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; flex-shrink: 0; }
.btn-remove-card:hover { color: var(--slate-500); }
.customs-card-body { display: none; padding: 12px; background: #fff; border-top: 1px solid var(--slate-200); }
.customs-card.open .customs-card-body { display: block; }
.customs-card-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cf-full { grid-column: 1 / -1; }
.cf-mid-wrap { grid-column: 1 / -1; background: var(--warning-50); border: 1px solid #fde68a; border-radius: 6px; padding: 8px 10px; }
.customs-card-fields label { display: block; font-size: 11px; color: var(--slate-500); margin-bottom: 3px; }
.customs-card-fields input, .customs-card-fields select { width: 100%; padding: 7px 8px; border: 1px solid var(--slate-300); border-radius: 5px; font-size: 12px; box-sizing: border-box; }
.customs-card-fields small { font-size: 10px; color: var(--slate-500); margin-top: 2px; display: block; }
.customs-settings { margin-top: 14px; padding: 14px; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 8px; }
.customs-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.customs-field-group { display: flex; flex-direction: column; }
.customs-label { font-size: 11px; font-weight: 600; color: var(--slate-700); margin-bottom: 4px; }
.customs-select { padding: 7px 10px; border: 1px solid var(--slate-300); border-radius: 6px; font-size: 13px; background: #fff; }
.customs-incoterms-group { margin-bottom: 10px; }
.incoterms-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.incoterms-btn { border: 1px solid var(--slate-300); border-radius: 6px; padding: 8px 10px; background: #fff; cursor: pointer; text-align: left; }
.incoterms-btn strong { display: block; font-size: 12px; color: var(--slate-700); }
.incoterms-btn span { display: block; font-size: 10px; color: var(--slate-500); margin-top: 2px; }
.incoterms-btn.active { border-color: var(--navy-700); background: var(--navy-50); }
.incoterms-btn.active strong { color: var(--navy-700); }
.incoterms-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.customs-tax-block { background: var(--navy-50); border: 1px solid var(--navy-100); border-radius: 8px; padding: 12px; margin-top: 10px; }
.customs-tax-title { font-size: 11px; font-weight: 700; color: var(--navy-700); margin-bottom: 8px; }
.customs-tax-row { display: flex; gap: 16px; font-size: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.customs-hint { font-size: 10px; color: var(--slate-500); margin-top: 4px; }
.customs-rc-block { margin-top: 10px; }
.customs-warn { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; font-size: 11px; line-height: 1.5; }
.customs-warn--danger { background: var(--danger-50); border: 1px solid #fca5a5; color: var(--danger); margin-bottom: 12px; }
.customs-warn--danger strong { color: var(--danger); }
.customs-warn--amber { background: var(--warning-50); border: 1px solid #fde68a; color: var(--warning); }
.customs-warn--amber strong { color: var(--warning); }
.warn-icon { font-size: 16px; line-height: 1; flex-shrink: 0; margin-top: 1px; }

@layer pages {
  .route-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .route-col{display:grid;gap:10px;align-content:start;}
  .route-col-label{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
       color:var(--slate-500);}
  .route-card{text-align:left;border:1px solid var(--slate-300);border-radius:var(--radius-lg);
       padding:14px 16px;background:var(--surface);cursor:pointer;}
  .route-card.active{border-color:var(--navy-500);background:var(--navy-50);}
  .route-card strong{display:block;font-size:15px;color:var(--ink);}
  .wiz-row{display:flex;gap:10px;flex-wrap:wrap;} .wiz-row>*{flex:1;min-width:140px;}
  .addr-actions{white-space:nowrap;}
  .addr-actions a{margin-right:10px;}
  @media (max-width:640px){
    .table-cards thead{display:none;}
    .table-cards tr{display:block;border:1px solid var(--slate-200);border-radius:var(--radius-lg);
         margin-bottom:10px;padding:6px 12px;background:var(--surface);}
    .table-cards td{display:flex;justify-content:space-between;gap:12px;border:0;padding:7px 0;}
    .table-cards td::before{content:attr(data-label);color:var(--slate-500);font-size:12px;font-weight:600;}
  }
  .auth-wrap{max-width:380px;margin:6vh auto;}
  .auth-brand{text-align:center;font-weight:800;letter-spacing:1px;color:var(--navy-900);
       font-size:22px;margin-bottom:18px;}
  .auth-wrap .card{padding:24px;}
  .auth-wrap form button[type=submit]{width:100%;margin-top:8px;}
  .auth-wrap p{font-size:13px;color:var(--slate-500);text-align:center;margin-top:14px;}
}

@media (max-width:640px){
  .container{margin:14px auto;padding:0 12px;}
  .topbar{padding:0 12px;}
  .topbar .brand{font-size:15px;}
  .topbar nav{margin-left:10px;gap:0;}
  .topbar nav a{padding:7px 8px;font-size:12px;}
  .wiz-nav{gap:10px;}
  .wiz-nav .btn, .wiz-nav button{flex:1;}
  .wiz-progress .name{display:none;}
}