/* TOPMET Etap 220 - premium account experience */
:root{
  --tm-accent:#ffe600;
  --tm-accent-soft:#fff9cf;
  --tm-surface:#ffffff;
  --tm-surface-soft:#fbfbf8;
  --tm-ink:#262626;
  --tm-muted:#696964;
  --tm-border:#ece9de;
  --tm-border-strong:#ddd5b6;
  --tm-shadow:0 20px 45px rgba(28,28,24,.12);
}
.user-menu-button{
  min-height:52px;
  gap:.9rem;
  padding:6px 14px 6px 6px;
  border:1px solid var(--tm-border);
  background:linear-gradient(180deg,#fff 0%,#fbfbf8 100%);
  box-shadow:0 6px 18px rgba(38,38,38,.04);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
.user-menu-button:hover,
.user-menu-button:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(38,38,38,.08);
  border-color:var(--tm-border-strong);
  background:#fff;
}
.user-menu-button::after{margin-left:.15rem;color:#7b6b18;opacity:.88}
.user-avatar{
  position:relative;
  width:40px;height:40px;
  border-radius:16px;
  background:linear-gradient(135deg,#ffe600 0%,#f4d300 100%);
  color:#262626;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 18px rgba(255,230,0,.18);
}
.user-avatar.large{
  width:56px;height:56px;border-radius:18px;font-size:18px;
}
.user-avatar i{font-size:18px}
.user-menu-button .user-avatar::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#2fb571;border:2px solid #fff;
}
.user-menu-button.is-login .user-avatar::after{background:#856a00}
.user-menu-button .user-meta{gap:2px;min-width:0}
.user-menu-button .user-meta strong{font-size:13px;font-weight:750;letter-spacing:-.01em}
.user-menu-button .user-meta small{max-width:220px;color:#6f6f6b}
.user-menu-button .user-meta .user-meta-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#8a7c38;font-weight:800}
.user-dropdown{
  width:min(420px, calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  border:1px solid var(--tm-border)!important;
  border-radius:22px;
  overflow:hidden;
  padding:0;
  background:var(--tm-surface);
  box-shadow:var(--tm-shadow)!important;
}
.user-dropdown-head{
  padding:18px 18px 16px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfbf7 100%);
  border-bottom:1px solid var(--tm-border);
  align-items:flex-start;
}
.user-dropdown-body{padding:16px 16px 14px}
.user-dropdown-foot{padding:0 16px 16px}
.tm-account-head-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.tm-account-head-copy .tm-account-eyebrow{font-size:11px;line-height:1.1;text-transform:uppercase;letter-spacing:.14em;color:#8b7a28;font-weight:800}
.tm-account-head-copy .tm-account-title{font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--tm-ink)}
.tm-account-head-copy .tm-account-subtitle{font-size:12px;color:var(--tm-muted)}
.tm-account-role-wrap{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.tm-account-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.tm-account-overview-card{
  border:1px solid var(--tm-border);
  background:var(--tm-surface-soft);
  border-radius:16px;padding:12px 13px;
  display:flex;align-items:flex-start;gap:10px;
}
.tm-account-overview-card i{font-size:16px;color:#856a00;line-height:1;margin-top:2px}
.tm-account-overview-card span{display:block;font-size:11px;color:var(--tm-muted);line-height:1.2}
.tm-account-overview-card strong{display:block;font-size:13px;color:var(--tm-ink);line-height:1.3;word-break:break-word}
.tm-account-section-label{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:#8f8f88;font-weight:800;margin:2px 2px 10px}
.tm-account-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tm-account-actions .dropdown-item.tm-quick-link{
  padding:13px 12px;
  border:1px solid var(--tm-border);
  border-radius:16px;
  background:#fff;
  display:flex;align-items:flex-start;gap:11px;
}
.tm-account-actions .dropdown-item.tm-quick-link:hover,
.tm-account-actions .dropdown-item.tm-quick-link:focus-visible{background:var(--tm-accent-soft);border-color:#e6da8d}
.tm-account-actions .tm-quick-icon{width:34px;height:34px;flex:0 0 auto;border-radius:11px;background:#f6f3de;color:#7a6500;display:grid;place-items:center;font-size:16px}
.tm-account-actions .tm-quick-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.tm-account-actions .tm-quick-copy strong{font-size:13px;font-weight:750;color:var(--tm-ink)}
.tm-account-actions .tm-quick-copy span{font-size:11px;color:var(--tm-muted);white-space:normal;line-height:1.35}
.tm-account-logout{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:12px 14px;border-radius:14px;border:1px solid #f1d4d4;background:#fff8f8;color:#b23b3b;
  font-weight:750;
}
.tm-account-logout:hover,.tm-account-logout:focus-visible{background:#fff1f1;border-color:#edc1c1;color:#972f2f}
/* login panel */
.login-dropdown{padding:0!important}
.login-dropdown .user-dropdown-head{padding:20px 20px 16px}
.login-dropdown .tm-login-head{display:flex;align-items:flex-start;gap:14px}
.tm-login-head .tm-login-mark{
  width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,#ffe600 0%,#f4d300 100%);color:#262626;display:grid;place-items:center;font-size:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 26px rgba(255,230,0,.16);
}
.tm-login-copy{display:flex;flex-direction:column;gap:4px}
.tm-login-copy .tm-login-eyebrow{font-size:11px;line-height:1.1;text-transform:uppercase;letter-spacing:.14em;color:#8b7a28;font-weight:800}
.tm-login-copy .tm-login-title{font-size:18px;font-weight:800;letter-spacing:-.025em;color:var(--tm-ink)}
.tm-login-copy p{font-size:12px;color:var(--tm-muted);line-height:1.5;margin:0}
.tm-login-body{padding:16px 20px 18px}
.tm-login-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}
.tm-login-benefit{border:1px solid var(--tm-border);background:var(--tm-surface-soft);border-radius:14px;padding:10px 11px;display:flex;gap:9px;align-items:flex-start}
.tm-login-benefit i{font-size:15px;color:#856a00;line-height:1.1;margin-top:1px}
.tm-login-benefit strong{display:block;font-size:12px;font-weight:750;color:var(--tm-ink)}
.tm-login-benefit span{display:block;font-size:11px;color:var(--tm-muted);line-height:1.35}
.tm-login-form .tm-field{margin-bottom:14px}
.tm-login-form .tm-field-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;font-size:12px;font-weight:750;color:var(--tm-ink)}
.tm-login-form .tm-field-help{font-size:11px;color:var(--tm-muted);font-weight:600}
.tm-login-form .tm-input-shell{
  display:flex;align-items:center;gap:10px;
  min-height:50px;padding:0 14px;border:1px solid var(--tm-border);border-radius:14px;background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.tm-login-form .tm-input-shell:focus-within{border-color:#d7c86c;box-shadow:0 0 0 .22rem rgba(255,230,0,.12);background:#fffef3}
.tm-login-form .tm-input-icon{color:#8b7a28;font-size:16px;flex:0 0 auto}
.tm-login-form .form-control{
  border:none!important;box-shadow:none!important;padding:0;height:48px;background:transparent;font-size:14px
}
.tm-login-form .form-control::placeholder{color:#a7a79f}
.tm-login-form .tm-password-toggle{
  border:none;background:transparent;color:#7a7a72;padding:0 0 0 6px;display:grid;place-items:center
}
.tm-login-form .tm-password-toggle:hover,.tm-login-form .tm-password-toggle:focus-visible{color:#856a00}
.tm-login-form .alert{border-radius:14px;padding:10px 12px;margin-bottom:14px}
.tm-login-capslock[hidden]{display:none!important}
.tm-login-capslock{font-size:11px;color:#a54d00;background:#fff3db;border:1px solid #f2d7a0;border-radius:12px;padding:8px 10px;margin-top:-4px;margin-bottom:10px}
.tm-login-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}
.tm-login-footer small{color:var(--tm-muted);font-size:11px;line-height:1.4;max-width:220px}
.tm-login-submit{
  min-width:170px;padding:12px 16px!important;border:none!important;border-radius:14px!important;
  background:linear-gradient(135deg,#ffe600 0%,#f4d300 100%)!important;color:#262626!important;font-weight:800!important;
  box-shadow:0 12px 22px rgba(255,230,0,.18)
}
.tm-login-submit:hover,.tm-login-submit:focus-visible{filter:brightness(.98);transform:translateY(-1px)}
.tm-login-note{margin-top:14px;padding:11px 12px;border-radius:14px;background:#f8f8f4;border:1px dashed #ddd7bd;color:var(--tm-muted);font-size:11px;line-height:1.5}
.tm-login-note i{color:#856a00}
@media(max-width:767.98px){
  .user-menu-button .user-meta small{max-width:165px}
  .tm-account-actions,.tm-account-overview,.tm-login-benefits{grid-template-columns:1fr}
  .tm-login-footer{flex-direction:column;align-items:stretch}
  .tm-login-submit{width:100%;min-width:0}
}
@media(max-width:575.98px){
  .user-menu-button{padding-right:12px}
  .user-menu-button .user-meta strong{font-size:12px}
  .user-dropdown{border-radius:18px}
  .login-dropdown .user-dropdown-head,.tm-login-body{padding-left:16px;padding-right:16px}
}