/* =========================================================
       LUXURY PRESTIGE UI — Dual Theme Engine (Dark Luxury / Light Elegant)
       NOTE: Visual-only refactor. PHP/JSON logic unchanged.
    ========================================================= */
    :root{
      /* Brushed gold gradient (required) */
      --gold-grad: linear-gradient(135deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);

      /* Dark Luxury (default) */
      --bg:#121212;
      --bg2:#0b0b0c;
      --panel: rgba(255,255,255,.06);
      --card: rgba(18,18,18,.72);
      --card2: rgba(255,255,255,.04);
      --line: rgba(255,255,255,.12);
      --line2: rgba(255,255,255,.18);
      --text:#eef0f4;
      --muted:#a9b0be;

      /* Accents */
      --gold:#BF953F;
      --gold2:#FCF6BA;
      --ok:#28a745;
      --blue:#2b6cff;
      --danger:#ff4d4d;

      /* Radii & shadows */
      --radius: 18px;
      --radius2: 22px;
      --shadow: 0 26px 70px rgba(0,0,0,.62);
      --shadowSoft: 0 12px 30px rgba(0,0,0,.35);
      --goldSoftShadow: 0 18px 50px rgba(191,149,63,.18);

      /* Glass */
      --glass: rgba(255,255,255,.08);
      --glass2: rgba(255,255,255,.05);
      --blur: blur(14px);
    }

    html[data-theme="light"]{
      /* Light Elegant */
      --bg:#f4f2ee;         /* pearl */
      --bg2:#ffffff;
      --panel: rgba(255,255,255,.78);
      --card: rgba(255,255,255,.86);
      --card2: rgba(255,255,255,.72);
      --line: rgba(20,20,20,.10);
      --line2: rgba(20,20,20,.14);
      --text:#151515;
      --muted:#5a5f6b;

      --shadow: 0 22px 60px rgba(14,14,14,.10);
      --shadowSoft: 0 12px 28px rgba(14,14,14,.10);
      --goldSoftShadow: 0 18px 50px rgba(191,149,63,.22);

      --glass: rgba(255,255,255,.78);
      --glass2: rgba(255,255,255,.58);
      --blur: blur(16px);
    }

    *{ box-sizing:border-box; }
    html{ color-scheme: dark; }
    html[data-theme="light"]{ color-scheme: light; }

    body{
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      margin:0;
      min-height:100vh;
      color: var(--text);
      background:
        radial-gradient(1200px 700px at 18% 12%, rgba(191,149,63,.22), transparent 58%),
        radial-gradient(900px 600px at 80% 20%, rgba(252,246,186,.10), transparent 60%),
        radial-gradient(900px 600px at 40% 90%, rgba(80,110,255,.10), transparent 62%),
        linear-gradient(180deg, var(--bg2) 0%, var(--bg) 58%, var(--bg2) 100%);
    }
    html[data-theme="light"] body{
      background:
        radial-gradient(1200px 700px at 18% 12%, rgba(191,149,63,.18), transparent 62%),
        radial-gradient(900px 600px at 80% 10%, rgba(252,246,186,.12), transparent 62%),
        linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
    }

    a{ color: inherit; }
    .theme-logo-light{ display:none; }
    .theme-logo-dark{ display:block; }
    html[data-theme="light"] .theme-logo-light{ display:block; }
    html[data-theme="light"] .theme-logo-dark{ display:none; }
    .no-print{ padding: 176px 26px 26px; max-width: 1180px; margin: 0 auto; }

    /* ---------------------------------------------------------
       Topbar (fixed, full-width)
    --------------------------------------------------------- */
    .topbar{
      display:grid;
      grid-template-columns: minmax(360px, 1fr) auto;
      justify-content:space-between;
      align-items:start;
      gap:12px 16px;

      position:fixed;
      top:0; left:0; right:0;
      z-index: 1000;

      margin:0;
      padding: 14px clamp(16px, 3vw, 28px);
      border-radius: 0;
      border-bottom:1px solid var(--line);
      background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.35));
      box-shadow: 0 18px 50px rgba(0,0,0,.55);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);

      overflow: hidden;
      isolation: isolate;
    }
    html[data-theme="light"] .topbar{
      background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
      border-bottom-color: rgba(20,20,20,.10);
      box-shadow: 0 14px 40px rgba(0,0,0,.12);
    }
    .topbar:before{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(900px 260px at 20% 0%, rgba(191,149,63,.16), transparent 58%);
      pointer-events:none;
      z-index:-1;
    }


    .brand{ display:flex; align-items:flex-start; gap:12px; min-width: 0; width:100%; }
    .brand-logo{
      width: 42px; height: 42px;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
      display:grid; place-items:center;
      box-shadow: var(--shadowSoft);
    }
    html[data-theme="light"] .brand-logo{
      border-color: rgba(20,20,20,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.70));
    }
    h1{ margin:0; font-size: 16px; letter-spacing:.2px; line-height:1.2; }
    .topbar p{ margin:3px 0 0; font-size: 12px; color: var(--muted); }

    .meta-wrap{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; max-width:100%; }
    .meta-pill{
      display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;
      padding: 8px 10px;
      border-radius: 999px;
      border:1px solid var(--line);
      background: rgba(0,0,0,.16);
      box-shadow: var(--shadowSoft);
    }
    html[data-theme="light"] .meta-pill{ background: rgba(255,255,255,.65); }

    .pill{
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.04);
      font-size:12px;
      color: var(--muted);
      white-space:nowrap;
    }
    .meta-pill-identity .pill:nth-child(2){
      max-width: 260px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    html[data-theme="light"] .pill{ background: rgba(255,255,255,.85); }

    .logout-mini{
      padding: 10px 12px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,0,0,.10);
      color: rgba(255,255,255,.90);
      text-decoration:none;
      font-weight:900;
      font-size:12px;
      letter-spacing:.4px;
      cursor:pointer;
      white-space:nowrap;
      transition: transform .12s ease, border-color .12s ease, filter .12s ease;
    }
    html[data-theme="light"] .logout-mini{
      color:#7a1212;
      border-color: rgba(122,18,18,.20);
      background: rgba(255,0,0,.07);
    }
    .logout-mini:hover{ transform: translateY(-1px); filter: brightness(1.06); }

    /* ---------------------------------------------------------
       Theme Toggle (Luxury slider)
    --------------------------------------------------------- */
    .theme-toggle{
      display:flex; align-items:center; gap:10px;
      padding: 10px 12px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, var(--card2), rgba(0,0,0,.00));
      box-shadow: var(--shadowSoft);
      cursor:pointer;
      user-select:none;
    }
    .theme-toggle .t-ico{
      width: 18px; height: 18px;
      opacity:.95;
    }
    .theme-track{
      width: 54px; height: 28px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.20);
      position: relative;
      overflow:hidden;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
    }
    html[data-theme="light"] .theme-track{
      border-color: rgba(20,20,20,.14);
      background: rgba(255,255,255,.75);
      box-shadow: inset 0 0 0 1px rgba(20,20,20,.08);
    }
    .theme-track:before{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(120px 40px at 20% 20%, rgba(191,149,63,.28), transparent 60%);
      opacity:.85;
    }
    .theme-thumb{
      width: 22px; height: 22px;
      border-radius: 999px;
      position:absolute; top:2px; left:2px;
      background: var(--gold-grad);
      box-shadow: 0 10px 20px rgba(0,0,0,.35);
      transition: transform .26s cubic-bezier(.2,.8,.2,1);
    }
    html[data-theme="light"] .theme-thumb{
      box-shadow: 0 10px 20px rgba(0,0,0,.18), var(--goldSoftShadow);
    }
    html[data-theme="light"] .theme-thumb{ transform: translateX(26px); }

    .theme-label{
      font-size:12px;
      letter-spacing:.8px;
      font-weight:900;
      color: var(--muted);
      text-transform: uppercase;
    }

    /* ---------------------------------------------------------
       Navigation (subtle, premium — gold only as accent)
    --------------------------------------------------------- */
    .nav{ display:flex; gap:10px; margin-bottom: 18px; flex-wrap:wrap; }
    .nav a{
      flex:1; min-width: 165px;
      display:flex; align-items:center; justify-content:center; gap:10px;
      padding: 12px 12px;
      border-radius: 16px;
      text-decoration:none;
      font-weight:900;
      letter-spacing:.6px;
      font-size: 12px;

      color: rgba(255,255,255,.88);
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);

      transition: transform .12s ease, border-color .12s ease, filter .12s ease, background .12s ease;
      position:relative;
      overflow:hidden;
    }
    html[data-theme="light"] .nav a{
      color: rgba(20,20,20,.86);
      background: rgba(255,255,255,.78);
      border-color: rgba(20,20,20,.10);
    }
    .nav a i[data-lucide]{ width: 16px; height: 16px; opacity:.92; color: rgba(252,246,186,.85); }
    html[data-theme="light"] .nav a i[data-lucide]{ color: rgba(155,110,25,.75); }

    .nav a:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.045);
      border-color: rgba(191,149,63,.28);
      filter: brightness(1.02);
    }
    html[data-theme="light"] .nav a:hover{
      background: rgba(255,255,255,.92);
      border-color: rgba(191,149,63,.22);
    }

    /* active = subtle highlight + small gold line (no full gold fill) */
    .nav a.active{
      background: rgba(255,255,255,.11);
      border-color: rgba(191,149,63,.40);
      color: rgba(255,255,255,.98);
      box-shadow: 0 12px 26px rgba(0,0,0,.24), 0 0 0 1px rgba(252,246,186,.10), 0 0 30px rgba(191,149,63,.16);
      filter: brightness(1.04);
    }
    html[data-theme="light"] .nav a.active{
      background: rgba(255,255,255,.99);
      color: rgba(20,20,20,.94);
      box-shadow: 0 14px 30px rgba(0,0,0,.12), 0 0 0 1px rgba(191,149,63,.18), 0 0 22px rgba(191,149,63,.14);
    }
    .nav a.active i[data-lucide]{ color: rgba(252,246,186,.92); }


    /* ---------------------------------------------------------
       Cards / Tables / Forms
    --------------------------------------------------------- */
    .card{
      background: linear-gradient(180deg, var(--card2), rgba(0,0,0,.00));
      border: 1px solid var(--line);
      border-radius: var(--radius2);
      padding: 18px;
      box-shadow: var(--shadowSoft);
      margin-bottom: 18px;
      position: relative;
      overflow: hidden;
    }
    .card:before{
      content:"";
      position:absolute;
      inset:-2px;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(191,149,63,.55), rgba(252,246,186,.08), rgba(191,149,63,.25));
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events:none;
      opacity:.55;
    }
    html[data-theme="light"] .card:before{ opacity:.38; }

    .card h3{
      margin:0 0 12px;
      font-size: 13px;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--gold2);
    }
    html[data-theme="light"] .card h3{ color: #3a2b12; }

    .grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    @media (max-width: 980px){ .grid-2{ grid-template-columns: 1fr; } }

    input, select, textarea{
      width:100%;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      color: var(--text);
      outline:none;
      transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
    }
    html[data-theme="light"] input,
    html[data-theme="light"] select,
    html[data-theme="light"] textarea{
      background: rgba(255,255,255,.92);
      color: var(--text);
      border-color: rgba(20,20,20,.12);
    }
    input:focus, select:focus, textarea:focus{
      border-color: rgba(191,149,63,.55);
      box-shadow: 0 0 0 4px rgba(191,149,63,.16);
    }

    /* ---------------------------------------------------------
       Selects: premium, non-system look
    --------------------------------------------------------- */
    select{
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      padding-right: 42px;
      border-color: rgba(191,149,63,.24);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23EBD58E' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 14px 14px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 10px 24px rgba(0,0,0,.18);
    }
    select:hover{
      border-color: rgba(191,149,63,.38);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 12px 28px rgba(0,0,0,.24);
    }
    html[data-theme="light"] select{
      border-color: rgba(191,149,63,.30);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.86),
        0 8px 18px rgba(0,0,0,.08);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23956B1B' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    }
    select::-ms-expand{ display:none; }
    select option{
      background-color: #141416;
      color: #eef0f4;
    }
    html[data-theme="light"] select option{
      background-color: #ffffff;
      color: #161616;
    }


    table{ width:100%; border-collapse: collapse; }
    th, td{ padding: 10px 10px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: top; }
    th{ color: var(--muted); text-align:left; font-weight:900; letter-spacing:.6px; font-size: 11px; text-transform: uppercase; }
    tr:hover td{ background: rgba(191,149,63,.06); }

    /* ---------------------------------------------------------
       Buttons — unify to brushed gold gradient for primary CTAs
    --------------------------------------------------------- */
    .btn, button, .btn-small, .btn-mini{
      font-family: inherit;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      color: var(--text);
      font-weight: 900;
      letter-spacing: .4px;
      text-decoration:none;
      cursor:pointer;
      transition: transform .12s ease, filter .12s ease, border-color .12s ease;
    }
    .btn:hover{ transform: translateY(-1px); filter: brightness(1.04); border-color: rgba(191,149,63,.35); }

    /* Primary actions: keep gold only for explicit CTAs */
    .btn-gold, .btn-cta{
      background: var(--gold-grad) !important;
      color:#141414 !important;
      border-color: rgba(191,149,63,.55) !important;
      box-shadow: var(--goldSoftShadow);
    }
    .btn-gold:hover, .btn-cta:hover{ filter: brightness(1.06); }

    /* Subtle primary (default): premium neutral with gold edge */
    .btn-primary{
      background: rgba(255,255,255,.055) !important;
      color: rgba(255,255,255,.92) !important;
      border-color: rgba(191,149,63,.32) !important;
      box-shadow: none !important;
    }
    html[data-theme="light"] .btn-primary{
      background: rgba(255,255,255,.92) !important;
      color: rgba(20,20,20,.88) !important;
      border-color: rgba(191,149,63,.22) !important;
    }
    .btn-primary:hover{ filter: brightness(1.03); border-color: rgba(191,149,63,.45) !important; }


    .btn-danger{ background: rgba(255,0,0,.10); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.90); }
    html[data-theme="light"] .btn-danger{ color:#7a1212; border-color: rgba(122,18,18,.20); background: rgba(255,0,0,.07); }

    .btn-small, .btn-mini{
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding: 9px 12px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      color: var(--text);
      font-weight: 900;
      letter-spacing: .35px;
      cursor:pointer;
      text-decoration:none;
      white-space:nowrap;
      transition: transform .12s ease, filter .12s ease, border-color .12s ease;
      font-size: 12px;
    }
    .btn-mini:hover, .btn-small:hover{ transform: translateY(-1px); filter: brightness(1.04); border-color: rgba(191,149,63,.35); }

    
    /* ---------------------------------------------------------
       Button system improvements (fix legacy inline buttons)
    --------------------------------------------------------- */
    button{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      color: var(--text);
      font-weight: 900;
      letter-spacing: .4px;
      cursor:pointer;
      transition: transform .12s ease, filter .12s ease, border-color .12s ease;
      white-space:nowrap;
    }
    button:hover{ transform: translateY(-1px); filter: brightness(1.04); border-color: rgba(191,149,63,.35); }
    button:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

    .btn-block{ width:100%; }

    .btn-ok{
      background: linear-gradient(135deg, rgba(40,167,69,.95), rgba(110,220,140,.80)) !important;
      color:#07130a !important;
      border-color: rgba(110,220,140,.40) !important;
      box-shadow: 0 18px 40px rgba(40,167,69,.18);
    }
    .btn-ok:hover{ filter: brightness(1.06); }

    /* Square / compact action buttons used across lists */
    .btn-sq{
      height: 32px;
      padding: 0 12px;
      border-radius: 12px;
      font-size: 12px;
      line-height: 1;
      width:auto !important;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.92);
          display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-decoration: none;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    }
    .btn-sq.is-gold{ background: var(--gold-grad); color:#141414; border-color: rgba(191,149,63,.55); box-shadow: var(--goldSoftShadow); }
    .btn-sq.is-blue{ background: linear-gradient(135deg, rgba(43,108,255,.95), rgba(120,160,255,.75)); border-color: rgba(120,160,255,.35); }
    .btn-sq.is-ghost{ background: rgba(255,255,255,.08); }
    .btn-sq.is-danger{ background: linear-gradient(135deg, rgba(255,77,77,.35), rgba(255,77,77,.18)); border-color: rgba(255,77,77,.35); }

    .btn-sq:hover{ filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
    html[data-theme="light"] .btn-sq:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.10); }
    .btn-sq:active{ transform: translateY(0px); filter: brightness(1.02); }

    .btn-sq.is-icon{
      width: 44px !important;
      padding: 0 !important;
    }

    .sr-only{
      position:absolute !important;
      width:1px; height:1px;
      padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0);
      white-space:nowrap; border:0;
    }


    html[data-theme="light"] .btn-sq{
      background: rgba(0,0,0,.04);
      color: rgba(15,15,15,.88);
      border-color: rgba(191,149,63,.22);
    }
    html[data-theme="light"] .btn-sq.is-danger{
      background: rgba(255,77,77,.10);
      border-color: rgba(255,77,77,.25);
      color: rgba(90,16,16,.90);
    }

    .form-actions{
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
      align-items:center;
      margin-top: 10px;
    }
    .form-actions .btn{ flex: 0 0 auto; }
    @media (max-width: 640px){
      .form-actions .btn{ width:100%; }
    }

    
    .prot-actions .btn-sq{ text-decoration:none; }
/* ---------------------------------------------------------
       Lists / rows alignment (CRM, Protokoły, Lista prac)
    --------------------------------------------------------- */
    .client-item{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding: 12px 12px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
      margin: 10px 0;
    }
    html[data-theme="light"] .client-item{
      background: rgba(255,255,255,.78);
      border-color: rgba(191,149,63,.20);
      box-shadow: 0 10px 26px rgba(191,149,63,.10);
    }
    .client-item strong{ font-size: 15px; letter-spacing:.2px; }
    .client-item small{ color: rgba(255,255,255,.72); }
    html[data-theme="light"] .client-item small{ color: rgba(20,20,20,.70); }

    .prot-actions{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap: 8px;
      flex-wrap:wrap;
      flex: 0 0 auto;
    }
    .client-main{ flex: 1 1 auto; min-width:0; }

    /* search input in CRM / Protokoły */
    #crmS, #protoSearch, input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea, select{
      border-radius: 16px;
    }

    /* protocol list item wrapper if present */
    .proto-row, .crm-row{ margin: 10px 0; }

    /* Fix dense blocks on desktop: allow cards to use full width nicely */
    .card h3{ margin-bottom: 12px; }
/* Make existing gold buttons use the required gradient */
    .btn-gold, .btn-gold2, .btn-gold-mini, .btn-gold-small{
      background: var(--gold-grad) !important;
      color:#141414 !important;
      border-color: rgba(191,149,63,.55) !important;
    }

    /* ---------------------------------------------------------
       Premium Modals (glass + blur + gold details)
    --------------------------------------------------------- */
    .modal, .sig-modal{
      position: fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      padding: 24px;
      background: rgba(0,0,0,.55);
      backdrop-filter: var(--blur);
      -webkit-backdrop-filter: var(--blur);
      z-index: 9999;
    }
    html[data-theme="light"] .modal, html[data-theme="light"] .sig-modal{
      background: rgba(20,20,20,.22);
    }
    .modal.open, .sig-modal.open{ display:flex; }

    .modal-card, .sig-box{
      width: min(920px, 100%);
      border-radius: 22px;
      border: 1px solid rgba(191,149,63,.40);
      background: linear-gradient(180deg, var(--glass), var(--glass2));
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .modal-card:before, .sig-box:before{
      content:"";
      position:absolute; inset:-2px;
      background: linear-gradient(135deg, rgba(191,149,63,.70), rgba(252,246,186,.08), rgba(170,119,28,.45));
      opacity:.65;
      pointer-events:none;
      mix-blend-mode: overlay;
    }
    .modal-head{
      padding: 16px 18px;
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      border-bottom: 1px solid rgba(255,255,255,.10);
    }
    html[data-theme="light"] .modal-head{ border-bottom-color: rgba(20,20,20,.10); }
    .modal-body{ padding: 18px; position:relative; }
    .modal-title{ margin:0; font-size: 13px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--gold2); }
    html[data-theme="light"] .modal-title{ color:#3a2b12; }

    /* ---------------------------------------------------------
       Small details
    --------------------------------------------------------- */
    .muted{ color: var(--muted); }
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
    }
    .badge i[data-lucide]{ width: 14px; height: 14px; }

    /* Existing thumbs */
    .thumb{
      border-radius: 14px;
      border: 1px solid var(--line);
      overflow:hidden;
      background: rgba(255,255,255,.03);
      box-shadow: var(--shadowSoft);
    }

    /* Print */
    @media print{
      body{ background:#fff !important; color:#000 !important; }
      .no-print{ display:none !important; }
    }

  
/* === QUICK INTAKE: TWO-COLUMN LAYOUT === */
.quick-intake-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px 18px;
}
@media(max-width: 900px){
  .quick-intake-grid{ grid-template-columns:1fr; }
}
.quick-intake-actions{
  grid-column:1 / -1;
  display:flex;
  gap:14px;
  margin-top:10px;
}
.quick-intake-actions .btn{ flex:1; }

/* === SOFT LUXURY GOLD BUTTONS === */
.btn-gold,
.btn-cta{
  background: linear-gradient(180deg, #EAD58B, #D6B55E);
  color:#1a1a1a;
  border:1px solid rgba(191,149,63,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 6px 18px rgba(0,0,0,.35);
}
.btn-gold:hover,
.btn-cta:hover{
  background: linear-gradient(180deg, #F1E1A6, #DDBE6C);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 10px 26px rgba(0,0,0,.45);
}

/* Reduce gold on secondary functional buttons */
.btn-primary{
  background:#1f1f1f;
  border:1px solid rgba(191,149,63,.35);
  color:#f5f5f5;
}


/* === HOTFIX v5: ensure quick intake two columns + override gold intensity === */
#mainForm .row2{
  display:grid !important;
  grid-template-columns: 1fr 1fr;
  gap:14px 18px;
}
@media(max-width: 900px){
  #mainForm .row2{ grid-template-columns:1fr; }
}
#mainForm input{ width:100%; }
#mainForm .form-actions{
  display:flex !important;
  gap:14px;
  margin-top:12px;
}
#mainForm .form-actions .btn{
  flex:1;
  min-width: 240px;
}
@media(max-width: 700px){
  #mainForm .form-actions{ flex-direction:column; }
  #mainForm .form-actions .btn{ width:100%; min-width:0; }
}
/* Softer gold (force override) */
.btn-gold,
.btn-cta{
  background: linear-gradient(180deg, #E7D08A, #D1AE59) !important;
  border:1px solid rgba(191,149,63,.50) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 6px 16px rgba(0,0,0,.32) !important;
}
.btn-gold:hover,
.btn-cta:hover{
  background: linear-gradient(180deg, #EFE0A7, #D8B867) !important;
}



/* === TYPOGRAPHY: Montserrat === */
:root{
  --font-main: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body, button, input, textarea, select{
  font-family: var(--font-main) !important;
}

/* === PRACOWNICY: stabilny układ listy + pola rozliczeń === */
.emp-month-select{
  width: auto !important;
  min-width: 220px;
  max-width: 240px;
  height: auto;
  line-height: 1.1;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 800;
  letter-spacing: .4px;
  border-color: rgba(191,149,63,.35) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important;
}
html[data-theme="light"] .emp-month-select{
  color: rgba(20,20,20,.90) !important;
  border-color: rgba(191,149,63,.28) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.88)) !important;
}

.emp-row{
  display: grid !important;
  grid-template-columns: minmax(460px, 1fr) minmax(320px, 420px);
  gap: 16px;
  align-items: start !important;
}
.emp-col{ min-width: 0; }

.emp-card{ display:block !important; }
.emp-head{ min-width:0; }
.emp-basic-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap:8px 16px;
}
.emp-basic-item{
  display:flex;
  gap:6px;
  align-items:baseline;
  min-width:0;
}
.emp-basic-item span{
  font-size:12px;
  letter-spacing:.2px;
  opacity:.72;
  font-weight:700;
}
.emp-basic-item b{
  font-size:14px;
  font-weight:800;
  color: rgba(255,255,255,.92);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html[data-theme="light"] .emp-basic-item span{
  color: rgba(20,20,20,.72);
  opacity: 1;
}
html[data-theme="light"] .emp-basic-item b{
  color: rgba(20,20,20,.92);
}

.emp-details{
  margin-top:12px;
  padding-top:12px;
  border-top: 1px solid rgba(255,255,255,.12);
}
html[data-theme="light"] .emp-details{
  border-top-color: rgba(20,20,20,.12);
}
.emp-details > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(191,149,63,.30);
  background: rgba(255,255,255,.04);
  font-weight:800;
  letter-spacing:.4px;
}
html[data-theme="light"] .emp-details > summary{
  color: rgba(20,20,20,.88);
  border-color: rgba(191,149,63,.24);
  background: rgba(191,149,63,.08);
}
.emp-details > summary::-webkit-details-marker{ display:none; }
.emp-details[open] > summary{
  background: linear-gradient(180deg, #EAD58B, #D6B55E);
  color:#1a1a1a;
  border-color: rgba(191,149,63,.55);
}
.emp-details-body{
  margin-top:12px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 520px);
  gap:18px;
  align-items:start;
}
.emp-details-body > .emp-col{
  min-width:0;
  overflow:hidden;
}

.emp-form-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.emp-form-grid-3{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
}
.emp-form-grid-2 .emp-field,
.emp-form-grid-3 .emp-field{
  margin: 0;
}
.emp-form-grid-2 .emp-field input,
.emp-form-grid-2 .emp-field select,
.emp-form-grid-3 .emp-field input,
.emp-form-grid-3 .emp-field select{
  margin-bottom: 0 !important;
}

.emp-salary-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.emp-att-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.emp-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.emp-field span{
  font-size:12px;
  letter-spacing:.2px;
  opacity:.86;
  font-weight:700;
}
html[data-theme="light"] .emp-field span{
  color: rgba(20,20,20,.74);
  opacity: 1;
}

.emp-salary-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
  gap:10px;
  flex-wrap:wrap;
}
.emp-salary-total{
  font-size:12px;
  opacity:.85;
  min-width:0;
  flex:1 1 220px;
  overflow-wrap:anywhere;
}
html[data-theme="light"] .emp-salary-total{
  color: rgba(20,20,20,.82);
  opacity: 1;
}
.emp-money{
  font-size:14px;
  line-height:1.2;
  white-space:normal;
}
.emp-col-salary .btn-sq{
  flex:0 0 auto;
}
.emp-col-main .btn-sq{
  margin-left:auto;
}

@media (max-width: 1180px){
  .emp-basic-grid{
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
  .emp-row{
    grid-template-columns: 1fr;
  }
  .emp-details-body{
    grid-template-columns: 1fr;
  }
  .emp-col-salary{
    max-width: 100%;
  }
}

@media (max-width: 760px){
  .emp-month-select{
    min-width: 100%;
    max-width: 100%;
  }
  .emp-basic-grid{
    grid-template-columns: 1fr;
  }
  .emp-form-grid-2,
  .emp-form-grid-3{
    grid-template-columns: 1fr;
  }
  .emp-att-grid{
    grid-template-columns: 1fr;
  }
  .emp-salary-footer{
    flex-direction:column;
    align-items:flex-start;
  }
  .emp-col-main .btn-sq,
  .emp-col-salary .btn-sq{
    width:100% !important;
    justify-content:center;
  }
}

/* === LIST SPACING: more vertical breathing room (Lista prac, Protokoły, CRM lists) === */
.client-item{
  padding: 14px 14px !important;
  margin: 14px 0 !important;
}
.proto-row, .crm-row{
  margin: 14px 0 !important;
}

/* === SMS LAYOUT: spacing and alignment cleanup === */
.sms-layout{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.sms-layout .sms-card{
  padding: 20px 20px 18px !important;
}

.sms-layout .sms-card-body{
  margin-top: 2px;
}

.sms-layout .sms-grid{
  display:grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  margin-bottom: 12px;
}

.sms-layout .lbl{
  display:block;
  margin-bottom: 8px !important;
  font-weight: 800;
  letter-spacing: .25px;
}

.sms-layout .smsPickBtnRow{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 2px;
}

.sms-layout .smsPickBtnRow #smsTel{
  margin-bottom: 0 !important;
}

.sms-layout #smsTpl{
  margin-bottom: 0 !important;
}

.sms-layout #smsMsg{
  margin-top: 4px;
  min-height: 116px;
  margin-bottom: 0 !important;
}

.sms-layout .sms-actions{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 14px;
}

.sms-layout .sms-actions .btn-lux{
  min-width: 170px;
}

.sms-layout #smsRes{
  margin-top: 12px !important;
  min-height: 20px;
}

.sms-layout .sms-hint{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.58);
  line-height: 1.45;
}

.sms-layout .sms-mass-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
  margin-bottom: 6px;
}

.sms-layout .sms-mass-subtitle{
  font-size:12px;
  color: rgba(255,255,255,.58);
  font-weight: 800;
  line-height: 1.4;
  max-width: 360px;
  text-align:right;
}

.sms-layout .sms-mass-form{
  margin-top: 12px !important;
}

.sms-layout #massSmsNumbers,
.sms-layout #massSmsMsg{
  margin-bottom: 0 !important;
}

@media (max-width: 900px){
  .sms-layout .sms-grid{
    grid-template-columns: 1fr;
  }

  .sms-layout .sms-actions{
    gap: 10px;
  }

  .sms-layout .sms-actions .btn-lux{
    min-width: 0;
    width: 100%;
  }

  .sms-layout .sms-mass-subtitle{
    max-width: 100%;
    text-align:left;
  }
}

/* === SMS picker modal (Wybierz z bazy) === */
.smsPickOverlay{
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.smsPickModal{
  width: min(960px, 96vw);
  max-height: 82vh;
  border-radius: 18px;
  border: 1px solid rgba(191,149,63,.32);
  background:
    radial-gradient(1000px 160px at 0% -20%, rgba(252,246,186,.13), transparent 60%),
    linear-gradient(180deg, rgba(16,16,18,.96), rgba(12,12,14,.94));
  box-shadow: 0 28px 70px rgba(0,0,0,.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.smsPickTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.smsPickTitle{
  display:flex;
  align-items:center;
  gap: 9px;
  font-size: 21px;
  font-weight: 800;
  color: rgba(255,255,255,.92);
  letter-spacing: .2px;
}

.smsPickClose{
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.9) !important;
  font-weight: 800 !important;
}

.smsPickSearchWrap{
  padding: 12px 16px;
}

.smsPickSearch{
  margin: 0 !important;
  height: 46px;
}

.smsPickBody{
  padding: 0 16px 16px;
  min-height: 0;
  flex: 1 1 auto;
}

.smsPickList{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  padding: 10px;
  max-height: calc(82vh - 170px);
  overflow-y: auto;
}

.smsPickEmpty{
  padding: 14px 10px;
  color: rgba(255,255,255,.66);
  font-weight: 700;
}

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

.smsPickTile{
  border: 1px solid rgba(191,149,63,.22);
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  padding: 10px 12px 10px 46px;
  position: relative;
  min-height: 92px;
}

.smsPickAdd{
  position:absolute;
  left:10px;
  top:10px;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.92) !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

.smsPickName{
  font-size: 26px;
  line-height: 1.1;
  font-weight: 800;
  color: rgba(255,255,255,.95);
  margin-bottom: 4px;
}

.smsPickMeta{
  font-size: 18px;
  line-height: 1.2;
  color: rgba(255,255,255,.78);
  font-weight: 650;
  margin-bottom: 3px;
}

.smsPickTel{
  font-size: 16px;
  color: rgba(235,213,142,.92);
  font-weight: 800;
}

html[data-theme="light"] .smsPickModal{
  background:
    radial-gradient(1000px 160px at 0% -20%, rgba(252,246,186,.30), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,246,241,.98));
  box-shadow: 0 20px 50px rgba(0,0,0,.16);
}
html[data-theme="light"] .smsPickTitle{
  color: rgba(20,20,20,.92);
}
html[data-theme="light"] .smsPickClose{
  border-color: rgba(20,20,20,.16) !important;
  background: rgba(0,0,0,.04) !important;
  color: rgba(20,20,20,.86) !important;
}
html[data-theme="light"] .smsPickList{
  border-color: rgba(20,20,20,.10);
  background: rgba(255,255,255,.68);
}
html[data-theme="light"] .smsPickTile{
  border-color: rgba(191,149,63,.30);
  background: rgba(255,255,255,.82);
}
html[data-theme="light"] .smsPickName{
  color: rgba(20,20,20,.92);
}
html[data-theme="light"] .smsPickMeta{
  color: rgba(20,20,20,.68);
}
html[data-theme="light"] .smsPickAdd{
  border-color: rgba(20,20,20,.16) !important;
  background: rgba(0,0,0,.05) !important;
  color: rgba(20,20,20,.88) !important;
}

@media (max-width: 980px){
  .smsPickGrid{
    grid-template-columns: 1fr;
  }
  .smsPickTitle{
    font-size: 18px;
  }
  .smsPickName{
    font-size: 22px;
  }
  .smsPickMeta{
    font-size: 16px;
  }
}

@media (max-width: 760px){
  .smsPickModal{
    width: min(96vw, 96vw);
    max-height: 88vh;
  }
  .smsPickTop{
    padding: 12px 12px 10px;
  }
  .smsPickClose{
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap;
  }
  .smsPickBody{
    padding: 0 12px 12px;
  }
  .smsPickList{
    max-height: calc(88vh - 156px);
  }
  .smsPickTile{
    min-height: 84px;
    padding: 9px 10px 9px 42px;
  }
  .smsPickAdd{
    left: 8px;
    top: 8px;
    width: 26px !important;
    height: 26px !important;
  }
  .smsPickName{
    font-size: 19px;
  }
  .smsPickMeta{
    font-size: 14px;
  }
  .smsPickTel{
    font-size: 14px;
  }
}

/* === Custom modules: responsive hardening (mobile/tablet) === */
.crm-car-row{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
}

@media (max-width: 1024px){
  #qaPickerBody .row2,
  #protocolPickerWrap .row2{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #qaPickerBody .row2 > div:empty,
  #protocolPickerWrap .row2 > div:empty{
    display: none !important;
  }

  #protocolPickerWrap .btn-lux{
    width: 100% !important;
    justify-content: center;
  }

  .crm-cars-head{
    flex-direction: column;
    align-items: stretch !important;
  }
  .crm-cars-add-btn{
    width: 100% !important;
    justify-content: center;
  }

  .crm-car-row{
    grid-template-columns: 1fr 1fr;
  }
  .crm-car-row .crm-car-del{
    grid-column: 1 / -1;
    width: 100% !important;
    justify-content: center;
  }
}

@media (max-width: 700px){
  .crm-car-row{
    grid-template-columns: 1fr;
  }
}

/* If the list container uses generic rows, give them spacing too */
.list-row, .work-row, .work-item, .proto-item{
  margin: 14px 0 !important;
}

/* === QUIET LUXURY GOLD: soften all gold variants incl. Lista prac "PRZYJ." === */
.btn-gold,
.btn-gold2,
.btn-gold-mini,
.btn-gold-small,
a.btn-gold,
button.btn-gold,
input.btn-gold{
  background: linear-gradient(180deg, #EAD58B, #D6B55E) !important;
  color:#1a1a1a !important;
  border: 1px solid rgba(191,149,63,.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 6px 18px rgba(0,0,0,.32) !important;
}
.btn-gold:hover,
.btn-gold2:hover,
.btn-gold-mini:hover,
.btn-gold-small:hover{
  background: linear-gradient(180deg, #F1E1A6, #DDBE6C) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 10px 26px rgba(0,0,0,.42) !important;
}

/* Keep subtle, not neon */
.btn-gold:active,
.btn-gold2:active,
.btn-gold-mini:active,
.btn-gold-small:active{
  transform: translateY(1px);
}



/* === HOTFIX: Lista prac PRZYJ. uses .btn-sq.is-gold (not .btn-gold) === */
.btn-sq.is-gold{
  background: linear-gradient(180deg, #EAD58B, #D6B55E) !important;
  color:#1a1a1a !important;
  border:1px solid rgba(191,149,63,.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 6px 18px rgba(0,0,0,.30) !important;
}
.btn-sq.is-gold:hover{
  background: linear-gradient(180deg, #F1E1A6, #DDBE6C) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    0 10px 26px rgba(0,0,0,.40) !important;
}

/* === MORE VERTICAL SPACING (Lista prac / Protokoły) === */
.client-item{
  padding: 16px 16px !important;
  margin: 18px 0 !important;
}
.client-item + .client-item{ margin-top: 18px !important; }

/* protokoły rows/cards often reuse prot-actions inside a wrapper; add spacing for direct wrappers */
.prot-row, .proto-row, .proto-item, .protocol-row, .protocol-item{
  margin: 18px 0 !important;
}



/* === MORE VERTICAL SPACING: FORMS (Szybkie przyjęcie + Protokoły) === */

/* inputs & textareas global */
input, textarea, select{
  margin-bottom: 14px !important;
}

/* rows/groups in quick intake */
#mainForm .row,
#mainForm .row2,
#mainForm .row3{
  gap: 18px !important;
  margin-bottom: 18px !important;
}

/* protocol forms */
.protocol-form input,
.protocol-form textarea,
.protocol-form select{
  margin-bottom: 16px !important;
}

/* checklist & expandable sections */
.checklist-row,
.checklist-item{
  margin: 10px 0 !important;
}

/* section breathing room */
.section,
.card,
.panel{
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}



/* === DAMAGE MAP (points + description) === */
.damage-pin{
  position:absolute;
  width:20px;
  height:20px;
  border-radius:999px;
  transform: translate(-50%, -50%);
  background: rgba(234,213,139,.92);
  border:1px solid rgba(25,25,25,.55);
  box-shadow: 0 8px 18px rgba(0,0,0,.45);
  z-index:5;
  outline: 2px solid rgba(0,0,0,.25);
}

.damage-pin::after{
  content: attr(data-n);
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -55%);
  font-size:11px;
  font-weight:800;
  color:#141414;
}
.damage-help{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
  color: rgba(255,255,255,.78);
  font-size:13px;
}
.damage-list{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.damage-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
}
.damage-item b{ color: rgba(255,255,255,.92); }
.damage-item small{ color: rgba(255,255,255,.65); }
.damage-item .damage-actions{ display:flex; gap:8px; }
.damage-mini-btn{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.85);
  cursor:pointer;
}
.damage-mini-btn:hover{ background: rgba(255,255,255,.08); }




/* === SIGNATURE MODAL (two separate signature areas) === */
/* v19: signature modal card responsive layout */
#sigModal .modal{ padding:18px !important; }
#sigModal .modal .modal-card{
  width: min(1120px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(191,149,63,.20);
  background: rgba(10,10,12,.62);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
#sigModal .modal .mhead{ position:sticky; top:0; background: rgba(10,10,12,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 10px 6px; margin: -6px -6px 12px -6px; border-bottom: 1px solid rgba(255,255,255,.08);
}
#sigModal .modal .mfoot{ position:sticky; bottom:0; background: rgba(10,10,12,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 12px 6px; margin: 12px -6px -6px -6px; border-top: 1px solid rgba(255,255,255,.08);
}

#sigModal{ display:none; position:fixed; inset:0; z-index:9999; }
#sigModal .modal{ display:none; position:fixed; inset:0; padding:24px; align-items:center; justify-content:center;
  background: rgba(0,0,0,.58); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
#sigModal .modal.open{ display:flex; }
#sigModal .modal .mhead{ width:100%; max-width:1120px; display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
#sigModal .modal .mtitle{ font-weight:900; letter-spacing:.05em; color: rgba(247,231,169,.95); text-transform:uppercase; }
#sigModal .modal .mclose{ padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.9); cursor:pointer; }
#sigModal .modal .mbody{ width:100%; max-width:1120px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#sigModal .modal .panel{ padding:14px !important; border-radius:18px; border:1px solid rgba(191,149,63,.18); background: rgba(10,10,12,.55); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
#sigModal .modal .ptop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
#sigModal .modal .plabel{ font-weight:800; color: rgba(255,255,255,.92); }
#sigModal .modal .pbtn{ padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.9); cursor:pointer; }
#sigModal .modal canvas{ width:100%; height:240px; display:block; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); touch-action: none; }
#sigModal .modal .hint{ margin-top:8px; font-size:12.5px; color: rgba(255,255,255,.72); line-height:1.4; }
#sigModal .modal .mfoot{ width:100%; max-width:1120px; display:flex; justify-content:flex-end; margin-top:14px; }
#sigModal .modal .okbtn{ padding:12px 18px; border-radius:999px; border:1px solid rgba(191,149,63,.35);
  background: linear-gradient(180deg, rgba(234,213,139,.22), rgba(191,149,63,.14));
  color: rgba(255,255,255,.92); font-weight:900; cursor:pointer;
}
#sigModal .modal .okbtn:hover{ border-color: rgba(247,231,169,.55); background: linear-gradient(180deg, rgba(234,213,139,.28), rgba(191,149,63,.18)); }
@media (max-width: 980px){
  #sigModal .modal .mbody{ grid-template-columns: 1fr; }
  #sigModal .modal canvas{ height:220px; }
}

.damage-pin{ pointer-events:auto; }

/* Ensure protocol action buttons are always clickable */
.protocol-actions,
.protocol-actions *{
  pointer-events:auto !important;
}

/* Make sure submit buttons look & act like submits */
button[type="submit"]{ cursor:pointer; }


/* === HOTFIX v11: map layer must never cover protocol action buttons === */
/* v19 FIX: allow clicking on damage map (the wrapper must receive pointer events) */
.damage-pin{ pointer-events:auto !important; }
/* keep buttons above map */
.protocol-actions{ position:relative; z-index:70; }


/* Lift action buttons above any accidental overlays */
.btn-lux{ position:relative; z-index:50 !important; }


/* ---------------------------------------------------------
       Calendar: tool buttons, action buttons, icons
    --------------------------------------------------------- */
    .cal-tools{
      display:flex; gap:8px; align-items:center; flex-wrap:wrap;
    }
    .cal-panel-head{
      margin-bottom: 14px;
    }
    .cal-panel-form{
      display:grid;
      gap:14px;
    }
    .cal-panel-form .cal-panel-row{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
    }
    .cal-panel-form textarea{
      min-height: 86px;
    }
    .cal-panel-form > button[type="submit"]{
      justify-self:start;
      margin-top: 2px;
    }
    .btn-tool{
      display:inline-flex; align-items:center; gap:6px;
      padding:6px 12px; border-radius:12px; font-size:12px; font-weight:700;
      text-decoration:none; color:rgba(255,255,255,.88);
      background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
      transition: background .15s;
    }
    .btn-tool:hover{ background:rgba(255,255,255,.14); }
    html[data-theme="light"] .btn-tool{
      color:rgba(20,20,20,.82); background:rgba(191,149,63,.10); border-color:rgba(191,149,63,.22);
    }
    html[data-theme="light"] .btn-tool:hover{ background:rgba(191,149,63,.18); }
    .btn-tool .ico{ display:inline-flex; align-items:center; flex-shrink:0; }
    .btn-tool .ico svg{ display:block; width:14px; height:14px; }
    .btn-tool .txt{ white-space:nowrap; }

    .cal-actions{
      display:flex; gap:6px; align-items:center; flex-wrap:wrap; flex:0 0 auto;
    }
    .cal-action{
      display:inline-flex; align-items:center; gap:5px;
      padding:5px 10px; border-radius:10px; font-size:11px; font-weight:700;
      text-decoration:none; color:rgba(255,255,255,.85); cursor:pointer;
      background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
      transition: background .15s;
    }
    .cal-action:hover{ background:rgba(255,255,255,.13); }
    html[data-theme="light"] .cal-action{
      color:rgba(20,20,20,.78); background:rgba(191,149,63,.08); border-color:rgba(191,149,63,.18);
    }
    html[data-theme="light"] .cal-action:hover{ background:rgba(191,149,63,.16); }
    .cal-action .ico{ display:inline-flex; align-items:center; flex-shrink:0; }
    .cal-action .ico svg{ display:block; width:14px; height:14px; }

    .pill.mini{
      font-size:11px; padding:4px 10px; border-radius:8px;
      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
      color:rgba(255,255,255,.72); font-weight:700;
    }
    html[data-theme="light"] .pill.mini{
      background:rgba(191,149,63,.08); border-color:rgba(191,149,63,.16); color:rgba(20,20,20,.65);
    }

    /* Calendar edit modal */
    .cal-modal{ position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); padding:16px; }
    .cal-modal > .modal{
      display:block !important; /* override global .modal { display:none } */
      position:relative;
      inset:auto;
      width:min(760px, 100%);
      max-height:calc(100vh - 32px);
      overflow:auto;
      border-radius:18px;
      border:1px solid rgba(191,149,63,.24);
      background:linear-gradient(180deg, rgba(15,18,27,.96), rgba(10,13,20,.94));
      box-shadow:0 18px 46px rgba(0,0,0,.45);
    }
    .cal-modal .mhead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:14px 16px;
      border-bottom:1px solid rgba(255,255,255,.10);
    }
    .cal-modal .mtitle{
      font-weight:900;
      letter-spacing:.06em;
      text-transform:uppercase;
      color:rgba(247,231,169,.95);
      font-size:12px;
    }
    .cal-modal .mclose{
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.06);
      color:rgba(255,255,255,.88);
      cursor:pointer;
      font-weight:800;
    }
    .cal-modal .mbody{ padding:16px; }
    @media (max-width: 900px){
      .cal-panel-head{
        margin-bottom: 10px;
      }
      .cal-panel-form{
        gap:10px;
      }
      .cal-panel-form .cal-panel-row{
        grid-template-columns: 1fr;
        gap:10px;
      }
    }

/* === v12 FIX: ensure protocol action buttons receive clicks === */
/* If any element overlaps the buttons, clicks must pass through except actual interactive parts */

.protocol-actions{
  position:relative !important;
  z-index:9999 !important;
}
.protocol-actions .btn-lux{
  position:relative !important;
  z-index:9999 !important;
}

/* Protocol damage views */
.damage-module{
  margin: 14px 0 18px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(191,149,63,.20);
  background: rgba(255,255,255,.03);
}
.damage-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.damage-title{
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
  color: rgba(247,231,169,.95);
  font-size:12px;
}
.damage-sub{
  color: rgba(255,255,255,.72);
  font-size:12px;
  font-weight:600;
}
.damage-views{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.damage-view-btn{
  margin:0 !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.88) !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.25px;
}
.damage-view-btn.is-active{
  background: linear-gradient(180deg, #EAD58B, #D6B55E) !important;
  color:#1a1a1a !important;
  border-color: rgba(191,149,63,.50) !important;
}
.damage-map{
  position:relative;
  width:100%;
  max-width: 900px;
}
.damage-map-frame{
  position:relative;
  width:100%;
  line-height:0;
}
.damage-map img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: #fff;
}
.damage-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}

@media (max-width: 760px){
  .damage-help{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =========================================================
   Responsive Pack (Tablet + Mobile hardening)
========================================================= */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}

.card, .client-item, .pill, .badge, .btn, button, th, td, p, span, strong, b, small, a{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.nav a span{
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}

/* desktop/tablet default for new topbar wrapper */
.topbar-compact-toggle{
  display: none;
}
.topbar-compact-body{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 1024px){
  .topbar{
    position: sticky !important;
    top: 0;
    z-index: 1200;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
  }
  .no-print{
    padding-top: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .brand{
    width: 100%;
  }
  .brand p{
    display: none;
  }
  .meta-wrap{
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }
  .meta-pill{
    width: 100%;
    border-radius: 14px;
    padding: 8px;
    justify-content: flex-start;
  }
  .pill{
    white-space: normal;
    font-size: 11px;
    line-height: 1.25;
  }
  .theme-toggle{
    margin-left: auto;
  }

  .nav{
    gap: 8px;
    margin-bottom: 12px;
  }
  .nav a{
    min-width: calc(50% - 4px);
    flex: 1 1 calc(50% - 4px);
    padding: 10px 8px;
    font-size: 11px;
    letter-spacing: .3px;
  }

  table{
    table-layout: auto;
  }
  th, td{
    white-space: normal !important;
    word-break: break-word;
    font-size: 12px;
    padding: 8px 6px;
  }

  .row2, .row3{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media (max-width: 1380px){
  .topbar{
    grid-template-columns: minmax(300px, 1fr) auto;
  }
  .meta-pill-identity .pill:nth-child(2){
    max-width: 220px;
  }
}

@media (max-width: 760px){
  h1{
    font-size: 14px;
  }
  .brand-logo{
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }
  .meta-pill .pill:nth-child(n+3){
    display: none;
  }

  .card{
    padding: 12px !important;
    border-radius: 16px;
    margin-bottom: 12px;
  }

  .client-item{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .prot-actions, .cal-actions, .u-actions{
    width: 100%;
    justify-content: stretch;
  }
  .prot-actions .btn-sq,
  .cal-actions .cal-action,
  .u-actions button{
    width: 100% !important;
    justify-content: center;
  }

  .nav a{
    min-width: 100%;
    flex-basis: 100%;
  }
}

@media (max-width: 480px){
  .topbar{
    padding: 8px 10px;
  }
  .no-print{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .btn, button{
    width: 100%;
    justify-content: center;
  }
  input, select, textarea{
    padding: 11px 10px;
    font-size: 16px;
  }
}

/* =========================================================
   Responsive Fix v2 (based on real device screenshots)
========================================================= */
@media (max-width: 1024px){
  body{
    padding-top: env(safe-area-inset-top);
  }

  .topbar{
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 10px !important;
    padding-top: calc(10px + env(safe-area-inset-top)) !important;
    padding-bottom: 10px !important;
  }

  .brand,
  .meta-wrap{
    width: 100% !important;
  }

  .meta-wrap{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: start !important;
  }

  .meta-pill{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    border-radius: 14px !important;
    padding: 8px !important;
  }

  .pill{
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .no-print > .nav:first-of-type{
    margin-top: 18px !important; /* tablet: opuść panel menu */
  }
}

@media (max-width: 760px){
  .topbar{
    position: relative !important; /* telefon: bez zasłaniania menu */
    top: auto !important;
  }

  .meta-wrap{
    grid-template-columns: 1fr !important;
  }

  .topbar-compact-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 38px;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(191,149,63,.34);
    background: rgba(255,255,255,.07);
    color: var(--text);
    font-weight: 900;
    letter-spacing: .8px;
    cursor: pointer;
  }

  .topbar-compact-body{
    display: none;
    gap: 8px;
  }

  .meta-wrap.is-open .topbar-compact-body{
    display: grid;
  }

  .meta-pill{
    grid-template-columns: 1fr !important;
  }

  .pill{
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .logout-mini,
  .theme-toggle,
  .topbar-compact-toggle{
    width: 100% !important;
    justify-content: center !important;
  }

  .no-print > .nav:first-of-type{
    margin-top: 14px !important;
  }
}

/* Ładniejsze checkboxy na urządzeniach mobilnych (regulamin + reszta) */
@media (max-width: 1024px){
  input[type="checkbox"]{
    -webkit-appearance: none;
    appearance: none;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border-radius: 7px;
    border: 1px solid rgba(191,149,63,.50);
    background: rgba(255,255,255,.08);
    display: inline-grid;
    place-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
    cursor: pointer;
    transition: .15s ease;
  }

  input[type="checkbox"]::before{
    content: "";
    width: 12px;
    height: 12px;
    transform: scale(0);
    transition: transform .14s ease-in-out;
    clip-path: polygon(14% 44%, 0 65%, 45% 100%, 100% 18%, 80% 0, 43% 62%);
    background: #1a1a1a;
  }

  input[type="checkbox"]:checked{
    background: linear-gradient(180deg, #EAD58B, #D6B55E);
    border-color: rgba(191,149,63,.70);
    box-shadow: 0 6px 14px rgba(191,149,63,.24);
  }

  input[type="checkbox"]:checked::before{
    transform: scale(1);
  }

  html[data-theme="light"] input[type="checkbox"]{
    background: rgba(255,255,255,.92);
    border-color: rgba(191,149,63,.48);
  }
}

/* =========================================================
   Mobile polish: topbar + Lista prac
========================================================= */
.topbar-actions-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width: 760px){
  .topbar{
    display:grid !important;
    grid-template-columns: 1fr !important;
    align-items:start !important;
    gap: 8px !important;
  }

  .meta-wrap{
    width:100% !important;
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    justify-items:stretch;
  }

  .topbar-compact-body{
    width:100%;
  }

  .meta-pill-identity{
    width:100% !important;
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .meta-pill-identity .pill{
    width:100%;
    min-height: 36px;
    white-space: normal !important;
    justify-content:flex-start;
  }

  .topbar-actions-row{
    width:100%;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .topbar-actions-row .logout-mini,
  .topbar-actions-row .theme-toggle{
    width:100% !important;
    margin:0 !important;
    justify-content:center !important;
  }

  .topbar-actions-row .theme-toggle{
    min-height: 46px;
  }

  .filters{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    margin-bottom: 8px;
  }

  .filters .lp-chip{
    width:100%;
    margin-right:0 !important;
    padding: 10px 10px !important;
    font-size: 18px;
    border-radius: 16px !important;
  }

  .client-item .prot-actions{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap:8px !important;
    width:100% !important;
  }

  .client-item .prot-actions > .btn-sq{
    width:100% !important;
    height: 46px;
    border-radius: 14px;
    justify-content:center;
    font-size: 17px;
  }

  .client-item .status-form{
    width:100%;
    display:grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap:8px;
  }

  .client-item .status-form .btn-mini{
    width:100% !important;
    height: 44px;
    border-radius: 12px;
    justify-content:center;
    margin:0 !important;
    font-size: 18px;
  }

  .client-item .prot-actions .btn-sq.is-icon{
    width:100% !important;
    height: 44px !important;
  }

  .protocol-actions{
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .protocol-actions .btn-lux{
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center;
    line-height: 1.2;
    padding: 12px 10px !important;
    font-size: 16px !important;
  }

  .protocol-actions .btn-lux .arr{
    display: none;
  }
}

/* =========================================================
   Document Center
========================================================= */
.docs-shell{
  display:grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap:18px;
  align-items:start;
}

.docs-sidebar,
.docs-toolbar,
.docs-frame-wrap{
  overflow:hidden;
}

.docs-sidebar-head h3,
.docs-toolbar h3{
  margin:6px 0 8px;
}

.docs-sidebar-head p,
.docs-toolbar p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}

.docs-kicker{
  display:inline-block;
  font-size:11px;
  font-weight:900;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:var(--gold);
}

.docs-nav{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.docs-nav-item{
  display:block;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  text-decoration:none;
  transition:transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.docs-nav-item strong{
  display:block;
  font-size:14px;
  letter-spacing:.2px;
}

.docs-nav-item span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.docs-nav-item:hover{
  transform:translateY(-1px);
  border-color:rgba(191,149,63,.34);
  box-shadow:var(--shadowSoft);
}

.docs-nav-item.is-active{
  border-color:rgba(191,149,63,.42);
  background:linear-gradient(180deg, rgba(191,149,63,.16), rgba(255,255,255,.02));
  box-shadow:var(--goldSoftShadow);
}

.docs-main{
  display:grid;
  gap:18px;
}

.docs-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.docs-toolbar-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.docs-frame-wrap{
  padding:14px;
}

.docs-frame{
  width:100%;
  min-height:calc(100vh - 320px);
  border:1px solid var(--line);
  border-radius:18px;
  background:#0d0d0f;
}

html[data-theme="light"] .docs-nav-item{
  background:rgba(255,255,255,.72);
}

html[data-theme="light"] .docs-nav-item.is-active{
  background:linear-gradient(180deg, rgba(191,149,63,.14), rgba(255,255,255,.88));
}

html[data-theme="light"] .docs-frame{
  background:#ffffff;
}

@media (max-width: 1100px){
  .docs-shell{
    grid-template-columns:1fr;
  }
}

@media (max-width: 720px){
  .docs-toolbar{
    flex-direction:column;
  }

  .docs-frame{
    min-height:72vh;
  }
}

.generators-hero{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:18px;
}

.docs-toolbar--single{
  align-items:flex-start;
}

.generators-tabs-card{
  padding:14px;
}

.generator-tabs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.generator-tab{
  display:block;
  padding:18px 18px 16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  text-decoration:none;
  transition:transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.generator-tab strong{
  display:block;
  font-size:15px;
  letter-spacing:.2px;
}

.generator-tab span{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

.generator-tab:hover{
  transform:translateY(-1px);
  border-color:rgba(191,149,63,.34);
  box-shadow:var(--shadowSoft);
}

.generator-tab.is-active{
  border-color:rgba(191,149,63,.48);
  background:linear-gradient(180deg, rgba(191,149,63,.18), rgba(255,255,255,.02));
  box-shadow:var(--goldSoftShadow);
}

.generator-native-shell{
  display:grid;
  gap:18px;
  width:100%;
}

.generator-native-shell .layout{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  min-height:auto;
  padding:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(1100px 520px at 18% 10%, rgba(191,149,63,.08), transparent 60%),
    linear-gradient(180deg, rgba(10,11,14,.98) 0%, rgba(16,18,22,.96) 100%);
  box-shadow:var(--shadow);
}

.generator-native-shell .sidebar,
.generator-native-shell .panel,
.generator-native-shell .main,
.generator-native-shell .preview{
  border:none !important;
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
}

.generator-native-shell .sidebar,
.generator-native-shell .panel{
  background:
    linear-gradient(180deg, rgba(14,16,20,.98), rgba(17,19,24,.96)) !important;
  border-right:none !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.generator-native-shell .main,
.generator-native-shell .preview{
  background:
    linear-gradient(180deg, #fbf8f2 0%, #f3ecdf 100%) !important;
}

.generator-native-shell .top-nav{
  position:sticky;
  top:0;
  z-index:10;
  padding:12px;
  border:1px solid rgba(191,149,63,.18);
  border-radius:18px;
  background:rgba(248,244,236,.9);
  backdrop-filter:blur(10px);
  box-shadow:0 12px 28px rgba(31,41,51,.10);
}

.generator-native-shell .brand-header,
.generator-native-shell .login-card{
  border-radius:22px;
  border:1px solid rgba(191,149,63,.16);
  box-shadow:none;
}

.generator-native-shell .brand-mark{
  width:58px;
  height:58px;
  margin-bottom:14px;
  font-size:24px;
}

.generator-native-shell .brand-header h1,
.generator-native-shell .sidebar h1,
.generator-native-shell .panel h1{
  font-size:38px;
  line-height:1.05;
}

.generator-native-shell .brand-header .lead{
  font-size:14px;
  max-width:56ch;
}

.generator-native-shell .eyebrow{
  letter-spacing:.22em;
  font-size:10px;
}

.generator-native-shell .card{
  border-radius:20px;
  box-shadow:none;
  margin-bottom:14px;
}

.generator-native-shell .sidebar .card,
.generator-native-shell .panel .card{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.08);
}

.generator-native-shell .main .card,
.generator-native-shell .preview .card{
  background:rgba(255,255,255,.6);
  border-color:rgba(69,53,28,.10);
}

.generator-native-shell .contract-paper,
.generator-native-shell .voucher-support-card,
.generator-native-shell .voucher-public-intro{
  border-radius:22px;
}

.generator-native-shell .contract-paper{
  max-width:none;
  width:100%;
}

.generator-native-shell .voucher-sheet{
  max-width:none;
  width:100%;
}

.generator-native-shell input,
.generator-native-shell textarea,
.generator-native-shell select,
.generator-native-shell button,
.generator-native-shell .button-link,
.generator-native-shell .secondary-button{
  border-radius:14px;
}

.generator-native-shell .preview-frame,
.generator-native-shell .code-output{
  border-radius:20px;
  overflow:hidden;
}

.generator-native-shell .docs-mini{
  display:none;
}

.generator-native-shell .preview-head{
  padding-bottom:10px;
  margin-bottom:14px;
  border-bottom:1px solid rgba(69,53,28,.10);
}

.generator-native-shell .preview-note{
  color:#655d50;
}

.generator-native-shell .contracts-list,
.generator-native-shell .vouchers-list{
  gap:10px;
}

.generator-native-shell .contract-item,
.generator-native-shell .voucher-item,
.generator-native-shell .variant-card,
.generator-native-shell .library-item{
  border-radius:18px;
}

.generator-native-shell .actions,
.generator-native-shell .inline-actions,
.generator-native-shell .library-controls{
  gap:10px;
}

.generator-native-shell .button-link,
.generator-native-shell button[type="submit"]{
  font-weight:800;
}

.generator-native-shell .secondary-button{
  background:rgba(18,20,24,.9) !important;
  color:#eef0f4 !important;
  border-color:rgba(191,149,63,.16) !important;
}

.generator-native-shell .code-output{
  background:#101216;
}

.generator-native-shell .layout{
  align-items:stretch;
}

.generator-native-shell .sidebar,
.generator-native-shell .panel{
  padding:28px 24px 30px !important;
}

.generator-native-shell .main,
.generator-native-shell .preview{
  padding:28px 28px 30px !important;
}

.generator-native-shell .sidebar > .eyebrow,
.generator-native-shell .panel > .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(191,149,63,.18);
  background:rgba(191,149,63,.08);
  color:#f3d890;
  letter-spacing:.16em;
}

.generator-native-shell .sidebar > h1,
.generator-native-shell .panel > h1{
  margin:18px 0 8px !important;
  max-width:12ch;
}

.generator-native-shell .sidebar > p,
.generator-native-shell .panel > p{
  max-width:none;
  color:#bab4aa !important;
  margin-bottom:18px;
}

.generator-native-shell .top-nav{
  display:none !important;
}

.generator-native-shell .card{
  padding:22px 22px 20px;
}

.generator-native-shell .card > h2:first-child,
.generator-native-shell .card h2{
  font-size:24px;
  line-height:1.15;
  margin:0 0 14px !important;
  color:#f7f4ed;
}

.generator-native-shell .main .card > h2:first-child,
.generator-native-shell .main .card h2,
.generator-native-shell .preview .card > h2:first-child,
.generator-native-shell .preview .card h2{
  color:#201c16;
}

.generator-native-shell .fields,
.generator-native-shell .stack{
  gap:14px !important;
}

.generator-native-shell label{
  display:grid;
  gap:8px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.01em;
}

.generator-native-shell .hint{
  color:#7d7363 !important;
}

.generator-native-shell .sidebar .hint,
.generator-native-shell .panel .hint{
  color:#b4aea2 !important;
}

.generator-native-shell input,
.generator-native-shell textarea,
.generator-native-shell select{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(69,53,28,.14);
  color:#1d1b17;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}

.generator-native-shell input[readonly]{
  background:rgba(243,236,223,.9);
}

.generator-native-shell textarea{
  min-height:104px;
}

.generator-native-shell .actions,
.generator-native-shell .inline-actions,
.generator-native-shell .library-controls{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}

.generator-native-shell .sidebar > form,
.generator-native-shell .panel > form{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

.generator-native-shell--vouchers .sidebar > form,
.generator-native-shell--contracts .sidebar > form,
.generator-native-shell--deposits .sidebar > form{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:start;
}

.generator-native-shell--vouchers .sidebar > form > .actions,
.generator-native-shell--contracts .sidebar > form > .actions,
.generator-native-shell--deposits .sidebar > form > .actions{
  grid-column:1 / -1;
}

.generator-native-shell--vouchers .sidebar > form > .card,
.generator-native-shell--contracts .sidebar > form > .card,
.generator-native-shell--deposits .sidebar > form > .card,
.generator-native-shell--offers .panel > form > .card{
  min-width:0;
}

.generator-native-shell--offers .panel > form{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  align-items:start;
}

.generator-native-shell--offers .panel > form > section:nth-of-type(3),
.generator-native-shell--offers .panel > form > section:nth-of-type(4),
.generator-native-shell--offers .panel > form > section:nth-of-type(5),
.generator-native-shell--offers .panel > form > .actions{
  grid-column:1 / -1;
}

.generator-native-shell .actions > *,
.generator-native-shell .inline-actions > *,
.generator-native-shell .library-controls > *{
  margin:0 !important;
}

.generator-native-shell .flash{
  border-radius:18px;
  padding:16px 18px !important;
}

.generator-native-shell .contract-item,
.generator-native-shell .voucher-item,
.generator-native-shell .variant-card,
.generator-native-shell .library-item{
  padding:18px 18px 16px;
  border:1px solid rgba(69,53,28,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(244,238,228,.86));
}

.generator-native-shell .sidebar .contract-item,
.generator-native-shell .sidebar .voucher-item,
.generator-native-shell .panel .variant-card,
.generator-native-shell .panel .library-item{
  border-color:rgba(255,255,255,.09);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
}

.generator-native-shell .contract-item-title,
.generator-native-shell .voucher-item-title{
  font-size:16px;
  margin-bottom:8px;
  letter-spacing:.01em;
}

.generator-native-shell .contract-item-meta,
.generator-native-shell .voucher-item-meta{
  line-height:1.65;
  color:#73695a;
}

.generator-native-shell .sidebar .contract-item-meta,
.generator-native-shell .sidebar .voucher-item-meta{
  color:#c3bcae;
}

.generator-native-shell .variant-top{
  align-items:flex-start;
  gap:14px;
}

.generator-native-shell .variant-top h2,
.generator-native-shell .variant-top h3{
  margin:0 !important;
}

.generator-native-shell .pill{
  align-self:flex-start;
  border:1px solid rgba(191,149,63,.14);
  background:rgba(191,149,63,.08);
  color:#7f6424;
}

.generator-native-shell .paper-card{
  padding:24px;
  border:1px solid rgba(69,53,28,.10);
  border-radius:24px;
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(191,149,63,.10), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.66), rgba(245,238,225,.9));
}

.generator-native-shell .contract-paper,
.generator-native-shell .voucher-sheet{
  box-shadow:0 18px 40px rgba(29,24,17,.12);
}

.generator-native-shell .signature-pad-wrap{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(69,53,28,.12) !important;
}

.generator-native-shell .preview-frame{
  min-height:980px;
  border:1px solid rgba(69,53,28,.12);
  background:#fff;
}

.generator-native-shell .preview-head{
  align-items:flex-end;
  gap:12px;
}

.generator-native-shell .preview-head h2{
  margin:4px 0 0 !important;
}

.generator-native-shell .preview-head .eyebrow{
  color:#8e6f2c;
}

.generator-native-shell--vouchers .main{
  background:
    radial-gradient(1000px 520px at 100% 0%, rgba(191,149,63,.14), transparent 52%),
    linear-gradient(180deg, #f7f1e5 0%, #f1eadf 100%) !important;
}

.generator-native-shell--vouchers .sidebar .card:first-of-type{
  border-color:rgba(191,149,63,.18);
  background:linear-gradient(180deg, rgba(191,149,63,.10), rgba(255,255,255,.03));
}

.generator-native-shell--vouchers .voucher-support-card,
.generator-native-shell--vouchers .voucher-public-intro{
  border:1px solid rgba(69,53,28,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.76), rgba(244,238,228,.94));
}

.generator-native-shell--vouchers .vouchers-list{
  display:grid;
  gap:12px;
}

.generator-native-shell--vouchers .voucher-item{
  position:relative;
}

.generator-native-shell--vouchers .voucher-item::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  border-radius:18px 0 0 18px;
  background:linear-gradient(180deg, #f1c447, #b88716);
}

.generator-native-shell--contracts .main,
.generator-native-shell--deposits .main{
  background:
    radial-gradient(900px 460px at 100% 0%, rgba(191,149,63,.10), transparent 48%),
    linear-gradient(180deg, #f8f2e8 0%, #f1eadf 100%) !important;
}

.generator-native-shell--contracts .contracts-list,
.generator-native-shell--deposits .contracts-list{
  display:grid;
  gap:12px;
}

.generator-native-shell--contracts .contract-item,
.generator-native-shell--deposits .contract-item{
  position:relative;
}

.generator-native-shell--contracts .contract-item::before,
.generator-native-shell--deposits .contract-item::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  border-radius:18px 0 0 18px;
  background:linear-gradient(180deg, #f1c447, #b88716);
}

.generator-native-shell--offers .preview{
  background:
    radial-gradient(960px 480px at 100% 0%, rgba(191,149,63,.12), transparent 50%),
    linear-gradient(180deg, #f8f2e8 0%, #efe6d8 100%) !important;
}

.generator-native-shell--offers .brand-header{
  background:
    radial-gradient(640px 240px at 0% 0%, rgba(191,149,63,.12), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

.generator-native-shell--offers .variant-card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}

.generator-native-shell--offers .preview-head{
  margin-bottom:18px;
}

.generator-native-shell--offers .code-output{
  min-height:320px;
  border:1px solid rgba(69,53,28,.10);
}

.generator-native-shell--offers .preview-frame{
  min-height:1140px;
}

html[data-theme="light"] .generator-tab{
  background:rgba(255,255,255,.78);
}

html[data-theme="light"] .generator-tab.is-active{
  background:linear-gradient(180deg, rgba(191,149,63,.14), rgba(255,255,255,.94));
}

@media (max-width: 1220px){
  .generator-tabs{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .generator-native-shell--vouchers .sidebar > form,
  .generator-native-shell--contracts .sidebar > form,
  .generator-native-shell--deposits .sidebar > form,
  .generator-native-shell--offers .panel > form{
    grid-template-columns:1fr;
  }

  .generator-native-shell .sidebar,
  .generator-native-shell .panel,
  .generator-native-shell .main,
  .generator-native-shell .preview{
    padding:22px 20px 24px !important;
  }

  .generator-native-shell .sidebar,
  .generator-native-shell .panel{
    border-right:none !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }
}

@media (max-width: 860px){
  .generators-hero{
    flex-direction:column;
  }

  .generator-tabs{
    grid-template-columns:1fr;
  }

  .generator-native-shell .card{
    padding:18px 18px 16px;
  }

  .generator-native-shell .preview-frame{
    min-height:820px;
  }
}