:root {
  --bg: #0d0e12;
  --bg-2: #141721;
  --card: #1a1e2b;
  --card-2: #202536;
  --text: #f8f9fb;
  --muted: #aab0bf;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --shadow: 0 24px 70px rgba(0,0,0,.35);
  --gradient: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  --focus: rgba(220,39,67,.35);
  --max: 1220px;
  --radius: 18px;
  --header-h: 64px;
  color-scheme: dark;
}
html[data-theme="light"] { color-scheme: light; --bg:#f7f7fb; --bg-2:#fff; --card:#fff; --card-2:#f0f2f8; --text:#14161c; --muted:#616979; --border:rgba(20,22,28,.09); --border-strong:rgba(20,22,28,.16); --shadow:0 24px 60px rgba(45,55,90,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:radial-gradient(1200px 500px at 50% -10%, rgba(220,39,67,.12), transparent 60%), var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; line-height:1.55; }
body,button,input,textarea,select { font:inherit; }
a { color:inherit; text-decoration:none; }
button { border:0; cursor:pointer; }
img { max-width:100%; display:block; }
.container { width:min(calc(100% - 32px),var(--max)); margin-inline:auto; }
.app-header { position:sticky; top:0; z-index:50; height:var(--header-h); backdrop-filter:blur(12px); background:color-mix(in srgb,var(--bg) 82%,transparent); border-bottom:1px solid var(--border); }
.header-inner { height:100%; display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:10px; }
.brand { justify-self:center; display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; }
.brand-mark { width:28px; height:28px; border-radius:9px; background:var(--gradient); position:relative; box-shadow:0 0 0 1px rgba(255,255,255,.14) inset; }
.brand-mark:before { content:""; position:absolute; inset:6px; border:2px solid white; border-radius:7px; opacity:.95; }
.brand-mark:after { content:""; position:absolute; width:5px; height:5px; background:#fff; border-radius:50%; right:6px; top:6px; }
.brand-name { font-size:1rem; }
.header-actions { display:flex; align-items:center; gap:8px; }
.icon-btn,.menu-btn { width:40px; height:40px; border-radius:12px; background:transparent; color:var(--text); border:1px solid transparent; display:grid; place-items:center; transition:.2s ease; }
.icon-btn:hover,.menu-btn:hover { background:var(--card-2); border-color:var(--border); }
.menu-btn span,.menu-btn:before,.menu-btn:after { content:""; width:19px; height:2px; border-radius:20px; background:currentColor; transition:.2s ease; grid-area:1/1; }
.menu-btn span { transform:translateY(0); }
.menu-btn:before { transform:translateY(-6px); }
.menu-btn:after { transform:translateY(6px); }
.menu-btn[aria-expanded="true"] span { opacity:0; }
.menu-btn[aria-expanded="true"]:before { transform:rotate(45deg); }
.menu-btn[aria-expanded="true"]:after { transform:rotate(-45deg); }
.lang-switch { display:inline-flex; padding:3px; background:var(--card); border:1px solid var(--border); border-radius:11px; }
.lang-switch button { padding:6px 8px; border-radius:8px; color:var(--muted); background:transparent; font:700 .72rem ui-monospace,SFMono-Regular,monospace; }
.lang-switch button.active { color:#fff; background:var(--gradient); }
.theme-btn { font-size:1rem; }
.drawer { position:fixed; inset:0; pointer-events:none; z-index:80; }
.drawer-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.58); opacity:0; transition:.2s; }
.drawer-panel { position:absolute; top:0; bottom:0; left:0; width:min(360px,88vw); background:var(--bg-2); border-right:1px solid var(--border); transform:translateX(-102%); transition:.25s ease; overflow:auto; padding:20px; box-shadow:var(--shadow); }
.drawer.open { pointer-events:auto; }
.drawer.open .drawer-backdrop { opacity:1; }
.drawer.open .drawer-panel { transform:none; }
.drawer-brand { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.drawer-section { margin:18px 0; }
.drawer-section-title { font:700 .72rem ui-monospace,SFMono-Regular,monospace; letter-spacing:.12em; color:var(--muted); margin:0 0 8px; }
.drawer-list { display:grid; gap:4px; }
.drawer-link { display:flex; justify-content:space-between; padding:10px 12px; border-radius:11px; color:var(--muted); }
.drawer-link:hover,.drawer-link.active { color:var(--text); background:var(--card); }
.drawer-link.active { box-shadow:inset 3px 0 0 #dc2743; }
main { padding:32px 0 60px; }
.hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr); gap:22px; align-items:stretch; }
.panel,.profile-card,.seo-card,.article,.tool-card { background:linear-gradient(180deg,color-mix(in srgb,var(--card) 98%,#fff 2%),var(--card)); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.builder { padding:24px; }
.eyebrow { display:inline-flex; padding:6px 9px; border:1px solid var(--border); border-radius:999px; color:#fff; background:rgba(255,255,255,.03); font:700 .7rem ui-monospace,SFMono-Regular,monospace; letter-spacing:.07em; }
.hero h1 { font-size:clamp(2rem,5vw,4rem); line-height:1.02; letter-spacing:-.05em; margin:14px 0 10px; max-width:11ch; }
.gradient-text { background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub { color:var(--muted); max-width:60ch; margin:0 0 24px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1/-1; }
.field label { font-size:.78rem; color:var(--muted); font-weight:700; }
.field input,.field textarea { width:100%; border:1px solid var(--border); border-radius:13px; padding:12px 13px; color:var(--text); background:var(--bg-2); outline:none; transition:.2s; }
.field textarea { min-height:88px; resize:vertical; }
.field input:focus,.field textarea:focus { border-color:#dc2743; box-shadow:0 0 0 4px var(--focus); }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.btn { padding:11px 15px; border-radius:12px; border:1px solid var(--border); background:var(--card-2); color:var(--text); font-weight:800; }
.btn:hover { transform:translateY(-1px); }
.btn.primary { background:var(--gradient); color:white; border-color:transparent; box-shadow:0 10px 28px rgba(220,39,67,.18); }
.btn.ghost { background:transparent; }
.profile-wrap { display:flex; }
.profile-card { width:100%; padding:24px; display:flex; flex-direction:column; justify-content:center; min-height:100%; }
.profile-head { display:flex; gap:14px; align-items:center; }
.avatar-ring { width:88px; height:88px; padding:4px; border-radius:50%; background:var(--gradient); flex:none; }
.avatar { width:100%; height:100%; border-radius:50%; background:radial-gradient(circle at 30% 25%,#fff 0 7%,transparent 8%),linear-gradient(160deg,#263043,#11131b); display:grid; place-items:center; font-size:2rem; border:3px solid var(--card); }
.profile-id { min-width:0; }
.profile-username { margin:0; font-size:1.3rem; }
.profile-handle { color:var(--muted); font-size:.88rem; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:20px 0; }
.stat { padding:12px 10px; background:var(--card-2); border-radius:12px; text-align:center; }
.stat strong { display:block; font-size:1.05rem; }
.stat span { color:var(--muted); font-size:.73rem; }
.bio-live { padding:16px; border:1px dashed var(--border-strong); border-radius:14px; background:rgba(255,255,255,.025); white-space:pre-wrap; min-height:150px; }
.profile-foot { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:12px; }
.char-badge { font:800 .75rem ui-monospace,SFMono-Regular,monospace; padding:7px 9px; border-radius:9px; background:var(--card-2); color:var(--muted); }
.char-badge.warn { color:#fff; background:#7f1d35; border:1px solid #a52a4d; }
.cat-wrap { margin-top:22px; }
.cat-rail { display:flex; gap:8px; overflow-x:auto; padding:6px 2px 10px; scrollbar-width:none; scroll-snap-type:x proximity; }
.cat-rail::-webkit-scrollbar { display:none; }
.cat-chip { flex:0 0 auto; scroll-snap-align:center; padding:9px 13px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--muted); font-size:.83rem; font-weight:800; transition:.2s; }
.cat-chip.active { color:#fff; border-color:transparent; background:var(--gradient); box-shadow:0 8px 24px rgba(220,39,67,.18); }
.cat-progress { height:2px; background:var(--card-2); border-radius:999px; overflow:hidden; }
.cat-progress > span { display:block; width:20%; height:100%; background:var(--gradient); transform-origin:left; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:16px; margin:32px 0 14px; }
.section-head h2 { margin:0; font-size:1.55rem; }
.section-head p { margin:0; color:var(--muted); font-size:.9rem; }
.bio-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.bio-card { display:flex; flex-direction:column; min-height:230px; overflow:hidden; background:var(--card); border:1px solid var(--border); border-radius:16px; }
.bio-preview { flex:1; padding:18px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:.97rem; }
.bio-meta { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; padding:10px; border-top:1px solid var(--border); background:rgba(0,0,0,.08); }
.copy-btn { justify-self:center; padding:8px 11px; border-radius:9px; color:#fff; background:var(--gradient); font:800 .72rem ui-monospace,SFMono-Regular,monospace; }
.meta-actions { display:flex; gap:4px; }
.meta-btn { width:32px; height:32px; border-radius:8px; background:var(--card-2); color:var(--muted); }
.meta-btn.active { color:#ff537b; }
.meta-badge { font:700 .68rem ui-monospace,SFMono-Regular,monospace; padding:6px 7px; border-radius:7px; background:var(--card-2); color:var(--muted); }
.skeleton { position:relative; overflow:hidden; background:var(--card); border:1px solid var(--border); border-radius:16px; min-height:230px; }
.skeleton:after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); animation:shimmer 1.1s infinite; }
@keyframes shimmer { to { transform:translateX(100%); } }
.content-two-col { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,.4fr); gap:18px; margin-top:30px; }
.article,.seo-card,.tool-card { padding:24px; }
.article h2,.article h3 { line-height:1.2; }
.article p,.article li { color:var(--muted); }
.article a { text-decoration:underline; text-decoration-color:#dc2743; text-underline-offset:3px; }
.faq details { border-top:1px solid var(--border); padding:14px 0; }
.faq summary { cursor:pointer; font-weight:800; }
footer { border-top:1px solid var(--border); padding:34px 0; background:var(--bg-2); }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:24px; }
.footer-title { font-size:.78rem; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.footer-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.footer-links a { padding:7px 10px; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:.82rem; }
.footer-links a:hover { color:var(--text); }
.copyright { margin-top:24px; color:var(--muted); font-size:.8rem; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; z-index:120; background:#11131a; color:#fff; border:1px solid var(--border); padding:10px 13px; border-radius:10px; box-shadow:var(--shadow); pointer-events:none; transition:.25s; font-weight:700; }
.toast.show { transform:translate(-50%,0); opacity:1; }
.empty { padding:30px; border:1px dashed var(--border-strong); border-radius:14px; color:var(--muted); text-align:center; }
.page-hero { padding:28px 0 12px; }
.page-hero h1 { font-size:clamp(2rem,4vw,3.2rem); margin:.2em 0; }
.tool-list { display:grid; gap:10px; margin-top:14px; }
.symbols { display:flex; flex-wrap:wrap; gap:8px; }
.symbol-pill { padding:9px 12px; border:1px solid var(--border); background:var(--card-2); border-radius:10px; cursor:pointer; }
.font-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.font-sample { padding:12px; background:var(--card-2); border:1px solid var(--border); border-radius:12px; }
.notice { padding:12px 14px; border:1px solid rgba(240,148,51,.25); background:rgba(240,148,51,.07); border-radius:12px; color:var(--muted); }
@media (max-width: 900px) { .hero,.content-two-col { grid-template-columns:1fr; } .hero h1 { max-width:none; } }
@media (max-width: 680px) { :root { --header-h:58px; } .container { width:min(calc(100% - 20px),var(--max)); } main { padding-top:18px; } .header-inner { grid-template-columns:42px 1fr auto; } .brand-name { font-size:.92rem; } .form-grid { grid-template-columns:1fr; } .field.full { grid-column:auto; } .builder,.profile-card,.article,.seo-card,.tool-card { padding:17px; } .footer-grid { grid-template-columns:1fr; } .bio-meta { grid-template-columns:auto 1fr; } .meta-actions { grid-column:2; justify-self:end; } .copy-btn { grid-row:1; } }