:root{
    --ink:#16202e;
    --teal-950:#0a1f3d;
    --teal-900:#0f2f57;
    --teal-800:#163f73;
    --teal-700:#2568a8;
    --gold:#2568a8;
    --gold-light:#5a95d4;
    --paper:#f7f9fc;
    --sage:#eef2f7;
    --sage-line:#d9e2ec;
    --white:#ffffff;
    --red-seal:#8c2f2f;
    --danger:#a8382f;
  }
  *{box-sizing:border-box;}
  body{margin:0;padding:0;background:transparent;}
  .app{
    font-family:'Inter',sans-serif;
    color:var(--ink);
    min-height:100%;
    background:var(--sage);
  }
  ::selection{background:var(--gold-light);}

  /* ---------- Top ribbon ---------- */
  .ribbon{
    background:linear-gradient(180deg,var(--teal-950),var(--teal-800));
    color:var(--paper);
    padding:18px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:3px solid var(--gold);
  }
  .brand{display:flex;align-items:center;gap:14px;}
  .brand-mark{
    width:46px;height:46px;border-radius:50%;
    background:#ffffff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 3px rgba(255,255,255,0.15) inset;
    flex-shrink:0;
    overflow:hidden;
    padding:3px;
  }
  .brand-mark img{width:100%;height:100%;object-fit:contain;border-radius:50%;}
  .brand-text h1{font-family:'Playfair Display',serif;font-size:19px;margin:0;letter-spacing:.3px;}
  .brand-text p{margin:2px 0 0;font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-light);}
  .who{display:flex;align-items:center;gap:14px;font-size:13px;}
  .who .role-pill{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.25);
    padding:5px 12px;border-radius:999px;font-weight:600;letter-spacing:.3px;
  }
  .logout-btn{
    background:transparent;border:1px solid rgba(255,255,255,0.4);color:var(--paper);
    padding:7px 14px;border-radius:8px;font-size:12.5px;cursor:pointer;font-weight:600;
    transition:background .15s;
  }
  .logout-btn:hover{background:rgba(255,255,255,0.12);}

  /* ---------- Login ---------- */
  .login-wrap{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    padding:40px 20px;
    background:
      radial-gradient(circle at 20% 15%, rgba(37,104,168,0.12), transparent 45%),
      radial-gradient(circle at 85% 85%, rgba(10,31,61,0.14), transparent 50%),
      var(--sage);
  }
  .login-card{
    width:100%;max-width:900px;
    display:grid;grid-template-columns:1.05fr 1fr;
    background:var(--white);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(10,46,42,0.35);
    border:1px solid var(--sage-line);
  }
  .login-side{
    background:linear-gradient(160deg,var(--teal-950) 0%, var(--teal-800) 60%, var(--teal-700) 100%);
    color:var(--paper);
    padding:44px 38px;
    display:flex;flex-direction:column;justify-content:space-between;
    position:relative;
    overflow:hidden;
  }
  .login-side::after{
    content:"";position:absolute;inset:0;
    background:repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 26px);
    pointer-events:none;
  }
  .login-side .seal{
    width:96px;height:96px;border-radius:50%;
    background:#ffffff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 5px rgba(255,255,255,0.12) inset, 0 10px 25px rgba(0,0,0,0.35);
    position:relative;z-index:1;
    overflow:hidden;padding:6px;
  }
  .login-side .seal img{width:100%;height:100%;object-fit:contain;border-radius:50%;}
  .login-side h2{font-family:'Playfair Display',serif;font-size:27px;line-height:1.3;margin:26px 0 10px;position:relative;z-index:1;}
  .login-side p.sub{color:var(--gold-light);font-size:13px;letter-spacing:1.4px;text-transform:uppercase;margin:0 0 18px;position:relative;z-index:1;}
  .login-side .desc{font-size:14px;line-height:1.7;color:#d7e2ef;max-width:340px;position:relative;z-index:1;}
  .login-side .foot-note{font-size:11.5px;color:#9db3c9;position:relative;z-index:1;border-top:1px solid rgba(255,255,255,0.15);padding-top:14px;margin-top:24px;}

  .login-form-side{padding:44px 42px;display:flex;flex-direction:column;justify-content:center;}
  .login-form-side h3{font-family:'Playfair Display',serif;font-size:22px;margin:0 0 6px;color:var(--teal-950);}
  .login-form-side p.hint{font-size:13px;color:#5b6b7d;margin:0 0 26px;}
  .role-toggle{display:flex;gap:8px;margin-bottom:20px;background:var(--sage);padding:5px;border-radius:11px;}
  .role-toggle button{
    flex:1;padding:10px 8px;border:none;border-radius:8px;background:transparent;
    font-family:'Inter';font-weight:700;font-size:13px;color:#5b6b7d;cursor:pointer;transition:.15s;
  }
  .role-toggle button.active{background:var(--teal-900);color:#fff;box-shadow:0 4px 10px rgba(15,47,87,0.25);}
  .field{margin-bottom:16px;}
  .field label{display:block;font-size:12.5px;font-weight:700;color:var(--teal-950);margin-bottom:6px;letter-spacing:.2px;}
  .field input{
    width:100%;padding:12px 14px;border:1.5px solid var(--sage-line);border-radius:9px;
    font-size:14.5px;font-family:'Inter';background:#fcfdfc;color:var(--ink);
    transition:border-color .15s;
  }
  .field input:focus{outline:none;border-color:var(--teal-700);background:#fff;}
  .login-btn{
    width:100%;padding:13px;border:none;border-radius:9px;background:var(--teal-900);
    color:#fff;font-weight:700;font-size:14.5px;cursor:pointer;letter-spacing:.3px;
    transition:background .15s;margin-top:6px;
  }
  .login-btn:hover{background:var(--teal-800);}
  .login-error{color:var(--danger);font-size:12.5px;margin:10px 0 0;font-weight:600;}
  .admin-hint{
    margin-top:22px;
    display:flex;gap:12px;
    background:linear-gradient(135deg,#f3f7fb,var(--sage));
    border:1px solid var(--sage-line);
    border-radius:12px;
    padding:14px 16px;
    position:relative;
    overflow:hidden;
  }
  .admin-hint::before{
    content:"";position:absolute;top:0;left:0;bottom:0;width:4px;
    background:linear-gradient(180deg,var(--teal-700),var(--teal-900));
  }
  .admin-hint-icon{
    width:34px;height:34px;border-radius:9px;flex-shrink:0;
    background:var(--teal-900);color:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 10px rgba(15,47,87,0.25);
  }
  .admin-hint-body{flex:1;min-width:0;}
  .admin-hint-title{
    font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
    color:var(--teal-900);margin-bottom:8px;
  }
  .admin-hint-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
  .chip{
    display:inline-flex;align-items:center;gap:6px;
    background:#fff;border:1px solid var(--sage-line);border-radius:999px;
    padding:5px 12px;font-size:12px;color:#5b6b7d;
  }
  .chip b{color:var(--teal-950);font-size:12.5px;}
  .chip-label{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:#8798ab;}
  .admin-hint-note{font-size:11.5px;color:#69798c;line-height:1.6;margin:0;}
  .admin-hint-note b{color:var(--teal-950);}

  .dev-credit{
    text-align:center;margin:18px 0 0;font-size:11px;letter-spacing:.3px;color:#9db3c9;
  }
  .dev-credit span{color:var(--teal-800);font-weight:700;}

  /* ---------- Layout ---------- */
  .shell{max-width:1180px;margin:0 auto;padding:28px 24px 60px;}
  .grid{display:grid;grid-template-columns:380px 1fr;gap:24px;align-items:start;}
  @media (max-width:900px){.grid{grid-template-columns:1fr;}}

  .panel{
    background:var(--white);border-radius:16px;border:1px solid var(--sage-line);
    box-shadow:0 8px 24px -14px rgba(10,31,61,0.14);
    padding:24px;
  }
  .panel h2{
    font-family:'Playfair Display',serif;font-size:18px;margin:0 0 4px;color:var(--teal-950);
    display:flex;align-items:center;gap:9px;
  }
  .panel .eyebrow{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 4px;}
  .panel .sub{font-size:12.5px;color:#69798c;margin:0 0 18px;}

  .place-fixed{
    background:var(--sage);border:1px dashed var(--sage-line);border-radius:9px;
    padding:11px 13px;font-size:13.5px;color:var(--teal-950);font-weight:700;
    display:flex;align-items:center;gap:8px;
  }
  .radio-row{display:flex;gap:10px;}
  .radio-pill{
    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    padding:11px 14px;border:1.5px solid var(--sage-line);border-radius:9px;
    font-size:14px;font-weight:700;color:var(--teal-950);cursor:pointer;
    background:#fcfdfc;transition:border-color .15s, background .15s;
    position:relative;
  }
  .radio-pill input{position:absolute;opacity:0;width:0;height:0;}
  .radio-pill.checked{background:var(--teal-900);border-color:var(--teal-900);color:#fff;}
  .radio-pill:hover{border-color:var(--teal-700);}
  .form-actions{display:flex;gap:10px;margin-top:6px;}
  .btn{
    padding:12px 18px;border-radius:9px;border:none;font-weight:700;font-size:13.5px;
    cursor:pointer;font-family:'Inter';display:inline-flex;align-items:center;gap:7px;
    transition:transform .1s, background .15s, box-shadow .15s;
  }
  .btn:active{transform:scale(0.98);}
  .btn-primary{background:var(--teal-900);color:#fff;flex:1;justify-content:center;}
  .btn-primary:hover{background:var(--teal-800);}
  .btn-ghost{background:var(--sage);color:var(--teal-950);}
  .btn-ghost:hover{background:var(--sage-line);}
  .btn-gold{background:linear-gradient(180deg, var(--gold-light), var(--gold));color:#fff;}
  .btn-gold:hover{filter:brightness(1.04);}
  .btn-danger{background:#fbeceb;color:var(--danger);}
  .btn-danger:hover{background:#f6d9d7;}
  .btn-sm{padding:8px 12px;font-size:12px;border-radius:7px;}

  .stat-row{display:flex;gap:12px;margin-bottom:20px;}
  .stat{
    flex:1;background:var(--sage);border-radius:11px;padding:14px 14px;
    border:1px solid var(--sage-line);
  }
  .stat .num{font-family:'Playfair Display',serif;font-size:24px;color:var(--teal-950);font-weight:700;}
  .stat .lbl{font-size:11px;color:#69798c;text-transform:uppercase;letter-spacing:.8px;margin-top:2px;}

  .search-bar{display:flex;gap:10px;margin-bottom:18px;}
  .search-bar input{
    flex:1;padding:12px 14px;border-radius:9px;border:1.5px solid var(--sage-line);
    font-size:14px;font-family:'Inter';
  }
  .search-bar input:focus{outline:none;border-color:var(--teal-700);}

  table{width:100%;border-collapse:collapse;font-size:13.5px;}
  thead th{
    text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:1px;
    color:#69798c;border-bottom:2px solid var(--sage-line);padding:0 10px 10px;font-weight:700;
  }
  tbody td{padding:13px 10px;border-bottom:1px solid var(--sage-line);vertical-align:middle;}
  tbody tr:hover{background:var(--sage);}
  .cert-no{font-family:'Playfair Display',serif;font-weight:700;color:var(--teal-950);}
  .row-actions{display:flex;gap:6px;justify-content:flex-end;}
  .empty-state{padding:50px 20px;text-align:center;color:#8798ab;}
  .empty-state svg{margin-bottom:10px;opacity:.5;}

  .toast{
    position:fixed;bottom:26px;left:50%;transform:translateX(-50%);
    background:var(--teal-950);color:#fff;padding:13px 22px;border-radius:10px;
    font-size:13.5px;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,0.25);
    z-index:999;border-left:4px solid var(--gold);
    animation:toastin .2s ease-out;
  }
  @keyframes toastin{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}

  /* ---------- Modal / certificate preview ---------- */
  .modal-overlay{
    position:fixed;inset:0;background:rgba(8,16,28,0.6);backdrop-filter:blur(2px);
    display:flex;align-items:center;justify-content:center;z-index:900;padding:20px;
  }
  .modal-box{
    background:#fff;border-radius:16px;max-width:740px;width:100%;
    max-height:92vh;overflow:auto;box-shadow:0 30px 70px rgba(0,0,0,0.4);
  }
  .modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--sage-line);}
  .modal-head h3{margin:0;font-family:'Playfair Display',serif;font-size:17px;color:var(--teal-950);}
  .modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:#8798ab;}
  .modal-body{padding:22px;display:flex;justify-content:center;}

  .certificate{
    border:6px solid var(--teal-700);
    background:#fdfdfb;
    padding:14px;position:relative;
    font-family:'Inter',sans-serif;
    width:100%;
    max-width:680px;
    margin:0 auto;
  }
  .certificate .inner{
    border:2px solid var(--teal-950);
    padding:40px 44px 34px;
    position:relative;
    width:100%;
  }
  .certificate .flourish{position:absolute;width:42px;height:42px;color:var(--teal-800);opacity:0.85;}
  .certificate .flourish.tl{top:10px;left:10px;}
  .certificate .flourish.tr{top:10px;right:10px;transform:scaleX(-1);}
  .certificate .flourish.bl{bottom:10px;left:10px;transform:scaleY(-1);}
  .certificate .flourish.br{bottom:10px;right:10px;transform:scale(-1,-1);}
  .certificate .head-row{
    display:flex;align-items:center;gap:20px;margin-bottom:8px;
  }
  .certificate .head-row .logo-top{width:104px;height:104px;object-fit:contain;flex-shrink:0;}
  .certificate .head-row .title-block{flex:1;text-align:center;}
  .certificate .ornament-line{width:100%;height:14px;color:var(--teal-700);}
  .certificate .cert-title{
    font-family:'Playfair Display',serif;font-weight:800;font-size:32px;
    color:var(--teal-950);letter-spacing:1.5px;margin:6px 0;text-transform:uppercase;
  }
  .certificate .certify-line{
    text-align:center;font-family:'Playfair Display',serif;font-weight:700;
    font-size:18px;color:var(--teal-950);margin:26px 0 10px;
  }
  .certificate .cert-name{
    text-align:center;font-family:'Playfair Display',serif;font-weight:800;
    font-size:34px;color:var(--teal-950);margin:2px 0 14px;
  }
  .certificate .mini-divider{
    display:flex;align-items:center;justify-content:center;gap:10px;margin:8px auto 20px;width:70%;
  }
  .certificate .mini-divider .dline{flex:1;height:1.5px;background:var(--teal-700);}
  .certificate .mini-divider .dot{width:6px;height:6px;border-radius:50%;background:var(--teal-700);}
  .certificate .was-born{
    text-align:center;font-family:'Playfair Display',serif;font-weight:700;
    font-size:19px;color:var(--teal-950);margin-bottom:26px;
  }
  .certificate .field-list{margin-top:6px;}
  .certificate .field-row{
    display:flex;align-items:center;gap:18px;padding:16px 2px;
    border-bottom:2.5px solid var(--sage-line);
  }
  .certificate .field-row:last-child{border-bottom:2.5px solid var(--sage-line);}
  .certificate .field-label{
    width:150px;flex-shrink:0;font-weight:800;color:var(--teal-950);font-size:15.5px;
  }
  .certificate .field-icon{width:26px;height:26px;color:var(--teal-700);flex-shrink:0;}
  .certificate .field-value{font-weight:700;color:var(--ink);font-size:16px;}
  .certificate .cert-num-line{
    text-align:center;font-family:'Inter';font-size:11.5px;letter-spacing:1.4px;
    color:#69798c;margin:22px 0 6px;text-transform:uppercase;
  }
  .certificate .cert-num-line b{color:var(--teal-950);font-size:13.5px;}
  .certificate .sign-row{display:flex;justify-content:space-between;margin-top:56px;align-items:center;}
  .certificate .sign-block{text-align:center;font-family:'Inter';}
  .certificate .sign-line{width:170px;border-top:2.5px solid var(--teal-950);margin-bottom:8px;}
  .certificate .sign-label{font-size:12px;color:var(--teal-950);font-weight:700;letter-spacing:.5px;text-align:center;}
  .certificate .seal-mini{
    width:76px;height:76px;border-radius:50%;
    background:#ffffff;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    box-shadow:0 0 0 3px var(--teal-700), 0 0 0 6px #fff, 0 0 0 7px var(--teal-light, var(--sage-line));
    overflow:hidden;padding:6px;
  }
  .certificate .seal-mini img{width:100%;height:100%;object-fit:contain;border-radius:50%;}

  .modal-footer{display:flex;gap:10px;padding:0 22px 22px;}

  .icon{display:inline-flex;}

  /* ---------- Print: show only the certificate, sized to fill an A4 page ---------- */
  @media print {
    @page { size: A4; margin: 8mm; }

    html, body { height:auto !important; overflow:visible !important; background:#fff !important; }
    .ribbon, .shell, .toast { display:none !important; }
    .modal-overlay:not(.cert-modal-overlay){ display:none !important; }

    .cert-modal-overlay{
      position:static !important;
      background:none !important;
      backdrop-filter:none !important;
      padding:0 !important;
      display:block !important;
      inset:auto !important;
    }
    .cert-modal-overlay .modal-box{
      box-shadow:none !important;
      border-radius:0 !important;
      max-width:none !important;
      max-height:none !important;
      overflow:visible !important;
      background:transparent !important;
    }
    .cert-modal-overlay .modal-head,
    .cert-modal-overlay .modal-footer{ display:none !important; }
    .cert-modal-overlay .modal-body{
      display:block !important;
      padding:0 !important;
    }
    #cert-print-area{
      width:100% !important;
      max-width:none !important;
      margin:0 !important;
      box-shadow:none !important;
      page-break-after: avoid !important;
      page-break-inside: avoid !important;
    }
    #cert-print-area .field-row{ padding:16px 0 !important; }
  }