@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================
   TheTransporter customer portal (users/ + support/)
   8-COLOR BRAND THEME - sampled from the company logo:
     1. Azure blue   #1b75bc  (the big "7")
     2. Deep blue    #125a94  (blue, darkened - hovers/gradients)
     3. Sky blue     #6fb3e4  (light arc of the "7")
     4. Brand green  #39b54a  ("TheTransporter" wordmark)
     5. Deep green   #27913a  (green, darkened)
     6. Brand orange #f7941e  (the "P" swoosh / "PACKERS AND MOVERS")
     7. Deep orange  #d9780a  (orange, darkened)
     8. Truck slate  #414750  (the truck silhouette - ink/neutral)
   ============================================================ */
:root {
  --tt-blue: #1b75bc;
  --tt-blue-deep: #125a94;
  --tt-sky: #6fb3e4;
  --tt-green: #39b54a;
  --tt-green-deep: #27913a;
  --tt-orange: #f7941e;
  --tt-orange-deep: #d9780a;
  --tt-slate: #414750;

  --tt-blue-soft: #e7f1fa;
  --tt-green-soft: #e8f7eb;
  --tt-orange-soft: #fef2e2;
  --tt-red: #d64545;
  --tt-red-soft: #fdecec;

  --p-ink: #232a33;
  --p-muted: #64707e;
  --p-bg: #f2f5f9;
  --p-card: #ffffff;
  --p-border: #dfe6ee;
  --p-radius: 14px;
  --p-radius-sm: 9px;
  --p-shadow: 0 1px 2px rgba(35,42,51,0.05), 0 6px 20px rgba(35,42,51,0.06);
  --p-shadow-lift: 0 2px 4px rgba(35,42,51,0.06), 0 14px 34px rgba(27,117,188,0.13);
  --p-display: 'Oswald', sans-serif;
  --p-body: 'Inter', sans-serif;
  --tt-tricolor: linear-gradient(90deg, var(--tt-blue) 0 34%, var(--tt-green) 34% 67%, var(--tt-orange) 67% 100%);
  /* The main site header is position:fixed and overlays the page - all
     content must clear it or the portal nav hides behind it. Adjust here
     if the site header height ever changes. */
  --site-header-h: 100px;
}

@media (prefers-reduced-motion: reduce) {
  .portal-page * { animation: none !important; transition: none !important; }
}

.portal-page {
  background:
    radial-gradient(1000px 380px at 15% -80px, rgba(27,117,188,0.10), transparent 60%),
    radial-gradient(900px 340px at 90% -60px, rgba(247,148,30,0.08), transparent 55%),
    var(--p-bg);
  padding: calc(var(--site-header-h) + 30px) 16px 90px;
  font-family: var(--p-body);
  color: var(--p-ink);
  min-height: 62vh;
}

.portal-container { max-width: 920px; margin: 0 auto; }

/* ── Portal nav: white pill bar with logo tricolor top edge ── */
.portal-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--p-card);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: 12px 16px;
  margin-bottom: 30px;
  box-shadow: var(--p-shadow);
  overflow: hidden;
}
.portal-nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--tt-tricolor);
}

.portal-nav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.portal-nav a {
  font-family: var(--p-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--p-muted);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 9px;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.portal-nav a:hover { color: var(--tt-blue); background: var(--tt-blue-soft); }
.portal-nav a.active {
  color: #fff;
  background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-deep));
  box-shadow: 0 6px 16px rgba(27,117,188,0.35);
}

/* ── Hero banner: brand gradient with soft road stripes ───── */
.portal-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.07) 0 12px, transparent 12px 34px) 0 0 / 46px 100%,
    linear-gradient(135deg, var(--tt-blue) 0%, var(--tt-blue-deep) 70%);
  border-radius: var(--p-radius);
  padding: 30px 32px;
  margin-bottom: 26px;
  color: #fff;
  box-shadow: 0 16px 40px rgba(18,90,148,0.28);
  overflow: hidden;
}
.portal-hero::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -55px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247,148,30,0.35), transparent 65%);
}
.portal-hero h1 {
  font-family: var(--p-display);
  font-size: 31px;
  font-weight: 700;
  margin: 0 0 7px;
  color: #fff;
  letter-spacing: 0.01em;
}
.portal-hero p { margin: 0; color: rgba(255,255,255,0.88); font-size: 15px; max-width: 520px; line-height: 1.55; }
.portal-hero p a { color: #ffd9a3; font-weight: 700; }
.portal-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.portal-hero .portal-btn { background: linear-gradient(135deg, var(--tt-orange), var(--tt-orange-deep)); box-shadow: 0 8px 22px rgba(0,0,0,0.25); }
.portal-hero .portal-btn.ghost {
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.45);
  color: #fff;
  box-shadow: none;
}
.portal-hero .portal-btn.ghost:hover { background: rgba(255,255,255,0.22); filter: none; }

/* ── Stat tiles: icon chip + big number, brand color per tile ─ */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}
.stat-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--p-card);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: 18px;
  box-shadow: var(--p-shadow);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--p-shadow-lift); }
.stat-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 5px;
  background: var(--tt-blue);
}
.stat-tile:nth-child(2)::before { background: var(--tt-green); }
.stat-tile:nth-child(3)::before { background: var(--tt-orange); }

.stat-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  font-size: 18px;
  flex-shrink: 0;
  background: var(--tt-blue-soft);
  color: var(--tt-blue);
}
.stat-tile:nth-child(2) .stat-ico { background: var(--tt-green-soft); color: var(--tt-green-deep); }
.stat-tile:nth-child(3) .stat-ico { background: var(--tt-orange-soft); color: var(--tt-orange-deep); }

.stat-body { display: flex; flex-direction: column; }
.stat-num { font-family: var(--p-body); font-size: 27px; font-weight: 800; color: var(--tt-slate); line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--p-muted); margin-top: 3px; }

/* ── Cards ─────────────────────────────────────────────────── */
.portal-card {
  background: var(--p-card);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: 26px 28px;
  margin-bottom: 24px;
  box-shadow: var(--p-shadow);
}

.portal-card-title {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--p-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--tt-slate);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--p-border);
}
.portal-card-title i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--tt-blue-soft);
  color: var(--tt-blue);
  font-size: 14px;
}

.portal-empty {
  color: var(--p-muted);
  font-size: 14.5px;
  margin: 2px 0 0;
  padding: 18px;
  background: var(--p-bg);
  border: 1.5px dashed var(--p-border);
  border-radius: var(--p-radius-sm);
  text-align: center;
}
.portal-empty a { color: var(--tt-blue); font-weight: 700; }

/* ── Tables ────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
.portal-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.portal-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tt-blue-deep);
  background: var(--tt-blue-soft);
  padding: 10px 12px;
  white-space: nowrap;
}
.portal-table th:first-child { border-radius: 8px 0 0 8px; }
.portal-table th:last-child { border-radius: 0 8px 8px 0; }
.portal-table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--p-border);
  color: var(--p-ink);
  vertical-align: middle;
}
.portal-table tbody tr { transition: background 0.12s ease; }
.portal-table tbody tr:hover { background: #f7fafd; }
.portal-table tr:last-child td { border-bottom: none; }
.portal-table td:first-child { font-weight: 700; color: var(--tt-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--p-muted); }

.portal-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--tt-blue);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 12px;
  border: 1.5px solid var(--tt-blue-soft);
  background: var(--tt-blue-soft);
  border-radius: 20px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.portal-link:hover { background: #d9eaf7; border-color: var(--tt-sky); }

/* ── Badges: dot pills ─────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 5px 12px;
  white-space: nowrap;
}
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-status-open { background: var(--tt-orange-soft); color: var(--tt-orange-deep); }
.badge-status-in_progress { background: var(--tt-blue-soft); color: var(--tt-blue); }
.badge-status-resolved { background: var(--tt-green-soft); color: var(--tt-green-deep); }
.badge-priority-low { background: #eef1f5; color: var(--p-muted); }
.badge-priority-normal { background: var(--tt-blue-soft); color: var(--tt-blue); }
.badge-priority-high { background: var(--tt-red-soft); color: var(--tt-red); }
.badge-status-submitted { background: var(--tt-blue-soft); color: var(--tt-blue); }
.badge-status-under_review { background: var(--tt-orange-soft); color: var(--tt-orange-deep); }
.badge-status-approved { background: var(--tt-green-soft); color: var(--tt-green-deep); }
.badge-status-processing { background: var(--tt-orange-soft); color: var(--tt-orange-deep); }
.badge-status-completed { background: var(--tt-green-soft); color: var(--tt-green-deep); }
.badge-status-rejected { background: var(--tt-red-soft); color: var(--tt-red); }

/* ── Buttons ───────────────────────────────────────────────── */
.portal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-deep));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--p-display);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 24px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(27,117,188,0.30);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.portal-btn:hover { filter: brightness(1.07); box-shadow: 0 10px 26px rgba(27,117,188,0.38); }
.portal-btn:active { transform: scale(0.98); }
.portal-btn.ghost {
  background: transparent;
  border: 1.5px solid var(--tt-blue);
  color: var(--tt-blue);
  box-shadow: none;
}
.portal-btn.ghost:hover { background: var(--tt-blue-soft); filter: none; }
.portal-btn:focus-visible { outline: 2.5px solid var(--tt-orange); outline-offset: 2px; }

/* ── Forms ─────────────────────────────────────────────────── */
.portal-form { display: flex; flex-direction: column; gap: 18px; }
.pfield { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.pfield-row { display: flex; gap: 18px; }
.pfield label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tt-slate);
}
.pfield label small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--p-muted); }
.pfield input, .pfield select, .pfield textarea {
  font-family: var(--p-body);
  font-size: 15px;
  color: var(--p-ink);
  background: #fafcfe;
  border: 1.5px solid var(--p-border);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.pfield textarea { resize: vertical; }
.pfield input:focus, .pfield select:focus, .pfield textarea:focus {
  outline: none;
  border-color: var(--tt-blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(27,117,188,0.14);
}

.portal-form-divider {
  border-top: 1.5px solid var(--p-border);
  margin-top: 8px;
  padding-top: 16px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tt-slate);
}
.portal-form-divider small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--p-muted); }

/* ── Errors / flash ────────────────────────────────────────── */
.portal-errors {
  background: var(--tt-red-soft);
  border: 1.5px solid #f2c4c4;
  border-left: 5px solid var(--tt-red);
  color: #a33333;
  border-radius: var(--p-radius-sm);
  padding: 14px 18px;
  font-size: 14px;
  margin-bottom: 20px;
}
.portal-errors ul { margin: 0; padding-left: 18px; }
.portal-errors li { margin: 3px 0; }

.portal-flash {
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: var(--p-radius-sm);
  padding: 14px 17px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  box-shadow: var(--p-shadow);
}
.portal-flash-success { background: var(--tt-green-soft); color: var(--tt-green-deep); border: 1.5px solid #bfe6cb; border-left: 5px solid var(--tt-green); }
.portal-flash-error { background: var(--tt-red-soft); color: #a33333; border: 1.5px solid #f2c4c4; border-left: 5px solid var(--tt-red); }
.portal-flash i { font-size: 17px; flex-shrink: 0; }

/* ── Auth pages ────────────────────────────────────────────── */
.auth-wrap { max-width: 580px; margin: 0 auto; }
.auth-card { padding: 38px 36px; position: relative; overflow: hidden; }
.auth-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--tt-tricolor);
}
.auth-head { text-align: center; margin-bottom: 26px; }
.auth-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-deep));
  color: #fff;
  font-size: 23px;
  margin-bottom: 14px;
  box-shadow: 0 10px 24px rgba(27,117,188,0.32);
}
.auth-head h1 {
  font-family: var(--p-display);
  font-size: 27px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--tt-slate);
}
.auth-head p { margin: 0; color: var(--p-muted); font-size: 14.5px; }
.auth-alt { text-align: center; font-size: 14px; color: var(--p-muted); margin: 18px 0 0; }
.auth-alt a { color: var(--tt-blue); font-weight: 700; }

/* ── Firebase phone-OTP login (users/login.php) ───────────── */
.otp-recaptcha { display: flex; justify-content: center; margin: 0 0 20px; }
.otp-phone-row { display: flex; align-items: center; gap: 10px; }
.otp-country-code {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 12px 14px;
  background: var(--p-bg);
  border: 1.5px solid var(--p-border);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--tt-slate);
}
.otp-phone-row input { flex: 1; min-width: 0; }
#otp-code { letter-spacing: 6px; font-size: 20px; text-align: center; font-weight: 700; }

/* ── Ticket head & thread (timeline style) ─────────────────── */
.ticket-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.ticket-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-deep));
  border-radius: 20px;
  padding: 5px 13px;
}
.ticket-head h1 {
  font-family: var(--p-display);
  font-size: 27px;
  font-weight: 700;
  margin: 10px 0 6px;
  color: var(--tt-slate);
}
.ticket-meta-line { margin: 0; color: var(--p-muted); font-size: 13.5px; }
.ticket-badges { display: flex; gap: 8px; padding-top: 8px; }

.ticket-linked { padding: 18px 24px; border-left: 5px solid var(--tt-sky); }
.ticket-linked .portal-card-title { border-bottom: none; padding-bottom: 0; margin-bottom: 10px; }
.linked-row { display: flex; gap: 22px; flex-wrap: wrap; }
.linked-item { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--p-ink); font-weight: 600; }
.linked-item i { color: var(--tt-blue); }

.thread {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  padding-left: 24px;
}
.thread::before {
  content: '';
  position: absolute;
  top: 14px; bottom: 14px; left: 5px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--tt-sky), var(--p-border));
}
.thread-msg {
  position: relative;
  background: var(--p-card);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: 17px 21px;
  max-width: 94%;
  box-shadow: var(--p-shadow);
}
.thread-msg::before {
  content: '';
  position: absolute;
  left: -24.5px;
  top: 20px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1.5px var(--p-border);
}
.thread-msg.from-customer { align-self: flex-start; border-top: 4px solid var(--tt-orange); }
.thread-msg.from-customer::before { background: var(--tt-orange); }
.thread-msg.from-admin {
  align-self: flex-end;
  border-top: 4px solid var(--tt-blue);
  background: linear-gradient(180deg, #f3f9fe, #fff 55%);
}
.thread-msg.from-admin::before { background: var(--tt-blue); }

.thread-msg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.thread-author { font-size: 13.5px; font-weight: 800; color: var(--tt-slate); display: inline-flex; align-items: center; gap: 8px; }
.thread-author i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 11.5px;
  background: var(--tt-orange-soft);
  color: var(--tt-orange-deep);
}
.from-admin .thread-author i { background: var(--tt-blue-soft); color: var(--tt-blue); }
.team-tag {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(135deg, var(--tt-green), var(--tt-green-deep));
  border-radius: 20px;
  padding: 3px 10px;
}
.thread-time { font-size: 12px; color: var(--p-muted); font-variant-numeric: tabular-nums; }
.thread-body { font-size: 14.5px; line-height: 1.65; color: var(--p-ink); overflow-wrap: break-word; }

/* ── Cross-promo: deep slate-blue band with truck watermark ── */
.portal-promo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(120deg, var(--tt-slate) 0%, #2a3a4d 45%, var(--tt-blue-deep) 100%);
  border: none;
  color: #fff;
  overflow: hidden;
}
.portal-promo::before {
  content: '\f0d1';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 26px;
  bottom: -26px;
  font-size: 120px;
  color: rgba(255,255,255,0.06);
  transform: rotate(-8deg);
}
.portal-promo h2 {
  font-family: var(--p-display);
  font-size: 21px;
  font-weight: 600;
  margin: 0 0 7px;
  color: #fff;
}
.portal-promo p { margin: 0; font-size: 14px; color: rgba(255,255,255,0.82); max-width: 460px; }
.portal-promo .portal-btn {
  background: linear-gradient(135deg, var(--tt-orange), var(--tt-orange-deep));
  box-shadow: 0 8px 22px rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 560px) {
  .pfield-row { flex-direction: column; gap: 18px; }
  .portal-hero { padding: 24px 22px; }
  .portal-hero h1 { font-size: 25px; }
  .portal-card { padding: 22px 18px; }
  .auth-card { padding: 30px 22px; }
  .thread { padding-left: 18px; }
  .thread-msg { max-width: 100%; }
  .thread-msg::before { left: -18.5px; }
}

/* ── Ticket attachments (photos + PDFs) ────────────────────── */
.attach-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.attach-img {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 9px;
  overflow: hidden;
  border: 1.5px solid var(--p-border);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.attach-img:hover { transform: scale(1.04); box-shadow: var(--p-shadow-lift); }
.attach-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-file {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1.5px solid var(--p-border);
  border-radius: 9px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--tt-blue);
  text-decoration: none;
  max-width: 250px;
}
.attach-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-file i { color: var(--tt-red); font-size: 17px; flex-shrink: 0; }
.attach-file:hover { border-color: var(--tt-sky); background: var(--tt-blue-soft); }
.pfield input[type="file"] { padding: 10px; background: var(--p-bg); cursor: pointer; }