:root {
      --bg: #f4f3ef;
      --surface: #ffffff;
      --surface-2: #f9f8f5;
      --ink: #17212b;
      --muted: #707985;
      --line: #e5e2dc;
      --nav: #111a22;
      --nav-2: #1b2731;
      --orange: #f26b38;
      --orange-soft: #fff0e8;
      --cyan: #2d9da8;
      --cyan-soft: #e8f6f6;
      --yellow: #e8b83e;
      --yellow-soft: #fff7d8;
      --red: #d84b4b;
      --red-soft: #fff0ef;
      --green: #3a936f;
      --green-soft: #eaf6f0;
      --violet: #7467c7;
      --violet-soft: #f0eefe;
      --shadow: 0 14px 40px rgba(29, 37, 44, .08);
      --radius: 18px;
      --sidebar: 246px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      min-height: 100vh;
      color: var(--ink);
      background: var(--bg);
      font: 14px/1.45 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    button, input, select, textarea { font: inherit; }
    button { color: inherit; }
    button, [role="button"] { -webkit-tap-highlight-color: transparent; }
    button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
      outline: 3px solid rgba(45, 157, 168, .25);
      outline-offset: 2px;
    }
    svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    .app { min-height: 100vh; }
    .sidebar {
      position: fixed;
      inset: 0 auto 0 0;
      z-index: 50;
      display: flex;
      width: var(--sidebar);
      flex-direction: column;
      padding: 24px 16px 18px;
      color: #dbe2e7;
      background: var(--nav);
      transition: transform .25s ease;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 0 8px 26px;
      color: #fff;
    }
    .brand-mark {
      position: relative;
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 12px;
      background: rgba(255,255,255,.06);
      overflow: hidden;
    }
    .brand-mark::before, .brand-mark::after {
      content: "";
      position: absolute;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      mix-blend-mode: screen;
    }
    .brand-mark::before { left: 6px; top: 8px; background: #2dbdc5; }
    .brand-mark::after { right: 5px; top: 8px; background: #ef4c7a; }
    .brand-mark span { position: absolute; bottom: 4px; width: 20px; height: 8px; border-radius: 9px; background: #f4c544; mix-blend-mode: screen; }
    .brand-name { font-size: 16px; font-weight: 850; letter-spacing: .13em; }
    .brand-sub { margin-top: 1px; color: #83919c; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
    .nav-label { padding: 0 11px 8px; color: #677681; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    .nav { display: grid; gap: 5px; }
    .nav-button {
      display: flex;
      width: 100%;
      align-items: center;
      gap: 12px;
      padding: 10px 11px;
      border: 0;
      border-radius: 11px;
      color: #9ba9b3;
      background: transparent;
      cursor: pointer;
      text-align: left;
      transition: color .18s, background .18s, transform .18s;
    }
    .nav-button:hover { color: #fff; background: rgba(255,255,255,.055); transform: translateX(2px); }
    .nav-button.active { color: #fff; background: var(--nav-2); }
    .nav-button.active svg { color: #65ccd2; }
    .nav-button span:nth-child(2) { flex: 1; font-size: 13px; font-weight: 650; }
    .nav-count { min-width: 22px; padding: 2px 7px; border-radius: 999px; color: #fed8c8; background: rgba(242,107,56,.17); font-size: 10px; font-weight: 800; text-align: center; }
    .sidebar-spacer { flex: 1; }
    .machine-card {
      margin: 18px 2px 15px;
      padding: 13px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 13px;
      color: #aab5bd;
      background: rgba(255,255,255,.035);
    }
    .machine-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #e4e9ec; font-size: 11px; font-weight: 700; }
    .live { display: inline-flex; align-items: center; gap: 6px; color: #79d3ad; font-size: 10px; }
    .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #54bb8d; box-shadow: 0 0 0 4px rgba(84,187,141,.12); }
    .machine-meta { margin: 8px 0 7px; font-size: 10px; }
    .mini-progress { height: 4px; overflow: hidden; border-radius: 99px; background: #29353e; }
    .mini-progress span { display: block; width: 68%; height: 100%; border-radius: inherit; background: #2db9c2; }
    .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 10px 8px 0; border-top: 1px solid rgba(255,255,255,.07); }
    .avatar { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: #17323a; background: #9bdadd; font-size: 11px; font-weight: 850; }
    .user-name { color: #edf1f3; font-size: 12px; font-weight: 750; }
    .user-role { color: #71808b; font-size: 10px; }

    .workspace { min-height: 100vh; margin-left: var(--sidebar); }
    .topbar {
      position: sticky;
      top: 0;
      z-index: 40;
      display: flex;
      height: 72px;
      align-items: center;
      gap: 18px;
      padding: 0 30px;
      border-bottom: 1px solid rgba(224,221,214,.8);
      background: rgba(244,243,239,.9);
      backdrop-filter: blur(14px);
    }
    .mobile-menu { display: none; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
    .breadcrumb { min-width: 170px; }
    .breadcrumb small { display: block; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
    .breadcrumb strong { display: block; margin-top: 2px; font-size: 15px; }
    .top-search { position: relative; width: min(390px, 38vw); margin-left: auto; }
    .top-search svg { position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; color: #8c949c; transform: translateY(-50%); }
    .top-search input {
      width: 100%;
      height: 40px;
      padding: 0 42px 0 40px;
      border: 1px solid var(--line);
      border-radius: 12px;
      color: var(--ink);
      background: rgba(255,255,255,.82);
    }
    .top-search input::placeholder { color: #9da3aa; }
    .shortcut { position: absolute; right: 10px; top: 9px; padding: 2px 6px; border: 1px solid #ddd9d2; border-radius: 6px; color: #9a9fa5; font-size: 10px; }
    .icon-button { position: relative; display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; transition: transform .15s, box-shadow .15s; }
    .icon-button:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(35,42,47,.08); }
    .notification-dot { position: absolute; right: 8px; top: 8px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--red); }
    .top-avatar { display: flex; align-items: center; gap: 9px; }
    .top-avatar .avatar { width: 38px; height: 38px; }
    .top-avatar div:last-child { display: none; }

    .content { width: 100%; max-width: 1540px; margin: 0 auto; padding: 30px; }
    .page-view { display: none; animation: enter .24s ease both; }
    .page-view.active { display: block; }
    @keyframes enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
    .page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
    .eyebrow { margin-bottom: 5px; color: var(--orange); font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
    h1, h2, h3, p { margin-top: 0; }
    h1 { margin-bottom: 5px; font-size: clamp(25px, 3vw, 36px); line-height: 1.13; letter-spacing: -.035em; }
    .page-heading p { margin-bottom: 0; color: var(--muted); }
    .heading-actions { display: flex; align-items: center; gap: 10px; }
    .button {
      display: inline-flex;
      min-height: 40px;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 15px;
      border: 1px solid transparent;
      border-radius: 11px;
      font-weight: 750;
      cursor: pointer;
      transition: transform .15s, box-shadow .15s, background .15s;
    }
    .button:hover { transform: translateY(-1px); }
    .button-primary { color: #fff; background: var(--orange); box-shadow: 0 8px 20px rgba(242,107,56,.2); }
    .button-primary:hover { background: #e85f2d; box-shadow: 0 11px 24px rgba(242,107,56,.26); }
    .button-secondary { border-color: var(--line); background: var(--surface); }
    .button-ghost { border-color: var(--line); color: var(--muted); background: transparent; }
    .button-danger { border-color: #f1cac6; color: var(--red); background: var(--red-soft); }
    .button-small { min-height: 33px; padding: 0 11px; font-size: 11px; }
    .button svg { width: 16px; height: 16px; }

    .alert-band {
      display: flex;
      align-items: center;
      gap: 13px;
      margin-bottom: 18px;
      padding: 13px 15px;
      border: 1px solid #f4d9ae;
      border-radius: 14px;
      background: #fff9ed;
    }
    .alert-icon { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: #9b6418; background: #ffedc8; }
    .alert-icon svg { width: 18px; height: 18px; }
    .alert-copy { flex: 1; }
    .alert-copy strong { display: block; font-size: 12px; }
    .alert-copy span { color: #8b714f; font-size: 11px; }
    .text-button { display: inline-flex; align-items: center; gap: 5px; padding: 4px; border: 0; color: #9b6418; background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
    .text-button svg { width: 14px; height: 14px; }

    .metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
    .metric-card { min-height: 132px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
    .metric-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .metric-label { color: var(--muted); font-size: 11px; font-weight: 700; }
    .metric-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; }
    .metric-icon svg { width: 17px; height: 17px; }
    .metric-icon.cyan { color: var(--cyan); background: var(--cyan-soft); }
    .metric-icon.orange { color: var(--orange); background: var(--orange-soft); }
    .metric-icon.green { color: var(--green); background: var(--green-soft); }
    .metric-icon.violet { color: var(--violet); background: var(--violet-soft); }
    .metric-value { margin: 12px 0 7px; font-size: 28px; font-weight: 850; line-height: 1; letter-spacing: -.035em; }
    .metric-foot { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
    .metric-foot .up { color: var(--green); font-weight: 800; }
    .metric-foot .warn { color: var(--red); font-weight: 800; }

    .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr); gap: 18px; }
    .stack { display: grid; align-content: start; gap: 18px; }
    .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 0 rgba(255,255,255,.5); }
    .card-head { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
    .card-title h2 { margin-bottom: 2px; font-size: 15px; letter-spacing: -.01em; }
    .card-title p { margin-bottom: 0; color: var(--muted); font-size: 10px; }
    .card-actions { display: flex; align-items: center; gap: 8px; }
    .card-body { padding: 16px 18px; }
    .link-button { display: inline-flex; align-items: center; gap: 5px; padding: 5px; border: 0; color: var(--cyan); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
    .link-button svg { width: 14px; height: 14px; }

    .compact-orders { display: grid; }
    .compact-order {
      display: grid;
      grid-template-columns: 92px minmax(180px, 1.25fr) minmax(135px, .8fr) minmax(110px, .75fr) 24px;
      align-items: center;
      gap: 12px;
      min-height: 68px;
      padding: 8px 18px;
      border-bottom: 1px solid var(--line);
      cursor: pointer;
      transition: background .15s;
    }
    .compact-order:last-child { border-bottom: 0; }
    .compact-order:hover { background: var(--surface-2); }
    .order-id { color: #4f5b66; font: 750 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
    .order-main strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .order-main span, .order-client span { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .order-client strong { display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .deadline { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 750; }
    .deadline::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
    .deadline.danger { color: var(--red); }
    .deadline.danger::before { background: var(--red); box-shadow: 0 0 0 4px rgba(216,75,75,.09); }
    .deadline.warning { color: #9a6a14; }
    .deadline.warning::before { background: var(--yellow); }
    .row-arrow { color: #a1a7ad; }
    .row-arrow svg { width: 15px; height: 15px; }

    .status { display: inline-flex; width: max-content; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 850; white-space: nowrap; }
    .status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
    .status-design { color: var(--violet); background: var(--violet-soft); }
    .status-approval { color: #9a6a14; background: var(--yellow-soft); }
    .status-queue { color: #47798b; background: #e9f3f6; }
    .status-printing { color: #267e87; background: var(--cyan-soft); }
    .status-postpress { color: #a95331; background: var(--orange-soft); }
    .status-ready { color: var(--green); background: var(--green-soft); }
    .status-new { color: #52606c; background: #eef0f2; }

    .production-list { display: grid; gap: 7px; }
    .production-item { position: relative; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 11px; padding: 10px 0; }
    .production-item + .production-item { border-top: 1px solid var(--line); }
    .time-box { padding: 6px 4px; border-radius: 9px; color: #5e6872; background: var(--surface-2); font-size: 10px; font-weight: 800; text-align: center; }
    .production-copy strong { display: block; font-size: 11px; }
    .production-copy span { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
    .task-check { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; }
    .task-check svg { width: 14px; height: 14px; opacity: 0; }
    .production-item.done { opacity: .58; }
    .production-item.done .production-copy strong { text-decoration: line-through; }
    .production-item.done .task-check { color: #fff; border-color: var(--green); background: var(--green); }
    .production-item.done .task-check svg { opacity: 1; }

    .stock-list { display: grid; gap: 12px; }
    .stock-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
    .stock-name { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 750; }
    .stock-dot { width: 8px; height: 8px; border-radius: 3px; background: var(--red); }
    .stock-dot.warn { background: var(--yellow); }
    .stock-meta { margin-top: 3px; color: var(--muted); font-size: 9px; }
    .stock-value { color: var(--red); font-size: 10px; font-weight: 850; }
    .stock-value.warn { color: #9a6a14; }

    .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
    .search-field { position: relative; flex: 1 1 250px; }
    .search-field svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; color: #9299a0; transform: translateY(-50%); }
    .field-input, .field-select, .field-textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 11px;
      color: var(--ink);
      background: #fff;
      transition: border .15s, box-shadow .15s;
    }
    .field-input, .field-select { height: 40px; padding: 0 12px; }
    .field-textarea { min-height: 88px; padding: 10px 12px; resize: vertical; }
    .search-field .field-input { padding-left: 37px; }
    .field-input:focus, .field-select:focus, .field-textarea:focus { border-color: #83c6cc; box-shadow: 0 0 0 3px rgba(45,157,168,.1); outline: 0; }
    .filter-pills { display: flex; flex-wrap: wrap; gap: 7px; }
    .filter-pill { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fff; font-size: 10px; font-weight: 750; cursor: pointer; }
    .filter-pill.active { color: #fff; border-color: var(--ink); background: var(--ink); }

    .table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
    .data-table { width: 100%; min-width: 900px; border-collapse: collapse; }
    .data-table th { padding: 12px 14px; border-bottom: 1px solid var(--line); color: #858d95; background: #fbfaf8; font-size: 9px; font-weight: 850; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
    .data-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
    .data-table tbody tr { cursor: pointer; transition: background .15s; }
    .data-table tbody tr:hover { background: #fbfaf8; }
    .data-table tbody tr:last-child td { border-bottom: 0; }
    .product-cell { min-width: 210px; }
    .product-cell strong { display: block; font-size: 11px; }
    .product-cell span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
    .money { font-size: 11px; font-weight: 800; white-space: nowrap; }
    .payment { margin-top: 3px; color: var(--muted); font-size: 9px; }
    .empty-state { padding: 42px 20px; color: var(--muted); text-align: center; }
    .empty-state strong { display: block; margin-bottom: 3px; color: var(--ink); }

    .kanban { display: grid; grid-template-columns: repeat(5, minmax(230px, 1fr)); gap: 12px; overflow: auto; padding-bottom: 10px; }
    .kanban-column { min-width: 230px; padding: 11px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.55); }
    .kanban-head { display: flex; align-items: center; justify-content: space-between; padding: 3px 3px 11px; }
    .kanban-head strong { display: flex; align-items: center; gap: 7px; font-size: 11px; }
    .kanban-head strong::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--column-color, var(--muted)); }
    .kanban-head span { display: grid; min-width: 22px; height: 22px; place-items: center; border-radius: 7px; color: var(--muted); background: #fff; font-size: 9px; font-weight: 800; }
    .kanban-cards { display: grid; align-content: start; gap: 8px; min-height: 100px; }
    .kanban-card { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 5px 12px rgba(30,40,46,.035); cursor: pointer; }
    .kanban-card:hover { border-color: #cfd2d0; }
    .kanban-card-top { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
    .priority { width: 7px; height: 7px; border-radius: 50%; background: #b8bec3; }
    .priority.high { background: var(--red); box-shadow: 0 0 0 4px rgba(216,75,75,.08); }
    .priority.medium { background: var(--yellow); }
    .kanban-card h3 { margin: 9px 0 3px; font-size: 11px; line-height: 1.35; }
    .kanban-card p { margin-bottom: 10px; color: var(--muted); font-size: 9px; }
    .kanban-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
    .kanban-card-foot span { color: var(--muted); font-size: 9px; }
    .next-button { display: grid; width: 26px; height: 25px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
    .next-button:hover { color: #fff; border-color: var(--cyan); background: var(--cyan); }
    .next-button svg { width: 13px; height: 13px; }

    .file-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
    .file-card { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
    .file-preview { position: relative; display: grid; height: 128px; place-items: center; overflow: hidden; border-radius: 11px; background: #f0efeb; }
    .file-preview::before, .file-preview::after { content: ""; position: absolute; width: 80px; height: 80px; border-radius: 50%; opacity: .8; mix-blend-mode: multiply; }
    .file-preview::before { left: 30%; background: #5fc7cf; }
    .file-preview::after { right: 30%; background: #ef7193; }
    .file-preview span { position: relative; z-index: 1; padding: 7px 9px; border-radius: 8px; color: #fff; background: rgba(16,25,32,.75); font: 800 10px ui-monospace, monospace; }
    .file-preview.has-image::before, .file-preview.has-image::after { display: none; }
    .file-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .file-card h3 { margin: 12px 0 3px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .file-card p { margin-bottom: 10px; color: var(--muted); font-size: 9px; }
    .file-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

    .inventory-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .65fr); gap: 18px; }
    .stock-meter { width: 120px; height: 6px; overflow: hidden; border-radius: 99px; background: #eeece7; }
    .stock-meter span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
    .stock-meter span.low { background: var(--red); }
    .stock-meter span.medium { background: var(--yellow); }
    .purchase-list { display: grid; gap: 10px; }
    .purchase-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
    .purchase-item:last-child { border: 0; }
    .purchase-item strong { display: block; font-size: 11px; }
    .purchase-item span { color: var(--muted); font-size: 9px; }

    .client-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
    .client-card { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; }
    .client-head { display: flex; align-items: center; gap: 10px; }
    .client-head .avatar { color: #31545a; background: var(--cyan-soft); }
    .client-head strong { display: block; font-size: 12px; }
    .client-head span { color: var(--muted); font-size: 9px; }
    .client-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
    .client-stats small { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; }
    .client-stats strong { display: block; margin-top: 3px; font-size: 11px; }

    .analytics-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,.7fr); gap: 18px; }
    .chart { display: flex; height: 245px; align-items: end; gap: 11px; padding: 15px 4px 0; }
    .bar-group { display: flex; flex: 1; height: 100%; flex-direction: column; justify-content: end; align-items: center; gap: 7px; }
    .bar { width: min(34px, 68%); min-height: 5px; border-radius: 7px 7px 3px 3px; background: var(--cyan); transition: height .4s ease; }
    .bar.current { background: var(--orange); }
    .bar-group span { color: var(--muted); font-size: 8px; }
    .service-list { display: grid; gap: 14px; }
    .service-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
    .service-row strong { font-size: 10px; }
    .service-row span { color: var(--muted); font-size: 9px; }
    .service-line { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 99px; background: #efede8; }
    .service-line i { display: block; height: 100%; border-radius: inherit; background: var(--orange); }

    .drawer-backdrop, .modal-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(13,21,28,.38); opacity: 0; pointer-events: none; transition: opacity .22s; }
    .drawer-backdrop.open, .modal-backdrop.open { opacity: 1; pointer-events: auto; }
    .drawer {
      position: fixed;
      z-index: 90;
      inset: 0 0 0 auto;
      display: flex;
      width: min(520px, 100vw);
      flex-direction: column;
      background: #fff;
      box-shadow: -18px 0 50px rgba(17,27,34,.15);
      transform: translateX(100%);
      transition: transform .26s ease;
    }
    .drawer.open { transform: none; }
    .drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 21px 22px; border-bottom: 1px solid var(--line); }
    .drawer-head small { color: var(--orange); font: 800 10px ui-monospace, monospace; }
    .drawer-head h2 { margin: 4px 0 2px; font-size: 21px; letter-spacing: -.025em; }
    .drawer-head p { margin: 0; color: var(--muted); font-size: 10px; }
    .close-button { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
    .close-button svg { width: 16px; height: 16px; }
    .drawer-content { flex: 1; overflow: auto; padding: 20px 22px; }
    .drawer-section { margin-bottom: 22px; }
    .drawer-section-title { margin-bottom: 10px; color: #858d95; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
    .detail-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
    .detail-box { padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
    .detail-box small { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; }
    .detail-box strong { display: block; margin-top: 4px; font-size: 11px; }
    .stage-track { display: grid; grid-template-columns: repeat(6,1fr); gap: 4px; }
    .stage-step { position: relative; height: 5px; border-radius: 99px; background: #e8e6e1; }
    .stage-step.done { background: var(--cyan); }
    .stage-labels { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 8px; }
    .client-contact { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
    .client-contact .avatar { color: #30545a; background: var(--cyan-soft); }
    .client-contact-copy { flex: 1; }
    .client-contact-copy strong { display: block; font-size: 11px; }
    .client-contact-copy span { color: var(--muted); font-size: 9px; }
    .contact-actions { display: flex; gap: 5px; }
    .contact-actions button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; }
    .contact-actions svg { width: 14px; height: 14px; }
    .note-box { padding: 12px; border-left: 3px solid var(--yellow); border-radius: 0 10px 10px 0; color: #665839; background: var(--yellow-soft); font-size: 10px; }
    .drawer-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; padding: 15px 22px; border-top: 1px solid var(--line); background: #fff; }
    .drawer-footer .field-select { width: 140px; }
    .drawer-footer #drawer-save { margin-left: auto; min-width: 155px; }

    .modal-backdrop { display: grid; place-items: center; padding: 18px; }
    .modal {
      width: min(660px, 100%);
      max-height: min(760px, 94vh);
      overflow: auto;
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 30px 80px rgba(12,20,27,.28);
      transform: translateY(12px) scale(.985);
      transition: transform .22s;
    }
    .modal-backdrop.open .modal { transform: none; }
    .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 21px 22px; border-bottom: 1px solid var(--line); }
    .modal-head h2 { margin-bottom: 3px; font-size: 19px; }
    .modal-head p { margin-bottom: 0; color: var(--muted); font-size: 10px; }
    .modal-body { padding: 20px 22px; }
    .form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
    .form-group { display: grid; gap: 6px; }
    .form-group.full { grid-column: 1 / -1; }
    .form-group label { color: #56616b; font-size: 10px; font-weight: 750; }
    .form-group label span { color: var(--red); }
    .modal-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 22px; border-top: 1px solid var(--line); background: #fbfaf8; }

    .notification-panel {
      position: fixed;
      z-index: 70;
      top: 63px;
      right: 78px;
      width: min(360px, calc(100vw - 28px));
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      box-shadow: var(--shadow);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-6px);
      transition: .18s;
    }
    .notification-panel.open { opacity: 1; pointer-events: auto; transform: none; }
    .notification-head { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px 10px; }
    .notification-head strong { font-size: 12px; }
    .notification-head button { border: 0; color: var(--cyan); background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }
    .notification-item { display: flex; gap: 10px; padding: 10px; border-radius: 11px; }
    .notification-item:hover { background: var(--surface-2); }
    .notification-bullet { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--red); }
    .notification-bullet.yellow { background: var(--yellow); }
    .notification-bullet.cyan { background: var(--cyan); }
    .notification-item strong { display: block; font-size: 10px; }
    .notification-item span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }

    .toast-container { position: fixed; z-index: 120; right: 22px; bottom: 22px; display: grid; gap: 8px; }
    .toast { display: flex; min-width: min(330px, calc(100vw - 44px)); align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; color: #fff; background: #17232c; box-shadow: 0 13px 35px rgba(12,21,27,.22); animation: toast-in .25s ease both; }
    .toast svg { width: 17px; height: 17px; color: #79d3ad; }
    .toast span { font-size: 10px; font-weight: 650; }
    @keyframes toast-in { from { opacity: 0; transform: translateY(9px); } }

    .sidebar-overlay { position: fixed; inset: 0; z-index: 45; display: none; background: rgba(12,20,27,.44); }
    .sidebar-overlay.open { display: block; }

    @media (max-width: 1180px) {
      .metrics { grid-template-columns: repeat(2,1fr); }
      .dashboard-grid, .inventory-grid, .analytics-grid { grid-template-columns: 1fr; }
      .stack { grid-template-columns: repeat(2,1fr); }
      .file-grid, .client-grid { grid-template-columns: repeat(2,1fr); }
    }
    @media (max-width: 820px) {
      :root { --sidebar: 246px; }
      .sidebar { transform: translateX(-100%); }
      .sidebar.open { transform: none; }
      .workspace { margin-left: 0; }
      .mobile-menu { display: grid; }
      .topbar { padding: 0 16px; }
      .breadcrumb { min-width: 0; }
      .top-search { width: auto; flex: 1; }
      .shortcut { display: none; }
      .content { padding: 22px 16px; }
      .compact-order { grid-template-columns: 74px 1fr 105px 22px; }
      .compact-order .order-client { display: none; }
      .file-grid, .client-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 590px) {
      .topbar { height: 64px; gap: 9px; }
      .breadcrumb { display: none; }
      .top-search input { padding-right: 12px; }
      .top-avatar { display: none; }
      .page-heading { display: grid; }
      .heading-actions { width: 100%; }
      .heading-actions .button { flex: 1; }
      .metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
      .metric-card { min-height: 116px; padding: 13px; }
      .metric-value { font-size: 23px; }
      .stack { grid-template-columns: 1fr; }
      .compact-order { grid-template-columns: 66px 1fr 22px; min-height: 63px; padding-inline: 13px; }
      .compact-order .deadline { display: none; }
      .card-head { padding-inline: 14px; }
      .card-body { padding-inline: 14px; }
      .alert-band { align-items: flex-start; }
      .alert-band .text-button { display: none; }
      .file-grid, .client-grid { grid-template-columns: 1fr; }
      .form-grid, .detail-grid { grid-template-columns: 1fr; }
      .form-group.full { grid-column: auto; }
      .drawer-footer { align-items: stretch; flex-direction: column; }
      .drawer-footer .field-select { width: 100%; }
      .drawer-footer .button { width: 100%; }
      .drawer-footer #drawer-save { margin-left: 0; }
      .notification-panel { top: 58px; right: 14px; }
    }
  
    [hidden] { display: none !important; }
    .logout-link { margin-left:auto; color:#83919c; font-size:10px; text-decoration:none; }
    .logout-link:hover { color:#fff; }
    .permission-hidden { display:none !important; }
    .user-table-actions { display:flex; gap:6px; }
    .login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--bg); }
    .login-card { width:min(430px,100%); padding:28px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:var(--shadow); }
    .login-brand { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
    .login-brand .brand-mark { background:var(--nav); }
    .login-card h1 { font-size:28px; margin-bottom:7px; }
    .login-card p { color:var(--muted); }
    .login-error { margin-bottom:14px; padding:11px 13px; border-radius:11px; color:var(--red); background:var(--red-soft); font-size:11px; }
    .login-help { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
    .modal-narrow { width:min(520px,100%); }
    .inline-finance { display:flex; gap:8px; align-items:center; }
    .role-chip { display:inline-flex; padding:5px 8px; border-radius:999px; background:var(--cyan-soft); color:var(--cyan); font-size:9px; font-weight:800; }
    .machine-card .mini-progress span { width:0; }