/* Specchio — stile scuro "specchio da salone": fondo nero caldo, foto incorniciate ad arco
   come uno specchio, luce soffusa dall'alto, dettagli fucsia Leonardo Hair Look. */
:root {
  --bg: #0c0a0d;
  --bg-2: #120f13;
  --panel: #171419;
  --ink: #f4eff2;
  --ink-2: #b9b0b8;
  --ink-3: #7f7680;
  --line: #2a252d;
  --line-2: #1f1b22;
  --brand: #e2408c;
  --brand-ink: #ffffff;
  --brand-soft: rgba(226, 64, 140, .18);
  --brand-softer: rgba(226, 64, 140, .08);
  --silver: linear-gradient(160deg, #e9e6ea 0%, #8c8790 28%, #f6f4f7 52%, #77727c 78%, #d9d6dc 100%);
  --ok: #6fd3a3;
  --ok-soft: rgba(111, 211, 163, .14);
  --warn: #f2b45a;
  --warn-soft: rgba(242, 180, 90, .14);
  --bad: #ff8f86;
  --bad-soft: rgba(255, 143, 134, .14);
  --star: #f4c04e;
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px rgba(0,0,0,.45);
  --radius: 18px;
  --arch: 999px 999px 22px 22px;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.45 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100dvh; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); }
[hidden] { display: none !important; }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 26px; line-height: 1.15; }
h2 { font-size: 20px; line-height: 1.2; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }

/* ---------- struttura ---------- */
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; }
.top-in { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.mono { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); flex: none; }
.mono svg { width: 22px; height: 22px; }
.brand b { display: block; font: 600 15px/1.1 var(--sans); letter-spacing: .06em; }
.brand small { color: var(--ink-3); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.top .spacer { flex: 1; }
.steps { display: flex; gap: 6px; }
.steps span { width: 28px; height: 4px; border-radius: 4px; background: var(--line); }
.steps span.on { background: var(--brand); }
main { max-width: 1080px; margin: 0 auto; padding: 22px 16px calc(env(safe-area-inset-bottom) + 110px); }
.head { margin-bottom: 18px; }
.head p { margin: 6px 0 0; color: var(--ink-2); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.stack > * + * { margin-top: 14px; }

/* ---------- controlli ---------- */
.btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 12px; font-weight: 600; background: var(--line-2); color: var(--ink); border: 1px solid var(--line); text-align: center; -webkit-tap-highlight-color: transparent; }
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.block { width: 100%; }
label.field { display: block; }
label.field > span { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
input[type=text], input[type=password], textarea, select { width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; outline: none; font-size: 16px; }
input:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
textarea { resize: vertical; min-height: 70px; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--brand); margin: 1px 0 0; flex: none; }

.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px); }
.bar-in { max-width: 1080px; margin: 0 auto; display: flex; gap: 10px; align-items: center; }
.bar-in .grow { flex: 1; }
.bar-in .hint { font-size: 13px; color: var(--ink-2); }

.notice { border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.notice.warn { background: var(--warn-soft); color: var(--warn); }
.notice.bad { background: var(--bad-soft); color: var(--bad); }
.notice.ok { background: var(--ok-soft); color: var(--ok); }
.notice.info { background: var(--brand-softer); color: var(--ink-2); border: 1px solid var(--brand-soft); }

/* ---------- login ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login .card { width: 100%; max-width: 380px; padding: 28px 22px; }
.login .mono { width: 56px; height: 56px; margin-bottom: 14px; }
.login .mono svg { width: 30px; height: 30px; }

/* ---------- foto ---------- */
.photo-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .photo-grid { grid-template-columns: 320px 1fr; align-items: start; } }
.drop { position: relative; aspect-ratio: 2 / 3; border-radius: var(--radius); border: 1.5px dashed var(--ink-3); background: var(--line-2); display: grid; place-items: center; overflow: hidden; text-align: center; color: var(--ink-2); max-width: 360px; width: 100%; margin: 0 auto; }
.drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drop .empty svg { width: 42px; height: 42px; color: var(--ink-3); }
.drop.has { border-style: solid; border-color: var(--line); }
.photo-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.tips { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
.tips li + li { margin-top: 4px; }

/* ---------- scelta look ---------- */
.slots { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .slots { grid-template-columns: repeat(3, 1fr); } }
.slot { background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 14px; cursor: pointer; text-align: left; position: relative; }
.slot.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.slot .n { font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.slot .name { font: 500 17px/1.25 var(--serif); margin-top: 4px; min-height: 22px; }
.slot .name.empty { color: var(--ink-3); font-style: italic; }
.slot .meta { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.slot .x { position: absolute; top: 8px; right: 8px; }
.catalog h3 { font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { all: unset; cursor: pointer; padding: 8px 13px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 14px; font-weight: 500; -webkit-tap-highlight-color: transparent; }
.chip:hover { border-color: var(--ink-3); }
.chip.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.slot-edit { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 14px; }
@media (min-width: 760px) { .slot-edit { grid-template-columns: 1fr 1fr; } }
.seg { display: inline-flex; background: var(--line-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg button { all: unset; cursor: pointer; padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ---------- anteprime ---------- */
.results { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .results { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .results { grid-template-columns: repeat(4, 1fr); } }
.res { background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.res.fav { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.res .pic { position: relative; aspect-ratio: 2 / 3; background: var(--line-2); overflow: hidden; cursor: zoom-in; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.res .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.res .pic .orig { opacity: 0; transition: opacity .15s; }
.res .pic.peek .orig { opacity: 1; }
.res .tag { position: absolute; left: 10px; top: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; }
.res .favtag { left: auto; right: 10px; background: var(--brand); }
.res .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.res .title { font: 500 16px/1.25 var(--serif); }
.res .ver { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.res .ver button { all: unset; cursor: pointer; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-2); }
.res .ver button:disabled { opacity: .3; pointer-events: none; }
.res .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stars { display: inline-flex; gap: 2px; }
.stars button { all: unset; cursor: pointer; font-size: 24px; line-height: 1; color: var(--line); padding: 2px; -webkit-tap-highlight-color: transparent; }
.stars button.on { color: var(--star); }
.loading { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: var(--ink-2); font-size: 14px; background: linear-gradient(110deg, var(--line-2) 30%, var(--panel) 50%, var(--line-2) 70%); background-size: 250% 100%; animation: shimmer 1.6s linear infinite; }
.loading.over { background: rgba(0,0,0,.45); color: #fff; animation: none; }
@keyframes shimmer { to { background-position: -150% 0; } }
.spin { width: 26px; height: 26px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rot .8s linear infinite; margin: 0 auto 10px; opacity: .7; }
@keyframes rot { to { transform: rotate(360deg); } }
.fail { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 18px; background: var(--bad-soft); color: var(--bad); font-size: 14px; }
.refine { border-top: 1px solid var(--line); padding-top: 10px; }
.refine .chips { gap: 6px; margin-bottom: 8px; }
.refine .chip { padding: 6px 10px; font-size: 13px; }
.refine-row { display: flex; gap: 8px; }
.refine-row input { flex: 1; min-width: 0; }

/* ---------- riepilogo ---------- */
.summary { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .summary { grid-template-columns: 380px 1fr; align-items: start; } }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.compare figure { margin: 0; }
.compare img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; display: block; background: var(--line-2); }
.compare figcaption { font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 6px; letter-spacing: .08em; text-transform: uppercase; }
.list { margin: 0; padding: 0; list-style: none; }
.list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.actions { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .actions { grid-template-columns: 1fr 1fr; } }

/* ---------- zoom ---------- */
.zoom { position: fixed; inset: 0; z-index: 50; background: rgba(10,8,12,.92); display: grid; place-items: center; padding: calc(env(safe-area-inset-top) + 50px) 12px calc(env(safe-area-inset-bottom) + 70px); }
.zoom img { max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; -webkit-touch-callout: none; user-select: none; }
.zoom .zbar { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 16px); display: flex; justify-content: center; gap: 10px; }
.zoom .zbar .btn { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.2); }
.zoom .close { position: fixed; top: calc(env(safe-area-inset-top) + 10px); right: 12px; }
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 90px); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 60; max-width: calc(100% - 32px); box-shadow: var(--shadow); }
.brand small { white-space: nowrap; }
@media (max-width: 420px) { .brand small { letter-spacing: .08em; font-size: 10px; } .steps span { width: 18px; } }

/* ---------- costi e archivio ---------- */
.cost-chip{font-size:12px;font-weight:600;color:var(--brand);background:var(--brand-soft);border-radius:99px;padding:4px 10px;margin-right:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cost{font-variant-numeric:tabular-nums;margin-top:2px}
.head-row{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.head-row>div{min-width:0;flex:1 1 220px}
.month{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.month .big{font-family:var(--serif);font-size:28px;font-variant-numeric:tabular-nums}
.archive{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:14px}
.arch{display:flex;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow)}
.arch-pic{flex:none;width:92px;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--line)}
.arch-pic img{width:100%;height:100%;object-fit:cover;display:block}
.arch-body{min-width:0;flex:1}
.arch-note{margin-top:6px;color:var(--ink-2);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.arch-confirm:not(:empty){margin-top:10px}
.arch .row{display:flex;align-items:center}


/* ================= stile specchio ================= */
body {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255, 236, 246, .09), transparent 60%),
    radial-gradient(80% 50% at 50% 110%, rgba(226, 64, 140, .07), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
h1 { font-size: 30px; font-weight: 500; font-style: italic; }
h2 { font-weight: 500; }
.top { background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid rgba(255,255,255,.05); }
.mono { background: transparent; color: var(--ink); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 0 18px rgba(226,64,140,.25) inset; }
.brand b { letter-spacing: .32em; font-weight: 600; font-size: 13px; }
.brand small { color: var(--ink-3); }
.card, .slot, .res, .arch { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), var(--panel); border-color: var(--line); }
.btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.btn:hover { border-color: rgba(255,255,255,.28); }
.btn.primary { background: var(--brand); border-color: var(--brand); box-shadow: 0 8px 26px rgba(226,64,140,.35); }
.btn.ghost { background: transparent; border-color: transparent; }
input[type=text], input[type=password], textarea, select { background: var(--bg-2); border-color: var(--line); }
.chip { background: transparent; border-color: rgba(255,255,255,.14); color: var(--ink-2); }
.chip.on { color: #fff; box-shadow: 0 6px 18px rgba(226,64,140,.3); }
.seg { background: var(--bg-2); }
.seg button.on { background: var(--brand); color: #fff; }
.bar { background: color-mix(in srgb, var(--bg) 86%, transparent); border-top: 1px solid rgba(255,255,255,.06); }

/* la foto è uno specchio: arco in alto, cornice argento sottile, luce dall'alto */
.drop, .res .pic, .compare img, .arch-pic {
  border-radius: var(--arch);
  position: relative;
}
.drop {
  max-width: 400px; border: 0; background: var(--bg-2);
  box-shadow: 0 0 0 2px #0c0a0d, 0 0 0 3.5px rgba(220,215,225,.55), 0 30px 60px rgba(0,0,0,.6), 0 0 80px rgba(255,230,242,.06);
}
.drop.has { border: 0; }
.drop::after, .res .pic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.06) 100%);
}
.res { border-radius: var(--radius); padding: 10px 10px 0; }
.res .pic { box-shadow: 0 0 0 1.5px rgba(220,215,225,.35); }
.res.fav { box-shadow: 0 0 0 2px var(--brand), 0 20px 50px rgba(226,64,140,.18); border-color: transparent; }
.res .tag { top: auto; bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(12,10,13,.7); backdrop-filter: blur(6px); white-space: nowrap; }
.res .favtag { top: 14px; bottom: auto; left: 50%; right: auto; background: var(--brand); }
.res .body { padding: 14px 4px 14px; }
.res .title { font-size: 18px; font-style: italic; }
.compare img { border-radius: var(--arch); box-shadow: 0 0 0 1.5px rgba(220,215,225,.35); }
.arch-pic { border-radius: 999px 999px 10px 10px; }
.stars button { color: #3a343d; }
.loading { background: linear-gradient(110deg, var(--bg-2) 30%, #241f27 50%, var(--bg-2) 70%); background-size: 250% 100%; }
.slot { border-radius: var(--radius); }
.slot .name { font-style: italic; }
.notice.info { background: var(--brand-softer); border-color: var(--brand-soft); color: var(--ink-2); }
.toast { background: #f4eff2; color: #0c0a0d; }
.login .card { box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
.login .mono { width: 64px; height: 84px; border-radius: 999px 999px 12px 12px; }
main.narrow { max-width: 560px; }

/* crediti */
.credit-chip { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink); border: 1px solid rgba(255,255,255,.14); border-radius: 99px; padding: 6px 11px; margin-right: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.credit-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.credit-chip.low .dot { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.credit-chip:focus-visible, .btn:focus-visible, .chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.credit-card .credit-big { font: italic 500 46px/1.1 var(--serif); margin: 4px 0 12px; font-variant-numeric: tabular-nums; }
.credit-card.low .credit-big { color: var(--warn); }
.credit-bar { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; margin-bottom: 10px; }
.credit-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #ff8cc0); border-radius: 6px; }
.credit-card.low .credit-bar span { background: var(--warn); }
@media (max-width: 420px) { .credit-chip { padding: 5px 9px; margin-right: 6px; } .brand small { display: none; } }
@media (prefers-reduced-motion: reduce) { .loading, .spin { animation-duration: 3s; } }
/* barra in alto: niente scorrimento laterale sui telefoni */
.top-in > * { min-width: 0; }
.brand { overflow: hidden; }
@media (max-width: 520px) { .top .steps { display: none; } .brand b { letter-spacing: .22em; } }

/* lo specchio della foto è un pulsante */
button.drop { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; position: relative; aspect-ratio: 2 / 3; width: 100%; max-width: 400px; margin: 0 auto; overflow: hidden; text-align: center; color: var(--ink-2); border-radius: var(--arch); background: var(--bg-2);
  box-shadow: 0 0 0 2px #0c0a0d, 0 0 0 3.5px rgba(220,215,225,.55), 0 30px 60px rgba(0,0,0,.6), 0 0 80px rgba(255,230,242,.06); -webkit-tap-highlight-color: transparent; transition: transform .15s; }
button.drop:active { transform: scale(.985); }
button.drop:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
.drop .empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; }
.drop .empty b { color: var(--ink); font-size: 16px; margin-top: 6px; }
.cam-ring { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--brand); box-shadow: 0 0 0 8px var(--brand-soft), 0 10px 30px rgba(226,64,140,.4); }
.cam-ring svg { width: 34px; height: 34px; }
@media (prefers-reduced-motion: no-preference) { button.drop:not(.has) .cam-ring { animation: breathe 2.6s ease-in-out infinite; } }
@keyframes breathe { 50% { box-shadow: 0 0 0 14px var(--brand-softer), 0 10px 30px rgba(226,64,140,.4); } }
.drop-change { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 99px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(12,10,13,.7); backdrop-filter: blur(6px); white-space: nowrap; }
.drop-change svg { width: 16px; height: 16px; }
.drop .empty .cam-ring svg { color: #fff; width: 34px; height: 34px; }