:root{
  --card-radius:12px; --card-pad:16px; --muted:#6b7280; --border:#e5e7eb;
  --ok:#ecfdf5; --faded:#f3f4f6;
  --soft-blue:#eef2ff; --soft-blue-border:#c7d2fe; --soft-blue-hover:#e0e7ff; --soft-blue-text:#111827;
  --weak:#fecaca; --fair:#fde68a; --good:#bbf7d0; --strong:#a7f3d0;
}
*{ box-sizing:border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#f7f7f7; margin:0; padding:24px; }
.wrap { max-width: 1100px; margin:0 auto; display:grid; gap:18px; }
.card { background:#fff; border:1px solid var(--border); border-radius:var(--card-radius);
        padding:calc(var(--card-pad) + 2px) calc(var(--card-pad) + 4px); box-shadow: 0 2px 10px rgba(0,0,0,.04); }
h2 { margin:4px 0 14px; font-size:20px; }
label { display:block; margin:8px 0 6px; font-weight:600; }
textarea { width:100%; min-height:160px; resize:vertical; border:1px solid #d1d5db; border-radius:8px; padding:12px; font: inherit; line-height:1.35; transition: background-color .15s ease, border-color .15s ease; }

/* inputs + select */
input[type=text],
input[type=password],
input[type=file],
select {
  width: var(--field-w, 100%);
  max-width: var(--field-max, none);
  min-width: 0;
  border:1px solid #d1d5db;
  border-radius:8px;
  padding:10px 12px;
  font: inherit;
  line-height:1.3;
  transition: background-color .15s ease, border-color .15s ease;
}

/* Utilities for control widths */
.w-45ch { --field-w: 45ch; }          /* fixed width = 45 characters */
.no-stretch { justify-self: start; }  /* prevent grid from stretching */

/* file input: width = 80 characters OR 30% of screen (whichever is smaller) */
input[type=file]{
  padding:8px;
  --field-w: min(80ch, 30vw);
  justify-self: start; /* prevent grid from stretching it */
}

/* optional utility retained */
input[type=file].file-half { --field-w: min(50vw, 100%); }

/* select tweaks */
select {
  padding-right:36px;
  background:#fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Auto-width select: width = (selected label length + extra)ch.
   JS should set --sel-ch; fallback is 12ch if JS didn't run yet. */
select.auto-fit {
  width: calc((var(--sel-ch, 12) + 14) * 1ch);
  justify-self: start;       /* prevent grid from stretching it */
}

/* layout + misc … unchanged */
.row { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.btn { padding:10px 14px; border-radius:8px; border:1px solid var(--border); background:#f9fafb; cursor:pointer; transition: background-color .15s ease, opacity .15s ease; }
.btn:hover:not([disabled]) { background:#f3f4f6; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.btn-primary { background:var(--soft-blue); color:var(--soft-blue-text); border-color:var(--soft-blue-border); }
.btn-primary:hover:not([disabled]){ background:var(--soft-blue-hover); }
.muted { color:var(--muted); font-size:.92rem; }

/* copy row flex handling */
.copyrow { display:flex; gap:8px; align-items:center; }
.copyrow input { flex:1; min-width:0; }     /* allow shrink within flex */
.copyrow .no-flex { flex:0 0 auto; }        /* opt-out: don't stretch this input */

.counter { text-align:right; color:var(--muted); font-size:.9rem; margin-top:6px; }
.ok { color:#065f46; }
.err { color:#991b1b; }
.faded-bg { background: var(--faded) !important; }
.success-bg { background: var(--ok) !important; border-color:#A7F3D0 !important; }
.center { text-align:center; }
.toggle-row { display:flex; gap:8px; margin-top:10px; }
.toggle-row .tab { padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer; }
.toggle-row .tab.active { background:var(--soft-blue); border-color:var(--soft-blue-border); }
.tabpanel { display:none; }
.tabpanel.active { display:block; }

/* strength meter … unchanged */
.strength-wrap{ margin-top:6px; }
.strength-bar{ height:8px; width:100%; background:#eee; border-radius:9999px; overflow:hidden; }
.strength-bar > div{ height:8px; width:0%; transition:width .2s ease; }
.strength-weak { background: var(--weak); }
.strength-fair { background: var(--fair); }
.strength-good { background: var(--good); }
.strength-strong { background: var(--strong); }
.strength-label{ font-size:.85rem; color:var(--muted); margin-top:4px; }

@media (max-width: 800px){
  .row{ grid-template-columns: 1fr; }
}

/* error block … unchanged */
#global-error.fpass-error {
  color: #b00020;
  font-weight: 700;
  background: #ffe8e8;
  border: 1px solid #f3b4b4;
  padding: 10px 12px;
  border-radius: 6px;
  margin-top: 8px;
  max-width: var(--error-max, 40ch);
  overflow-wrap: anywhere;
}

/* Password reveal buttons (toggle) — force color last so it wins */
.with-toggle > button.toggle,
button.toggle {
  color: var(--soft-blue-text) !important;
}
.with-toggle > button.toggle:hover,
.with-toggle > button.toggle:focus,
button.toggle:hover,
button.toggle:focus {
  color: var(--soft-blue-text) !important;
}
button.toggle:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Force the #mode dropdown to a fixed width (adjust as needed) */
#mode {
  width: 35ch !important;
  max-width: none !important;
  justify-self: start; /* prevent grid from stretching it */
}
.mono-ch { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* Make #confirm render ~80 characters wide (content + padding/border)
   and stop it from stretching in .copyrow flex rows */
#confirm {
  width: calc(80ch + 26px) !important; /* 26px = 12px+12px padding + 1px+1px border */
  max-width: none !important;
  box-sizing: border-box;              /* count padding/border in width */
  flex: 0 0 auto !important;           /* override .copyrow input { flex:1 } */
  justify-self: start;                 /* if it's in a CSS grid */
}
#password {
  width: calc(80ch + 26px) !important; /* 26px = 12px+12px padding + 1px+1px border */
  max-width: none !important;
  box-sizing: border-box;              /* count padding/border in width */
  flex: 0 0 auto !important;           /* override .copyrow input { flex:1 } */
  justify-self: start;                 /* if it's in a CSS grid */
}

/* Put this near the end of your CSS */
#showbut.toggle {
  background: var(--soft-blue);
  color: var(--soft-blue-text);
  border: 1px solid var(--soft-blue-border);
  padding: 8px 12px;
  border-radius: 8px;
  font: inherit;
  line-height: 1.3;
  cursor: pointer;
  display: inline-block;      /* ensure it has box */
  pointer-events: auto;       /* make sure clicks pass through */
}
#showbut.toggle:hover { background: var(--soft-blue-hover); }
#showbut.toggle:disabled { opacity:.6; cursor:not-allowed; }
/* Reusable password strength meter for .meter > .bar structure */
.meter{
  height: 8px;
  width: 100%;
  background: #eee;
  border-radius: 9999px;
  overflow: hidden;
}
.meter .bar{
  display: block;
  height: 100%;
  width: 0;                   /* JS updates this to 0–100% */
  background: #d1d5db;        /* default when no class applied */
  transition: width .2s ease;
}

/* Optional colors if your JS adds .weak/.fair/.good/.strong */
.meter .bar.weak   { background: var(--weak); }
.meter .bar.fair   { background: var(--fair); }
.meter .bar.good   { background: var(--good); }
.meter .bar.strong { background: var(--strong); }
#strength-label.weak   { color: var(--weak-text,   #991b1b); }  /* dark red */
#strength-label.fair   { color: var(--fair-text,   #92400e); }  /* dark amber */
#strength-label.good   { color: var(--good-text,   #065f46); }  /* dark green */
#strength-label.strong { color: var(--strong-text, #065f46); }  /* dark green */}

/* Sensible element cursors */
button, .btn, [role="button"]        { cursor: pointer; }
a[href]                              { cursor: pointer; }
input[type="text"], textarea         { cursor: text; }
[disabled], .is-disabled             { cursor: not-allowed !important; }
.drag, .draggable                    { cursor: grab; }
.drag:active, .draggable:active      { cursor: grabbing; }
.copyable                            { cursor: copy; }
.zoomable                            { cursor: zoom-in; }
.zoomable.is-zoomed                  { cursor: zoom-out; }

  /* Link colors only (regular/visited black, hover red) */
  .nav-inline a { color: #000; text-decoration: none; }
  .nav-inline a:visited { color: #000; }
  .nav-inline a:hover { color: red; }