:root{
      --bg:#0F172A;
      --card:#1E293B;
      --card2:#26364D;
      --accent:#F59E0B;
      --success:#22C55E;
      --error:#EF4444;
      --text:#E2E8F0;
      --muted:#CBD5E1;
      --line:rgba(226,232,240,.14);
      --radius:22px;
      --shadow:0 18px 55px rgba(0,0,0,.35);
    }

    *{box-sizing:border-box}

    body{
      margin:0;
      min-height:100vh;
      padding:16px;
      font-family:Arial, Helvetica, sans-serif;
      background:
        radial-gradient(circle at top left, rgba(245,158,11,.24), transparent 34%),
        radial-gradient(circle at bottom right, rgba(34,197,94,.13), transparent 36%),
        var(--bg);
      color:var(--text);
      display:flex;
      justify-content:center;
    }

    .app{
      width:min(1120px,100%);
      display:grid;
      gap:14px;
    }

    .panel{
      background:rgba(30,41,59,.94);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    header{
      padding:20px;
      display:grid;
      gap:14px;
      background:linear-gradient(135deg, rgba(245,158,11,.22), rgba(30,41,59,.70));
    }

    .top{
      display:flex;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
      align-items:flex-start;
    }

    h1{
      margin:0;
      font-size:clamp(26px,4vw,44px);
      line-height:1.05;
    }

    .sub{
      color:var(--muted);
      margin-top:7px;
      font-size:15px;
    }

    .stats{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }

    .stat{
      min-width:130px;
      background:rgba(15,23,42,.55);
      border:1px solid var(--line);
      border-radius:16px;
      padding:11px 13px;
    }

    .stat b{
      display:block;
      margin-top:4px;
      color:var(--accent);
      font-size:21px;
    }

    .progress-wrap{
      height:14px;
      border-radius:99px;
      overflow:hidden;
      border:1px solid var(--line);
      background:rgba(15,23,42,.6);
    }

    .progress{
      height:100%;
      width:0;
      background:linear-gradient(90deg,var(--accent),var(--success));
      transition:width .3s;
    }

    main{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:14px;
    }

    .card{
      padding:18px;
      border-bottom:1px solid var(--line);
    }

    .card:last-child{border-bottom:0}

    h2,h3{margin:0 0 12px}
    h2{font-size:23px}
    h3{font-size:18px}

    .delivery-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:10px;
    }

    .info{
      background:rgba(15,23,42,.42);
      border:1px solid var(--line);
      border-radius:15px;
      padding:12px;
      min-height:74px;
    }

    .info span{
      display:block;
      color:var(--muted);
      font-size:13px;
      margin-bottom:4px;
    }

    .info strong{font-size:17px}

    .warehouse{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
    }

    button{
      min-height:48px;
      border:1px solid var(--line);
      border-radius:15px;
      padding:12px 14px;
      background:var(--card2);
      color:var(--text);
      font-size:15px;
      font-weight:800;
      cursor:pointer;
      transition:transform .15s, background .15s, box-shadow .15s, border-color .15s;
      touch-action:manipulation;
    }

    button:hover{
      background:#33445e;
      transform:translateY(-1px);
    }

    button:disabled{
      opacity:.55;
      cursor:not-allowed;
      transform:none;
    }

    .zone{
      min-height:92px;
      display:grid;
      align-content:center;
      gap:5px;
      text-align:center;
    }

    .zone small{
      color:var(--muted);
      font-weight:700;
      line-height:1.25;
    }

    .zone.selected{
      background:rgba(245,158,11,.23);
      border-color:var(--accent);
      box-shadow:0 0 0 3px rgba(245,158,11,.16);
    }

    .primary{
      width:100%;
      margin-top:12px;
      min-height:56px;
      background:linear-gradient(135deg,#D97706,#F59E0B);
      color:#1c1000;
      font-size:17px;
    }

    .mode-switch{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      margin-bottom:12px;
    }

    .mode-switch button.active{
      background:rgba(245,158,11,.23);
      border-color:var(--accent);
    }

    .order-list{
      display:grid;
      gap:10px;
    }

    .batch{
      background:rgba(15,23,42,.43);
      border:1px solid var(--line);
      border-radius:15px;
      padding:12px;
      display:grid;
      gap:8px;
    }

    .batch button{
      text-align:left;
      background:rgba(30,41,59,.8);
    }

    .batch button.selected{
      background:rgba(34,197,94,.17);
      border-color:var(--success);
    }

    .system{
      min-height:160px;
      background:rgba(15,23,42,.45);
      border:1px solid var(--line);
      border-radius:16px;
      padding:14px;
      line-height:1.45;
      color:var(--muted);
    }

    .good{color:var(--success);font-weight:800}
    .bad{color:var(--error);font-weight:800}
    .warn{color:var(--accent);font-weight:800}

    .badges{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }

    .badge{
      border-radius:999px;
      padding:8px 10px;
      background:rgba(245,158,11,.13);
      border:1px solid rgba(245,158,11,.35);
      color:#FED7AA;
      font-weight:800;
      font-size:13px;
    }

    .small{
      color:var(--muted);
      line-height:1.45;
      font-size:14px;
    }

    .timer{
      height:10px;
      border-radius:99px;
      border:1px solid var(--line);
      background:rgba(15,23,42,.65);
      overflow:hidden;
      margin-top:8px;
    }

    .timer div{
      height:100%;
      width:100%;
      background:linear-gradient(90deg,var(--success),var(--accent),var(--error));
      transition:width .2s linear;
    }

    .end{
      display:none;
      padding:20px;
    }

    .end.active{display:block}

    .profile{
      display:grid;
      gap:10px;
      margin-top:12px;
    }

    .profile-item{
      padding:14px;
      background:rgba(15,23,42,.43);
      border:1px solid var(--line);
      border-radius:16px;
      line-height:1.5;
    }

    .restart{
      width:100%;
      margin-top:14px;
      background:linear-gradient(135deg,var(--success),#86EFAC);
      color:#062014;
    }

    .hidden{display:none!important}

    footer{
      text-align:center;
      color:rgba(226,232,240,.55);
      font-size:12px;
      padding-bottom:4px;
    }

    @media(max-width:900px){
      body{padding:10px}
      main{grid-template-columns:1fr}
      .delivery-grid{grid-template-columns:1fr}
      .warehouse{grid-template-columns:1fr 1fr}
      .mode-switch{grid-template-columns:1fr}
      .stat{flex:1;min-width:135px}
      header,.card,.end{padding:15px}
    }

    @media(max-width:480px){
      .warehouse{grid-template-columns:1fr}
    }