:root{
    --ink:#1B2A3A;
    --ink-soft:#2E4054;
    --steel:#5C6B73;
    --steel-soft:#8B98A0;
    --paper:#FAFAF7;
    --paper-dim:#F0EEE8;
    --line:#DCD9D0;
    --amber:#E8A33D;
    --red:#C1432E;
    --green:#3F7A5B;
    --blue:#3B6E91;
    --radius:10px;
    --shadow:0 1px 2px rgba(27,42,58,0.08), 0 4px 14px rgba(27,42,58,0.06);
    font-family:'IBM Plex Sans',system-ui,sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--paper-dim);color:var(--ink);height:100%;}
  body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  #app{max-width:520px;margin:0 auto;min-height:100vh;background:var(--paper);display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow);}
  header.top{position:sticky;top:0;z-index:10;background:var(--ink);color:var(--paper);padding:14px 16px;display:flex;align-items:center;gap:10px;}
  header.top .back{background:none;border:none;color:var(--paper);font-size:20px;cursor:pointer;padding:4px 8px;margin-left:-8px;line-height:1;}
  header.top h1{font-size:15px;font-weight:600;margin:0;flex:1;letter-spacing:.2px;}
  header.top .sub{font-size:11px;color:#A9B7C2;font-family:'IBM Plex Mono',monospace;}
  main{flex:1;padding:14px 16px;padding-bottom:96px;}
  .brandbar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);background:linear-gradient(120deg, rgba(232,163,61,0.07) 0%, rgba(250,250,247,0) 55%);}
  .brandbar .tag-icon{width:34px;height:34px;border-radius:8px;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .brandbar .tag-icon svg{width:20px;height:20px;}
  .brandbar h1{font-size:16px;margin:0;font-weight:700;letter-spacing:.2px;}
  .brandbar p{font-size:11px;margin:0;color:var(--steel);font-family:'IBM Plex Mono',monospace;}

  /* buttons */
  button{font-family:inherit;}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:8px;border:1px solid transparent;font-size:14px;font-weight:600;cursor:pointer;transition:transform .05s ease;}
  .btn:active{transform:scale(0.98);}
  .btn-primary{background:var(--ink);color:var(--paper);}
  .btn-primary:hover{background:var(--ink-soft);}
  .btn-outline{background:transparent;border-color:var(--line);color:var(--ink);}
  .btn-ghost{background:transparent;color:var(--steel);border:none;}
  .btn-amber{background:var(--amber);color:var(--ink);}
  .btn-block{width:100%;}
  .btn-sm{padding:8px 12px;font-size:12.5px;border-radius:6px;}
  .fab{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:488px;width:calc(100% - 32px);z-index:20;padding-top:16px;background:linear-gradient(to bottom, rgba(250,250,247,0) 0%, var(--paper) 45%);}
  .fab .btn{width:100%;padding:15px;font-size:14.5px;box-shadow:0 6px 20px rgba(27,42,58,0.25);}

  /* cards */
  .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px;}
  .audit-card{display:flex;gap:12px;align-items:center;cursor:pointer;}
  .audit-card .logo{width:44px;height:44px;border-radius:8px;background:var(--paper-dim);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;font-weight:700;color:var(--steel);}
  .audit-card .logo img{width:100%;height:100%;object-fit:cover;}
  .audit-card .meta{flex:1;min-width:0;}
  .audit-card .meta .name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .audit-card .meta .site{font-size:12px;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .audit-card .meta .date{font-size:10.5px;color:var(--steel-soft);font-family:'IBM Plex Mono',monospace;margin-top:2px;}
  .badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:20px;font-family:'IBM Plex Mono',monospace;white-space:nowrap;}
  .badge-conform{background:#E6F0EA;color:var(--green);}
  .badge-obs{background:#E8EEF2;color:var(--blue);}
  .badge-minor{background:#FBF0DD;color:#9C6A19;}
  .badge-major{background:#FBE4D9;color:#A6461D;}
  .badge-critical{background:#F8DCD6;color:var(--red);}
  .badge-pending{background:var(--paper-dim);color:var(--steel);}

  .empty{text-align:center;padding:32px 20px;color:var(--steel);}
  .empty .tag-icon-lg{display:flex;justify-content:center;margin:0 auto 12px;}
  .empty p{font-size:13px;line-height:1.6;}

  /* form */
  label.field-label{display:block;font-size:11.5px;font-weight:600;color:var(--steel);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 6px;}
  label.field-label:first-child{margin-top:0;}
  input[type=text],input[type=date],textarea,select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;background:var(--paper);color:var(--ink);}
  input:focus,textarea:focus,select:focus{outline:2px solid var(--blue);outline-offset:-1px;}
  textarea{resize:vertical;min-height:70px;}
  .logo-upload{display:flex;align-items:center;gap:10px;}
  .logo-upload .preview{width:52px;height:52px;border-radius:8px;border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;background:var(--paper-dim);color:var(--steel-soft);font-size:10px;text-align:center;}
  .logo-upload .preview img{width:100%;height:100%;object-fit:cover;}
  .logo-upload input[type=file]{display:none;}

  /* template picker */
  .tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px;}
  .tpl-card{border:1.5px solid var(--line);border-radius:10px;padding:14px 12px;cursor:pointer;background:var(--paper);position:relative;}
  .tpl-card.selected{border-color:var(--ink);background:#F3F1EB;}
  .tpl-card.locked{opacity:.55;background:var(--paper-dim);cursor:not-allowed;}
  .tpl-card .stripe{position:absolute;top:0;left:0;right:0;height:4px;border-radius:10px 10px 0 0;}
  .tpl-card h3{font-size:13px;margin:8px 0 2px;font-weight:700;}
  .tpl-card p{font-size:10.5px;color:var(--steel);margin:0;line-height:1.4;}

  /* capture view */
  .progress-strip{display:flex;gap:3px;margin-bottom:14px;}
  .progress-strip span{flex:1;height:4px;border-radius:2px;background:var(--line);}
  .clause-list{display:flex;flex-direction:column;gap:8px;}
  .clause-row{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:9px;cursor:pointer;background:var(--paper);}
  .clause-row .stripe-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--line);}
  .clause-row .txt{flex:1;min-width:0;}
  .clause-row .txt .num{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--steel-soft);}
  .clause-row .txt .title{font-size:13.5px;font-weight:500;}
  .clause-row .chev{color:var(--steel-soft);font-size:16px;}
  .clause-row .photo-count{font-size:10px;color:var(--steel);font-family:'IBM Plex Mono',monospace;background:var(--paper-dim);padding:2px 6px;border-radius:10px;}

  /* status pills */
  .status-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px;}
  .status-pill{border:1.5px solid var(--line);border-radius:8px;padding:10px;text-align:center;font-size:12px;font-weight:600;cursor:pointer;background:var(--paper);}
  .status-pill.active-conform{border-color:var(--green);background:#E6F0EA;color:var(--green);}
  .status-pill.active-obs{border-color:var(--blue);background:#E8EEF2;color:var(--blue);}
  .status-pill.active-minor{border-color:#C99328;background:#FBF0DD;color:#9C6A19;}
  .status-pill.active-major{border-color:#C1602F;background:#FBE4D9;color:#A6461D;}
  .status-pill.active-critical{border-color:var(--red);background:#F8DCD6;color:var(--red);}

  .photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;}
  .photo-thumb{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--line);}
  .photo-thumb img{width:100%;height:100%;object-fit:cover;}
  .photo-thumb .rm{position:absolute;top:3px;right:3px;background:rgba(27,42,58,0.75);color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:12px;line-height:1;cursor:pointer;}
  .photo-add{aspect-ratio:1;border-radius:8px;border:1.5px dashed var(--steel-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--steel);cursor:pointer;font-size:22px;gap:2px;background:var(--paper-dim);}
  .photo-add span{font-size:9px;font-family:'IBM Plex Mono',monospace;}

  /* findings summary */
  .sev-group{margin-bottom:16px;}
  .sev-group h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--steel);margin:0 0 8px;display:flex;align-items:center;gap:6px;}
  .finding-card{border:1px solid var(--line);border-left:4px solid var(--line);border-radius:8px;padding:12px;margin-bottom:8px;}
  .finding-card.sev-minor{border-left-color:var(--amber);}
  .finding-card.sev-major{border-left-color:#C1602F;}
  .finding-card.sev-critical{border-left-color:var(--red);}
  .finding-card.sev-obs{border-left-color:var(--blue);}
  .finding-card .clause-ref{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--steel-soft);}
  .finding-card .obs-text{font-size:13px;margin:4px 0 8px;}
  .finding-card .ca-row{display:grid;grid-template-columns:1fr 110px;gap:8px;}
  .finding-card .ca-row input{font-size:12px;padding:8px;}

  /* report / export */
  .report-page{background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px;font-size:12px;}
  .report-page .rp-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:14px;}
  .report-page .rp-logos{display:flex;gap:10px;align-items:center;}
  .report-page .rp-logos img{width:38px;height:38px;object-fit:cover;border-radius:6px;}
  .report-page h2{font-size:16px;margin:0 0 2px;}
  .report-page .rp-sub{font-size:10.5px;color:var(--steel);font-family:'IBM Plex Mono',monospace;}
  .report-page table{width:100%;border-collapse:collapse;margin-top:8px;font-size:11px;}
  .report-page th{text-align:left;background:var(--paper-dim);padding:6px 8px;font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--steel);}
  .report-page td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top;}
  .report-page .stat-row{display:flex;gap:8px;margin:10px 0;}
  .report-page .stat{flex:1;text-align:center;border:1px solid var(--line);border-radius:6px;padding:8px 4px;}
  .report-page .stat b{display:block;font-size:17px;}
  .report-page .stat span{font-size:9px;color:var(--steel);text-transform:uppercase;}
  .report-page .rp-photos{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px;}
  .report-page .rp-photos img{width:36px;height:36px;object-fit:cover;border-radius:4px;border:1px solid var(--line);}

  .action-row{display:flex;gap:8px;margin-top:16px;}
  .action-row .btn{flex:1;}

  .settings-list .item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);}
  .settings-list .item:last-child{border-bottom:none;}
  .settings-list .item .lab{font-size:13px;}
  .settings-list .item .val{font-size:11px;color:var(--steel);font-family:'IBM Plex Mono',monospace;}

  .toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:20px;font-size:12.5px;z-index:50;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(-4px);}

  ::selection{background:var(--amber);color:var(--ink);}
  @media (max-width:400px){ .tpl-grid{grid-template-columns:1fr;} }

  .rs-badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:var(--steel);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;font-family:'IBM Plex Mono',monospace;padding:4px 10px;border-radius:20px;background:var(--paper-dim);border:1px solid var(--line);}
  .rs-badge img{width:16px;height:16px;border-radius:4px;object-fit:cover;}
  .rs-badge:hover{background:var(--line);}

  .icon-label-btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;color:var(--steel);cursor:pointer;padding:4px 6px;}
  .icon-label-btn .ico{font-size:16px;line-height:1;}
  .icon-label-btn .lbl{font-size:8.5px;text-transform:uppercase;letter-spacing:.05em;font-family:'IBM Plex Mono',monospace;}
  .icon-label-btn:hover{color:var(--ink);}

  .fab-tagline{text-align:center;font-size:10.5px;color:var(--steel);margin:0 0 6px;line-height:1.3;}
  .home-footer{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);}
  .feature-row{display:flex;justify-content:center;gap:18px;margin-bottom:14px;}
  .feature-row .feat{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:9px;color:var(--steel);text-transform:uppercase;letter-spacing:.04em;text-align:center;width:64px;}
  .feature-row .feat .ico{font-size:17px;}
  .copyright{text-align:center;font-size:8.5px;color:var(--steel-soft);font-family:'IBM Plex Mono',monospace;line-height:1.4;}
  .mode-toggle{display:flex;background:var(--paper-dim);border-radius:20px;padding:3px;gap:3px;border:1px solid var(--line);}
  .mode-toggle button{flex:1;padding:7px 8px;font-size:10.5px;border:none;background:none;border-radius:16px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.03em;color:var(--steel);cursor:pointer;}
  .mode-toggle button.active{background:var(--ink);color:var(--paper);}

  header.top{padding-top:calc(14px + env(safe-area-inset-top));}

  @media print {
    header.top,.fab,.action-row,nav.tabbar{display:none !important;}
    #app{box-shadow:none;max-width:100%;}
    body{background:#fff;}
  }