@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");
body { margin: 0; font-family: var(--font-sans); background: var(--surface); color: var(--ink); }
.oo-pad { padding: var(--space-6); }
.oo-row { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; }
.oo-icon { display: inline-block; flex: none; color: inherit; }

/* Logo */
.oo-logo { display: inline-flex; flex-direction: column; align-items: center; color: var(--ink); font-family: var(--font-sans); line-height: 1; }
.oo-logo-num { display: inline-flex; align-items: center; font-weight: 800; font-size: 1em; line-height: .9; letter-spacing: -0.04em; }
.oo-logo-star { width: .34em; height: .34em; margin: 0 .04em 0 .02em; }
.oo-logo-wish { font-weight: 400; font-size: .3em; letter-spacing: .08em; margin-top: .12em; }
.oo-logo-horizontal { flex-direction: row; align-items: center; gap: .14em; }
.oo-logo-rule { width: 2px; height: .62em; background: currentColor; opacity: .7; }
.oo-logo-wish-stack { font-size: .27em; line-height: 1.1; margin: 0; text-align: left; }
.oo-logo-negativo { background: var(--panel); color: var(--on-panel); padding: .3em .45em .26em; border-radius: var(--radius-md); }

/* Seal */
.oo-seal { color: var(--ink); display: block; }
.oo-seal text { fill: currentColor; font-family: var(--font-sans); }
.oo-seal-num { font-size: 24px; font-weight: 700; letter-spacing: 4px; }
.oo-seal-wish { font-size: 20px; font-weight: 500; letter-spacing: 3px; }

/* Section title */
.oo-st { display: flex; align-items: center; gap: var(--space-6); }
.oo-st-label { font-size: 13px; line-height: 1.5; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.oo-st-rule { flex: 1; height: 1px; background: var(--hairline); }

/* Value strip */
.oo-values { list-style: none; margin: 0; padding: 0; display: flex; color: var(--ink); }
.oo-value { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); }
.oo-value + .oo-value { border-left: 1px solid var(--hairline); }
.oo-value-label { font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* Button */
.oo-btn { font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-pill); border: 1.5px solid transparent; cursor: pointer; }
.oo-btn-primary { background: var(--panel); color: var(--on-panel); border-color: var(--panel); }
.oo-btn-accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.oo-btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.oo-btn:hover { filter: brightness(1.08); }
.oo-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.oo-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Tag */
.oo-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-3); border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.oo-tag-azul { background: var(--azul-profundo); color: var(--off-white); }
.oo-tag-areia { background: var(--areia); color: var(--azul-profundo); }
.oo-tag-magenta { background: var(--magenta); color: var(--off-white); }
.oo-tag-amarelo { background: var(--amarelo-sol); color: var(--azul-profundo); }
.oo-tag-laranja { background: var(--laranja); color: var(--azul-profundo); }
[data-theme="dark"] .oo-tag-azul { box-shadow: inset 0 0 0 1px var(--hairline); }