/* ── ZayroDocX — White & Red Only ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Hide scrollbar across all browsers */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

:root {
  --brand:        #dc2626;
  --brand-dark:   #b91c1c;
  --brand-deep:   #991b1b;
  --brand-light:  #fee2e2;
  --brand-pale:   #fff5f5;
  --bg:           #f7f7f7;
  --surface:      #ffffff;
  --surface2:     #fafafa;
  --border:       #e8e8e8;
  --text:         #111111;
  --text-muted:   #666666;
  --success:      #16a34a;
  --success-bg:   #f0fdf4;
  --error:        #dc2626;
  --error-bg:     #fff5f5;
  --warning:      #d97706;
  --shadow:       0 1px 4px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 16px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:    0 12px 32px rgba(0,0,0,.12);
  --radius:       14px;
  --radius-sm:    8px;
  --transition:   .2s ease;
  --mh-h:         64px;
  --bc-h:         38px;
}

html, body {
  height: 100%;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

body { padding-top: var(--mh-h); }

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
.main-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--mh-h);
  background: #ffffff;
  border-bottom: 2px solid var(--brand);
  box-shadow: 0 2px 12px rgba(220,38,38,.1);
}
.mh-inner {
  max-width: 1400px; margin: 0 auto;
  height: 100%; display: flex; align-items: center;
  padding: 0 1.5rem; gap: 1.5rem;
}

/* Brand */
.mh-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex-shrink: 0; }
.mh-logo { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.mh-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-name { font-size: 1.05rem; font-weight: 800; color: #111111; letter-spacing: -.02em; white-space: nowrap; }
.mh-name span { color: var(--brand); }
.mh-brand:hover { text-decoration: none; }

/* Nav */
.mh-nav { display: flex; align-items: center; gap: 0; flex: 1; }
.mh-item { position: relative; display: flex; align-items: center; }

.mh-nav-icon { font-size: .78rem; opacity: .75; }
.mh-link {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 0 .85rem; height: var(--mh-h); line-height: var(--mh-h);
  font-size: .82rem; font-weight: 600; color: #555555;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: color .15s; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.mh-link:hover, .mh-item:hover > .mh-link {
  color: var(--brand); border-bottom-color: var(--brand); text-decoration: none;
}
.mh-caret { font-size: .6rem; transition: transform .2s; }
.mh-item:hover .mh-caret { transform: rotate(180deg); }

.mh-all-tools {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: 0 .85rem; height: var(--mh-h);
  font-size: .82rem; font-weight: 600; color: #555555;
  white-space: nowrap; text-decoration: none;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
  margin-bottom: -2px;
}
.mh-all-tools:hover { color: var(--brand); border-bottom-color: var(--brand); text-decoration: none; }

/* Dropdown */
.mh-drop {
  display: none; position: absolute; top: calc(var(--mh-h) - 2px); left: 0;
  min-width: 260px; background: #ffffff;
  border: 1px solid #e8e8e8; border-top: 2px solid var(--brand);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12); padding: .5rem;
  z-index: 300; animation: dropFade .15s ease;
}
@keyframes dropFade { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.mh-item.open > .mh-drop,
.mh-item:hover > .mh-drop { display: block; }
.mh-drop-wide { min-width: 240px; }
.mh-drop-mega { min-width: 340px; }
.mhd-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

.mh-drop-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .65rem; border-radius: 8px;
  text-decoration: none; color: #111111;
  transition: background .12s;
}
.mh-drop-item:hover { background: var(--brand-pale); text-decoration: none; }
.mh-drop-item.active { background: var(--brand-light); }

.mhd-icon {
  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .78rem;
  background: var(--brand-light); color: var(--brand);
}
.mhd-text { display: flex; flex-direction: column; min-width: 0; }
.mhd-text strong { font-size: .8rem; font-weight: 600; line-height: 1.2; white-space: nowrap; color: #111111; }
.mhd-text em { font-size: .7rem; color: #888888; font-style: normal; white-space: nowrap; }
.mhd-ai {
  display: inline-block; font-size: .55rem; font-weight: 700; letter-spacing: .04em;
  background: var(--brand); color: #ffd2d2;
  padding: 1px 4px; border-radius: 3px; margin-top: 1px;
}

.mhd-divider { height: 1px; background: #e8e8e8; margin: .4rem .5rem; }
.mhd-group-label {
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--brand); padding: .3rem .65rem .1rem;
}

/* ConnectSpace nav link */
.mh-connectspace {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 0 .85rem; height: var(--mh-h); line-height: var(--mh-h);
  font-size: .82rem; font-weight: 700; color: #dc2626;
  cursor: pointer; transition: color .15s; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.mh-connectspace:hover, .mh-connectspace.active {
  color: #b91c1c; border-bottom-color: #dc2626;
}
.mh-cs-badge {
  display: inline-flex; align-items: center;
  background: #dc2626; color: #fff;
  font-size: .58rem; font-weight: 800; letter-spacing: .04em;
  border-radius: 4px; padding: .1rem .32rem; line-height: 1.3;
  vertical-align: middle; margin-left: .1rem;
  animation: csPulse 2s ease-in-out infinite;
}
@keyframes csPulse {
  0%,100% { opacity: 1; }
  50% { opacity: .55; }
}

/* Header right */
.mh-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; margin-left: auto; }
.mh-local-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .7rem; border-radius: 20px; font-size: .72rem; font-weight: 600;
  color: var(--brand); background: var(--brand-light); border: 1px solid #fca5a5;
  white-space: nowrap;
}
.mh-login-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .9rem; border-radius: 20px; font-size: .78rem; font-weight: 600;
  background: var(--brand); color: #fff; border: none; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: opacity .15s;
}
.mh-login-btn:hover { opacity: .88; color: #fff; }
.mh-logout-btn { background: #6b7280; }
.mh-admin-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .85rem; border-radius: 20px; font-size: .75rem; font-weight: 700;
  background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;
  text-decoration: none; white-space: nowrap; transition: opacity .15s;
}
.mh-admin-btn:hover { opacity: .85; color: #92400e; }
/* User dropdown */
.mh-user-drop { position: relative; }
.mh-user-name {
  font-size: .78rem; font-weight: 600; color: #444; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: none; padding: .3rem .5rem; border-radius: 8px;
}
.mh-user-name:hover { background: #f3f4f6; }
.mh-user-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1); min-width: 200px; z-index: 999; overflow: hidden;
}
.mh-user-drop.open .mh-user-menu { display: block; }
.mh-user-info {
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1rem; border-bottom: 1px solid #f3f4f6;
}
.mh-user-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: #fee2e2;
  display: flex; align-items: center; justify-content: center;
  color: #dc2626; font-weight: 800; font-size: .9rem; flex-shrink: 0;
}
.mh-user-uname { font-size: .85rem; font-weight: 700; color: #111; }
.mh-user-role { font-size: .7rem; color: #6b7280; margin-top: 1px; }
.mh-user-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem; font-size: .82rem; color: #374151;
  text-decoration: none; transition: background .12s;
}
.mh-user-item:hover { background: #f9fafb; color: #111; }
.mh-user-item i { width: 16px; text-align: center; color: #9ca3af; font-size: .8rem; }
.mh-user-divider { height: 1px; background: #f3f4f6; margin: .3rem 0; }
.mh-user-logout { color: #dc2626 !important; }
.mh-user-logout i { color: #dc2626 !important; }
.mh-user-name {
  font-size: .78rem; font-weight: 600; color: #444;
  display: inline-flex; align-items: center; gap: .3rem;
}
.mh-dark-toggle {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid #e8e8e8;
  background: #f7f7f7; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #888888; font-size: .85rem; transition: all .15s;
}
.mh-dark-toggle:hover { background: var(--brand-light); color: var(--brand); border-color: var(--brand); }
.mh-hamburger {
  display: none; width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid #e8e8e8; background: #f7f7f7;
  color: #888888; font-size: .9rem; cursor: pointer;
  align-items: center; justify-content: center;
}

/* Breadcrumb */
.mh-breadcrumb-bar {
  position: fixed; top: var(--mh-h); left: 0; right: 0; z-index: 150;
  height: var(--bc-h); background: #ffffff; border-bottom: 1px solid #e8e8e8;
  display: flex; align-items: center;
}
.mh-bc-inner { max-width: 1400px; margin: 0 auto; width: 100%; padding: 0 2rem; display: flex; align-items: center; }

/* ══════════════════════════════════════
   LAYOUT
══════════════════════════════════════ */
.content-full {
  max-width: 1320px; margin: 0 auto;
  padding: 1.75rem 2.5rem; min-height: calc(100vh - var(--mh-h) - 52px);
}
.footer-full {
  padding: .9rem 2rem; font-size: .74rem; color: #888888;
  border-top: 2px solid var(--brand); text-align: center; background: #ffffff;
}
.sidebar { display: none; }
.main-wrapper { margin-left: 0; min-height: 100vh; display: flex; flex-direction: column; }

/* ══════════════════════════════════════
   DASHBOARD HERO
══════════════════════════════════════ */
.dash-hero {
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 60%, #ef4444 100%);
  border-radius: var(--radius); padding: 2rem 2.5rem;
  margin-bottom: 1.5rem; color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 4px 24px rgba(220,38,38,.25);
}
.dash-hero::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 220px; height: 220px; background: rgba(255,255,255,.07); border-radius: 50%;
}
.dash-hero::after {
  content: ''; position: absolute; bottom: -60px; right: 140px;
  width: 130px; height: 130px; background: rgba(255,255,255,.04); border-radius: 50%;
}
.dash-hero-inner { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.dash-hero h1 { font-size: 1.75rem; font-weight: 800; margin-bottom: .4rem; letter-spacing: -.025em; }
.dash-hero h1 span { color: #fecaca; }
.dash-hero p { color: rgba(255,255,255,.8); font-size: .88rem; margin-bottom: 1.2rem; max-width: 520px; }
.dash-hero-badges { display: flex; gap: .45rem; flex-wrap: wrap; }
.dash-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .7rem; background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25); border-radius: 20px;
  font-size: .71rem; font-weight: 600; color: #fff;
}
.dash-hero-stat {
  background: rgba(0,0,0,.15); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius); padding: 1rem 1.4rem; text-align: center; min-width: 90px; flex-shrink: 0;
}
.dash-hero-stat .n { font-size: 1.8rem; font-weight: 800; color: #fff; line-height: 1.1; }
.dash-hero-stat .l { font-size: .68rem; color: rgba(255,255,255,.7); margin-top: .15rem; }

/* ══════════════════════════════════════
   STATS
══════════════════════════════════════ */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card {
  background: #ffffff; border: 1px solid #e8e8e8;
  border-radius: var(--radius); padding: 1.25rem 1.4rem; box-shadow: var(--shadow);
  position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-deep), var(--brand)); }
.stat-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .9rem; }
.stat-icon {
  width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  background: var(--brand-light); color: var(--brand);
}
.stat-icon.red, .stat-icon.blue, .stat-icon.green,
.stat-icon.purple, .stat-icon.orange, .stat-icon.teal { background: var(--brand-light); color: var(--brand); }
.stat-trend { font-size: .71rem; color: #888888; display: flex; align-items: center; gap: .25rem; }
.stat-trend.live { color: var(--success); font-weight: 600; }
.stat-value { font-size: 1.9rem; font-weight: 800; line-height: 1.1; margin-bottom: .25rem; letter-spacing: -.025em; color: #111111; }
.stat-label { font-size: .74rem; color: #888888; font-weight: 500; }

/* ══════════════════════════════════════
   QUICK ACCESS
══════════════════════════════════════ */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; }
.quick-card {
  background: #ffffff; border: 1px solid #e8e8e8;
  border-radius: var(--radius-sm); padding: .85rem .75rem;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-align: center; transition: all .2s; text-decoration: none; cursor: pointer;
}
.quick-card:hover { border-color: var(--brand); box-shadow: 0 4px 16px rgba(220,38,38,.12); transform: translateY(-2px); text-decoration: none; }
.quick-card-icon { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: .9rem; background: var(--brand-light); color: var(--brand); }
.quick-card-label { font-size: .73rem; font-weight: 600; color: #111111; line-height: 1.3; }

/* ══════════════════════════════════════
   TOOLS SEARCH & FILTER
══════════════════════════════════════ */
.tools-controls { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.tools-search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.tools-search-wrap i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: #aaaaaa; font-size: .8rem; pointer-events: none; }
.tools-search {
  width: 100%; padding: .55rem .85rem .55rem 2.25rem;
  border: 1px solid #e8e8e8; border-radius: 10px;
  font-size: .84rem; font-family: inherit;
  background: #ffffff; color: #111111; transition: border-color .15s, box-shadow .15s;
}
.tools-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(220,38,38,.1); }
.tools-search::placeholder { color: #bbbbbb; }

.cat-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.cat-tab {
  padding: .35rem .85rem; border-radius: 20px; border: 1px solid #e8e8e8;
  font-size: .76rem; font-weight: 600; cursor: pointer; transition: all .15s;
  background: #ffffff; color: #777777; white-space: nowrap; font-family: inherit;
}
.cat-tab:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-pale); }
.cat-tab.active { color: #fff; background: var(--brand); border-color: var(--brand); }

/* ══════════════════════════════════════
   SECTION HEADINGS
══════════════════════════════════════ */
.section-heading {
  display: flex; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: #888888; margin: 1.75rem 0 .85rem;
}
.section-heading .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }
.section-heading .count {
  margin-left: auto; font-size: .68rem; background: #f0f0f0; border: 1px solid #e8e8e8;
  border-radius: 20px; padding: .1rem .55rem; color: #888888; font-weight: 500;
}

/* ══════════════════════════════════════
   TOOL CARDS
══════════════════════════════════════ */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .85rem; }

.tool-card {
  background: #ffffff; border: 1px solid #e8e8e8; border-radius: var(--radius);
  padding: .95rem 1rem; display: flex; align-items: center; gap: .85rem;
  transition: all .2s; cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
}
.tool-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--brand); opacity: 0; transition: opacity .2s;
}
.tool-card:hover { box-shadow: 0 4px 20px rgba(220,38,38,.12); transform: translateY(-2px); text-decoration: none; border-color: #fca5a5; }
.tool-card:hover::before { opacity: 1; }
.tool-card:hover .tc-arrow { opacity: 1; transform: translateX(2px); }

.tool-card.cat-purple::before, .tool-card.cat-pink::before, .tool-card.cat-red::before,
.tool-card.cat-blue::before, .tool-card.cat-teal::before, .tool-card.cat-yellow::before,
.tool-card.cat-orange::before, .tool-card.cat-green::before { background: var(--brand); }

.tc-icon {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  background: var(--brand-light); color: var(--brand); transition: transform .2s;
}
.tool-card:hover .tc-icon { transform: scale(1.08); background: #fecaca; }

.cat-purple .tc-icon, .cat-pink .tc-icon, .cat-red .tc-icon, .cat-blue .tc-icon,
.cat-teal .tc-icon, .cat-yellow .tc-icon, .cat-orange .tc-icon, .cat-green .tc-icon {
  background: var(--brand-light); color: var(--brand);
}

.tc-body { flex: 1; min-width: 0; }
.tc-name { font-size: .82rem; font-weight: 600; color: #111111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-desc { font-size: .70rem; color: #888888; margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-arrow { font-size: .7rem; color: var(--brand); opacity: 0; transition: opacity .2s, transform .2s; flex-shrink: 0; }

.tool-card.hidden { display: none !important; }
.tool-section.hidden { display: none !important; }
.no-results { display: none; text-align: center; padding: 2.5rem 1rem; color: #888888; grid-column: 1 / -1; }
.no-results.show { display: block; }

/* ══════════════════════════════════════
   PAGE / TOOL HEADERS
══════════════════════════════════════ */
.page-header { margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; color: #111111; }
.page-header p { color: #888888; margin-top: .3rem; font-size: .88rem; }

.tool-hero {
  display: flex; align-items: flex-start; gap: 1.2rem;
  background: #ffffff; border: 1px solid #e8e8e8; border-top: 3px solid var(--brand);
  border-radius: var(--radius); padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem; box-shadow: var(--shadow);
}
.tool-hero-icon {
  width: 54px; height: 54px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0; background: var(--brand-light); color: var(--brand);
}
.tool-hero h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: .2rem; color: #111111; }
.tool-hero p { color: #888888; font-size: .88rem; }

.tool-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.tool-icon-wrap {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
  background: var(--brand-light); color: var(--brand);
}
.ti-purple, .ti-pink, .ti-blue, .ti-teal, .ti-orange, .ti-green, .ti-red {
  background: var(--brand-light); color: var(--brand);
}
.tool-title { font-size: 1.4rem; font-weight: 700; margin-bottom: .15rem; color: #111111; }
.tool-desc  { font-size: .85rem; color: #888888; }

/* ══════════════════════════════════════
   CARDS
══════════════════════════════════════ */
.card {
  background: #ffffff; border: 1px solid #e8e8e8;
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); overflow: hidden;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid #e8e8e8;
}
.card-title { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .5rem; color: #111111; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.feature-card {
  background: #ffffff; border: 1px solid #e8e8e8; border-radius: var(--radius);
  padding: 1.2rem; display: flex; align-items: flex-start; gap: .85rem; box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.feature-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #fca5a5; }
.feature-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0; background: var(--brand-light); color: var(--brand); }
.feature-title { font-size: .84rem; font-weight: 600; margin-bottom: .2rem; color: #111111; }
.feature-desc { font-size: .72rem; color: #888888; line-height: 1.55; }

/* ══════════════════════════════════════
   PILLS / BADGES
══════════════════════════════════════ */
.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: 20px; font-size: .71rem; font-weight: 600; }
.pill-success { background: #dcfce7; color: #15803d; }
.pill-blue    { background: var(--brand-light); color: var(--brand); }
.pill-orange  { background: var(--brand-light); color: var(--brand-dark); }
.pill-error   { background: var(--brand-light); color: var(--brand); }

.badge { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.badge-success { background: #dcfce7; color: #15803d; }
.badge-blue    { background: var(--brand-light); color: var(--brand); }
.badge-orange  { background: var(--brand-light); color: var(--brand-dark); }

.tool-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .65rem; background: var(--brand-light); color: var(--brand);
  border-radius: 6px; font-size: .74rem; font-weight: 600;
}

/* ══════════════════════════════════════
   UPLOAD ZONE
══════════════════════════════════════ */
.upload-zone {
  border: 2px dashed #dddddd; border-radius: var(--radius);
  padding: 3rem 1rem; text-align: center; cursor: pointer;
  background: #fafafa; transition: border-color .2s, background .2s;
  position: relative; margin-bottom: 1rem;
}
.upload-zone:hover, .upload-zone.dragging { border-color: var(--brand); background: var(--brand-pale); }
.upload-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.upload-icon-wrap { font-size: 2.5rem; color: var(--brand); margin-bottom: .6rem; }
.upload-zone h3 { font-size: 1rem; font-weight: 600; margin-bottom: .25rem; color: #111111; }
.upload-zone p { color: #888888; font-size: .85rem; margin-bottom: .75rem; }
.upload-cta {
  display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem;
  background: var(--brand); color: #fff; border-radius: 8px; font-size: .82rem;
  font-weight: 600; pointer-events: none;
}
.upload-hint { margin-top: .6rem; font-size: .75rem; color: #aaaaaa; }

/* ══════════════════════════════════════
   FILE LIST
══════════════════════════════════════ */
.file-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.file-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .9rem; background: #ffffff; border: 1px solid #e8e8e8;
  border-radius: 8px; font-size: .85rem;
}
.file-item-icon { color: var(--brand); font-size: 1rem; }
.file-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: #111111; }
.file-item-size { color: #888888; font-size: .78rem; flex-shrink: 0; }
.file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: .84rem; color: #111111; }
.file-size { color: #888888; font-size: .75rem; flex-shrink: 0; }

/* ══════════════════════════════════════
   OPTIONS / FORMS
══════════════════════════════════════ */
.options-panel {
  background: #ffffff; border: 1px solid #e8e8e8;
  border-radius: var(--radius); padding: 1.2rem 1.5rem; margin-bottom: 1rem;
}
.options-panel-title { font-weight: 600; margin-bottom: 1rem; font-size: .88rem; display: flex; align-items: center; gap: .5rem; color: #111111; }
.form-group { margin-bottom: 1rem; }
.form-group:last-child { margin-bottom: 0; }
.form-label { font-size: .82rem; font-weight: 500; margin-bottom: .4rem; display: block; color: #333333; }
.form-hint { font-size: .72rem; color: #888888; font-weight: 400; }
.form-control {
  width: 100%; padding: .55rem .8rem; border: 1px solid #e8e8e8;
  border-radius: 8px; font-size: .85rem; font-family: inherit;
  background: #fafafa; color: #111111; transition: border-color .15s;
}
.form-control:focus { outline: none; border-color: var(--brand); background: #ffffff; box-shadow: 0 0 0 3px rgba(220,38,38,.08); }
.form-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
textarea.form-control { resize: vertical; min-height: 80px; }

.toggle-group { display: flex; gap: .5rem; flex-wrap: wrap; }
.toggle-option input[type=radio] { display: none; }
.toggle-option label {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem 1rem; border: 1px solid #e8e8e8;
  border-radius: 8px; font-size: .82rem; cursor: pointer;
  transition: all .15s; user-select: none; background: #fafafa; color: #444444;
}
.toggle-option input[type=radio]:checked + label { border-color: var(--brand); background: var(--brand-light); color: var(--brand); font-weight: 600; }
.toggle-option label:hover { border-color: var(--brand); background: var(--brand-pale); }

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.2rem; border: none; border-radius: 8px;
  font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .1s;
  font-family: inherit; text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.btn-primary  { background: var(--brand); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--brand-dark); box-shadow: 0 4px 12px rgba(220,38,38,.3); }
.btn-secondary { background: #f0f0f0; color: #333333; border: 1px solid #e8e8e8; }
.btn-secondary:hover:not(:disabled) { background: #e8e8e8; }
.btn-success  { background: var(--success); color: #fff; }
.btn-success:hover:not(:disabled) { background: #15803d; box-shadow: 0 4px 12px rgba(22,163,74,.3); }
.btn-ghost    { background: transparent; color: #777777; border: 1px solid #e8e8e8; }
.btn-ghost:hover:not(:disabled) { background: #f0f0f0; color: #333333; }
.btn-lg  { padding: .75rem 1.6rem; font-size: .9rem; }
.btn-sm  { padding: .35rem .8rem; font-size: .78rem; }
.action-bar { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; }

/* ══════════════════════════════════════
   PROGRESS
══════════════════════════════════════ */
.progress-wrap {
  display: none; margin-top: 1.2rem;
  background: #ffffff; border: 1px solid #e8e8e8;
  border-radius: 14px; padding: 1.4rem 1.6rem;
}
.progress-wrap.show { display: block; animation: fadeUp .2s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.progress-label { font-size: .88rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; color: #111111; }
.progress-label::before { content:''; width:8px; height:8px; border-radius:50%; background: var(--brand); display:inline-block; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.progress-pct { font-size: .8rem; font-weight: 700; color: var(--brand); background: var(--brand-light); padding: .15rem .55rem; border-radius: 20px; }
.progress-track { height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand-deep), var(--brand), #ef4444, #fca5a5); background-size:200%; animation: shimmer 1.8s linear infinite; border-radius: 4px; transition: width .4s ease; }
@keyframes shimmer { 0%{background-position:100%} 100%{background-position:0%} }
.progress-sub { font-size: .74rem; color: #888888; margin-top: .6rem; }

.progress-wrap[style*="flex"] { display: flex !important; align-items: center; justify-content: center; }
.progress-inner { display: flex; align-items: center; gap: .75rem; color: #888888; font-size: .88rem; }
.progress-spinner {
  width: 20px; height: 20px; border: 2px solid #e8e8e8;
  border-top-color: var(--brand); border-radius: 50%;
  animation: spin .7s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════
   RESULT CARD
══════════════════════════════════════ */
.result-card { display: none; border-radius: 14px; padding: 0; margin-top: 1.2rem; overflow: hidden; }
.result-card.show { display: block; animation: fadeUp .25s ease; }
.result-card.success { border: 1.5px solid #bbf7d0; background: linear-gradient(135deg, rgba(22,163,74,.06) 0%, rgba(22,163,74,.02) 100%); }
.result-card.error   { border: 1.5px solid #fca5a5; background: linear-gradient(135deg, rgba(220,38,38,.06) 0%, rgba(220,38,38,.02) 100%); }
.result-inner { padding: 1.4rem 1.6rem; }
.result-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.result-icon { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.result-icon.ok  { background: linear-gradient(135deg,#16a34a,#22c55e); color: #fff; box-shadow: 0 4px 12px rgba(22,163,74,.3); }
.result-icon.err { background: linear-gradient(135deg, var(--brand-dark), var(--brand)); color: #fff; box-shadow: 0 4px 12px rgba(220,38,38,.3); }
.result-title { font-weight: 800; font-size: 1.05rem; margin-bottom: .2rem; color: #111111; }
.result-sub { font-size: .78rem; color: #888888; font-family: monospace; word-break: break-all; }
.result-divider { height: 1px; background: #e8e8e8; margin: 0 1.6rem; }
.result-footer { padding: 1rem 1.6rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.btn-download-new {
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand)); color: #fff;
  border: none; border-radius: 10px; padding: .65rem 1.4rem;
  font-size: .9rem; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: opacity .2s, transform .1s; box-shadow: 0 3px 10px rgba(220,38,38,.25);
}
.btn-download-new:hover { opacity:.9; transform:translateY(-1px); color:#fff; }
.btn-new-file {
  display: inline-flex; align-items: center; gap: .45rem;
  background: none; border: 1.5px solid #e8e8e8; border-radius: 10px;
  padding: .6rem 1rem; font-size: .82rem; font-weight: 600;
  color: #777777; cursor: pointer; transition: border-color .15s, color .15s; text-decoration: none;
}
.btn-new-file:hover { border-color: var(--brand); color: var(--brand); }
.result-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-bottom: 1rem; }
.result-meta-item { font-size: .8rem; color: #888888; display: flex; align-items: center; gap: .35rem; }
.result-meta-item strong { color: #111111; font-weight: 700; }

/* ══════════════════════════════════════
   ALERTS / TOASTS
══════════════════════════════════════ */
.alert { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .85rem; border: 1px solid transparent; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.alert-error   { background: var(--brand-pale); border-color: #fca5a5; color: var(--brand-dark); }
.alert-info    { background: var(--brand-pale); border-color: #fca5a5; color: var(--brand); }

.toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; display: flex; flex-direction: column; gap: .5rem; z-index: 999; }
.toast { padding: .75rem 1.1rem; border-radius: 10px; font-size: .83rem; font-weight: 500; box-shadow: 0 4px 16px rgba(0,0,0,.15); max-width: 320px; animation: slideInRight .25s ease; display: flex; align-items: center; gap: .5rem; }
.toast.success { background: var(--success); color: #fff; }
.toast.error   { background: var(--brand); color: #fff; }
.toast.info    { background: var(--brand); color: #fff; }
@keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* ══════════════════════════════════════
   MISC
══════════════════════════════════════ */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: #888888; }
.empty-state i { font-size: 2.5rem; margin-bottom: .75rem; display: block; color: var(--brand); opacity: .3; }
.empty-state p { font-size: .85rem; }

.data-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.data-table th { background: #f7f7f7; padding: .65rem 1rem; text-align: left; font-weight: 600; border-bottom: 1px solid #e8e8e8; color: #888888; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.data-table td { padding: .7rem 1rem; border-bottom: 1px solid #e8e8e8; color: #111111; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--brand-pale); }

.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid #e8e8e8; }
table { width: 100%; border-collapse: collapse; font-size: .83rem; }
th { background: #f7f7f7; padding: .65rem 1rem; text-align: left; font-weight: 600; border-bottom: 1px solid #e8e8e8; color: #888888; }
td { padding: .65rem 1rem; border-bottom: 1px solid #e8e8e8; color: #111111; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--brand-pale); }

.sig-wrap { border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; background: #fff; touch-action: none; }
.sig-wrap canvas { display: block; width: 100%; max-width: 600px; height: 160px; cursor: crosshair; }
.sig-actions { margin-top: .5rem; margin-bottom: 1rem; }

.thumb-grid { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.thumb-card { width: 110px; border: 2px solid #e8e8e8; border-radius: 8px; overflow: hidden; cursor: grab; background: #ffffff; box-shadow: var(--shadow); transition: border-color .15s; user-select: none; }
.thumb-card.selected { border-color: var(--brand); }
.thumb-card img { width: 100%; display: block; pointer-events: none; }
.thumb-card .thumb-label { text-align: center; padding: .25rem .4rem; font-size: .72rem; color: #888888; background: #f7f7f7; border-top: 1px solid #e8e8e8; }

.breadcrumb { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: #888888; }
.breadcrumb a { color: #888888; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { color: #cccccc; font-size: .65rem; }
.breadcrumb .current { color: #111111; font-weight: 600; }
.content { flex: 1; padding: 1.75rem 2rem; }
.footer { padding: .9rem 2rem; font-size: .74rem; color: #888888; border-top: 1px solid #e8e8e8; text-align: center; background: #ffffff; }

/* Nav legacy */
.nav-item { display: flex; align-items: center; gap: 9px; padding: 6px 10px; margin: 1px 10px; border-radius: 8px; color: #888888; font-size: .81rem; white-space: nowrap; overflow: hidden; transition: background .15s, color .15s; cursor: pointer; position: relative; text-decoration: none !important; }
.nav-item:hover { background: var(--brand-pale); color: #111111; }
.nav-item.active { background: var(--brand-light); color: var(--brand); font-weight: 600; }
.nav-icon-wrap { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .75rem; background: var(--brand-light); color: var(--brand); }
.nav-badge { margin-left: auto; font-size: .55rem; font-weight: 700; background: var(--brand); color: #fff; padding: 1px 5px; border-radius: 4px; flex-shrink: 0; }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .mh-nav .mh-item:nth-child(n+5) { display: none; }
  .mh-all-tools { display: none; }
  .mh-hamburger { display: flex; }
  .mh-nav.mobile-open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: fixed; top: var(--mh-h); left: 0; right: 0;
    background: #ffffff; border-bottom: 2px solid var(--brand);
    padding: .75rem 1rem; gap: 0; z-index: 190;
    box-shadow: 0 8px 24px rgba(220,38,38,.1);
    max-height: calc(100vh - var(--mh-h)); overflow-y: auto;
  }
  .mh-nav.mobile-open .mh-item { display: flex; width: 100%; }
  .mh-nav.mobile-open .mh-all-tools { display: flex; width: 100%; height: auto; padding: .65rem .85rem; border-bottom: none; }
  .mh-nav.mobile-open .mh-link { height: auto; padding: .65rem .85rem; line-height: 1.4; border-bottom: none; }
  .mh-nav.mobile-open .mh-drop { position: static; box-shadow: none; border: none; border-radius: 0; background: #fafafa; padding: 0 0 0 1rem; margin: 0; display: none; animation: none; }
  .mh-nav.mobile-open .mh-item.open > .mh-drop { display: block; }
  .mh-nav:not(.mobile-open) { display: none; }
  .mh-nav:not(.mobile-open) .mh-item { display: flex; }
}
@media (min-width: 1025px) {
  .mh-nav { display: flex !important; }
  .mh-nav .mh-item { display: flex !important; }
  .mh-all-tools { display: flex !important; }
  .mh-hamburger { display: none !important; }
}
@media (max-width: 768px) {
  .content-full { padding: 1rem; }
  .mh-local-badge { display: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .tool-hero { flex-direction: column; gap: .75rem; }
  .dash-hero { padding: 1.5rem; }
  .dash-hero h1 { font-size: 1.35rem; }
  .dash-hero-inner { flex-direction: column; }
  .quick-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-tabs { gap: .3rem; }
  .cat-tab { font-size: .7rem; padding: .28rem .65rem; }
}

/* ══════════════════════════════════════
   CONVERT PAGES — Shared hero/drop CSS
══════════════════════════════════════ */
.cv-hero {
  background: linear-gradient(135deg,#7f1d1d 0%,#b91c1c 45%,#dc2626 80%,#ef4444 100%);
  border-radius: 18px; padding: 2rem 2.2rem; margin-bottom: 1.6rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.2rem;
  box-shadow: 0 6px 28px rgba(220,38,38,.28); position: relative; overflow: hidden;
}
.cv-hero::before { content:''; position:absolute; top:-60px; right:-40px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.07); pointer-events:none; }
.cv-hero-left { position:relative; z-index:1; }
.cv-eyebrow { display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:.22rem .75rem; font-size:.68rem; font-weight:700; color:#fff; letter-spacing:.05em; text-transform:uppercase; margin-bottom:.55rem; }
.cv-hero-left h2 { font-size:1.65rem; font-weight:900; color:#fff; margin:0 0 .3rem; letter-spacing:-.03em; }
.cv-hero-left p  { font-size:.82rem; color:rgba(255,255,255,.75); margin:0; }
.cv-hero-pills { display:flex; gap:.75rem; flex-shrink:0; position:relative; z-index:1; }
.cv-hero-pill { background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:.75rem 1.1rem; text-align:center; min-width:72px; }
.cv-hero-pill .n { font-size:.82rem; font-weight:900; color:#fff; line-height:1; display:block; }
.cv-hero-pill .l { font-size:.58rem; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.07em; }

.cv-drop {
  border: 2.5px dashed #fca5a5; border-radius: 18px;
  padding: 3rem 2rem; text-align: center; cursor: pointer; position: relative;
  transition: border-color .2s, background .2s; background: #fff8f8; margin-bottom: 1rem;
}
.cv-drop:hover, .cv-drop.drag-over { border-color: #dc2626; background: #fff1f1; }
.cv-drop input[type=file] { position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer; }
.cv-drop-icon { width:68px; height:68px; border-radius:18px; background:transparent; color:#dc2626; display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 1.1rem; box-shadow:none; }
.cv-drop h3 { font-size:1.15rem; font-weight:800; margin:0 0 .3rem; color:#111; }
.cv-drop p  { font-size:.85rem; color:#888; margin:0 0 1.2rem; }
.cv-drop-btn { display:inline-flex; align-items:center; gap:.48rem; background:linear-gradient(135deg,#b91c1c,#dc2626); color:#fff; border:none; border-radius:10px; padding:.7rem 1.6rem; font-size:.95rem; font-weight:700; cursor:pointer; transition:opacity .2s,transform .1s; position:relative; z-index:1; box-shadow:0 3px 12px rgba(220,38,38,.3); }
.cv-drop-btn:hover { opacity:.88; transform:translateY(-1px); }
.cv-drop-hint { display:inline-flex; align-items:center; gap:.45rem; margin-top:.9rem; background:#fff5f5; border:1px solid #fecaca; border-radius:8px; padding:.38rem .85rem; font-size:.74rem; color:#b91c1c; font-weight:500; }

.cv-file-bar { display:none; align-items:center; gap:.85rem; background:#fff; border:1.5px solid #fca5a5; border-radius:14px; padding:.85rem 1.1rem; margin-bottom:1rem; box-shadow:0 2px 10px rgba(220,38,38,.08); }
.cv-file-bar.show { display:flex; }
.cv-file-icon { font-size:1.4rem; flex-shrink:0; }
.cv-file-name { font-size:.88rem; font-weight:700; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#111; }
.cv-file-size { font-size:.72rem; color:#dc2626; font-weight:600; background:#fee2e2; padding:.18rem .55rem; border-radius:6px; flex-shrink:0; }

.cv-submit { width:100%; padding:.9rem; background:linear-gradient(135deg,#991b1b,#b91c1c,#dc2626); color:#fff; border:none; border-radius:14px; font-size:1rem; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:.6rem; transition:opacity .2s,transform .1s; box-shadow:0 5px 20px rgba(220,38,38,.35); margin-bottom:1rem; }
.cv-submit:hover:not(:disabled) { opacity:.9; transform:translateY(-2px); }
.cv-submit:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }

.cv-info-strip { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.4rem; }
.cv-info-card { flex:1; min-width:130px; background:#fff; border:1px solid #e8e8e8; border-radius:12px; padding:.9rem 1rem; display:flex; align-items:center; gap:.75rem; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.cv-info-icon { width:36px; height:36px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.88rem; background:#fee2e2; color:#dc2626; }
.cv-info-title { font-size:.78rem; font-weight:700; color:#111; }
.cv-info-desc  { font-size:.68rem; color:#aaa; margin-top:.1rem; }


/* ── Mobile responsive adjustments ─────────────────────────── */

@media (max-width: 768px) {

  /* Stack everything vertically */
  .container, .wrapper, main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px !important;
    margin: 0 !important;
  }

  /* Tool cards: one per row instead of grid */
  .tool-grid, .cards, .dashboard-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Bigger tap targets */
  button, .btn, input[type="submit"], input[type="button"] {
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;   /* prevents iOS zoom on focus */
  }

  /* Inputs */
  input[type="text"], input[type="file"], textarea, select {
    width: 100% !important;
    font-size: 16px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  /* Hide desktop nav, show mobile menu */
  .desktop-nav { display: none !important; }
  .mobile-nav  { display: block !important; }

  /* Sidebars collapse */
  .sidebar, aside {
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  /* Reduce font size of headings so things fit */
  h1 { font-size: 1.4rem !important; }
  h2 { font-size: 1.2rem !important; }
  h3 { font-size: 1.05rem !important; }

  /* Tables scroll horizontally instead of breaking layout */
  table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  /* Modals full-screen on phones */
  .modal, .popup {
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
  }

  /* PDF viewer — fit to width */
  iframe, .pdf-viewer {
    width: 100% !important;
    height: 70vh !important;
  }
}

/* Tablets — slightly less aggressive */
@media (max-width: 1024px) and (min-width: 769px) {
  .tool-grid, .cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}