/* ============================================================
   Tadfeen Trust — Global Theme
   Clean & trustworthy: deep greens, warm gold, cream, rounded cards
   ============================================================ */

:root{
    /* Greens */
    --green-900:#0c3b2a;
    --green-800:#0f4732;
    --green-700:#12543b;   /* primary dark */
    --green-600:#1a6b4d;
    --green-500:#2c8062;
    --green-050:#eaf3ee;

    /* Gold / accent */
    --gold-600:#b8842f;
    --gold-500:#c69a45;
    --gold-400:#d3ab5b;
    --gold-050:#f6edda;

    /* Neutrals */
    --cream:#f6f2e9;
    --cream-2:#f3efe4;
    --paper:#ffffff;
    --ink:#1f2a25;
    --muted:#5f6b64;
    --ink-2:#3f4a44;
    --muted-2:#8a938c;
    --line:#e7e2d6;

    --radius:16px;
    --radius-sm:10px;
    --shadow-sm:0 1px 2px rgba(16,45,32,.06),0 1px 3px rgba(16,45,32,.05);
    --shadow:0 10px 30px rgba(16,45,32,.10);
    --shadow-lg:0 20px 50px rgba(16,45,32,.16);
    --font:'Poppins','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
    --serif:'Lora','Georgia','Times New Roman',serif;
    --maxw:1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:var(--font);
    color:var(--ink);
    background:var(--cream);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    font-weight:600;font-size:15px;border-radius:12px;
    padding:13px 22px;border:1.5px solid transparent;transition:.18s ease;
    white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--green-700);color:#fff}
.btn-primary:hover{background:var(--green-800)}
.btn-outline{background:transparent;color:var(--green-700);border-color:var(--green-200,#cfe0d7);border:1.5px solid #d5ddd6}
.btn-outline:hover{background:var(--green-050);border-color:var(--green-500)}
.btn-ghost{background:var(--paper);color:var(--green-700);border:1.5px solid #e2e6e0}
.btn-ghost:hover{background:#f7faf8}
.btn-block{width:100%}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
    background:var(--paper);border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:50;
}
.header-inner{
    display:flex;align-items:center;justify-content:space-between;
    height:88px;gap:24px;
}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{width:52px;height:52px;flex:0 0 52px}
.brand-text .brand-name{
    font-family:var(--serif);font-size:25px;font-weight:600;
    color:var(--green-800);letter-spacing:.2px;line-height:1;
}
.brand-text .brand-tag{
    font-size:11.5px;color:var(--gold-600);margin-top:5px;font-weight:500;
    font-style:italic;font-family:var(--serif);letter-spacing:.1px;white-space:nowrap;
}
.main-nav{display:flex;align-items:center;gap:36px}
.main-nav a{
    font-size:16px;font-weight:500;color:#33413a;position:relative;padding:6px 0;
}
.main-nav a:hover{color:var(--green-700)}
.main-nav a.active{color:var(--green-800);font-weight:600}
.main-nav a.active::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;
    background:var(--gold-500);border-radius:3px;
}
.header-cta{display:flex;align-items:center;gap:16px}
.faq-btn{
    background:var(--green-700);color:#fff;border-radius:12px;
    padding:12px 22px;font-weight:600;display:inline-flex;align-items:center;gap:9px;
}
.faq-btn:hover{background:var(--green-800)}
.nav-toggle{display:none;background:none;border:none;color:var(--green-800)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
    position:relative;overflow:hidden;
    background:var(--green-900);
}
.hero-grid{
    display:grid;grid-template-columns:1.35fr .95fr;
    align-items:stretch;
}
/* left visual side */
.hero-left{
    position:relative;
    /* Badge + heading + intro sit at the top (no empty band above the badge);
       the feature row is pushed to the bottom with margin-top:auto so the tall
       panel — as tall as the two stacked cards on the right — is filled top to
       bottom instead of the content floating in the middle. */
    display:flex;flex-direction:column;justify-content:flex-start;
    padding:40px 60px 40px;
    background:
        linear-gradient(105deg, rgba(246,242,233,.96) 0%, rgba(246,242,233,.92) 52%, rgba(246,242,233,.78) 80%, rgba(246,242,233,.52) 100%),
        var(--hero-img, #d8cfbd);
    background-size:cover;background-position:center right;
    min-height:500px;
}
.hero-arch{position:absolute;inset:0;opacity:.5;pointer-events:none}
.hero-badge{
    display:inline-flex;align-items:center;gap:9px;
    background:rgba(255,255,255,.75);border:1px solid var(--gold-400);
    color:var(--gold-600);font-weight:600;font-size:15px;
    padding:9px 18px;border-radius:30px;margin-bottom:18px;backdrop-filter:blur(2px);
}
.hero-badge svg{width:17px;height:17px}
.hero h1{
    /* Sized to land the headline on two lines without towering over the rest
       of the panel. The wider cap keeps "Standing Together in Every" and
       "Season of Life" as two balanced rows rather than three. */
    font-size:clamp(34px, 3.1vw, 48px);line-height:1.12;font-weight:700;color:var(--green-800);
    letter-spacing:-.5px;max-width:22ch;
}
.hero-sub{
    margin-top:16px;font-size:clamp(15px, 1.2vw, 18px);color:#3d4842;
    max-width:46ch;line-height:1.6;
}
/* feature icons row */
.hero-features{
    display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
    /* Sits directly under the intro — no empty band above it. */
    margin:26px 0 24px;max-width:none;
}
.hf{position:relative;padding-right:12px}
.hf:not(:last-child)::after{
    content:"";position:absolute;right:0;top:6px;bottom:6px;width:1px;background:rgba(18,84,59,.14);
}
.hf-ico{
    width:50px;height:50px;border-radius:13px;background:rgba(18,84,59,.10);
    display:flex;align-items:center;justify-content:center;color:var(--green-700);margin-bottom:12px;
}
.hf-ico svg{width:26px;height:26px}
.hf h4{font-size:15.5px;color:var(--green-800);font-weight:700;margin-bottom:6px;line-height:1.25;white-space:nowrap}
.hf p{font-size:13.5px;color:#4a564f;line-height:1.5}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}

/* Platform stats strip at the foot of the left panel. margin-top:auto pushes
   it to the bottom so the panel is filled from the CTA buttons down to the
   stats, with the empty space taken up rather than left above the features. */
.hero-stats{
    margin-top:26px;padding-top:20px;border-top:1px solid rgba(18,84,59,.16);
    display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.hs{display:flex;align-items:center;gap:11px;min-width:0}
.hs-ico{
    width:42px;height:42px;flex:none;border-radius:12px;background:rgba(18,84,59,.10);
    display:flex;align-items:center;justify-content:center;color:var(--green-700);
}
.hs-ico.gold{background:rgba(200,163,90,.16);color:var(--gold-600)}
.hs-ico svg{width:21px;height:21px}
.hs b{display:block;font-size:20px;font-weight:700;color:var(--green-800);line-height:1;letter-spacing:-.3px}
.hs span{font-size:12px;color:#5c6b62}

/* right auth side */
.hero-right{
    background:linear-gradient(180deg,var(--green-800),var(--green-900));
    padding:30px 34px 32px;display:flex;flex-direction:column;gap:16px;justify-content:center;
}
.auth-card{
    background:var(--paper);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow-lg);
}
.auth-head{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.auth-head .ah-ico{
    width:46px;height:46px;border-radius:12px;background:var(--green-050);
    display:flex;align-items:center;justify-content:center;color:var(--green-700);
}
.auth-head .ah-ico svg{width:24px;height:24px}
.auth-head h3{font-size:20px;color:var(--green-800);font-weight:700;line-height:1.1}
.auth-head p{font-size:13.5px;color:var(--muted);margin-top:3px}

.field{position:relative;margin-bottom:11px}
.field .fico{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);
    color:#98a29b;width:18px;height:18px;
}
.field input{
    width:100%;height:46px;border:1.5px solid #e3e7e2;border-radius:11px;
    padding:0 44px;font-size:15px;color:var(--ink);background:#fdfdfc;transition:.15s;
}
.field input:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(44,128,98,.12)}
.field .toggle-pass{
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    background:none;border:none;color:#98a29b;padding:4px;display:flex;
}
.field .toggle-pass svg{width:19px;height:19px}
.field.no-icon input{padding-left:16px}

.auth-row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 14px}
.remember{display:flex;align-items:center;gap:9px;font-size:14px;color:#4a544d}
.remember input{width:17px;height:17px;accent-color:var(--green-700)}
.link-gold{color:var(--green-600);font-size:14px;font-weight:600}
.link-gold:hover{text-decoration:underline}
.auth-alt{text-align:center;margin-top:12px;font-size:14px;color:var(--muted)}
.auth-alt a{color:var(--green-600);font-weight:700}

.alert{
    padding:11px 14px;border-radius:10px;font-size:14px;margin-bottom:16px;
    border:1px solid transparent;
}
.alert-error{background:#fdeceb;border-color:#f6c9c5;color:#a3271e}
.alert-ok{background:#eaf6ef;border-color:#bfe3cd;color:#1a6b4d}

/* create-account card bullets */
.create-list{list-style:none;margin:12px 0 16px;display:flex;flex-direction:column;gap:10px}
.create-list li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--ink-2)}
.create-list .ck{
    flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:var(--green-050);
    display:flex;align-items:center;justify-content:center;color:var(--green-600);margin-top:1px;
}
.create-list .ck svg{width:13px;height:13px}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats{background:var(--paper);border-bottom:1px solid var(--line)}
.stats-inner{
    display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
    /* The band was only as tall as its padding allowed, so the circles ran
       right up to its top and bottom edges and looked clipped. More padding
       plus a floor on the height keeps clear space around them. */
    padding:46px 0;
    min-height:150px;
    align-items:center;
}
.stat{
    display:flex;align-items:center;gap:18px;justify-content:center;position:relative;
    padding:6px 0;
}
/* Dividers stop short of the new padding so they frame the row rather
   than reaching the edges of the band. */
.stat:not(:last-child)::after{content:"";position:absolute;right:0;top:14px;bottom:14px;width:1px;background:var(--line)}
.stat-ico{
    width:64px;height:64px;border-radius:50%;background:var(--cream-2);
    display:flex;align-items:center;justify-content:center;color:var(--green-600);
    /* Never let a long number beside it squeeze the circle into an oval. */
    flex:0 0 64px;
}
.stat-ico svg{width:28px;height:28px;flex:none}
.stat-ico.gold{color:var(--gold-600)}
.stat-num{font-size:27px;font-weight:700;color:var(--green-800);line-height:1}
.stat-label{font-size:14.5px;color:var(--muted);margin-top:6px}

/* ============================================================
   FEATURES
   ============================================================ */
.features{background:var(--cream-2);padding:52px 0 46px}
.features h2{
    text-align:center;font-size:30px;font-weight:700;color:var(--green-800);letter-spacing:-.3px;
}
.features .lead{text-align:center;color:var(--muted);font-size:15.5px;margin:12px 0 40px}
.feature-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.fcard{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
    padding:30px 20px;text-align:center;box-shadow:var(--shadow-sm);transition:.18s;
}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#e0d9c7}
.fcard-ico{
    width:62px;height:62px;border-radius:50%;background:var(--cream-2);
    display:flex;align-items:center;justify-content:center;color:var(--green-600);margin:0 auto 18px;
}
.fcard-ico svg{width:27px;height:27px}
.fcard h4{font-size:15.5px;color:var(--green-800);font-weight:600;margin-bottom:9px}
.fcard p{font-size:12.5px;color:var(--muted);line-height:1.55}

/* ============================================================
   FOOTER
   ============================================================ */
.footer-top-rule{height:4px;background:linear-gradient(90deg,var(--gold-500),var(--gold-400))}
.site-footer{
    background:linear-gradient(180deg,var(--green-800),var(--green-900));
    color:#d8e4dd;position:relative;overflow:hidden;
}
.footer-inner{
    display:grid;grid-template-columns:1.5fr 1.35fr 1fr 1.2fr auto;gap:36px;
    /* The gold rule sat almost on top of the column headings. More room
       above lets the line read as a divider rather than an underline. */
    padding:74px 0 46px;
}
.footer-inner .footer-col h5,
.footer-inner .footer-brand .brand-name{margin-top:4px}
.footer-brand .brand-name{color:#fff;font-family:var(--serif);font-size:24px;font-weight:700}
.footer-brand .brand-tag{color:var(--gold-400);font-size:12px;margin-top:3px}
.footer-brand p{font-size:13.5px;color:#b8c8bf;margin-top:16px;max-width:34ch;line-height:1.6}
.footer-col h5{color:#fff;font-size:16px;font-weight:700;margin-bottom:18px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer-links-2col{display:grid;grid-template-columns:1fr 1fr;gap:11px 24px}
.footer-col a{font-size:14px;color:#bfcec6}
.footer-col a:hover{color:var(--gold-400)}
.footer-contact div{display:flex;align-items:center;gap:11px;font-size:14px;color:#bfcec6;margin-bottom:13px}
.footer-contact svg{width:17px;height:17px;color:var(--gold-400);flex:0 0 17px}
.footer-quran{
    align-self:center;text-align:center;color:#cdae72;opacity:.92;
}
.footer-quran .arch{width:150px;height:auto;margin:0 auto 6px}
.footer-quran p{font-size:12px;line-height:1.5;color:#c7b485}
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.10);padding:18px 0;text-align:center;
    font-size:13px;color:#9db3a8;
}

/* ============================================================
   COMING-SOON PLACEHOLDER (shared by both shells)
   ============================================================ */
.cs-wrap{display:flex;align-items:center;justify-content:center;padding:60px 20px;min-height:52vh}
.cs-card{
    background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);
    max-width:520px;width:100%;text-align:center;padding:44px 36px;
}
.cs-ico{
    width:74px;height:74px;border-radius:20px;margin:0 auto 20px;
    background:var(--green-050);color:var(--green-600);display:flex;align-items:center;justify-content:center;
}
.cs-ico svg{width:36px;height:36px}
.cs-badge-soon{display:inline-block;background:var(--gold-050);color:var(--gold-600);font-size:12px;font-weight:600;padding:5px 13px;border-radius:20px;margin-bottom:14px}
.cs-card h2{font-size:23px;color:var(--green-800);font-weight:700;margin-bottom:10px}
.cs-card p{font-size:15px;color:var(--muted);line-height:1.6;max-width:40ch;margin:0 auto 24px}
.cs-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   FAQ MODAL / POPUP
   ============================================================ */
.modal-overlay{
    position:fixed;inset:0;z-index:100;
    background:rgba(10,40,28,.55);backdrop-filter:blur(3px);
    display:flex;align-items:center;justify-content:center;padding:24px;
    opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;
}
.modal-overlay.open{opacity:1;visibility:visible}
.modal{
    background:var(--paper);border-radius:20px;width:100%;max-width:640px;
    max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
    box-shadow:var(--shadow-lg);transform:translateY(14px) scale(.985);
    transition:transform .24s ease;
}
.modal-overlay.open .modal{transform:none}
.modal-head{
    display:flex;align-items:center;gap:15px;padding:24px 26px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,#fbfcfb,#f5f8f6);
}
.modal-head-ico{
    width:46px;height:46px;border-radius:12px;flex:0 0 46px;
    background:var(--green-050);color:var(--green-700);
    display:flex;align-items:center;justify-content:center;
}
.modal-head-ico svg{width:24px;height:24px}
.modal-head h3{font-size:20px;color:var(--green-800);font-weight:700;line-height:1.1}
.modal-head p{font-size:13.5px;color:var(--muted);margin-top:3px}
.modal-close{
    margin-left:auto;background:var(--paper);border:1px solid var(--line);border-radius:10px;
    width:38px;height:38px;color:var(--muted);display:flex;align-items:center;justify-content:center;flex:0 0 38px;
}
.modal-close:hover{background:var(--cream-2);color:var(--green-700)}
.modal-close svg{width:18px;height:18px}
.modal-body{padding:12px 26px;overflow-y:auto}
.modal-foot{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:18px 26px;border-top:1px solid var(--line);background:var(--cream);
}
.modal-foot span{font-size:14.5px;color:var(--muted);font-weight:500}

/* accordion */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:last-child{border-bottom:none}
.faq-q{
    width:100%;background:none;border:none;text-align:left;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:18px 2px;font-size:15.5px;font-weight:600;color:var(--green-800);
}
.faq-q:hover{color:var(--green-600)}
.faq-chev{width:20px;height:20px;flex:0 0 20px;color:var(--gold-600);transition:transform .22s ease}
.faq-q[aria-expanded="true"] .faq-chev{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.faq-a p{padding:0 2px 18px;font-size:14.5px;color:#4d5852;line-height:1.6}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
    .hero-grid{grid-template-columns:1fr}
    .hero-left{min-height:auto}
    /* On one column there is no extra height for margin-top:auto to absorb,
       so restore an explicit gap above the stats strip. */
    .hero-stats{margin-top:8px}
    .hero-right{padding:34px 34px 40px}
    .feature-grid{grid-template-columns:repeat(3,1fr)}
    .footer-inner{grid-template-columns:1fr 1fr;gap:30px}
    .footer-quran{grid-column:span 2}
}
@media (max-width:820px){
    .main-nav{display:none}
    .nav-toggle{display:inline-flex}
    .stats-inner{grid-template-columns:repeat(2,1fr);gap:26px 0;padding:34px 0;min-height:0}
    .stat:nth-child(2)::after{display:none}
    .hero h1{font-size:40px}
    .hero-left{padding:40px 28px}
}
@media (max-width:560px){
    /* 74px of clearance is right on a wide screen but wasteful on a phone. */
    .footer-inner{padding:44px 0 34px}
    .hero-features{grid-template-columns:repeat(2,1fr)}
    .hero-stats{grid-template-columns:repeat(2,1fr);gap:16px 12px}
    .hf:not(:last-child)::after{display:none}
    .feature-grid{grid-template-columns:repeat(2,1fr)}
    .footer-inner{grid-template-columns:1fr}
    .footer-quran{grid-column:span 1}
    .header-cta .faq-btn span{display:none}
    .hero h1{font-size:34px}
}

/* ============================================================
   Global icon safety-net.
   Every interface icon is an inline <svg> with a viewBox but no
   width/height attributes; its size comes from a page stylesheet.
   If that stylesheet is ever missing, stale, or slow to load, a
   viewBox-only SVG expands to fill its container — the "giant globe
   / chevron" effect. This caps inline icon SVGs that sit inside an
   interactive/label wrapper so they can never balloon, while any
   page rule that sets an explicit size still wins (loaded after this
   file, equal specificity). Decorative art (absolutely-positioned
   card backgrounds, charts) is not a direct child of these wrappers
   and is unaffected.
   ============================================================ */
button > svg,
a > svg,
span > svg,
label > svg,
b > svg,
h1 > svg, h2 > svg, h3 > svg, h4 > svg, h5 > svg, h6 > svg,
li > svg,
p > svg,
small > svg {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
}

/* ============================================================
   Information icon (tt_info_icon)
   ------------------------------------------------------------
   Sized in em so it takes its scale from whatever it sits next
   to. Nothing around it changes size: the button is inline,
   carries no padding or border, and uses vertical-align rather
   than any layout property, so table rows, card headers and the
   toggle grid keep exactly the metrics they had before.
   ============================================================ */
.tt-info{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.05em;
  height:1.05em;
  padding:0;
  margin:0 .38em 0 0;   /* icon sits before its label */
  border:0;
  background:none;
  color:#3a3a3a;
  cursor:pointer;
  vertical-align:-.14em;
  opacity:.5;
  flex:none;
  transition:opacity .15s ease, transform .15s ease;
}
.tt-info:hover,
.tt-info:focus-visible{opacity:1;transform:scale(1.08)}
.tt-info:focus-visible{outline:2px solid #1a6b4d;outline-offset:2px;border-radius:50%}
.tt-info svg{width:100%;height:100%;display:block}
.tt-info svg circle:first-child{fill:currentColor}
.tt-info svg .dot{fill:#fff}
.tt-info svg .stem{fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* The row icons sit at the end of the module name, which is the
   left-hand column, so the toggle columns are untouched. */
.perm-table th .tt-info,
.perm-table td .tt-info{color:#2f5f4a}

/* Card headings keep their own baseline. */
.cctl-head h4 .tt-info,
.cpanel h3 .tt-info,
.cpanel h4 .tt-info{color:#12543b}

/* ---- the popover shown on click ---- */
.tt-info-pop{
  position:absolute;
  z-index:9999;
  max-width:280px;
  background:#2b2b2b;
  color:#f6f6f6;
  font-size:12.5px;
  font-weight:500;
  line-height:1.5;
  padding:10px 12px;
  border-radius:9px;
  box-shadow:0 6px 22px rgba(0,0,0,.24);
  opacity:0;
  transform:translateY(-3px);
  transition:opacity .13s ease, transform .13s ease;
  pointer-events:none;
}
.tt-info-pop.on{opacity:1;transform:translateY(0)}
.tt-info-pop b{display:block;margin-bottom:3px;color:#ffd88a;font-size:12px;letter-spacing:.02em}
.tt-info-pop::after{
  content:"";position:absolute;top:-5px;left:var(--arrow,14px);
  width:10px;height:10px;background:#2b2b2b;transform:rotate(45deg);
}

/* Site-wide flash notice (rendered by the layouts). */
.tt-flash{
  display:flex;align-items:flex-start;gap:10px;
  margin:0 0 16px;padding:12px 14px;
  background:#fff4e5;border:1px solid #f0c48a;border-radius:11px;
  color:#6b4310;font-size:13.5px;font-weight:500;line-height:1.5;
}
.tt-flash svg{width:18px;height:18px;flex:none;margin-top:1px;color:#b9791b}
.tt-flash span{flex:1}
.tt-flash-x{
  border:0;background:none;color:#8a5a12;font-size:19px;line-height:1;
  cursor:pointer;padding:0 2px;opacity:.65;
}
.tt-flash-x:hover{opacity:1}


/* ============================================================
   Avatar chip (tt_avatar_chip)
   ------------------------------------------------------------
   Moved here from the community stylesheet. tt_avatar_chip() is used on
   the payments page and elsewhere, and those pages never load
   community.css — so the chip had no size at all and a member photo
   rendered at its natural resolution, filling the dialog.

   A default size is set here so a chip is always sensible; the page-level
   rules (.post-head .av, .admin-row .av and so on) still override it.
   ============================================================ */
.av{
  width:34px;height:34px;font-size:12px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--green-500),var(--green-800));
  color:#fff;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;overflow:hidden;line-height:1;
}
.av.gold{background:linear-gradient(135deg,var(--gold-500),var(--gold-600))}
/* A photo fills the chip rather than setting its size. */
.av.av-img{padding:0;background:none}
.av.av-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}