:root{
      --shell:#0a6ed1; --shell-dark:#085caf; --bg:#f5f6f7; --surface:#fff;
      --text:#1d2d3e; --muted:#556b82; --border:#d9dde3; --shadow:0 2px 10px rgba(0,0,0,0.08);
      --radius:12px; --focus:rgba(10,110,209,0.25); --danger:#b00; --ok:#107e3e;
    }
    *{ margin:0; padding:0; box-sizing:border-box; font-family:"72", Arial, Helvetica, sans-serif; }
    body{ background:var(--bg); color:var(--text); }

    /* ===== SHELL ===== */
    header{
      height:56px; background:linear-gradient(0deg,var(--shell-dark),var(--shell)); color:#fff;
      position:fixed; top:0; left:0; width:100%; z-index:1000;
      display:flex; align-items:center; justify-content:space-between; padding:0 14px;
      box-shadow:0 2px 10px rgba(0,0,0,0.18);
    }
    .shell-left{ display:flex; align-items:center; gap:10px; min-width:180px; }
    .app-icon{
      width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,0.18);
      display:flex; align-items:center; justify-content:center; font-weight:700; user-select:none;
    }
    .app-title{ display:flex; flex-direction:column; line-height:1.1; }
    .app-title strong{ font-size:14px; }
    .app-title span{ font-size:12px; opacity:.9; }

    nav{ display:flex; align-items:center; gap:6px; }
    .tab{
      border:none; background:rgba(255,255,255,0.14); color:#fff;
      padding:9px 12px; border-radius:999px; cursor:pointer; font-size:13px;
      transition:transform .05s ease, background .15s ease; user-select:none; white-space:nowrap;
    }
    .tab:hover{ background:rgba(255,255,255,0.22); }
    .tab:active{ transform:translateY(1px); }
    .tab.active{ background:#fff; color:var(--shell); font-weight:700; }
    .tab:focus{ outline:3px solid var(--focus); outline-offset:2px; }

    .shell-actions{ display:flex; align-items:center; gap:8px; }
    .menu-btn{
      display:none; border:none; background:rgba(255,255,255,0.16); color:#fff;
      height:34px; width:42px; border-radius:10px; font-size:20px; cursor:pointer;
    }
    .menu-btn:hover{ background:rgba(255,255,255,0.24); }
    .menu-btn:focus{ outline:3px solid var(--focus); outline-offset:2px; }

    .icon-btn{
      border:none; background:rgba(255,255,255,0.16); color:#fff;
      height:34px; padding:0 10px; border-radius:10px; cursor:pointer;
      display:inline-flex; align-items:center; gap:8px; font-size:13px; white-space:nowrap;
    }
    .icon-btn:hover{ background:rgba(255,255,255,0.24); }
    .icon-btn:focus{ outline:3px solid var(--focus); outline-offset:2px; }

    /* ===== CONTEÚDO ===== */
    main{
      padding:18px; margin-top:72px; max-width:1100px; margin-left:auto; margin-right:auto;
    }
    .page-header{
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px;
    }
    .page-header .titles h1{ font-size:20px; margin-bottom:4px; font-weight:800; }
    .page-header .titles p{ font-size:13px; color:var(--muted); line-height:1.4; }
    .page-header .actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

    .btn{
      border:1px solid var(--border); background:#fff; padding:9px 12px; border-radius:10px;
      cursor:pointer; font-size:13px; color:var(--text);
      transition:box-shadow .15s ease, transform .05s ease;
    }
		.btn.delete{ border-color: rgba(176,0,0,0.25); background: rgba(176,0,0,0.06); color: #8a1f1f; }
    .btn:hover{ box-shadow:var(--shadow); }
    .btn:active{ transform:translateY(1px); }
    .btn.primary{ background:var(--shell); color:#fff; border-color:transparent; }
    .btn.danger{ background:#fff; color:var(--danger); border-color:#f0caca; }
    .btn.ok{ background: var(--ok); color:#fff; border-color:transparent; }
    .btn:focus{ outline:3px solid var(--focus); outline-offset:2px; }

    .grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:14px; }
    .card{
      grid-column:span 12; background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius); box-shadow:0 1px 0 rgba(0,0,0,0.03); padding:16px;
    }
    .card h2{ font-size:14px; margin-bottom:8px; font-weight:800; }
    .card p{ font-size:13px; color:var(--muted); line-height:1.5; }

    @media (min-width:900px){
      .card.span-4{ grid-column:span 4; }
      .card.span-6{ grid-column:span 6; }
      .card.span-8{ grid-column:span 8; }
    }

    /* ===== LOGIN ===== */
    .login-wrap{
      min-height:calc(100vh - 56px); display:flex; align-items:center; justify-content:center;
      padding:18px; margin-top:56px;
    }
    .login-card{
      width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;
    }
    .login-head{ display:flex; gap:12px; align-items:center; margin-bottom:12px; }
    .login-head .mark{
      width:44px; height:44px; border-radius:14px; background:rgba(10,110,209,0.12);
      display:flex; align-items:center; justify-content:center; color:var(--shell); font-weight:900; user-select:none;
    }
    .login-head .txt strong{ display:block; font-size:16px; margin-bottom:2px; }
    .login-head .txt span{ font-size:12px; color:var(--muted); }

    /* ===== Form fields ===== */
    .field{ margin-top:12px; }
    .label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
    .input, .select, .textarea{
      width:100%; border-radius:10px; border:1px solid var(--border);
      padding:0 12px; font-size:14px; outline:none; background:#fff;
      transition:box-shadow .15s ease, border-color .15s ease;
    }
    .input, .select{ height:40px; }
    .select{ padding-right:34px; }
    .textarea{ padding:10px 12px; min-height:92px; resize: vertical; }
    .input:focus, .select:focus, .textarea:focus{
      border-color:rgba(10,110,209,0.6); box-shadow:0 0 0 4px var(--focus);
    }

    .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; flex-wrap:wrap; }
    .hint{ font-size:12px; color:var(--muted); }

    .msg{
      margin-top:10px; font-size:12px; padding:10px; border-radius:10px;
      border:1px solid var(--border); background:#f7f9fb; color:var(--muted); display:none;
    }
    .msg.error{ display:block; border-color:#f0caca; background:#fff5f5; color:#8a1f1f; }

    /* ===== Drawer mobile menu ===== */
    @media (max-width:820px){
      nav{ display:none; }
      .menu-btn{ display:inline-flex; align-items:center; justify-content:center; }
      .drawer{
        position:fixed; top:56px; left:0; width:100%; background:#fff; border-bottom:1px solid var(--border);
        transform:translateY(-120%); transition:transform .18s ease; z-index:999;
      }
      .drawer.open{ transform:translateY(0); }
      .drawer .drawer-inner{
        max-width:1100px; margin:0 auto; padding:10px; display:flex; gap:8px; flex-wrap:wrap;
      }
      .drawer .tab{ background:#f2f5f8; color:var(--text); }
      .drawer .tab.active{ background:var(--shell); color:#fff; }
      main{ margin-top:74px; padding:12px; }
    }

    .hidden{ display:none !important; }

    /* ===== MODAL FILTRO ===== */
    .modal-overlay{
      position:fixed; inset:0;
      background: rgba(0,0,0,0.35);
      display:none;
      align-items:flex-start;
      justify-content:center;
      padding: 72px 12px 12px;
      z-index: 2000;
    }
    .modal-overlay.open{ display:flex; }
    .modal{
      width: 100%;
      max-width: 760px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 18px 40px rgba(0,0,0,0.22);
      overflow:hidden;
    }
    .modal-header{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      background: #fbfcfd;
      border-bottom: 1px solid var(--border);
    }
    .modal-header .title{
      display:flex; flex-direction: column; gap: 2px;
    }
    .modal-header .title strong{ font-size: 14px; }
    .modal-header .title span{ font-size: 12px; color: var(--muted); }
    .modal-body{ padding: 14px; }
    .modal-footer{
      padding: 12px 14px;
      border-top: 1px solid var(--border);
      display:flex; justify-content: flex-end; gap: 8px;
      background: #fbfcfd; flex-wrap: wrap;
    }

			

    .filter-grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 12px;
    }
    .col-12{ grid-column: span 12; width:90%; }
		
    @media (min-width: 720px){
      .col-6{ grid-column: span 6; width:auto; }
    }

    .inline-group{ display:flex; gap: 8px; flex-wrap: wrap; }
    .pill{
      border:1px solid var(--border);
      background:#fff;
      padding: 7px 10px;
      border-radius: 999px;
      cursor:pointer;
      font-size: 13px;
      color: var(--text);
      user-select:none;
    }
    .pill.active{
      background: rgba(10,110,209,0.10);
      border-color: rgba(10,110,209,0.35);
      color: var(--shell-dark);
      font-weight: 700;
    }
    .applied{
      margin-top: 10px;
      font-size: 12px;
      color: var(--muted);
      border: 1px dashed var(--border);
      padding: 10px;
      border-radius: 12px;
      background: #fff;
    }

    /* ===== LISTA OS (tabela) ===== */
    .toolbar{
      display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
      margin: 10px 0 6px;
    }
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      padding: 6px 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background:#fff;
      font-size: 12px;
      color: var(--muted);
    }
    .table-wrap{
      overflow:auto;
      border: 1px solid var(--border);
      border-radius: 12px;
      background:#fff;
    }
    table{
      width:100%;
      border-collapse: collapse;
      min-width: 980px;
      font-size: 13px;
    }
    thead th{
      text-align:left;
      padding: 12px 12px;
      background: #fbfcfd;
      border-bottom: 1px solid var(--border);
      color: var(--muted);
      font-weight: 800;
      position: sticky;
      top: 0;
      z-index: 1;
    }
    tbody td{
      padding: 12px 12px;
      border-bottom: 1px solid #eef1f5;
      vertical-align: top;
    }
    tbody tr:hover{ background:#fafcff; }
    .muted{ color: var(--muted); }
    .chip{
      display:inline-flex; align-items:center;
      border: 1px solid var(--border);
      background:#fff;
      border-radius: 999px;
      padding: 4px 8px;
      font-size: 12px;
      color: var(--text);
      white-space: nowrap;
    }
    .chip.ok{ border-color: rgba(16,126,62,0.35); background: rgba(16,126,62,0.08); color: #0b5a2d; }
    .chip.warn{ border-color: rgba(240,165,0,0.35); background: rgba(240,165,0,0.08); color: #6a4700; }
    .chip.bad{ border-color: rgba(176,0,0,0.25); background: rgba(176,0,0,0.06); color: #8a1f1f; }

    /* lista mobile (cards) */
    .os-cards{ display:none; }
    @media (max-width: 860px){
      .table-wrap{ display:none; }
      .os-cards{ display:grid; grid-template-columns: 1fr; gap: 12px; }
      .os-card{
        background:#fff;
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px;
      }
      .os-card .top{
        display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
        margin-bottom: 8px;
      }
      .os-card .title{
        display:flex; flex-direction:column; gap:3px;
      }
      .os-card .title strong{ font-size: 14px; }
      .os-card .kv{
        display:grid; grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
        margin-top: 8px;
        font-size: 13px;
      }
      .os-card .kv div{ color: var(--muted); }
      .os-card .kv div b{ color: var(--text); font-weight: 800; }
      .os-card .actions{ margin-top: 10px; display:flex; gap:8px; flex-wrap:wrap; }
    }.chip.bad{ border-color: rgba(176,0,0,0.25); background: rgba(176,0,0,0.06); color: #8a1f1f; }

    /* ===== DADOS OS ===== */
    .info-grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 12px;
      margin-top: 10px;
    }
    .info{
      grid-column: span 12;
      background:#fff;
      border:1px solid var(--border);
      border-radius: 14px;
      padding: 12px;
    }
    .info .k{
      font-size: 12px; color: var(--muted); margin-bottom: 4px;
    }
    .info .v{
      font-size: 14px; font-weight: 800; color: var(--text);
    }
    @media (min-width: 900px){
      .info.span-4{ grid-column: span 4; }
      .info.span-6{ grid-column: span 6; }
      .info.span-8{ grid-column: span 8; }
			
    }

    .items-list{
      margin-top: 10px;
      border:1px solid var(--border);
      border-radius: 14px;
      overflow:hidden;
      background:#fff;
    }
    .items-list .head{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      padding: 12px 12px;
      background:#fbfcfd;
      border-bottom: 1px solid var(--border);
    }
    .items-list .head strong{ font-size: 14px; }
    .items-list .body{
      padding: 0;
    }
    .item-row{
      display:flex; align-items:flex-start; justify-content:space-between; gap: 10px;
      padding: 12px 12px;
      border-bottom: 1px solid #eef1f5;
    }
    .item-row:last-child{ border-bottom:none; }
    .item-row .left{
      display:flex; flex-direction: column; gap: 4px;
    }
    .item-row .left strong{ font-size: 13px; }
    .item-row .left span{ font-size: 12px; color: var(--muted); }
    .item-row .qty{
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
    }

    .divider{
      height:1px; background: var(--border); margin: 12px 0;
    }