:root{
    --navy:#0f2138;
    --navy-2:#16324f;
    --steel:#2c6088;
    --gold:#a9772f;
    --gold-2:#c99248;
    --paper:#f6f3ec;
    --paper-2:#efeada;
    --line:#d8d0bb;
    --ink:#1c2530;
    --muted:#5c6673;
    --ok:#276b47;
    --ok-bg:#e3f0e8;
    --bad:#9c3b3b;
    --bad-bg:#f6e6e6;
    --warn:#8a6d1d;
    --warn-bg:#f5eecf;
    --radius:4px;
    font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  }
  .ui{ font-family:-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; }
  #app{min-height:100vh;display:flex;flex-direction:column;}

  /* ---------- top bar ---------- */
  header.topbar{
    background:var(--navy);
    color:#e9e4d6;
    padding:16px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:3px solid var(--gold);
  }
  .brand{display:flex;align-items:baseline;gap:10px;}
  .brand .mark-box{
    background:#fff;padding:4px 8px;border-radius:6px;display:flex;align-items:center;
  }
  .brand .mark{
    height:34px;width:auto;display:block;
  }
  .brand h1{font-size:20px;margin:0;letter-spacing:.3px;font-weight:600;}
  .brand small{font-family:-apple-system,sans-serif;color:#b9c3cf;font-size:11px;display:block;letter-spacing:1px;}
  .topbar nav{display:flex;gap:6px;font-family:-apple-system,sans-serif;font-size:14px;}
  .topbar nav button{
    background:transparent;border:1px solid transparent;color:#d8dee5;padding:7px 14px;
    border-radius:var(--radius);cursor:pointer;font-size:13.5px;
  }
  .topbar nav button.active{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;}
  .topbar nav button:hover{background:rgba(255,255,255,.06);}
  .whoami{font-family:-apple-system,sans-serif;font-size:12.5px;color:#b9c3cf;display:flex;align-items:center;gap:10px;}
  .whoami button{background:none;border:1px solid #4a5c6f;color:#cfd8e0;padding:5px 10px;border-radius:var(--radius);cursor:pointer;font-size:12px;font-family:-apple-system,sans-serif;}

  main{flex:1;max-width:1080px;margin:0 auto;padding:36px 24px 80px;width:100%;}

  /* ---------- admin sidebar layout ---------- */
  .admin-shell{display:flex;min-height:100vh;}
  .admin-sidebar{
    width:230px;flex-shrink:0;background:var(--navy);color:#dbe2e9;
    display:flex;flex-direction:column;padding:20px 14px;
    font-family:-apple-system,sans-serif;
  }
  .admin-sidebar-brand{display:flex;align-items:center;gap:10px;padding:6px 6px 22px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:16px;}
  .mark-box-sm{background:#fff;border-radius:6px;padding:4px 6px;display:flex;align-items:center;flex-shrink:0;}
  .mark-box-sm img{height:26px;width:auto;display:block;}
  .admin-sidebar-title{font-size:13px;font-weight:700;color:#fff;line-height:1.25;}
  .admin-nav{display:flex;flex-direction:column;gap:4px;}
  .admin-nav-btn{
    text-align:left;background:transparent;border:none;color:#c4cdd6;
    padding:10px 12px;border-radius:var(--radius);cursor:pointer;font-size:13.5px;
  }
  .admin-nav-btn:hover{background:rgba(255,255,255,.06);color:#fff;}
  .admin-nav-btn.active{background:var(--gold);color:#fff;font-weight:600;}
  .admin-logout-btn{
    text-align:left;background:transparent;border:1px solid rgba(255,255,255,.2);color:#dbe2e9;
    padding:9px 12px;border-radius:var(--radius);cursor:pointer;font-size:13px;margin-top:12px;
  }
  .admin-logout-btn:hover{background:rgba(255,255,255,.08);}
  .admin-content{flex:1;padding:28px 36px 80px;overflow-x:auto;max-width:1100px;}
  .admin-topline{display:flex;justify-content:flex-end;margin-bottom:18px;}
  .admin-whoami{font-family:-apple-system,sans-serif;font-size:12.5px;color:var(--muted);}
  @media(max-width:820px){
    .admin-shell{flex-direction:column;}
    .admin-sidebar{width:100%;flex-direction:row;align-items:center;padding:12px 16px;}
    .admin-sidebar-brand{border-bottom:none;margin-bottom:0;padding:0;margin-right:16px;}
    .admin-nav{flex-direction:row;flex-wrap:wrap;}
    .admin-logout-btn{margin-top:0;margin-left:auto;}
    .admin-content{padding:20px;}
  }

  h2.pagetitle{font-size:26px;margin:0 0 4px;color:var(--navy);}
  p.subtitle{font-family:-apple-system,sans-serif;color:var(--muted);margin:0 0 28px;font-size:14px;}

  .card{
    background:#fffdf8;
    border:1px solid var(--line);
    border-radius:6px;
    padding:26px 28px;
    margin-bottom:22px;
  }
  .card h3{margin:0 0 4px;font-size:16px;color:var(--navy-2);border-bottom:1px solid var(--line);padding-bottom:10px;}
  .card .hint{font-family:-apple-system,sans-serif;font-size:12.5px;color:var(--muted);margin:6px 0 16px;}

  /* forms */
  .ui label{display:block;font-family:-apple-system,sans-serif;font-size:12.5px;color:var(--navy-2);margin-bottom:4px;font-weight:600;}
  .ui input, .ui select, .ui textarea{
    width:100%;padding:9px 10px;border:1px solid #c9c1ab;border-radius:var(--radius);
    font-family:-apple-system,sans-serif;font-size:14px;background:#fff;color:var(--ink);
  }
  .ui input:focus, .ui select:focus, .ui textarea:focus{outline:2px solid var(--steel);outline-offset:1px;}
  .field{margin-bottom:16px;}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .row4{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end;}
  @media(max-width:720px){ .row2,.row4{grid-template-columns:1fr;} }

  button.btn, a.btn{
    font-family:-apple-system,sans-serif;font-size:14px;font-weight:600;
    padding:10px 18px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;
    text-decoration:none;display:inline-block;box-sizing:border-box;text-align:center;
  }
  .btn-primary{background:var(--navy);color:#fff;}
  .btn-primary:hover{background:var(--navy-2);}
  .btn-gold{background:var(--gold);color:#fff;}
  .btn-gold:hover{background:var(--gold-2);}
  .btn-ghost{background:transparent;border:1px solid #c9c1ab;color:var(--ink);}
  .btn-ghost:hover{background:var(--paper-2);}
  .btn-danger{background:transparent;border:1px solid var(--bad);color:var(--bad);}
  .btn-danger:hover{background:var(--bad-bg);}
  .btn-sm{padding:6px 11px;font-size:12.5px;}
  .btn-row{display:flex;gap:10px;margin-top:18px;}

  .link-btn, a.link-btn{background:none;border:none;color:var(--steel);text-decoration:underline;cursor:pointer;font-family:-apple-system,sans-serif;font-size:13px;padding:0;}

  table{width:100%;border-collapse:collapse;font-family:-apple-system,sans-serif;font-size:13.5px;}
  thead th{text-align:left;font-size:11px;letter-spacing:.4px;color:var(--muted);border-bottom:1px solid var(--line);padding:8px 6px;}
  tbody td{padding:11px 6px;border-bottom:1px solid #ece6d6;vertical-align:top;}
  tbody tr:hover{background:#fbf9f2;}

  .pill{display:inline-block;font-family:-apple-system,sans-serif;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.3px;}
  .pill-active{background:var(--ok-bg);color:var(--ok);}
  .pill-inactive{background:var(--bad-bg);color:var(--bad);}
  .pill-pending{background:var(--warn-bg);color:var(--warn);}

  .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}
  .stat{background:#fffdf8;border:1px solid var(--line);border-radius:6px;padding:18px 20px;}
  .stat .num{font-size:30px;color:var(--navy);}
  .stat .lbl{font-family:-apple-system,sans-serif;font-size:12.5px;color:var(--muted);}

  .msg{font-family:-apple-system,sans-serif;font-size:13.5px;padding:10px 14px;border-radius:var(--radius);margin-bottom:16px;}
  .msg-ok{background:var(--ok-bg);color:var(--ok);}
  .msg-bad{background:var(--bad-bg);color:var(--bad);}
  .msg-warn{background:var(--warn-bg);color:var(--warn);}

  .empty{font-family:-apple-system,sans-serif;color:var(--muted);font-size:13.5px;padding:20px 0;text-align:center;}

  .landing{max-width:420px;margin:60px auto;text-align:center;}
  .landing .mark-lg{height:90px;width:auto;display:block;margin:0 auto 14px;}
  .tabs{display:flex;gap:6px;justify-content:center;margin:20px 0 22px;font-family:-apple-system,sans-serif;}
  .tabs button{flex:1;padding:9px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:13px;}
  .tabs button:first-child{border-radius:var(--radius) 0 0 var(--radius);}
  .tabs button:last-child{border-radius:0 var(--radius) var(--radius) 0;}
  .tabs button.active{background:var(--navy);color:#fff;border-color:var(--navy);}

  /* certificate render */
  .cert-wrap{background:#fff;border:10px solid var(--navy-2);padding:0;position:relative;}
  .cert-inner{border:2px solid var(--gold-2);margin:8px;padding:36px 44px;position:relative;}
  .cert-brand{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
  .cert-brand .mark{height:64px;width:auto;display:block;}
  .cert-brand div b{display:block;font-size:16px;color:var(--navy);}
  .cert-brand div span{font-family:-apple-system,sans-serif;font-size:10px;letter-spacing:1px;color:var(--gold);}
  .cert-title{font-size:30px;text-align:left;color:var(--navy);margin:14px 0 2px;}
  .cert-no{position:absolute;top:36px;right:44px;font-family:-apple-system,sans-serif;font-size:11px;color:var(--muted);}
  .cert-affirm{font-size:13px;color:var(--muted);margin-top:18px;}
  .cert-company{font-size:26px;color:var(--navy-2);margin:2px 0 6px;}
  .cert-addr{font-size:13px;color:var(--muted);margin-bottom:14px;}
  .cert-body{font-size:14px;line-height:1.6;margin-bottom:14px;}
  .cert-standard{border:1px solid var(--line);display:inline-block;padding:10px 22px;margin:8px 0 16px;font-weight:bold;color:var(--navy);}
  .cert-scope-box{background:var(--paper);border-left:3px solid var(--gold);padding:12px 16px;font-size:13.5px;margin-bottom:18px;}
  .cert-dates{font-family:-apple-system,sans-serif;font-size:12.5px;text-align:right;line-height:1.9;color:var(--ink);float:right;}
  .cert-clear{clear:both;}
  .cert-sig{display:flex;justify-content:space-between;align-items:flex-end;margin-top:40px;}
  .cert-qr{width:70px;height:70px;background:
      repeating-linear-gradient(90deg,#111 0 6px,#fff 6px 12px),
      repeating-linear-gradient(0deg,#111 0 6px,transparent 6px 12px);
      background-blend-mode:multiply; border:1px solid #111;}
  .cert-sig-right{text-align:right;font-family:-apple-system,sans-serif;font-size:11.5px;color:var(--muted);}
  .cert-sig-right .sig-heading{font-family:-apple-system,sans-serif;font-weight:700;color:var(--ink);font-size:12.5px;margin-bottom:6px;}
  .cert-sig-right .name{font-family:"Brush Script MT",cursive,Georgia,serif;font-style:italic;font-size:26px;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px;margin-bottom:4px;}
  .cert-footer{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);font-family:-apple-system,sans-serif;font-size:10.5px;color:var(--muted);text-align:center;}
  .cert-sites{font-size:12.5px;margin-bottom:10px;}
  .cert-sites table{font-size:11.5px;}

  @media print{
    header.topbar, .no-print{display:none !important;}
    main{max-width:none;padding:0;margin:0;}
    body{background:#fff;}
  }