/* ScoreLiveToday — original dark sports theme, mobile-first, single file. */

:root {
    --bg: #0b0f14;
    --panel: #121a23;
    --panel-2: #16212d;
    --line: #223041;
    --text: #e8edf2;
    --muted: #93a5b8;
    --accent: #22c55e;
    --accent-dark: #14532d;
    --live: #ef4444;
    --gold: #f5c518;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

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

.wrap { max-width: 960px; margin: 0 auto; padding: 0 14px; }

/* header */
.site-header {
    background: var(--panel);
    border-bottom: 2px solid var(--accent-dark);
    position: sticky;
    top: 0;
    z-index: 10;
}
.header-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 8px;
}
.logo {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.5px;
}
.logo span { color: var(--accent); }
.logo:hover { text-decoration: none; }
.main-nav a {
    color: var(--text);
    margin-left: 16px;
    font-size: 0.95rem;
    font-weight: 600;
}
.main-nav a:first-child { margin-left: 0; }

/* titles */
.page-title { font-size: 1.6rem; margin: 20px 0 2px; }
.page-sub { color: var(--muted); margin: 0 0 16px; }

/* date navigation */
.date-nav { display: flex; gap: 8px; margin: 14px 0; }
.date-btn {
    flex: 1;
    text-align: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 6px;
    color: var(--text);
    font-weight: 600;
    font-size: 0.92rem;
}
.date-btn.active { background: var(--accent-dark); border-color: var(--accent); }
.date-btn:hover { text-decoration: none; border-color: var(--accent); }

/* week strip: 7 day boxes centred on the selected day, week-shift
   arrows at the ends and a calendar popover for jumping to any date.
   One nowrap row — on small screens it scrolls sideways, boxes keep
   their minimum width and never crush. */
.date-strip {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin: 14px 0 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.date-strip::-webkit-scrollbar { display: none; }
.ds-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}
.ds-arrow:hover { text-decoration: none; color: var(--accent); border-color: var(--accent); }
.ds-box {
    flex: 1 0 auto;
    min-width: 46px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 7px 4px 9px;
    color: var(--text);
}
.ds-box:hover { text-decoration: none; border-color: var(--accent); }
.ds-dow {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--muted);
}
.ds-num { font-size: 1.05rem; font-weight: 800; line-height: 1.15; }
.ds-box.selected { background: var(--accent-dark); border-color: var(--accent); }
.ds-box.selected .ds-dow { color: #bbf7d0; }
.ds-box.selected .ds-num { color: #ffffff; }
.ds-dot {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}
.ds-cal { position: relative; flex: 0 0 auto; display: flex; }
.ds-cal-btn {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 1rem;
    user-select: none;
}
.ds-cal-btn::-webkit-details-marker { display: none; }
.ds-cal-btn:hover { border-color: var(--accent); }
.ds-cal-form {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.ds-cal-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
}
.ds-cal-form input[type="date"] {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    color-scheme: dark;
    padding: 8px;
    font-size: 0.95rem;
    font-family: inherit;
}
.ds-cal-go {
    background: var(--accent-dark);
    border: 1px solid var(--accent);
    border-radius: 8px;
    color: #ffffff;
    font-weight: 700;
    padding: 9px 14px;
    cursor: pointer;
}
/* calendar popover: 📅 opens a month-grid panel like LiveSoccerTV's.
   Default placement (and the no-JS state) is absolute under the
   button; once opened, the strip's inline script switches the panel
   to fixed positioning from the button's rect, so it floats cleanly
   above the content below (search box included) instead of being
   clipped by the strip's horizontal-scroll box. */
.ds-cal-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 60;
    width: 292px;
    max-width: 92vw;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.ds-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ds-cal-title { font-weight: 800; font-size: 0.98rem; }
.ds-cal-nav {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.ds-cal-nav:hover { border-color: var(--accent); color: var(--accent); }
.ds-cal-week,
.ds-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.ds-cal-week span {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--muted);
    padding: 2px 0 4px;
}
.ds-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
}
a.ds-day:hover { text-decoration: none; border-color: var(--accent); }
.ds-day.other { color: var(--muted); opacity: 0.45; font-weight: 400; }
.ds-day.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ds-day.selected { background: var(--accent-dark); border-color: var(--accent); color: #ffffff; }
.ds-cal-alt { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; }
.ds-cal-alt-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    margin-bottom: 4px;
}
.ds-cal-form-inline {
    position: static;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px 0 0;
    box-shadow: none;
}
.ds-back { margin: 8px 0 0; font-size: 0.9rem; font-weight: 600; }

/* controls */
.controls { display: flex; gap: 8px; margin: 16px 0 18px; }
#team-search {
    flex: 1;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    padding: 10px 12px;
    font-size: 1rem;
    min-width: 0;
}
#team-search::placeholder { color: var(--muted); }
#live-toggle {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
#live-toggle.on { background: #3f1d1d; border-color: var(--live); color: #fecaca; }

/* league sections */
.league { margin: 0 0 22px; }
.league-head {
    font-size: 1.05rem;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.league-head a { color: var(--text); }
.ccode {
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--muted);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
}
.tv-tag { font-size: 0.8rem; }

/* match rows */
.match-list {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.match-row {
    display: grid;
    grid-template-columns: 62px 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    color: var(--text);
    border-top: 1px solid var(--line);
}
.match-row:first-child { border-top: none; }
.match-row:hover { background: var(--panel-2); text-decoration: none; }
.m-status { font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.m-team { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 0.95rem; }
.m-team.home { justify-content: flex-end; text-align: right; }
.m-team.away { justify-content: flex-start; }
.crest { width: 20px; height: 20px; object-fit: contain; flex: none; }
.crest.big { width: 56px; height: 56px; }
.m-mid { text-align: center; min-width: 56px; }
.score { font-weight: 800; font-size: 1.02rem; }
.live-score { color: #fca5a5; }
.versus { color: var(--muted); font-size: 0.85rem; }

/* badges */
.badge-live {
    color: #fecaca;
    background: #3f1d1d;
    border: 1px solid var(--live);
    border-radius: 6px;
    padding: 1px 7px;
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.badge-live .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--live);
    animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.badge-ft {
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1px 7px;
    font-size: 0.72rem;
    font-weight: 800;
}
.badge-canc { color: var(--gold); font-size: 0.75rem; font-weight: 800; }

/* panels */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    margin: 0 0 22px;
}
.panel h2 { margin-top: 0; font-size: 1.15rem; }
.panel h3 { font-size: 1rem; margin-bottom: 4px; }
.info-panel { border-left: 4px solid var(--accent); }

.watch-table { width: 100%; border-collapse: collapse; }
.watch-table th, .watch-table td {
    text-align: left;
    padding: 8px 6px;
    border-top: 1px solid var(--line);
    vertical-align: top;
    font-size: 0.95rem;
}
.watch-table tr:first-child th, .watch-table tr:first-child td { border-top: none; }
.watch-table th { width: 130px; color: var(--muted); font-weight: 700; }
.watch-home th { color: var(--text); }
.home-tag {
    display: inline-block;
    background: var(--accent-dark);
    color: #4ade80;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 999px;
    vertical-align: middle;
    white-space: nowrap;
}

.fineprint { color: var(--muted); font-size: 0.82rem; }

/* match hero */
.crumbs { margin: 16px 0 10px; color: var(--muted); font-size: 0.9rem; }
.match-hero { text-align: center; }
.match-comp { color: var(--muted); margin: 0 0 12px; font-weight: 600; }
.hero-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}
.hero-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.05rem;
}
.hero-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hero-score { font-size: 2.2rem; font-weight: 800; }
.hero-vs { font-size: 1.3rem; color: var(--muted); font-weight: 700; }
.hero-ko { font-size: 1.3rem; font-weight: 800; }
.hero-date { color: var(--muted); font-size: 0.9rem; }
.big-badge { font-size: 0.85rem; padding: 3px 12px; }

.contact-email { font-size: 1.15rem; font-weight: 700; }

/* footer */
.site-footer {
    border-top: 1px solid var(--line);
    background: var(--panel);
    margin-top: 30px;
    padding: 22px 0 30px;
    color: var(--muted);
    font-size: 0.92rem;
}
.foot-logo { font-size: 1.2rem; font-weight: 800; color: var(--text); margin: 0 0 8px; }
.foot-logo span { color: var(--accent); }
.foot-nav { margin: 10px 0; }

/* two-column layout + sidebar (pages opt in via slt_use_sidebar in lib.php) */
.layout { display: flex; flex-direction: column; }
.content { order: 1; min-width: 0; }
.sidebar {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 26px;
    min-width: 0;
}
@media (min-width: 900px) {
    .layout {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }
    .sidebar { grid-column: 1; grid-row: 1; margin-top: 20px; }
    .content { grid-column: 2; grid-row: 1; }
}

.side-box {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
}
.side-title {
    margin: 0 0 10px;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* live box */
.live-box { border-left: 4px solid var(--live); }
.live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--live);
    animation: pulse 1.2s ease-in-out infinite;
    flex: none;
}
.live-count { margin: 0 0 4px; color: #fca5a5; font-weight: 700; font-size: 0.95rem; }
.live-mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
    color: var(--text);
    font-size: 0.9rem;
}
.live-mini:hover { text-decoration: none; color: var(--accent); }
.lm-teams { min-width: 0; }
.lm-mid { flex: none; font-weight: 700; }
.lm-mid b { color: #fca5a5; }
.lm-mid .ko { color: var(--muted); font-weight: 700; }
.side-more { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 0.9rem; }
.upnext-label { color: var(--muted); font-size: 0.82rem; margin: 10px 0 0; font-weight: 700; }

/* leagues by country */
.side-country { margin: 0 0 12px; }
.side-country:last-child { margin-bottom: 0; }
.side-country-name { display: block; font-weight: 800; font-size: 0.9rem; margin-bottom: 2px; }
.side-leagues { list-style: none; margin: 0; padding: 0; }
.side-leagues li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
}
.side-leagues a { color: var(--muted); font-size: 0.9rem; min-width: 0; }
.side-leagues a:hover { color: var(--accent); }
.side-count {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    flex: none;
}
.side-all { margin-top: 4px; }
.side-all summary { cursor: pointer; color: var(--accent); font-weight: 700; font-size: 0.9rem; padding: 4px 0; }
.side-all .side-country:first-of-type { margin-top: 10px; }

/* top teams */
.side-teams { list-style: none; margin: 0; padding: 0; }
.side-teams li a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 0;
    color: var(--text);
    font-size: 0.93rem;
}
.side-teams li a:hover { color: var(--accent); text-decoration: none; }

/* team page */
.team-head { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.team-title { margin: 0; }
.team-day { font-size: 1.15rem; margin: 22px 0 10px; }

/* sports switcher bar (all pages, rendered by lib.php under the header):
   transparent over the dark page background (no strip of its own), one
   nowrap row. Items share the full bar width equally; each is a filled
   SVG pictogram (white via currentColor, green when active) above an
   11px bold uppercase label. The active sport is plain green with a 3px
   green underline — no background tint. Icon details use .ic-cut /
   .ic-cut-stroke, painted with the page background colour so they read
   as dark seams on both the white and the green glyphs. On narrow
   screens each item keeps a 76px minimum and the row scrolls sideways
   instead of wrapping. */
.sports-bar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 0 0;
}
.sports-bar::-webkit-scrollbar { display: none; }
.sport-item {
    flex: 1 1 0;
    min-width: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 2px 6px 8px;
    color: #FFFFFF;
    border-bottom: 3px solid transparent;
    text-align: center;
}
.sport-item:hover { text-decoration: none; background: rgba(255, 255, 255, 0.05); }
.sport-item.active {
    color: #22C55E;
    background: transparent;
    border-bottom-color: #22C55E;
}
.sport-icon { display: inline-flex; line-height: 0; }
.sport-icon svg { display: block; width: 22px; height: 22px; }
.sports-bar .ic-cut { fill: var(--bg); }
.sports-bar .ic-cut-stroke { stroke: var(--bg); }
.sport-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.2;
    color: #C9D1D9;
}
.sport-item.active .sport-label { color: #4ADE80; }

/* sport.php bits */
.intro-text { color: var(--muted); margin: 0 0 6px; max-width: 68ch; }
.period-note {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 600;
    margin-top: 1px;
}
.team-logo { position: relative; width: 20px; height: 20px; flex: none; display: inline-block; }
.team-logo .initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 0.5rem;
    font-weight: 800;
    color: var(--muted);
    letter-spacing: -0.3px;
}
.team-logo img.crest { position: absolute; inset: 0; }
.tv-note p { margin: 0; }

/* tennis */
.t-group { font-size: 0.95rem; margin: 14px 0 6px; color: var(--muted); }
.t-list { margin-bottom: 6px; }
.t-match { padding: 10px 12px; border-top: 1px solid var(--line); }
.t-match:first-child { border-top: none; }
.t-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; min-height: 20px; }
.t-round {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--muted);
}
.t-player {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    font-size: 0.95rem;
}
.t-player .sets {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    white-space: nowrap;
    color: var(--muted);
}
.t-player.winner .pname { font-weight: 800; }
.t-player.winner .sets { color: var(--text); }
.win-mark { color: var(--accent); font-weight: 800; }

/* formula 1 */
.f1-day { color: var(--muted); font-size: 0.8rem; font-weight: 700; margin-right: 8px; text-transform: uppercase; }
.f1-session-name { justify-content: flex-end; }
.f1-top-wrap { justify-content: flex-start; }
.f1-top3 { font-size: 0.86rem; color: var(--muted); }

/* mma */
.fight-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}
.fight-row:first-child { border-top: none; }
.fight-class { flex: none; }
.fight-names { flex: 1; min-width: 180px; font-size: 0.95rem; }
.fight-status { flex: none; margin-left: auto; }

/* small screens */
@media (max-width: 560px) {
    .match-row { grid-template-columns: 52px 1fr auto 1fr; padding: 8px 9px; gap: 6px; }
    .m-team { font-size: 0.88rem; }
    .crest.big { width: 44px; height: 44px; }
    .hero-score { font-size: 1.8rem; }
    .main-nav a { margin-left: 10px; font-size: 0.88rem; }
    .watch-table th { width: 104px; }
}

/* ---- Homepage information sections ---- */
.seo-wrap { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.seo-wrap .panel { margin: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.feature-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.feature-card h3 { margin: 0 0 6px; font-size: 1rem; }
.feature-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.cover-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cover-chips a { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; color: var(--text); text-decoration: none; font-size: .9rem; }
.cover-chips a:hover { border-color: var(--accent); }
.faq-item { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); margin-top: 10px; padding: 0 14px; }
.faq-item summary { cursor: pointer; font-weight: 700; padding: 12px 0; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--accent); font-weight: 800; }
.faq-item[open ] summary::after { content: "–"; }
.faq-item p { margin: 0 0 14px; color: var(--muted); line-height: 1.55; }

/* ---- Footer social icons ---- */
.foot-social { display: flex; gap: 10px; margin: 14px 0 2px; }
.foot-social a { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--panel-2); }
.foot-social a:hover { border-color: var(--accent); color: var(--accent); }
.foot-social svg { width: 18px; height: 18px; fill: currentColor; }