/* ============================================================ ADMIN — base tokens, shared primitives, FAB switcher. Brand palettes live in theme.css (data-theme on ). Every design scopes its own CSS under .A1 … .A5. ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --sans-jp: "Noto Sans JP", sans-serif; --serif-jp: "Noto Serif JP", serif; --display: "Cormorant Garamond", "Noto Serif JP", serif; --mono: ui-monospace, "SF Mono", Menlo, monospace; } html { scroll-behavior: smooth; } body { font-family: var(--sans-jp); color: var(--text); background: var(--surface-2); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } img { display: block; max-width: 100%; } input, select, textarea { font-family: inherit; } .admin-root { width: 100%; min-height: 100vh; } /* shared primitives (used by charts / avatars in shared.jsx) */ .avatar { display: inline-grid; place-items: center; border-radius: 50%; color: var(--on-brand); font-weight: 700; flex: none; } .mini-bars { display: flex; align-items: flex-end; gap: 3px; width: 100%; } .mini-bar { flex: 1; border-radius: 3px 3px 0 0; opacity: .92; } .spark { display: block; width: 100%; } .donut-t { font-size: 18px; font-weight: 700; fill: var(--text); font-family: var(--sans-jp); } /* ---- floating action button + settings panel (bottom-right) ---- */ .fab-wrap { position: fixed; z-index: 500; right: 22px; bottom: 22px; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; } .fab-scrim { position: fixed; inset: 0; z-index: 490; background: transparent; } .fab { position: relative; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(17,22,31,.94); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.08) inset; transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s; } .fab:hover { transform: translateY(-2px) scale(1.04); } .fab:active { transform: scale(.96); } .fab-wrap.open .fab { box-shadow: 0 12px 34px rgba(0,0,0,.4), 0 0 0 2px rgba(255,255,255,.5) inset; } .fab-ring { position: absolute; inset: 6px; border-radius: 50%; opacity: .92; box-shadow: 0 0 0 2px rgba(255,255,255,.25) inset; } .fab-cur { position: relative; font-family: var(--display), serif; font-size: 21px; font-weight: 600; letter-spacing: .02em; text-shadow: 0 1px 3px rgba(0,0,0,.55); } .fab-panel { width: min(324px, 86vw); background: rgba(17,22,31,.96); backdrop-filter: blur(16px); border-radius: 20px; padding: 18px 18px 20px; box-shadow: 0 24px 60px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.07) inset; transform-origin: bottom right; transform: translateY(12px) scale(.9); opacity: 0; pointer-events: none; transition: transform .26s cubic-bezier(.34,1.4,.5,1), opacity .2s; } .fab-wrap.open .fab-panel { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; } .fab-sec + .fab-sec { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.09); } .fab-lab { display: flex; align-items: baseline; gap: 8px; font-family: var(--display), serif; font-size: 12px; font-weight: 600; letter-spacing: .22em; color: #eef1f6; margin-bottom: 12px; } .fab-lab em { font-style: normal; font-family: var(--sans-jp); font-size: 10.5px; letter-spacing: .08em; color: #8b93a1; } .fab-swatches { display: flex; flex-wrap: wrap; gap: 8px; } .fab-sw { width: 34px; height: 34px; border-radius: 50%; transition: .18s; display: grid; place-items: center; } .fab-sw-num { font-size: 12px; font-weight: 600; color: #c3c9d3; background: rgba(255,255,255,.07); box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset; } .fab-sw-num:hover { color: #fff; background: rgba(255,255,255,.16); } .fab-sw-num.on { color: #11161f; background: #fff; font-weight: 700; box-shadow: 0 3px 10px rgba(0,0,0,.3); } .fab-sw-dot { background: var(--sw); box-shadow: 0 0 0 1px rgba(255,255,255,.28) inset; } .fab-sw-dot:hover { transform: scale(1.12); } .fab-sw-dot.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(255,255,255,.22); } @media (max-width: 720px) { .fab-wrap { right: 16px; bottom: 16px; } .fab { width: 56px; height: 56px; } .fab-cur { font-size: 19px; } .fab-panel { width: min(300px, 90vw); } }