@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

  :root{
    --bg: #f7f9fc;
    --bg-soft: #eef2f7;
    --panel: #ffffff;
    --panel-soft: #f3f6fb;
    --text: #0f172a;
    --muted: #5b6474;
    --border: rgba(15,23,42,.12);

    --brand: #0f4c81;
    --brand-2: #2ba17c;
    --success: #15803d;
    --danger: #b91c1c;
    --warning: #b45309;

    --radius-xl: 18px;
    --radius-lg: 14px;
    --radius-md: 12px;
    --radius-sm: 10px;

    --shadow: none;
    --ring: none;
  }

  *{ box-sizing:border-box; }
  html, body{ height:100%; }

  body{
    margin:0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--text);
    background:
      radial-gradient(900px 600px at 18% 18%, rgba(15,76,129,.08), transparent 55%),
      radial-gradient(900px 600px at 78% 10%, rgba(43,161,124,.08), transparent 50%),
      linear-gradient(180deg, #f7f9fc 0%, #eef2f6 100%);
  }

  a{ color: inherit; text-decoration:none; }
  .muted{ color: var(--muted); }
  .success{ color: var(--success); }
  .inline{ display:inline-block; }
  .mono{ font-variant-numeric: tabular-nums; letter-spacing:.01em; }

/* Layout */
.app-layout{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px 14px 22px;
  max-width: 1280px;
  margin: 0 auto;
}

/* Main */
.main{
  min-width: 0;
  padding: 0;
}

  .header{
    padding: 16px 18px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: linear-gradient(135deg, #eef3fb, #e7f3ee);
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .header__left{
    flex: 1 1 320px;
    min-width: 0;
  }
  .header__right{
    display:flex;
    align-items:center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
  }
  .logout-form{ margin:0; }
  .logout-btn{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    font-weight: 800;
  }
  .page-title{
    margin:0;
    font-size:20px;
    font-weight:700;
    letter-spacing:-.02em;
  }
  .page-subtitle{
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--muted);
    max-width: 70ch;
    line-height: 1.5;
  }
  .chip{
    display:flex;
    align-items:center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.12);
    background: #e7edf7;
    color: var(--text);
    font-weight:700;
  }
  .chip__dot{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
  }

  /* KPI */
.kpi-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
  .kpi{
    background: var(--panel);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 14px;
  }
  .kpi__label{ color: var(--muted); font-size: 12px; font-weight: 600; }
  .kpi__value{ font-size: 24px; font-weight: 800; margin-top: 6px; }
  .kpi__hint{ color: rgba(15,23,42,.60); font-size: 12px; margin-top: 2px; }

  /* Grid columns */
.grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.col{ display:flex; flex-direction: column; gap: 14px; min-width: 0; }
.workspace-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
  align-items: start;
}

  /* Cards */
  .card{
    background: var(--panel);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    padding: 14px;
  }
  .card__head{
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }
  .card__title{ margin:0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
  .card__subtitle{ margin-top: 4px; font-size: 12px; color: var(--muted); }
  .card--step .card__title{ font-size: 17px; }
  .card--board{ border-style: solid; }
  .card--queue .card-item{ background: #fff; }
  .kpi-grid--wide{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

  /* Note */
  .note{
    border-radius: var(--radius-lg);
    border: 1px solid rgba(15,23,42,.12);
    background: var(--panel-soft);
    padding: 12px;
    margin-bottom: 12px;
  }
  .note p{ margin: 6px 0 0; color: #1f2937; line-height: 1.5; }
  .note__meta{ margin-top: 10px; color: rgba(15,23,42,.60); font-size: 12px; }

  /* Forms */
  .form{ display:grid; gap: 12px; }
  .form--split{ gap: 14px; }
  .form__block{
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
    background: var(--panel-soft);
    display:grid;
    gap: 10px;
  }
  .block-title{
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -.01em;
    color: #0f172a;
  }
  .field label{
    display:block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #1f2937;
  }
  input, select, textarea{
    width:100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    font-size: 13px;
    transition: border-color .12s ease, background .12s ease;
  }
  textarea{ resize: vertical; min-height: 84px; }
  input::placeholder, textarea::placeholder{ color: rgba(15,23,42,.45); }
  input:focus, select:focus, textarea:focus{
    border-color: var(--brand);
    outline: none;
    background: #fff;
  }
  .grid-2{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid-3{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .grid-2.mini{ gap: 10px; }
  .help{
    margin-top: 6px;
    color: rgba(15,23,42,.55);
    font-size: 12px;
    line-height: 1.4;
  }
  .form__actions{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
  }

  /* Buttons */
  .btn{
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #ffffff;
    color: var(--text);
    font-weight: 800;
    cursor:pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
  }
  .btn:hover{
    transform: translateY(-1px);
    border-color: rgba(15,23,42,.18);
    background: var(--panel-soft);
    color: var(--brand);
  }
  .btn:active{ transform: translateY(0); }
  .btn--primary{
    border: 1px solid var(--brand);
    background: linear-gradient(135deg, var(--brand), #0d3f69);
    color: #fff;
  }
  .btn--primary:hover{
    background: linear-gradient(135deg, #0d3f69, var(--brand));
    color: #fff;
  }
  .btn--sm{ padding: 8px 10px; font-size: 12px; border-radius: 10px; }
  .btn--success{
    border: 1px solid rgba(21,128,61,.6);
    background: linear-gradient(135deg, #1c7c46, #15803d);
    color: #fff;
  }
  .btn--danger{
    border: 1px solid rgba(185,28,28,.6);
    background: linear-gradient(135deg, #9f1d1d, #b91c1c);
    color: #fff;
  }
  .btn--ghost{
    background: var(--panel-soft);
  }
  .btn--full{ width:100%; text-align:center; }

  /* Badges */
  .badge{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--border);
    color: var(--text);
    background: var(--panel-soft);
  }
  .badge--soft{ background: var(--panel-soft); }
  .badge--warning{
    border: 1px solid rgba(180,83,9,.25);
    background: rgba(254,243,199,.9);
    color: #92400e;
  }

  /* Lists / cards inside cards */
  .card-list{ display:grid; gap: 12px; }
  .card-item{
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--panel-soft);
    padding: 12px;
  }

  /* Row utility */
  .row{ display:flex; gap: 12px; }
  .row--center{ align-items:center; }
  .row--between{ justify-content: space-between; }

  /* Alerts */
  .alert{
    margin-top: 14px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--panel-soft);
    padding: 12px 14px;
  }
  .alert__title{ font-weight: 800; letter-spacing: -.01em; }
  .alert__text{ margin-top: 6px; color: #1f2937; }
  .alert__list{ margin: 8px 0 0 18px; padding: 0; }
  .alert--success{ border-color: rgba(21,128,61,.28); background: rgba(209,250,229,.7); }
  .alert--error{ border-color: rgba(185,28,28,.28); background: rgba(254,226,226,.7); }

  /* Tables */
  .table-wrap{
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: #ffffff;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }
  .table{
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 640px;
  }
  .table th, .table td{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(15,23,42,.08);
    text-align:left;
    white-space: nowrap;
  }
  .table th{
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f5f7fb;
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
  }
  .table tr:hover td{ background: rgba(15,76,129,.05); }
  .table--dense th, .table--dense td{ padding: 8px 10px; }
  .table-wrap--dense{ background: #fbfcff; }

  /* Footer */
  .footer-note{
    margin-top: 14px;
    color: rgba(15,23,42,.60);
    font-size: 12px;
    text-align: center;
    padding: 10px 0;
  }
  .footer-note a{
    color: var(--brand);
    font-weight: 800;
    text-decoration: none;
  }
  .footer-note a:hover{ text-decoration: underline; }

  /* AUTH (Login) */
  .auth{
    background:
      radial-gradient(900px 700px at 20% 20%, rgba(15,76,129,.35), transparent 60%),
      radial-gradient(900px 700px at 80% 15%, rgba(13,63,105,.30), transparent 55%),
      linear-gradient(135deg, var(--brand) 0%, #0d3f69 100%);
  }
  .auth-layout{
    min-height: 100vh;
    display:grid;
    grid-template-columns: 1.05fr .95fr;
  }
  .auth-left{
    padding: 42px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    color: #f7fbff;
  }
  .auth-right{
    padding: 30px;
    display:grid;
    place-items: center;
    background: rgba(255,255,255,.88);
    border-left: 1px solid var(--border);
  }
  .auth-brand{
    display:flex;
    align-items:center;
    gap: 12px;
  }
  .auth-left h1{
    margin: 10px 0 0;
    font-size: 32px;
    letter-spacing: -.02em;
    color: #fff;
  }
  .auth-lead{
    margin: 0;
    color: rgba(255,255,255,.86);
    max-width: 60ch;
    line-height: 1.55;
    font-weight: 500;
  }
  .flow-pills{
    margin-top: 6px;
    display:flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .flow-pill{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
  }
  .flow-dot{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
  }
  .flow-dot--brand{
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
  }
  .auth-features{
    margin-top: 10px;
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    max-width: 620px;
  }
  .auth-feature{
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.10);
    padding: 12px;
  }
  .auth-feature__title{ font-weight: 800; color: #fff; }
  .auth-feature__text{ color: rgba(255,255,255,.82); font-size: 12px; margin-top: 4px; line-height: 1.45; }
  .auth-note{
    margin-top: 8px;
    color: rgba(255,255,255,.78);
    font-size: 12px;
  }
  .auth-card{
    width: 100%;
    max-width: 520px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: #ffffff;
    padding: 18px;
  }
  .auth-card__head{ margin-bottom: 14px; }
  .auth-card__title{ font-weight: 800; letter-spacing: -.01em; font-size: 16px; }
  .auth-card__subtitle{ color: rgba(15,23,42,.70); font-size: 12px; margin-top: 4px; }
  .auth .btn{
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 800;
  }
  .auth .btn--primary{
    background: linear-gradient(135deg, var(--brand), #0d3f69);
    color:#fff;
    border: 1px solid var(--brand);
  }

  .role-picker{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .role-option{
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
    padding: 10px 12px;
    display:grid;
    grid-template-columns: 18px 1fr;
    grid-template-areas:
      "input title"
      "input sub";
    gap: 4px 10px;
    cursor:pointer;
    transition: border-color .12s ease, background .12s ease;
    align-items:flex-start;
  }
  .role-option input{
    grid-area: input;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--brand);
  }
  .role-option__title{
    grid-area: title;
    font-weight: 800;
    letter-spacing: -.01em;
  }
  .role-option__sub{
    grid-area: sub;
    color: rgba(15,23,42,.62);
    font-size: 12px;
    line-height: 1.35;
  }
  .role-option:hover{
    border-color: rgba(15,76,129,.35);
    background: #e8edf5;
  }
  .role-option:has(input:checked){
    border-color: var(--brand);
    background: #e2e8f4;
  }

  .auth-foot{
    margin-top: 14px;
    text-align:center;
    color: rgba(15,23,42,.55);
    font-size: 12px;
  }
  .auth-foot a{ font-weight: 800; color: var(--brand); }
  .auth-foot a:hover{ text-decoration: underline; }

  /* Flow */
  .flow-card{
    margin-top: 14px;
    border: 1px dashed rgba(15,76,129,.25);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, rgba(15,76,129,.05), rgba(43,161,124,.05));
    padding: 12px 14px;
  }
  .flow-card__title{
    font-weight: 800;
    letter-spacing: -.01em;
    margin-bottom: 8px;
  }
  .flow-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
  }
  .flow-step{
    border: 1px solid rgba(15,23,42,.08);
    border-radius: var(--radius-lg);
    background: #fff;
    padding: 12px;
  }
  .flow-step__title{ font-weight: 800; letter-spacing: -.01em; }
  .flow-step__text{ margin-top: 6px; color: rgba(15,23,42,.70); font-size: 12px; line-height: 1.4; }

  /* Order board */
  .order-board{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 12px;
  }
  .order-card{
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: #f9fbff;
    padding: 12px;
    display:grid;
    gap: 10px;
  }
  .order-card__head{
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    gap: 10px;
  }
  .order-card__title{ font-weight: 800; letter-spacing: -.01em; }
  .order-card__subtitle{ color: var(--muted); font-size: 12px; }
  .order-card__tags{
    display:flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .order-card__meta{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 12px;
  }
  .order-card__statusline{
    display:flex;
    align-items:center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .status-line__bar{
    flex:1;
    height: 6px;
    background: rgba(15,76,129,.10);
    border-radius: 999px;
    position: relative;
    overflow:hidden;
    min-width: 120px;
  }
  .status-line__fill{
    position:absolute;
    inset:0;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    width: var(--fill, 100%);
    border-radius: 999px;
  }

  /* Pills / status */
  .pill{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
  }
  .pill--ghost{
    background: linear-gradient(135deg, rgba(15,76,129,.08), rgba(43,161,124,.06));
    border-color: rgba(15,76,129,.18);
  }
  .pill--muted{ color: var(--muted); }
  .status-pill{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
    background: #fff;
  }
  .status-pill--primary{
    background: rgba(15,76,129,.10);
    border-color: rgba(15,76,129,.25);
  }
  .status-pill--muted{
    color: var(--muted);
    background: var(--panel-soft);
  }
  .status-pill--pending{
    background: rgba(180,83,9,.12);
    border-color: rgba(180,83,9,.35);
    color: #92400e;
  }
  .status-pill--success{
    background: rgba(21,128,61,.12);
    border-color: rgba(21,128,61,.35);
    color: #166534;
  }
  .status-pill--approved{
    background: rgba(21,128,61,.12);
    border-color: rgba(21,128,61,.35);
    color: #166534;
  }
  .status-pill--draft{
    background: rgba(15,23,42,.06);
    border-color: rgba(15,23,42,.18);
    color: var(--text);
  }

  /* PO chips */
  .po-chip-list{ display:grid; gap: 10px; }
  .po-chip{
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    padding: 10px;
    display:grid;
    gap: 8px;
  }
  .po-chip--pending{ border-color: rgba(180,83,9,.25); background: rgba(254,243,199,.35); }
  .po-chip--approved{ border-color: rgba(21,128,61,.28); background: rgba(209,250,229,.45); }
  .po-chip__top{
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    gap: 10px;
  }
  .po-chip__title{ font-weight: 800; letter-spacing: -.01em; }
  .po-chip__meta{ color: var(--muted); font-size: 12px; }
  .po-chip__info{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    color: rgba(15,23,42,.70);
    font-size: 12px;
  }
  .po-chip__details summary{
    cursor:pointer;
    color: var(--brand);
    font-weight: 700;
  }
  .po-chip__details[open]{ padding-bottom: 6px; border-bottom: 1px dashed var(--border); }
  .po-chip__action{ margin-top: 2px; }

  /* Carton pills */
  .carton-plan{ display:flex; flex-direction: column; gap: 6px; margin-top: 6px; }
  .carton-plan__row{ display:flex; align-items:center; gap: 6px; flex-wrap: wrap; }
  .carton-plan__boxes{ display:flex; gap: 4px; flex-wrap: wrap; }
  .carton-pill{
    display:inline-block;
    padding: 4px 6px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    min-width: 32px;
    text-align:center;
    font-size: 12px;
  }
  .carton-pill--dashed{ border-style: dashed; background: #fff; }

  /* Responsive */
@media (max-width: 1100px){
  .app-layout{ padding: 10px; max-width: 100%; }
}
@media (max-width: 980px){
  .app-layout{ padding: 10px; }
  .table{ min-width: 640px; }
}
@media (max-width: 920px){
  .auth-layout{ grid-template-columns: 1fr; }
  .auth-right{ border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 640px){
  .app-layout{ padding: 10px 10px 16px; gap: 10px; grid-template-columns: 1fr; }
  .header{ padding: 12px; }
  .header__right{
    order: -1;
    width: 100%;
    justify-content: space-between;
  }
  .header__right .chip{
    flex: 1 1 auto;
    justify-content: center;
  }
  .logout-btn{
    width: auto;
    padding: 9px 12px;
  }
  .page-title{ font-size: 18px; }
  .page-subtitle{ font-size: 12px; }
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
  .form__actions{ flex-direction: column; align-items: stretch; }
  .workspace-grid{ grid-template-columns: 1fr; }
  .table{ min-width: 520px; font-size: 12px; }
  .table th, .table td{ padding: 8px 10px; }
  .order-board{ grid-template-columns: 1fr; }
  .order-card__head{ flex-direction: column; align-items: flex-start; }
}