/* =====================================================================
   PATA BOOK — all styles for the website, user panel and admin panel.
   Plain CSS: no build step. Edit, save, deploy.

   HOW TO CHANGE THE LOOK
   - Colours / font / corner radius → change the variables in section 1.
     Example: brand green is --brand. Change it once, every button follows.
   - Sticker (label) layout → section 9. Sizes are in mm so prints are exact.
   - Phone layout → section 13 (all @media rules are kept together there).

   CONTENTS
    1. Theme variables          8. Dialogs, confirm box, toast
    2. Base (page, text)        9. Sticker / label (preview + print)
    3. Buttons                 10. Public website (landing, pages)
    4. Forms                   11. Small widgets (password eye, upload box)
    5. Alerts, badges          12. Admin bits (bar chart)
    6. Cards, tables, stats    13. Responsive (tablet + phone)
    7. App layout (sidebar)
   ===================================================================== */


/* 1. THEME VARIABLES ------------------------------------------------- */
:root {
  --bg: #f5f4ef;            /* page background            */
  --surface: #ffffff;       /* cards                      */
  --ink: #17201c;           /* main text                  */
  --muted: #646e69;         /* secondary text             */
  --line: #e2e0d8;          /* borders                    */
  --brand: #0d7a4e;         /* brand green (buttons, links)*/
  --brand-dark: #095c3a;    /* brand green on hover       */
  --brand-soft: #e3f2ea;    /* light green backgrounds    */
  --brand-ink: #ffffff;     /* text on green              */
  --dark: #12201a;          /* sidebar / dark bands       */
  --amber-soft: #fff3dc;    /* warnings                   */
  --red: #b93226;           /* delete / errors            */
  --red-soft: #fde9e6;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20, 30, 25, .06), 0 4px 16px rgba(20, 30, 25, .05);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
}


/* 2. BASE ------------------------------------------------------------ */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1em; }
small, .muted { color: var(--muted); }
code { background: #efeee8; padding: 1px 5px; border-radius: 5px; font-size: .9em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
/* Long words (IBAN, emails, transaction ids) break instead of pushing the page wider on phones */
.card, .alert, .stat, .feature, .price-card, .faq details, td, .ccard { overflow-wrap: anywhere; }


/* 3. BUTTONS --------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 9px 14px; border-radius: 10px; font: 600 14px/1.2 var(--font); cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { border-color: #c9c6bb; background: #fbfaf7; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary, .btn-print { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn-primary:hover, .btn-print:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-danger { color: var(--red); }                                   /* outline red: small delete icons */
.btn-danger:hover { background: var(--red-soft); border-color: #f2c4bd; }
.btn-danger-solid { background: var(--red); border-color: var(--red); color: #fff; } /* filled red: "Haan, delete karo" */
.btn-danger-solid:hover { background: #9c271d; border-color: #9c271d; }
.btn-sm { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.btn-lg { padding: 13px 22px; font-size: 16px; border-radius: 12px; }
.btn-block { width: 100%; }


/* 4. FORMS ----------------------------------------------------------- */
label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.field { margin-bottom: 14px; }
.field .hint { font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 4px; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], select, textarea {
  width: 100%; border: 1px solid #d6d3c9; background: #fff; border-radius: 10px; padding: 10px 12px; font: 15px/1.3 var(--font); color: var(--ink);
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(13, 122, 78, .25); border-color: var(--brand); }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; margin-bottom: 8px; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }   /* two fields side by side */
.error-text { color: var(--red); font-size: 13px; margin-top: 4px; }


/* 5. ALERTS & BADGES ------------------------------------------------- */
.alert { padding: 11px 14px; border-radius: 10px; margin-bottom: 16px; font-weight: 500; border: 1px solid transparent; }
.alert-success { background: var(--brand-soft); color: #08452c; border-color: #c4e4d3; }
.alert-error { background: var(--red-soft); color: #7d1f16; border-color: #f2c4bd; }
.alert-warn { background: var(--amber-soft); color: #6b4000; border-color: #f4dcae; }
.alert ul { margin: 4px 0 0 18px; padding: 0; }
.banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eeece5; color: #4a524e; }
.badge-green { background: var(--brand-soft); color: #08452c; }
.badge-amber { background: var(--amber-soft); color: #7a4a00; }
.badge-red { background: var(--red-soft); color: #8c2318; }


/* 6. CARDS, TABLES, STATS, GRIDS ------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty .big { font-size: 40px; }

.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 10px; border-bottom: 1px solid #efede7; vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: #fbfaf6; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.stat .k { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.stat .v { font-size: 1.7rem; font-weight: 800; margin-top: 4px; }
.stat.hl { border-color: #f4dcae; background: var(--amber-soft); }      /* highlighted (needs attention) */

.pager { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.pager a, .pager span { padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-size: 13px; }
.pager .on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Page grids: a narrow left column + wide right column, or two equal columns */
.settings-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 18px; align-items: start; }
.contact-grid { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 18px; align-items: start; margin-top: 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
/* Grid/flex children may shrink below their content. Without this, one long word makes the whole page wider than the phone. */
.shell > *, .settings-grid > *, .contact-grid > *, .grid-2 > *, .stat-grid > *, .row > *, .toolbar > *, .page-head > * { min-width: 0; }


/* 7. APP LAYOUT (sidebar + main area) -------------------------------- */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side { background: var(--dark); color: #d8e4de; padding: 20px 14px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.side .logo { color: #fff; font-weight: 800; font-size: 19px; display: flex; align-items: center; gap: 9px; padding: 0 8px 18px; text-decoration: none; }
.logo-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--brand); display: grid; place-items: center; color: #fff; font-size: 15px; flex: none; }
.nav a { display: flex; align-items: center; gap: 10px; color: #c7d5ce; padding: 9px 10px; border-radius: 9px; font-weight: 600; font-size: 14px; text-decoration: none; }
.nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav a.on { background: rgba(13, 122, 78, .35); color: #fff; }
.nav .sep { height: 1px; background: rgba(255, 255, 255, .08); margin: 10px 4px; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; }
.nav-badge[hidden] { display: none; }
.side .who { margin-top: auto; font-size: 13px; padding: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
.side .who b { display: block; color: #fff; }
.side .who button { color: #9fb7ab; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; margin-top: 6px; }
.mob-top { display: none; }                                           /* phone top bar, shown in section 13 */
.main { padding: 26px 30px 60px; max-width: 1200px; width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }

/* Contacts page */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .search { flex: 1 1 260px; position: relative; }
.toolbar .search input { padding-left: 38px; height: 46px; font-size: 16px; }
.toolbar .search svg { position: absolute; left: 12px; top: 13px; color: var(--muted); }
.toolbar .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bulkbar { display: none; align-items: center; gap: 10px; background: var(--dark); color: #fff; padding: 10px 14px; border-radius: 12px; margin-bottom: 12px; position: sticky; top: 8px; z-index: 30; flex-wrap: wrap; }
.bulkbar.show { display: flex; }
.cod-input { width: 96px !important; padding: 7px 8px !important; font-size: 14px !important; text-align: right; }
.cod-wrap { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.c-name { font-weight: 700; }
.c-addr { color: var(--muted); font-size: 13px; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.cards { display: none; }                                             /* phone card list, shown in section 13 */
.ccard { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.ccard .top { display: flex; gap: 10px; align-items: flex-start; }
.ccard .top .info { flex: 1; min-width: 0; }
.ccard .bottom { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.ccard .bottom .btn-print { flex: 1; min-width: 90px; }
.paste-box { background: var(--brand-soft); border: 1px dashed #9fd0b6; border-radius: 12px; padding: 12px; margin-bottom: 16px; }
.paste-box textarea { min-height: 70px; background: #fff; }
.paste-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.paste-or { font-size: 13px; color: var(--muted); }
.scan-btn { margin: 0; background: #fff; border-color: #9fd0b6; color: var(--brand); }
.scan-btn.is-busy { opacity: .6; pointer-events: none; }
.scan-status { font-size: 13px; color: #08452c; margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.scan-status:empty { display: none; }
.spin { width: 14px; height: 14px; border: 2px solid #9fd0b6; border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.just-filled { animation: filled 2s ease-out; }                        /* field flashes after auto-fill */
@keyframes filled { 0%, 40% { background: #fff6cf; border-color: #e6c35a; } 100% { background: #fff; } }
.dup-warn { display: none; }
.dup-warn.show { display: block; }

/* Sticker settings page */
.preset-list { display: grid; gap: 6px; }
.preset-list label { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-weight: 600; cursor: pointer; margin: 0; }
.preset-list label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.preset-list input { accent-color: var(--brand); }
.preview-stage { background: repeating-linear-gradient(45deg, #ecebe5, #ecebe5 10px, #e6e4dd 10px, #e6e4dd 20px); border-radius: 12px; padding: 24px; overflow: hidden; min-height: 320px; }
.preview-stage .lbl { background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .15); }
.prev-box { position: relative; margin: 0 auto; }                     /* sized by JS to the scaled label */
.prev-box .lbl { position: absolute; top: 0; left: 0; transform-origin: top left; }
.preview-note { font-size: 12px; color: var(--muted); margin-top: 8px; text-align: center; }

/* Login / register pages */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--ink); justify-content: center; margin-bottom: 18px; text-decoration: none; }
.auth-foot { text-align: center; font-size: 14px; color: var(--muted); margin-top: 14px; }


/* 8. DIALOGS, CONFIRM BOX, TOAST ------------------------------------- */
dialog { border: 0; border-radius: 16px; padding: 0; width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
dialog::backdrop { background: rgba(15, 25, 20, .45); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dlg-head h2 { margin: 0; }
.dlg-body { padding: 18px 20px; max-height: calc(100dvh - 190px); overflow: auto; }
.dlg-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--line); background: #faf9f5; flex-wrap: wrap; }
.x { background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--muted); }

/* "Pakka?" confirm box — built by PB.confirm() in app.js */
.pb-confirm { width: min(420px, calc(100vw - 32px)); border-radius: 18px; box-shadow: 0 24px 70px rgba(10, 20, 15, .3); }
.pb-confirm::backdrop { background: rgba(15, 25, 20, .5); backdrop-filter: blur(2px); }
.pb-confirm[open] { animation: pbc-in .16s ease-out; }
@keyframes pbc-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.pb-confirm form { padding: 26px 24px 20px; text-align: center; }
.pbc-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; background: var(--brand-soft); color: var(--brand); }
.pb-confirm.is-danger .pbc-icon { background: var(--red-soft); color: var(--red); }
.pbc-title { font-size: 1.2rem; margin: 0 0 8px; }
.pbc-msg { color: var(--muted); margin: 0 0 20px; font-size: 15px; }
.pbc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pbc-actions .btn { width: 100%; }

/* Small message at the bottom of the screen — PB.toast() */
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--dark); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; opacity: 0; pointer-events: none; transition: all .2s; z-index: 100; max-width: calc(100vw - 32px); }
#toast.show { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
#toast a { color: #8ee0b7; margin-left: 8px; }


/* 9. STICKER / LABEL ---------------------------------------------------
   Used by the live preview AND the real print. Sizes are mm/pt so the
   printed sticker is exactly the chosen size. Black & white for thermal.
   The HTML is built by PB.labelHTML() in app.js.
   --------------------------------------------------------------------- */
.lbl { overflow: hidden; display: flex; flex-direction: column; color: #000; background: #fff; font-family: Arial, "Helvetica Neue", "Noto Sans", "Noto Nastaliq Urdu", sans-serif; line-height: 1.22; position: relative; }
.lbl .l-to { display: flow-root; }                                    /* holds the floating COD box */
.lbl .l-tagrow { display: flex; align-items: center; gap: 2mm; margin-bottom: 1mm; }
.lbl .l-tag { font-size: .72em; font-weight: 700; letter-spacing: .08em; border: .25mm solid #000; padding: .2mm 1.2mm; }
.lbl .l-date { font-size: .72em; }
.lbl .l-row { margin-top: .9mm; }                                     /* one "Name: / Address: / Phone Number:" line */
.lbl .l-name-row { margin-top: 0; }
.lbl .l-k { font-weight: 800; letter-spacing: .01em; }                /* the "Name:" word */
.lbl .l-name-row .l-k { font-size: 1.15em; }
.lbl .l-name { font-size: 1.45em; font-weight: 800; word-break: break-word; }
.lbl .l-addr { word-break: break-word; white-space: pre-line; }
.lbl .l-city { font-weight: 800; text-transform: uppercase; }
.lbl .l-phone { font-size: 1.15em; font-weight: 700; }
.lbl .l-cod { float: right; margin: 0 0 1.5mm 2.5mm; border: .5mm solid #000; padding: 1.2mm 2mm; text-align: center; }
.lbl .l-cod .t { font-size: .75em; font-weight: 700; letter-spacing: .06em; }
.lbl .l-cod .v { font-size: 1.5em; font-weight: 800; white-space: nowrap; }
.lbl .l-notes { margin-top: 1.5mm; font-size: .9em; font-style: italic; word-break: break-word; }
.lbl .l-from { margin-top: auto; border-top: .3mm solid #000; padding-top: 1.5mm; font-size: .82em; word-break: break-word; }
.lbl .l-brand { position: absolute; bottom: .6mm; right: 2mm; font-size: 5pt; opacity: .7; } /* trial users only */
/* Very small stickers (e.g. 2.5x1"): tighter, no TO/date row */
.lbl.small .l-tagrow { display: none; }
.lbl.small .l-name { font-size: 1.2em; }
.lbl.small .l-addr { margin-top: .3mm; }
.lbl.small .l-cod { padding: .4mm 1mm; border-width: .3mm; }
.lbl.small .l-cod .t { display: none; }
.lbl.small .l-cod .v { font-size: 1.1em; }

/* Print: labels are drawn off-screen in #print-root, and only that is printed */
#print-root { position: fixed; left: -20000px; top: 0; }
.p-page { overflow: hidden; }
.p-grid { display: grid; }
.p-grid .lbl { border: .2mm dashed #888; }                           /* cut lines on A4 sheets */
@media print {
  html, body { background: #fff !important; margin: 0 !important; }
  body > *:not(#print-root) { display: none !important; }
  #print-root { position: static; left: auto; }
  .p-page { break-after: page; page-break-after: always; }
  .p-page:last-child { break-after: auto; page-break-after: auto; }
}


/* 10. PUBLIC WEBSITE ------------------------------------------------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.site-nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.site-nav .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--ink); text-decoration: none; }
.site-nav .links { display: flex; gap: 10px; align-items: center; }
.section { padding: 60px 0; }
.section h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.02em; }
.section .sub { color: var(--muted); font-size: 1.05rem; max-width: 40em; }
.prose { max-width: 760px; }
.prose h2 { margin-top: 28px; }

/* Landing: hero */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 40px 0 60px; }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.08; letter-spacing: -.03em; margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero .lead { font-size: 1.15rem; color: #3c4541; max-width: 34em; margin-bottom: 26px; }
.hero .cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero .trust { margin-top: 16px; font-size: 13px; color: var(--muted); }
.hero-art { position: relative; }
.hero-art .phone-card { background: #fff; border-radius: 20px; box-shadow: 0 30px 80px rgba(20, 40, 30, .18); padding: 18px; border: 1px solid var(--line); }
.hero-art .mini-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0eee8; font-size: 14px; }
.hero-art .mini-row b { display: block; }
.hero-art .sticker { position: relative; width: max-content; margin: -38px 18px 0 auto; transform: rotate(3deg); box-shadow: 0 18px 40px rgba(0, 0, 0, .2); }

/* Landing: sections */
.pain, .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.pain .card, .steps .card { margin: 0; }
.pain .n { font-size: 28px; margin-bottom: 6px; }
.steps { counter-reset: s; }
.steps .card { position: relative; padding-top: 46px; }
.steps .card::before { counter-increment: s; content: counter(s); position: absolute; top: 16px; left: 20px; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 14px; }
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 26px; }
.feature { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.feature b { display: block; margin-bottom: 4px; }
.feature span { color: var(--muted); font-size: 14px; }
.pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); gap: 18px; margin-top: 26px; justify-content: center; }
.price-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; }
.price-card.pro { border: 2px solid var(--brand); box-shadow: 0 20px 50px rgba(13, 122, 78, .14); }
.price-card .amt { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; }
.price-card .amt small { font-size: 1rem; font-weight: 600; }
.price-card ul { padding-left: 18px; margin: 14px 0 22px; }
.price-card li { margin-bottom: 6px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq details p { margin: 10px 0 0; color: #3c4541; }
.cta-band { background: var(--dark); color: #fff; border-radius: 22px; padding: 44px; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #b9cbc2; }

/* Footer (dark band at the bottom of every website page) */
.foot { background: var(--dark); color: #a9bdb3; margin-top: 40px; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 32px; padding: 56px 0 40px; }
.foot-grid > * { min-width: 0; }
.foot .logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 20px; text-decoration: none; }
.foot-brand p { margin: 14px 0 18px; max-width: 30em; line-height: 1.6; }
.foot h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 4px 0 14px; }
.foot-col a, .foot-col p { display: flex; align-items: flex-start; gap: 10px; color: #a9bdb3; margin: 0 0 10px; text-decoration: none; overflow-wrap: anywhere; }
.foot-col a:hover { color: #fff; }
.foot-col svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: #4fc28a; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .09); padding: 20px 150px 26px 0; font-size: 13px; } /* right space: WhatsApp button */
.foot-pay b { display: inline-block; font-weight: 600; color: #d8e4de; border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; padding: 2px 8px; margin-left: 4px; }

/* Floating WhatsApp button (text on desktop, round icon on phones) */
.wa-float { position: fixed; right: 18px; bottom: 18px; background: #1faa59; color: #fff; border-radius: 999px; padding: 12px 18px; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); z-index: 20; text-decoration: none !important; }
.wa-float svg { display: none; }


/* 11. SMALL WIDGETS ---------------------------------------------------- */
/* Password show/hide eye — password-eye.js */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px !important; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; background: none; border: 0; border-radius: 8px; color: var(--muted); cursor: pointer; }
.pw-eye:hover { color: var(--ink); background: #f1efe9; }
.pw-eye:focus-visible { outline: 2px solid rgba(13, 122, 78, .35); }
/* An input and its button side by side (Users → reset password, Settings → test email) */
.inline-form { display: flex; gap: 6px; align-items: center; }
.inline-form .pw-wrap, .inline-form input { flex: 1; min-width: 0; }

/* Settings → SMTP boxes (shown only when SMTP is selected) */
.smtp-box { border-left: 3px solid var(--brand-soft); padding-left: 14px; margin-bottom: 14px; }

/* Upload box — file-drop.js. The real <input type=file> is invisible and covers the box, so tap/drag work natively. */
.fdrop { position: relative; border: 2px dashed #cfd8d2; border-radius: 14px; background: #fafbf8; transition: border-color .15s, background .15s; }
.fdrop:hover, .fdrop.is-over { border-color: var(--brand); background: var(--brand-soft); }
.fdrop:focus-within { outline: 3px solid rgba(13, 122, 78, .2); outline-offset: 2px; }
.fdrop.is-invalid { border-color: var(--red); background: var(--red-soft); }
.fdrop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; font-size: 0; }
.fdrop-view { padding: 20px 16px; text-align: center; pointer-events: none; }
.fdrop-icon { width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--brand); display: grid; place-items: center; margin: 0 auto 10px; }
.fdrop-title { font-weight: 700; font-size: 15px; }
.fdrop-sub { color: var(--brand); font-weight: 600; font-size: 14px; margin-top: 2px; }
.fdrop-tap { display: none; }
@media (hover: none) { .fdrop-tap { display: inline; } .fdrop-drag { display: none; } }   /* touch screens say "tap" */
.fdrop-hint { color: var(--muted); font-size: 12px; margin-top: 6px; }
.fdrop.has-file { border-style: solid; border-color: #bfe3cf; background: #fff; }
.fdrop.has-file .fdrop-view { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; }
.fdrop-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; border: 1px solid var(--line); background: #f3f2ec; }
.fdrop-doc { display: grid; place-items: center; color: var(--brand); }
.fdrop-meta { flex: 1; min-width: 0; }
.fdrop-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fdrop-size { font-size: 12px; color: var(--muted); margin-top: 2px; }
.fdrop-ok { color: var(--brand); font-weight: 700; }
.fdrop-remove { pointer-events: auto; position: relative; z-index: 2; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.fdrop-remove:hover { color: var(--red); border-color: #f2c4bd; background: var(--red-soft); }
.fdrop-error { color: var(--red); font-size: 13px; font-weight: 600; margin-top: 6px; }
.fdrop-error:empty { display: none; }


/* 12. ADMIN BITS ------------------------------------------------------- */
/* File attached to a contact message (Admin → Messages) */
.msg-file { display: inline-flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 600; }
.msg-file img { display: block; max-width: min(320px, 100%); max-height: 240px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: #f3f2ec; }
.msg-file-doc { display: inline-block; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px; background: #faf9f5; color: var(--ink); }

/* Signups bar chart on the admin dashboard */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding-top: 10px; }
.bars .b { flex: 1; background: var(--brand); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; opacity: .85; }
.bars .b:hover { opacity: 1; }
.bars .b span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--muted); }
.bars-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; }


/* 13. RESPONSIVE --------------------------------------------------------
   Desktop styles are above. Each block below only changes what is needed
   for smaller screens. Widths: 900 tablet · 860 sidebar hides · 760 tables
   stack · 600 phone · 360 very small phone.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .settings-grid, .contact-grid, .grid-2 { grid-template-columns: 1fr; }
  .main { padding: 18px 16px 70px; }
}

@media (max-width: 860px) {
  /* Sidebar becomes a slide-in menu opened by the "Menu" button */
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 30% 0 0; z-index: 50; transform: translateX(-105%); transition: transform .2s; height: 100%; }
  .side.open { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
  .mob-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--dark); color: #fff; position: sticky; top: 0; z-index: 40; }
  .mob-top .logo { color: #fff; font-weight: 800; display: flex; gap: 8px; align-items: center; }
  .mob-top button { background: none; border: 1px solid rgba(255, 255, 255, .25); color: #fff; border-radius: 8px; padding: 6px 10px; font: inherit; }
  .row { grid-template-columns: 1fr; }
  /* Contacts: card list instead of the wide table */
  .table-desktop { display: none; }
  .cards { display: grid; gap: 10px; }
  /* Landing page: one column */
  .hero { grid-template-columns: 1fr; padding-top: 16px; }
  .hero-art .sticker { position: static; transform: none; margin-top: 16px; display: flex; justify-content: center; box-shadow: none; }
  .pain, .steps, .pricing { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .cta-band { padding: 30px 20px; }
  .site-nav .links .hide-m { display: none; }
}

/* Tables with class "table-stack" become one card per row on phones.
   Each <td data-label="..."> shows its column name on the left. */
@media (max-width: 760px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; margin: 10px 0; background: #fff; }
  .table-stack tr:hover td { background: transparent; }
  .table-stack td { border: 0; border-bottom: 1px dashed #ece9e2; padding: 8px 0; text-align: right; overflow: hidden; overflow-wrap: break-word; }
  .table-stack td:last-child { border-bottom: 0; }
  .table-stack td::before { content: attr(data-label); float: left; margin-right: 12px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; text-align: left; padding-top: 2px; }
  .table-stack td[data-label=""]::before, .table-stack td:not([data-label])::before { display: none; }
  .table-stack td.td-full { text-align: left; }                     /* wide cells: label on top */
  .table-stack td.td-full::before { float: none; display: block; margin-bottom: 6px; }
  .table-stack code { white-space: nowrap; }
  .card:has(.table-stack) { padding: 4px; background: transparent; border: 0; box-shadow: none; }
}

@media (max-width: 600px) {
  h1 { font-size: 1.35rem; }
  .page-head { align-items: flex-start; }
  .page-head .btn-lg { width: 100%; }
  .toolbar { gap: 8px; }
  .toolbar .search { flex: 1 1 100%; }
  .toolbar > .btn, .toolbar > select { flex: 1 1 auto; }
  .card { padding: 16px; }
  .card-head { align-items: flex-start; }
  .c-actions { flex-wrap: wrap; justify-content: flex-start; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 12px; }
  .stat .v { font-size: 1.3rem; }
  .bulkbar { top: 64px; }
  .dlg-foot .btn { flex: 1 1 auto; }
  .paste-actions .btn { flex: 1 1 auto; }
  .paste-or { display: none; }
  .pbc-actions { grid-template-columns: 1fr; }
  .pbc-actions .pbc-ok { order: -1; }                                /* main action on top, easy to reach */
  .site-nav .links .btn { padding: 8px 12px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 40px 0 28px; }
  .foot-brand, .foot-contact { grid-column: 1 / -1; }
  .foot-brand .btn { width: 100%; }
  .foot-bottom { flex-direction: column; align-items: flex-start; padding: 20px 0 84px; }   /* room for the WhatsApp button */
  .hero .cta .btn, .err-actions .btn { flex: 1 1 100%; }
  .wa-float { width: 52px; height: 52px; padding: 0; display: grid; place-items: center; font-size: 0; right: 14px; bottom: 14px; }
  .wa-float svg { display: block; width: 28px; height: 28px; }
}

@media (max-width: 360px) {
  .stat-grid { grid-template-columns: 1fr; }
  .cod-input { width: 80px !important; }
}