:root {
  --blue: #2b5cf6;
  --blue-dark: #1f49d6;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #eef1f6;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--ink); background: var(--bg); }
.hidden { display: none !important; }
a { color: var(--blue); cursor: pointer; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; }

/* ---------- buttons ---------- */
.btn-primary {
  width: 100%; background: var(--blue); color: #fff; font-weight: 600; font-size: 15px;
  padding: 14px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s;
}
.btn-primary:hover { background: var(--blue-dark); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-soft { flex: 1; background: #f1f5f9; color: var(--ink); font-weight: 500; padding: 9px; border-radius: 8px; font-size: 13px; }
.btn-soft:hover { background: #e6ebf2; }
.btn-soft:disabled { opacity: .4; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--muted); font-size: 14px; padding: 6px 10px; border-radius: 8px; }
.btn-ghost:hover { background: #f1f5f9; }

/* ---------- brand logo ---------- */
.brand-logo { display: flex; align-items: center; gap: 10px; }
.brand-logo .logo-icon { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; }
.brand-logo .logo-wordmark { height: 18px; width: auto; }
.brand-logo .logo-wordmark.dark { filter: brightness(0); }
.brand-logo .logo-sign-label { font-weight: 800; letter-spacing: .18em; font-size: 13px; color: rgba(255,255,255,.75); margin-left: -4px; }
.brand-logo .logo-sign-label.dark { color: var(--muted); }

/* ============ AUTH SPLIT ============ */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; max-width: 1180px; margin: 0 auto;
  padding: 36px; gap: 0; align-items: stretch; }
.brand {
  background: var(--blue); color: #fff; border-radius: 22px 0 0 22px;
  padding: 44px; display: flex; flex-direction: column;
  background-image: radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.12), transparent 60%);
}
.brand-body { margin-top: auto; }
.brand h1 { font-size: 40px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
.brand .lead { margin-top: 18px; color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.6; max-width: 30ch; }
.quote { margin-top: 34px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px; padding: 20px; backdrop-filter: blur(2px); }
.quote .qtext { font-size: 14px; line-height: 1.55; }
.qfoot { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; }
.qfoot .avatar { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--blue);
  font-weight: 700; font-size: 12px; display: grid; place-items: center; }
.qfoot .stars { margin-left: auto; color: #ffd54a; letter-spacing: 2px; }

.formside { background: #fff; border-radius: 0 22px 22px 0; display: grid; place-items: center; padding: 44px;
  box-shadow: 0 24px 60px rgba(15,23,42,.08); }
.form-card { width: 100%; max-width: 360px; }
.steps { display: flex; align-items: center; gap: 8px; margin-bottom: 30px; }
.steps i { height: 2px; flex: 1; background: var(--line); border-radius: 2px; position: relative; }
.steps i.on { background: var(--blue); }
.steps i::before { content: ''; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.steps i.on::before { background: var(--blue); }
.form-card h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.form-card .sub { color: var(--muted); font-size: 14px; margin: 6px 0 22px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(43,92,246,.12); }
.err { color: #dc2626; font-size: 13px; margin-top: 10px; min-height: 16px; }
.switch { text-align: center; color: var(--muted); font-size: 14px; margin-top: 18px; }

/* ============ APP ============ */
.topbar { display: flex; align-items: center; justify-content: space-between; background: #fff;
  padding: 14px 26px; border-bottom: 1px solid var(--line); }
.userbox { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.userbox #userName { font-weight: 600; color: var(--ink); }

.work { display: flex; height: calc(100vh - 59px); }
.panel { width: 308px; background: #fff; border-right: 1px solid var(--line); padding: 20px; overflow-y: auto; }
.block { padding: 16px 0; border-bottom: 1px solid var(--line); }
.block:last-child { border-bottom: none; }
.block h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 12px; }
.hint { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.status { font-size: 13px; color: var(--blue); margin-top: 10px; min-height: 16px; }
.row { display: flex; gap: 8px; margin-top: 8px; }

.drop { display: grid; place-items: center; height: 84px; border: 2px dashed #cbd5e1; border-radius: 12px;
  color: var(--muted); font-size: 13px; cursor: pointer; transition: .15s; text-align: center; padding: 0 12px; }
.drop:hover { border-color: var(--blue); color: var(--blue); background: rgba(43,92,246,.03); }

#sigPad { width: 100%; height: 96px; border: 1px dashed #cbd5e1; border-radius: 10px; background: #fff;
  touch-action: none; cursor: crosshair; }
.palette { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.palette .chip { border: 2px solid var(--line); border-radius: 8px; padding: 4px; width: 84px; cursor: pointer; background: #fff; position: relative; }
.palette .chip.sel { border-color: var(--blue); }
.palette .chip img { width: 100%; height: 34px; object-fit: contain; display: block; }
.palette .chip .nm { display: block; font-size: 10px; color: var(--muted); text-align: center; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette .chip .x { position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 50%;
  background: #dc2626; color: #fff; font-size: 12px; line-height: 18px; text-align: center; }

.viewer { flex: 1; overflow: auto; padding: 26px; }
.viewer .empty { color: var(--muted); text-align: center; margin-top: 80px; font-size: 15px; }
#pages { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.page-wrap { position: relative; box-shadow: 0 6px 24px rgba(15,23,42,.14); }
.page-wrap canvas { display: block; border-radius: 4px; }

/* interactive placed signature */
.mark-sig { position: absolute; background-repeat: no-repeat; background-size: 100% 100%;
  border: 1px solid transparent; cursor: move; touch-action: none; mix-blend-mode: multiply; }
.mark-sig.sel { border: 1px dashed var(--blue); background-color: rgba(43,92,246,.05); }
.mark-sig .del, .mark-sig .handle { position: absolute; opacity: 0; transition: opacity .1s; }
.mark-sig.sel .del, .mark-sig.sel .handle, .mark-sig:hover .del, .mark-sig:hover .handle { opacity: 1; }
.mark-sig .del { top: -11px; right: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: #dc2626; color: #fff; font-size: 15px; line-height: 22px; text-align: center; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.mark-sig .handle { bottom: -9px; right: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--blue); border: 3px solid #fff; cursor: nwse-resize; box-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* upload-signature button (looks like a file drop) */
.sig-upload { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  margin-top: 8px; padding: 9px; border: 1px dashed #cbd5e1; border-radius: 8px; color: var(--muted);
  font-size: 13px; cursor: pointer; transition: .15s; }
.sig-upload:hover { border-color: var(--blue); color: var(--blue); background: rgba(43,92,246,.03); }

/* ---------- name-a-signature modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: grid; place-items: center; z-index: 50; }
.modal-card { background: #fff; border-radius: 16px; padding: 24px; width: 340px; max-width: 90vw;
  box-shadow: 0 24px 60px rgba(15,23,42,.25); }
.modal-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.modal-preview { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background:
  repeating-conic-gradient(#f1f5f9 0% 25%, #fff 0% 50%) 50% / 16px 16px; display: grid; place-items: center; height: 90px; }
.modal-preview img { max-width: 100%; max-height: 74px; object-fit: contain; }
.modal-card input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; margin: 14px 0; }
.modal-card input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(43,92,246,.12); }
.modal-card .row .btn-primary { width: auto; flex: 1; }

/* ---------- signature palette grid (sig panel) ---------- */
.palette-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.palette-grid .chip { width: auto; }
.palette-grid .chip img { height: 52px; }

/* ---------- mobile viewer download bar ---------- */
.viewer-actions { display: none; }
@media (max-width: 640px) {
  .viewer-actions {
    display: block;
    position: sticky; bottom: 0;
    padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px);
    background: linear-gradient(to top, rgba(238,241,246,1) 70%, rgba(238,241,246,0));
    margin: 0 -8px -12px;
  }
  .btn-download-mobile {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 16px; font-size: 15px; border-radius: 14px;
    box-shadow: 0 4px 20px rgba(43,92,246,.35);
  }
}

/* ---------- bottom tab bar ---------- */
.tab-bar { display: none; }

/* ---------- floating signature bar (mobile) ---------- */
.float-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 20px; box-shadow: 0 -4px 20px rgba(15,23,42,.25);
}
.float-bar img { width: 48px; height: 28px; object-fit: contain; background: rgba(255,255,255,.15); border-radius: 6px; padding: 3px; flex-shrink: 0; }
.float-bar #floatLabel { flex: 1; font-size: 14px; font-weight: 600; }
.float-cancel { background: rgba(255,255,255,.2); color: #fff; border: none; border-radius: 50%; width: 28px; height: 28px; font-size: 14px; cursor: pointer; flex-shrink: 0; }
.float-cancel:hover { background: rgba(255,255,255,.35); }

/* ============ RESPONSIVE ============ */

/* --- Tablet (≤ 880px) --- */
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; padding: 0; min-height: 100dvh; }
  .brand { border-radius: 0; padding: 28px 24px 32px; min-height: unset; }
  .brand h1 { font-size: 28px; }
  .brand .lead { font-size: 14px; }
  .formside { border-radius: 0; box-shadow: none; padding: 36px 24px; }
}

/* ============ MOBILE APP LAYOUT (≤ 640px) ============ */
@media (max-width: 640px) {
  /* ---- Login ---- */
  .brand { display: none; }
  .split { display: block; min-height: 100dvh; background: var(--bg); }
  .formside {
    min-height: 100dvh; border-radius: 0; padding: 48px 24px 32px;
    display: flex; flex-direction: column; justify-content: center; box-shadow: none;
  }
  .form-card { max-width: 100%; }
  .steps { display: none; }
  .form-card h2 { font-size: 26px; }
  .field input { font-size: 16px; padding: 14px; }
  .btn-primary { padding: 16px; font-size: 16px; }

  /* ---- Topbar ---- */
  .topbar { padding: 10px 16px; }
  .userbox { font-size: 13px; gap: 8px; }
  .brand-logo .logo-wordmark { height: 14px; }
  .btn-ghost { font-size: 13px; padding: 6px 8px; }

  /* ---- App layout: full-height panels, tab-switched ---- */
  .work {
    display: block;
    height: calc(100dvh - 56px - 68px); /* topbar + tab-bar */
    overflow: hidden;
    position: relative;
  }
  /* hide panels not managed by tabs */
  .hidden-mobile { display: none; }

  /* Each panel is full-screen, hidden by default */
  .panel, .viewer {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    border: none;
    background: #fff;
    padding: 16px;
    display: none;
  }
  /* active panel is shown */
  .panel.tab-active, .viewer.tab-active { display: block; }

  .block { padding: 14px 0; }
  .block h3 { font-size: 11px; margin-bottom: 12px; }
  .drop { height: 100px; font-size: 14px; border-radius: 16px; }
  .row { gap: 8px; margin-top: 10px; }
  .btn-soft { padding: 13px 8px; font-size: 14px; border-radius: 10px; }
  #signBtn { padding: 16px; font-size: 15px; border-radius: 12px; box-shadow: 0 4px 18px rgba(43,92,246,.3); }

  /* Viewer panel */
  .viewer { padding: 12px 8px; background: var(--bg); }
  #pages { gap: 16px; }

  /* Bigger touch handles for placed sigs */
  .mark-sig .del  { width: 30px; height: 30px; font-size: 18px; line-height: 30px; top: -14px; right: -14px; }
  .mark-sig .handle { width: 26px; height: 26px; bottom: -12px; right: -12px; }

  /* Signature palette — 2-col grid */
  .palette-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .palette-grid .chip img { height: 56px; }
  .palette-grid .chip .nm { font-size: 11px; }

  /* Modal — bottom sheet */
  .modal { align-items: flex-end; }
  .modal-card {
    width: 100%; max-width: 100%; border-radius: 24px 24px 0 0;
    padding: 20px 20px calc(env(safe-area-inset-bottom) + 24px);
    box-shadow: 0 -8px 40px rgba(15,23,42,.2);
  }
  .modal-card input { font-size: 16px; }

  /* ---- Bottom tab bar ---- */
  .tab-bar {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: calc(68px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(226,232,240,0.8);
    box-shadow: 0 -1px 0 rgba(0,0,0,.04), 0 -8px 32px rgba(15,23,42,.08);
    z-index: 40;
  }
  .tab-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 4px; background: none; border: none;
    color: #94a3b8; font-family: inherit; cursor: pointer;
    padding: 0 4px; position: relative; transition: color .2s;
    -webkit-tap-highlight-color: transparent;
  }
  .tab-btn::before {
    content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 36px; border-radius: 12px;
    background: transparent; transition: background .2s;
  }
  .tab-btn.active::before { background: rgba(43,92,246,.1); }
  .tab-btn.active { color: var(--blue); }
  .tab-icon { width: 22px; height: 22px; position: relative; z-index: 1; flex-shrink: 0; }
  .tab-icon-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
  .tab-icon-wrap .tab-icon { display: block; }
  .tab-label { font-size: 10px; font-weight: 600; letter-spacing: .02em; position: relative; z-index: 1; }
  .tab-badge {
    position: absolute; top: -5px; right: -8px;
    background: var(--blue); color: #fff; border-radius: 10px;
    font-size: 9px; font-weight: 700; padding: 1px 5px; min-width: 15px;
    text-align: center; border: 2px solid #fff; line-height: 1.4;
  }

  /* hide old float bar on mobile — tab bar replaces it */
  .float-bar { display: none !important; }
}

/* --- Small phones (≤ 380px) --- */
@media (max-width: 380px) {
  .drop { height: 84px; }
  .palette-grid { grid-template-columns: repeat(2,1fr); }
}