@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/geist-1.8.2-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/newsreader-1.0.3-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/geist-mono-1.8.2-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Geist Hindi"; font-style: normal; font-weight: 100 900; font-display: optional; src: url("/fonts/noto-sans-devanagari-2.0.6-devanagari.woff2") format("woff2"); unicode-range: U+0900-097F; } @font-face { font-family: "Newsreader Hindi"; font-style: normal; font-weight: 200 800; font-display: optional; src: url("/fonts/noto-serif-devanagari-2.0.6-devanagari.woff2") format("woff2"); unicode-range: U+0900-097F; } @font-face { font-family: "Geist Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 102.7%; ascent-override: 98.35%; descent-override: 29.21%; line-gap-override: 0%; } @font-face { font-family: "Newsreader Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 97.07%; ascent-override: 76.24%; descent-override: 27.82%; line-gap-override: 0%; } @font-face { font-family: "Geist Mono Fallback"; src: local("Courier New"), local("Menlo"); size-adjust: 100%; ascent-override: 101%; descent-override: 30%; line-gap-override: 0%; } :root { color-scheme: light; --bg:          #f7f6f3; --surface:     #ffffff; --surface-2:   #f9f9f8; --border:      #eaeaea; --border-dk:   #d9d8d4; --text:        #111111; --muted:       #6b6a66; --link:        #504fec; --primary:     #504fec; --primary-dk:  #3a37c8; --primary-bg:  #f1f1fd; --primary-rgb: 80, 79, 236; --primary-btn:   #504fec; --primary-btn-h: #4240d4; --on-primary:    #ffffff; --primary-ink:   #504fec; --secondary:      #2563eb; --secondary-text: #1d4ed8; --secondary-bg:   #ebf1fd; --tertiary:       #7c3aed; --tertiary-text:  #6d28d9; --tertiary-bg:    #f5effe; --accent:      #956400; --pastel-red-bg:      #fdebec;  --pastel-red-text:    #9f2f2d; --pastel-blue-bg:     #ebf1fd;  --pastel-blue-text:   #1d4ed8; --pastel-violet-bg:   #f5effe;  --pastel-violet-text: #6d28d9; --pastel-green-bg:    #edf3ec;  --pastel-green-text:  #346538; --pastel-yellow-bg:   #fbf3db;  --pastel-yellow-text: #956400; --pastel-gray-bg:     #f1f1ef;  --pastel-gray-text:   #4a4945; --nav-glass:   rgba(255, 255, 255, 0.86); --scrim:       rgba(17, 17, 17, 0.45); --on-media:    #ffffff; --on-media-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --on-danger:   #ffffff; --on-ink:      #ffffff; --on-ink-dim:  rgba(255, 255, 255, 0.86); --on-ink-line: rgba(255, 255, 255, 0.25); --on-ink-tint: rgba(255, 255, 255, 0.14); --media-bg:    #000000; --paper:       #ffffff; --google-link: #1a0dab; --glow:        radial-gradient(720px 320px at 50% -60px, rgba(80, 79, 236, 0.08), transparent 70%); --shimmer:     linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); --brand-whatsapp:   #25d366;  --brand-whatsapp-h: #1ebe5b; --brand-facebook:   #1877f2;  --brand-linkedin:   #0a66c2; --brand-telegram:   #229ed9;  --brand-reddit:     #ff4500; --brand-x:          #000000; --on-brand:         #ffffff; --verified-blue:    #1d9bf0;  --verified-gold:    #f5c518; --verified-gray:    #9b9a97; --success:     #346538; --success-bg:  #edf3ec; --danger:      #9f2f2d; --danger-h:    #842624; --danger-bg:   #fdebec; --knob:        #ffffff; --warning:     #956400; --warning-bg:  #fbf3db; --tag-bg:      #ebf1fd; --tag-text:    #1d4ed8; --hot-bg:      #fdebec; --hot-text:    #9f2f2d; --radius:      12px; --radius-sm:   8px; --radius-lg:   12px; --radius-btn:  6px; --radius-pill: 999px; --shadow-sm:   none; --shadow:      0 1px 2px rgba(17, 17, 17, 0.03); --shadow-md:   0 8px 24px rgba(17, 17, 17, 0.04); --shadow-lg:   0 16px 40px rgba(17, 17, 17, 0.045); --ring:        0 0 0 2px #ffffff, 0 0 0 4px #504fec; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --ff-sans:  "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans Devanagari", "Nirmala UI", sans-serif; --ff-serif: "Newsreader", "Newsreader Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, "Noto Serif Devanagari", "Nirmala UI", serif; --ff-mono:  "Geist Mono", "Geist Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fs-xs: 11.5px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 26px; --fs-2xl: 34px; --fs-3xl: 44px; --ease:     cubic-bezier(0.16, 1, 0.3, 1); --dur:      200ms; --dur-slow: 600ms; --ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E"); --ic-caret-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z'/%3E%3C/svg%3E"); --ic-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M243,96a20.33,20.33,0,0,0-17.74-14l-56.59-4.57L146.83,24.62a20.36,20.36,0,0,0-37.66,0L87.35,77.44,30.76,82A20.45,20.45,0,0,0,19.1,117.88l43.18,37.24-13.2,55.7A20.37,20.37,0,0,0,79.57,233L128,203.19,176.43,233a20.39,20.39,0,0,0,30.49-22.15l-13.2-55.7,43.18-37.24A20.43,20.43,0,0,0,243,96ZM172.53,141.7a12,12,0,0,0-3.84,11.86L181.58,208l-47.29-29.08a12,12,0,0,0-12.58,0L74.42,208l12.89-54.4a12,12,0,0,0-3.84-11.86L41.2,105.24l55.4-4.47a12,12,0,0,0,10.13-7.38L128,41.89l21.27,51.5a12,12,0,0,0,10.13,7.38l55.4,4.47Z'/%3E%3C/svg%3E"); --ic-star-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'/%3E%3C/svg%3E"); } html.hi-fonts { --ff-sans:  "Geist", "Geist Hindi", "Geist Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans Devanagari", "Nirmala UI", sans-serif; --ff-serif: "Newsreader", "Newsreader Hindi", "Newsreader Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, "Noto Serif Devanagari", "Nirmala UI", serif; } * { box-sizing: border-box; } * { scrollbar-width: none; -ms-overflow-style: none; } *::-webkit-scrollbar { width: 0; height: 0; display: none; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--ff-sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :where(button, input, select, textarea, optgroup) { font-family: inherit; } h1, blockquote { font-family: var(--ff-serif); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; } blockquote { line-height: 1.45; } a { color: var(--link); text-decoration: none; } kbd { font-family: var(--ff-mono); font-size: 0.8em; padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); } code, pre, samp { font-family: var(--ff-mono); } hr { border: 0; border-top: 1px solid var(--border); } ::selection { background: var(--pastel-blue-bg); color: var(--text); } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--ring); } :root[data-theme="dark"] { color-scheme: dark; --bg:          #191919; --surface:     #202020; --surface-2:   #262626; --border:      #2f2f2f; --border-dk:   #3d3d3b; --text:        #ededec; --muted:       #9b9a97; --link:        #8b89f5; --primary:     #8b89f5; --primary-dk:  #b4b3fa; --primary-bg:  #282841; --primary-rgb: 139, 137, 245; --primary-btn:   #504fec; --primary-btn-h: #5e5df0; --primary-ink:   #504fec; --on-primary:    #ffffff; --secondary:      #2563eb; --secondary-text: #7ea6f8; --secondary-bg:   #212c45; --tertiary:       #7c3aed; --tertiary-text:  #b48ef6; --tertiary-bg:    #312545; --accent:      #e2be6a; --pastel-red-bg:      #3a2321;  --pastel-red-text:    #f1a9a5; --pastel-blue-bg:     #212c45;  --pastel-blue-text:   #7ea6f8; --pastel-violet-bg:   #312545;  --pastel-violet-text: #b48ef6; --pastel-green-bg:    #22301f;  --pastel-green-text:  #9bcb97; --pastel-yellow-bg:   #342b17;  --pastel-yellow-text: #e2be6a; --pastel-gray-bg:     #2a2a28;  --pastel-gray-text:   #c9c8c4; --nav-glass:   rgba(25, 25, 25, 0.86); --scrim:       rgba(0, 0, 0, 0.6); --on-danger:   #191919; --google-link: #8ab4f8; --glow:        radial-gradient(720px 320px at 50% -60px, rgba(139, 137, 245, 0.07), transparent 70%); --shimmer:     linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); --brand-x:     #ededec; --success:     #9bcb97; --success-bg:  #22301f; --danger:      #f1a9a5; --danger-h:    #f4bcb8; --danger-bg:   #3a2321; --warning:     #e2be6a; --warning-bg:  #342b17; --tag-bg:      #212c45; --tag-text:    #7ea6f8; --hot-bg:      #3a2321; --hot-text:    #f1a9a5; --shadow-sm:   none; --shadow:      0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md:   0 8px 24px rgba(0, 0, 0, 0.045); --shadow-lg:   0 16px 40px rgba(0, 0, 0, 0.045); --ring:        0 0 0 2px #191919, 0 0 0 4px #8b89f5; } html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: background-color .28s ease, border-color .28s ease, color .28s ease, fill .28s ease, box-shadow .28s ease !important; } @media (prefers-reduced-motion: reduce) { html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; } } .nav-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; } .nav-theme-btn:hover { background: var(--surface-2); border-color: var(--border-dk); } .nav-theme-btn:focus-visible { outline: none; box-shadow: var(--ring); } .nav-theme-btn .svgi { width: 19px; height: 19px; } .nav-theme-btn [data-theme-icon] { display: none; align-items: center; justify-content: center; } :root[data-theme="light"] .nav-theme-btn [data-theme-icon="light"], :root[data-theme="dark"]  .nav-theme-btn [data-theme-icon="dark"] { display: inline-flex; } .nav-theme-panel { min-width: 232px; padding: 6px; } .nav-theme-panel .nav-menu-head { padding: 8px 10px 6px; } .theme-option { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: background .13s; } .theme-option:hover { background: var(--surface-2); } .theme-option:focus-visible { outline: none; box-shadow: var(--ring); } .theme-option-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); color: var(--muted); } .theme-option-ico .svgi { width: 17px; height: 17px; } .theme-option strong { font-weight: 600; } .theme-option small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; } .theme-option-check { margin-left: auto; color: var(--primary); opacity: 0; flex: none; } .theme-option-check .svgi { width: 17px; height: 17px; } .theme-option.is-active { background: var(--primary-bg); } .theme-option.is-active .theme-option-ico { background: var(--primary-btn); color: var(--on-primary); } .theme-option.is-active .theme-option-check { opacity: 1; } .footer-theme { margin-top: 18px; } .footer-theme-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .footer-theme-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .footer-theme-seg .theme-option { width: auto; gap: 7px; padding: 7px 13px; border-radius: var(--radius-btn); font-size: 13px; } .footer-theme-seg .theme-option small, .footer-theme-seg .theme-option-check { display: none; } .footer-theme-seg .theme-option-ico { width: auto; height: auto; background: none; color: currentColor; } .footer-theme-seg .theme-option-ico .svgi { width: 16px; height: 16px; } .footer-theme-seg .theme-option.is-active { background: var(--primary-btn); color: var(--on-primary); } .footer-theme-seg .theme-option.is-active .theme-option-ico { color: var(--on-primary); } .navbar { position: sticky; top: 0; z-index: 30; background: var(--nav-glass); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .navbar-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; height: 64px; display: flex; align-items: center; gap: 16px; } body.cl-full .navbar-inner { max-width: none; } body.cl-custom .navbar-inner { max-width: var(--cl-max, 1280px); } .brand { font-weight: 700; font-size: 18px; color: var(--text); display: flex; align-items: center; gap: 10px; white-space: nowrap; } .brand:hover { text-decoration: none; } .brand-mark { width: 32px; height: 32px; border-radius: var(--radius-sm); object-fit: cover; display: block; } .brand--community { gap: 10px; min-width: 0; } .brand-mark-link { display: block; flex: none; } .brand-mark--community { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: var(--primary-btn); color: var(--on-primary); font-size: 13px; font-weight: 700; letter-spacing: .02em; } .brand-mark--community img { width: 100%; height: 100%; object-fit: cover; display: block; } .brand-lines { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; } .brand-name { font-size: 16px; font-weight: 700; color: var(--text); max-width: 240px; overflow: hidden; text-overflow: ellipsis; } .brand-powered { font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 2px; } .brand-name:hover, .brand-powered:hover { color: var(--primary); text-decoration: none; } @media (max-width: 720px) { .brand-text, .brand-lines { display: none; } } .search { flex: 1; min-width: 0; max-width: 600px; position: relative; } .search-input-wrap { position: relative; display: flex; align-items: center; height: 42px; padding: 0 12px 0 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); transition: border-color .15s, box-shadow .15s, background .15s; cursor: text; } .search-input-wrap:hover { border-color: var(--border-dk); background: var(--surface); } .search.is-focused .search-input-wrap, .search-input-wrap:focus-within { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .08); } .search-icon.svgi { width: 18px; height: 18px; color: var(--muted); margin-right: 10px; flex-shrink: 0; transition: color .15s; } .search-input-wrap:focus-within .search-icon { color: var(--primary); } .search-input-wrap input { flex: 1; border: 0; background: transparent; outline: none; box-shadow: none; font-size: 14.5px; color: var(--text); min-width: 0; } .search-input-wrap input::placeholder { color: var(--muted); } .search-input-wrap input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .search-rotate { position: absolute; left: 42px; right: 42px; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; pointer-events: none; font-size: 14.5px; line-height: 1.25; color: var(--muted); } .search-rotate[hidden] { display: none; } .search-rotate-word { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; will-change: transform, opacity; transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1), opacity .42s ease; } .search-rotate-word.out   { transform: translateY(-135%); opacity: 0; } .search-rotate-word.reset { transition: none; transform: translateY(135%); opacity: 0; } @media (prefers-reduced-motion: reduce) { .search-rotate-word, .search-rotate-word.out, .search-rotate-word.reset { transition: none; transform: none; opacity: 1; } } .search-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; font: 600 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; box-shadow: 0 1px 0 var(--border-dk); margin-left: 8px; flex-shrink: 0; transition: opacity .15s; } .search.is-focused .search-kbd { display: none; } .search-clear { background: transparent; border: 0; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; margin-left: 6px; padding: 2px 6px; border-radius: 6px; flex-shrink: 0; } .search-clear:hover { background: var(--bg); color: var(--text); } .search-back { display: none; } @keyframes sb-back-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } } .search-results[hidden] { display: none; } .search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; animation: sr-fade-in .14s ease-out; max-height: calc(100vh - 100px); display: flex; flex-direction: column; } @keyframes sr-fade-in { from { opacity: 0; transform: translateY(-4px); } to   { opacity: 1; transform: translateY(0); } } .search-results-body { overflow-y: auto; padding: 6px; min-height: 60px; } .search-group { padding: 6px 0; } .search-group + .search-group { border-top: 1px solid var(--border); } .search-group-label { padding: 4px 12px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .search-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; cursor: pointer; transition: background .12s; } .search-row:hover, .search-row.is-active { background: var(--surface-2); text-decoration: none; } .search-row .sr-ico { width: 32px; height: 32px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; } .sr-ico.is-post      { background: var(--pastel-blue-bg); color: var(--pastel-blue-text); } .sr-ico.is-question  { background: var(--primary-bg); color: var(--primary-dk); } .sr-ico.is-poll      { background: var(--pastel-green-bg); color: var(--pastel-green-text); } .sr-ico.is-mcq       { background: var(--pastel-violet-bg); color: var(--pastel-violet-text); } .sr-ico.is-community { background: var(--pastel-gray-bg); color: var(--pastel-gray-text); } .sr-ico.is-tool      { background: var(--pastel-gray-bg); color: var(--pastel-gray-text); } .sr-ico.is-faq       { background: var(--pastel-yellow-bg); color: var(--pastel-yellow-text); } .sr-ico.is-tag       { background: var(--tag-bg); color: var(--tag-text); } .sr-ico.is-user      { background: var(--pastel-gray-bg); color: var(--pastel-gray-text); } .sr-ico .svgi        { width: 18px; height: 18px; } .search-row .sr-body { flex: 1; min-width: 0; } .search-row .sr-title { font-size: 14px; font-weight: 600; color: var(--text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-row .sr-meta { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; } .search-row mark { background: transparent; color: var(--primary); font-weight: 700; } .search-row.is-active mark { color: var(--primary-dk); } .search-results-empty, .search-results-loading { padding: 22px 14px; text-align: center; color: var(--muted); font-size: 13.5px; } .search-results-loading::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--primary); animation: sr-spin .7s linear infinite; vertical-align: -2px; } @keyframes sr-spin { to { transform: rotate(360deg); } } .search-results-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 11.5px; color: var(--muted); flex-wrap: wrap; } .search-hint { display: inline-flex; gap: 12px; flex-wrap: wrap; } .search-hint span { display: inline-flex; align-items: center; gap: 4px; } .search-hint kbd, .search-results-foot kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; font: 600 10.5px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; color: var(--muted); } .search-hint-right code { background: var(--surface); border: 1px solid var(--border); padding: 0 5px; border-radius: 4px; font-size: 11px; color: var(--text); } .nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .nav-menu { position: relative; } .nav-create-btn { height: 40px; padding: 0 15px; font-size: 14px; border-radius: var(--radius-btn); background: var(--primary-btn); box-shadow: none; transition: box-shadow .18s ease, transform .18s ease, filter .18s ease; } .nav-create-btn:hover { filter: brightness(1.04); box-shadow: none; } .nav-create-btn:active { transform: translateY(0); } .nav-create-ico { display: inline-flex; } .nav-create-ico .svgi { width: 17px; height: 17px; } .nav-create-caret { display: inline-flex; margin-left: 1px; opacity: .9; transition: transform .2s ease; } .nav-create-caret .svgi { width: 15px; height: 15px; } .nav-menu.is-open .nav-create-btn .nav-create-caret, .nav-menu.is-open .nav-user-btn .nav-user-caret { transform: rotate(180deg); } .nav-menu-panel { position: absolute; top: calc(100% + 10px); right: 0; min-width: 264px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 7px; display: none; z-index: 40; transform-origin: top right; animation: nav-pop .16s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes nav-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to   { opacity: 1; transform: translateY(0) scale(1); } } .nav-menu.is-open .nav-menu-panel { display: block; } .nav-menu-head { margin: 3px 8px 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .nav-menu-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; cursor: pointer; text-align: left; font: inherit; transition: background .14s ease; } .nav-menu-item:hover { background: var(--surface-2); text-decoration: none; } .nav-menu-item:focus-visible { outline: none; background: var(--surface-2); box-shadow: var(--ring); } .nav-menu-item.slim { padding: 8px 12px; font-size: 13.5px; } .nav-menu-item.slim .svgi { width: 18px; height: 18px; flex-shrink: 0; color: var(--muted); } .nav-menu-item.slim.danger .svgi { color: var(--danger); } .nav-menu-item.danger { color: var(--danger); } .nav-menu-item.danger:hover { background: var(--danger-bg); } .nav-menu-item strong { font-size: 13.5px; font-weight: 600; display: block; } .nav-menu-item small { font-size: 12px; color: var(--muted); display: block; margin-top: 1px; } .nav-menu-ico { width: 34px; height: 34px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; } .nav-menu-ico .svgi { width: 18px; height: 18px; } .nav-menu-divider { height: 1px; background: var(--border); margin: 4px 0; } .nav-menu-logout { margin: 0; } .nav-menu-logout button { width: 100%; } .nav-user-btn { display: inline-flex; align-items: center; gap: 5px; height: 40px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 0 8px 0 4px; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; } .nav-user-btn:hover { background: var(--surface-2); border-color: var(--border-dk); } .nav-user-caret { display: inline-flex; color: var(--muted); transition: transform .2s ease; } .nav-user-caret .svgi { width: 15px; height: 15px; } .nav-create-btn:focus-visible, .nav-user-btn:focus-visible, .nav-bell-btn:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--ring); } @media (prefers-reduced-motion: reduce) { .nav-menu-panel, .search-results, .search-back { animation: none; } .nav-create-btn, .nav-create-caret, .nav-user-caret, .nav-menu-item { transition: none; } .nav-create-btn:hover { transform: none; } } .nav-user-id { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; } .nav-user-id:hover { background: var(--surface-2); text-decoration: none; } .nav-user-id strong { font-size: 14px; font-weight: 600; display: block; } .nav-user-id small { font-size: 12px; color: var(--muted); display: block; margin-top: 1px; } .nav-user-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px 6px; font-size: 12.5px; color: var(--muted); } .nav-user-legal a { color: var(--muted); } .nav-user-legal a:hover { color: var(--primary); text-decoration: none; } @media (max-width: 820px) { #nav-create-menu { display: none; } } @media (max-width: 560px) { .navbar-inner { gap: 8px; padding: 0 12px; } .search { max-width: none; } .search-input-wrap { padding: 0 8px 0 12px; } .search-rotate { left: 40px; right: 34px; } .search-kbd { display: none; } .nav-actions { gap: 4px; } .nav-theme-btn, .nav-bell-btn { width: 38px; height: 38px; } .nav-user-btn { height: 38px; } } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-btn); border: 1px solid transparent; font-size: 14px; font-weight: 500; cursor: pointer; background: transparent; color: var(--text); box-shadow: none; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform .12s var(--ease); white-space: nowrap; } .btn:hover { background: var(--surface-2); text-decoration: none; } .btn:active { transform: scale(0.98); } .btn-ghost { background: var(--surface); border-color: var(--border); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--border-dk); } .btn-primary { background: var(--primary-btn); color: var(--on-primary); border-color: var(--primary-btn); } .btn-primary:hover { background: var(--primary-btn-h); border-color: var(--primary-btn-h); color: var(--on-primary); } .btn-sm { padding: 5px 10px; font-size: 12.5px; } @media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--pastel-gray-bg); color: var(--pastel-gray-text); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .avatar.sm { width: 22px; height: 22px; font-size: 10px; } .avatar.lg { width: 40px; height: 40px; font-size: 14px; } .avatar > .avatar-img, .icon-sq > .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } .icon-sq { overflow: hidden; } .container { max-width: 1280px; margin: 24px auto; padding: 0 20px; display: grid; grid-template-columns: 220px 1fr 320px; gap: 24px; align-items: start; } .container > * { min-width: 0; } @media (max-width: 1100px) { .container { grid-template-columns: 1fr 320px; } .sidebar { display: none; } } @media (max-width: 820px) { .container { grid-template-columns: 1fr; } .rightbar { display: none; } } .container--narrow { grid-template-columns: 220px 1fr; } body.cl-full .container { max-width: none; } body.cl-custom .container { max-width: var(--cl-max, 1280px); } body.cl-full .container > main, body.cl-custom .container > main { width: 100%; max-width: 900px; justify-self: center; } @media (max-width: 1100px) { .container--narrow { grid-template-columns: 1fr; } } .bottom-nav { display: none; } @media (max-width: 820px) { .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--nav-glass); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-top: 1px solid var(--border); box-shadow: none; padding-bottom: env(safe-area-inset-bottom, 0px); } body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); } body.chat-page .bottom-nav { display: none; } body.chat-page { padding-bottom: 0; } } .bottom-nav-group { position: relative; display: flex; } .bottom-nav-group > .bottom-nav-item { flex: 1; } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 6px 2px; background: transparent; border: 0; color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color .18s ease; } .bottom-nav-item:hover { color: var(--text); text-decoration: none; } .bottom-nav-item.active { color: var(--primary); font-weight: 700; } .bottom-nav-item:focus-visible { outline: none; } .bottom-nav-item:focus-visible .bottom-nav-ico::before { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 30px; transform: translate(-50%, -50%); border-radius: 999px; box-shadow: var(--ring); } .bottom-nav-ico { position: relative; isolation: isolate; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; transition: transform .16s ease; } .bottom-nav-item.active .bottom-nav-ico::before { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 30px; transform: translate(-50%, -50%); background: var(--primary-bg); border-radius: 999px; z-index: -1; animation: bn-pop .34s cubic-bezier(0.34, 1.56, 0.64, 1); } .bottom-nav-ico svg { width: 20px; height: 20px; transition: transform .18s ease; } .bottom-nav-ico .avatar { width: 24px; height: 24px; font-size: 9px; transition: transform .18s ease; } .bottom-nav-item.active .bottom-nav-ico svg, .bottom-nav-item.active .bottom-nav-ico .avatar { transform: scale(1.06); } .bottom-nav-item:active .bottom-nav-ico { transform: scale(.88); } @keyframes bn-pop { 0%   { transform: translate(-50%, -50%) scale(.5);  opacity: .3; } 60%  { transform: translate(-50%, -50%) scale(1.12); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); } } .bottom-nav-badge { position: absolute; top: -4px; right: -9px; z-index: 1; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--danger); color: var(--on-danger); font-size: 10px; font-weight: 700; line-height: 1; border-radius: 999px; border: 2px solid var(--surface); box-sizing: border-box; pointer-events: none; animation: bn-badge-in .32s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes bn-badge-in { from { transform: scale(0); } to { transform: scale(1); } } .bottom-nav-badge[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .bottom-nav-item, .bottom-nav-ico, .bottom-nav-ico svg, .bottom-nav-ico .avatar { transition: none; } .bottom-nav-item.active .bottom-nav-ico::before, .bottom-nav-badge { animation: none; } .bottom-nav-item:active .bottom-nav-ico { transform: none; } } .bottom-nav-caret { position: absolute; top: 5px; right: calc(50% - 20px); font-size: 8px; opacity: .6; } .bottom-nav-group.open .bottom-nav-caret { opacity: 1; transform: rotate(180deg); } .bottom-nav-sheet { position: absolute; bottom: calc(100% + 8px); left: 8px; min-width: 190px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 6px; display: none; animation: sr-fade-in .14s ease-out; } .bottom-nav-group.open .bottom-nav-sheet { display: block; } .bottom-nav-sheet a, .bottom-nav-sheet button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; text-decoration: none; } .bottom-nav-sheet a:hover, .bottom-nav-sheet button:hover { background: var(--surface-2); text-decoration: none; } .bottom-nav-sheet a.active { color: var(--primary); background: var(--primary-bg); } .bottom-nav-sheet .ico { width: 28px; height: 28px; border-radius: 8px; background: var(--bg); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .bottom-nav-sheet a.active .ico { background: var(--primary-btn); color: var(--on-primary); } .bottom-nav-sheet .ico .svgi { width: 16px; height: 16px; } .bottom-nav-create { justify-content: center; } .bottom-nav-create-btn { color: var(--primary); } .bottom-nav-create-btn .bottom-nav-ico { width: 46px; height: 46px; margin-top: -22px; margin-bottom: 2px; border-radius: 50%; background: var(--primary-btn); color: var(--on-primary); box-shadow: 0 0 0 4px var(--surface); transition: transform .16s ease, box-shadow .18s ease; } .bottom-nav-create-btn .bottom-nav-ico svg { width: 24px; height: 24px; } .bottom-nav-create-btn:active .bottom-nav-ico { transform: scale(.92); } .bottom-nav-create.open .bottom-nav-create-btn .bottom-nav-ico { transform: rotate(45deg); } .bottom-nav-create-btn .bottom-nav-label { color: var(--primary); font-weight: 700; } .bottom-nav-create-sheet { left: 50%; right: auto; transform: translateX(-50%); min-width: 214px; transform-origin: bottom center; will-change: transform, opacity; animation: bn-sheet-in .2s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes bn-sheet-in { from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.9); } to   { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1); } } .bottom-nav-create-sheet a, .bottom-nav-create-sheet button { animation: bn-item-in .26s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes bn-item-in { from { opacity: 0; transform: translateY(7px); } to   { opacity: 1; transform: none; } } .bottom-nav-create-sheet > *:nth-last-child(1) { animation-delay: .02s; } .bottom-nav-create-sheet > *:nth-last-child(2) { animation-delay: .05s; } .bottom-nav-create-sheet > *:nth-last-child(3) { animation-delay: .08s; } .bottom-nav-create-sheet > *:nth-last-child(4) { animation-delay: .11s; } .bottom-nav-create-sheet > *:nth-last-child(5) { animation-delay: .14s; } .bottom-nav-create-sheet > *:nth-last-child(6) { animation-delay: .17s; } @media (prefers-reduced-motion: reduce) { .bottom-nav-create-sheet, .bottom-nav-create-sheet a, .bottom-nav-create-sheet button { animation: none; } } .sidebar, .rightbar { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; } .sidebar-nav { list-style: none; padding: 0; margin: 0; } .sidebar-nav li + li { margin-top: 1px; } .sidebar-nav li a { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text); font-weight: 500; font-size: 14.5px; transition: background .15s ease, color .15s ease; } .sidebar-nav li a:hover { background: var(--surface); text-decoration: none; } .sidebar-nav li a:focus-visible { outline: none; box-shadow: var(--ring); } .sidebar-nav li a.active { background: var(--primary-bg); color: var(--primary-dk); font-weight: 600; } :root[data-theme="dark"] .sidebar-nav li a.active { color: var(--primary); } .sidebar-nav li a.active::before { content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 999px; background: var(--primary); } .sidebar-nav .ico { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; transition: color .15s ease; } .sidebar-nav li a:hover .ico { color: var(--text); } .sidebar-nav li a.active .ico { color: var(--primary); } .sidebar-sep { height: 1px; background: var(--border); margin: 8px 12px; } .nav-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: var(--on-danger); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg); } .nav-badge[hidden] { display: none; } .sidebar h4 { margin: 20px 12px 8px; text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .07em; color: var(--muted); } .community-pill { display: flex; align-items: center; gap: 11px; padding: 7px 12px; border-radius: var(--radius-sm); color: var(--text); font-size: 14px; font-weight: 500; transition: background .15s ease; } .community-pill:hover { background: var(--surface); text-decoration: none; } .community-pill:focus-visible { outline: none; box-shadow: var(--ring); } .community-pill .icon-sq { width: 26px; height: 26px; border-radius: 8px; background: var(--pastel-gray-bg); color: var(--pastel-gray-text); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .community-create { color: var(--primary); font-weight: 600; margin-top: 2px; } .community-create:hover { background: var(--primary-bg); } .community-create .icon-sq { background: var(--primary-bg); color: var(--primary); border: 1px dashed var(--primary); } .community-create .icon-sq .svgi { width: 15px; height: 15px; } @media (prefers-reduced-motion: reduce) { .sidebar-nav li a, .sidebar-nav .ico, .community-pill { transition: none; } } .verified-badge { display: inline-block; vertical-align: -2px; flex-shrink: 0; cursor: help; } .verified-badge.verified-blue { color: var(--verified-blue); } .verified-badge.verified-gold { color: var(--verified-gold); } .verified-badge.verified-gray { color: var(--verified-gray); } .community-banner .verified-badge { vertical-align: -3px; } .time-ago { color: var(--muted); font-variant-numeric: tabular-nums; cursor: help; border-bottom: 1px dotted transparent; transition: border-color .15s, color .15s; white-space: nowrap; } .time-ago:hover { color: var(--text); border-bottom-color: var(--border-dk); } .composer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 14px; padding: 12px 14px; } .composer-row { display: flex; align-items: center; gap: 12px; } .composer-fauxinput { flex: 1; min-width: 0; height: 42px; display: flex; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 999px; padding: 0 18px; font-size: 14.5px; background: var(--surface-2); color: var(--muted); outline: none; text-align: left; cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; } .composer-fauxinput:hover { background: var(--surface); border-color: var(--border-dk); color: var(--text); } .composer-fauxinput:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .composer-rotate { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; height: 22px; overflow: hidden; } .composer-rotate-word { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; will-change: transform, opacity; transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1), opacity .42s ease; } .composer-rotate-word.out   { transform: translateY(-135%); opacity: 0; } .composer-rotate-word.reset { transition: none; transform: translateY(135%); opacity: 0; } .composer-ctas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .composer-cta { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 4px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer; transition: background .18s ease, color .18s ease, transform .15s ease; } .composer-cta:hover { background: var(--bg);  text-decoration: none; } .composer-cta:active { transform: translateY(0) scale(.97); } .composer-cta:focus-visible { outline: none; box-shadow: var(--ring); } .composer-cta .cta-ico { width: 26px; height: 26px; border-radius: 8px; background: var(--bg); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; transition: background .18s ease, color .18s ease, transform .18s ease; } .composer-cta:hover .cta-ico {  } .cta-post:hover              { color: var(--pastel-blue-text); } .cta-post:hover    .cta-ico  { background: var(--pastel-blue-bg); color: var(--pastel-blue-text); } .cta-question:hover          { color: var(--primary-dk); } .cta-question:hover .cta-ico { background: var(--primary-bg); color: var(--primary); } .cta-poll:hover              { color: var(--pastel-green-text); } .cta-poll:hover    .cta-ico  { background: var(--pastel-green-bg); color: var(--pastel-green-text); } .cta-mcq:hover               { color: var(--pastel-violet-text); } .cta-mcq:hover     .cta-ico  { background: var(--pastel-violet-bg); color: var(--pastel-violet-text); } .cta-service:hover           { color: var(--pastel-gray-text); } .cta-service:hover .cta-ico  { background: var(--pastel-gray-bg); color: var(--pastel-gray-text); } @media (prefers-reduced-motion: reduce) { .composer-rotate-word, .composer-rotate-word.out, .composer-rotate-word.reset { transition: none; transform: none; opacity: 1; } .composer-cta, .composer-cta:hover, .composer-cta:active, .composer-cta .cta-ico, .composer-cta:hover .cta-ico { transition: none; transform: none; } } @media (max-width: 540px) { .composer-cta .cta-ico { display: none; } .composer-cta { gap: 0; } } .composer-hint { margin: 10px 2px 0; color: var(--muted); font-size: 12px; } .composer-hint code { background: var(--tag-bg); color: var(--tag-text); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; } .create-modal[hidden] { display: none; } .create-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: am-fade-in .14s ease-out; } .create-modal-backdrop { position: absolute; inset: 0; background: var(--scrim); } .create-modal-card { position: relative; background: var(--surface); border-radius: var(--radius-lg); padding: 0; max-width: 540px; width: 100%; max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg); animation: am-scale-up .18s cubic-bezier(0.16, 1, 0.3, 1); } .create-modal-card > h2 { padding: 26px 28px 0; } .create-modal-card > .create-modal-lead { padding: 0 28px; } .create-modal-card > .create-form { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding: 0 28px; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; } body.modal-open { overflow: hidden; } .create-modal-card > .create-form::-webkit-scrollbar { width: 0; height: 0; display: none; } .create-modal-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease, transform .15s ease; } .create-modal-close:hover { background: var(--bg); color: var(--text); } .create-modal-close:active { transform: scale(.9); } .create-modal-close:focus-visible { outline: none; box-shadow: var(--ring); } .create-modal-close .svgi { width: 18px; height: 18px; } .create-modal-card h2 { margin: 0 0 4px; font-size: 19px; } .create-modal-lead { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; } .create-modal-lead code { background: var(--tag-bg); color: var(--tag-text); padding: 1px 5px; border-radius: 4px; font-size: 12px; } .create-form .field select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; color: var(--text); background: var(--surface); outline: none; transition: border-color .15s, box-shadow .15s; } .create-form .field select option { color: var(--text); background: var(--surface); } .create-form .field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); } .field-help-inline { color: var(--muted); font-weight: 400; font-size: 12px; } .create-modal-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; margin: 14px -28px 0; padding: 14px 28px; background: var(--surface); border-top: 1px solid var(--border); z-index: 2; } .create-modal-actions .btn { padding: 9px 16px; } .create-form .form-error { background: var(--danger-bg); border: 1px solid var(--danger-bg); color: var(--danger); padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; display: none; } .create-form .form-error.show { display: block; } @keyframes cm-field-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } } .create-modal:not([hidden]) .create-form > .field { animation: cm-field-in .34s ease-out both; } .create-modal:not([hidden]) .create-form > .field:nth-child(2) { animation-delay: .03s; } .create-modal:not([hidden]) .create-form > .field:nth-child(3) { animation-delay: .08s; } .create-modal:not([hidden]) .create-form > .field:nth-child(4) { animation-delay: .13s; } .create-modal:not([hidden]) .create-form > .field:nth-child(5) { animation-delay: .18s; } .create-modal:not([hidden]) .create-form > .field:nth-child(6) { animation-delay: .23s; } .create-modal-actions .btn-primary { transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; } .create-modal-actions .btn-primary:hover {  box-shadow: none; } .create-modal-actions .btn-primary:active { transform: translateY(0) scale(.98); } .create-modal-actions .btn:focus-visible { outline: none; box-shadow: var(--ring); } .rte-btn:active { transform: scale(.9); } .rte-btn:focus-visible { outline: none; box-shadow: var(--ring); } .rte-color:focus-visible { outline: none; box-shadow: var(--ring); } @media (prefers-reduced-motion: reduce) { .create-modal, .create-modal-card { animation: none; } .create-modal:not([hidden]) .create-form > .field { animation: none; } .create-modal-actions .btn-primary:hover, .create-modal-actions .btn-primary:active, .create-modal-close:active, .rte-btn:active { transform: none; } } .pe-modal .create-modal-card { padding: 0 28px; overflow-y: auto; overscroll-behavior: contain; } .pe-modal .create-modal-card > h2 { padding: 26px 0 0; } .rte { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; } .rte:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); } .rte-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 2; } .rte-btn { min-width: 30px; height: 30px; padding: 0 7px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: 14px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s; } .rte-btn:hover { background: var(--tag-bg); } .rte-btn.active { background: var(--primary-bg); color: var(--primary); } .rte-btn b, .rte-btn i, .rte-btn u, .rte-btn s { font-size: 14px; } .rte-block { height: 30px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; padding: 0 6px; cursor: pointer; } .rte .rte-toolbar select.rte-block { width: auto; max-width: 150px; flex: 0 0 auto; height: 30px; padding: 2px 8px; font-size: 13px; line-height: 1.4; border-radius: 6px; background: var(--surface); color: var(--text); } .rte-sep { width: 1px; align-self: stretch; margin: 4px 3px; background: var(--border); } .rte-color { position: relative; min-width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; cursor: pointer; overflow: hidden; } .rte-color:hover { background: var(--tag-bg); } .rte-color input[type="color"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; } .rte-color-swatch { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; border-radius: 2px; } .rte-surface { min-height: 260px; max-height: 52vh; overflow-y: auto; padding: 14px 16px; outline: none; font-size: 15px; line-height: 1.65; color: var(--text); } .rte-surface { position: relative; } .rte-surface.rte-empty::before { content: attr(data-placeholder); position: absolute; top: 14px; left: 16px; right: 16px; color: var(--muted); pointer-events: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .rte-source[hidden] { display: none; } .rte-source { display: block; width: 100%; min-height: 260px; max-height: 52vh; border: 0; outline: none; padding: 14px 16px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.6; color: var(--text); background: var(--surface); } .body-text.rte-content { white-space: normal; } .rte-content h1, .rte-content h2, .rte-content h3, .rte-content h4, .rte-content h5, .rte-content h6 { line-height: 1.3; margin: 1em 0 .5em; font-weight: 700; } .rte-content h1 { font-size: 1.7em; } .rte-content h2 { font-size: 1.45em; } .rte-content h3 { font-size: 1.25em; } .rte-content h4 { font-size: 1.1em; } .rte-content h5 { font-size: 1em; } .rte-content h6 { font-size: .9em; color: var(--muted); } .rte-content p { margin: 0 0 .8em; } .rte-content a { color: var(--primary); } .rte-content ul, .rte-content ol { margin: 0 0 .8em; padding-left: 1.5em; } .rte-content li { margin: .2em 0; } .rte-content blockquote { margin: 0 0 .8em; padding: 4px 14px; border-left: 3px solid var(--primary); background: var(--bg); color: var(--muted); border-radius: 0 6px 6px 0; } .rte-content mark, .rte-content .rte-mark { background: var(--pastel-yellow-bg); color: var(--text); padding: 0 2px; border-radius: 3px; } .rte-content :not(pre) > code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--tag-bg); color: var(--tag-text); padding: 1px 5px; border-radius: 4px; } .rte-content pre { position: relative; margin: 0 0 .9em; padding: 12px 14px; background: var(--surface-2); color: var(--text); border-radius: 8px; overflow-x: auto; border: 1px solid var(--border); } .rte-content pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; white-space: pre; background: none; color: inherit; padding: 0; } .rte-copy-btn { position: absolute; top: 7px; right: 7px; padding: 3px 9px; font-size: 11.5px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--muted); cursor: pointer; } .rte-copy-btn:hover { background: var(--surface-2); } .rte-content figure { margin: 0 0 1em; text-align: center; } .rte-content figure img, .rte-content > img { max-width: 100%; height: auto; border-radius: 8px; } .rte-content figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); } .rte-content .rte-button { display: inline-block; padding: 8px 18px; margin: 2px 0; background: var(--primary-btn); color: var(--on-primary); border-radius: 8px; font-weight: 600; text-decoration: none; } .rte-content .rte-button:hover { filter: brightness(1.05); } .rte-content .rte-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 1em; border-radius: 10px; overflow: hidden; background: var(--media-bg); } .rte-content .rte-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .rte-content hr { border: 0; border-top: 1px solid var(--border); margin: 1em 0; } .rte-content table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 1em; font-size: .95em; } .rte-content th, .rte-content td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; min-width: 40px; } .rte-content th { background: var(--bg); font-weight: 700; } .rte-content thead th { border-bottom: 2px solid var(--border); } .rte-content caption { caption-side: top; text-align: left; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; } .rte-btn svg { display: block; width: 18px; height: 18px; } .rte-color svg { width: 16px; height: 16px; } .rte-btn[data-rte="ai"] { gap: 4px; padding: 0 9px; } .rte-btn[data-rte="ai"] svg { width: 15px; height: 15px; } .rte-tgp { position: fixed; z-index: 2100; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md); padding: 10px; } .rte-tgp[hidden] { display: none; } .rte-tgp-grid { display: grid; grid-template-columns: repeat(10, 16px); gap: 3px; } .rte-tgp-grid i { width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 3px; background: var(--bg); cursor: pointer; } .rte-tgp-grid i.on { background: var(--primary-bg); border-color: var(--primary); } .rte-tgp-label { margin-top: 8px; font-size: 12.5px; color: var(--muted); text-align: center; } .rte-tbar { position: fixed; z-index: 2100; display: flex; align-items: center; gap: 1px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-md); padding: 3px; } .rte-tbar[hidden] { display: none; } .rte-tbar button { width: 30px; height: 30px; border: 0; background: transparent; color: var(--text); border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .rte-tbar button:hover { background: var(--tag-bg); } .rte-tbar button svg { width: 18px; height: 18px; } .rte-tbar-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; } .rte-tbar button[data-tb^="del"]:hover { background: var(--danger-bg); color: var(--danger); } .rte-content td::selection, .rte-content th::selection { background: var(--primary-bg); } @media (max-width: 560px) { .rte-surface, .rte-source { min-height: 200px; } .rte-block { max-width: 116px; } .rte-tbar button { width: 32px; height: 32px; } } .rte-content .rte-mention, .comment-body .rte-mention, .rte-content .rte-tag, .comment-body .rte-tag { color: var(--primary); background: var(--primary-bg); padding: 0 4px; border-radius: 4px; text-decoration: none; font-weight: 600; white-space: nowrap; } .rte-content .rte-tag, .comment-body .rte-tag { color: var(--tag-text); background: var(--tag-bg); } .rte-content .rte-mention:hover, .comment-body .rte-mention:hover, .rte-content .rte-tag:hover, .comment-body .rte-tag:hover { filter: brightness(0.96); text-decoration: none; } .rte-ac { position: fixed; z-index: 2000; min-width: 220px; max-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md); overflow: hidden; } .rte-ac[hidden] { display: none; } .rte-ac-list { max-height: 264px; overflow-y: auto; padding: 4px; } .rte-ac-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; cursor: pointer; } .rte-ac-item.is-active { background: var(--primary-bg); } .rte-ac-ico { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--tag-bg); color: var(--tag-text); font-weight: 700; font-size: 13px; flex: 0 0 auto; } .rte-ac-ava { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .rte-ac-main { display: flex; flex-direction: column; min-width: 0; } .rte-ac-label { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rte-ac-sec { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; } .ai-modal[hidden] { display: none; } .ai-backdrop { position: absolute; inset: 0; background: var(--scrim); } .ai-card { position: relative; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-lg); } .ai-head { display: flex; align-items: center; justify-content: space-between; } .ai-title { font-weight: 700; font-size: 15px; } .ai-x { border: 0; background: transparent; color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 7px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; } .ai-x:hover { background: var(--tag-bg); } .ai-scope { margin: 0; font-size: 12.5px; color: var(--muted); } .ai-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ai-chip { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; } .ai-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); } .ai-instruction { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); padding: 9px 11px; font: inherit; font-size: 16px; resize: vertical; } .ai-row { display: flex; align-items: center; gap: 10px; } .ai-model-lab { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; } .ai-model { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; padding: 5px 8px; } .ai-go { margin-left: auto; border: 0; background: var(--primary-btn); color: var(--on-primary); border-radius: 8px; padding: 8px 18px; font-size: 14px; font-weight: 600; cursor: pointer; } .ai-go:hover { filter: brightness(1.06); } .ai-chip:disabled, .ai-go:disabled, .ai-btn:disabled { opacity: .55; cursor: default; filter: none; } .ai-msg { margin: 0; font-size: 13px; color: var(--muted); } .ai-msg.is-err { color: var(--danger); } .ai-preview { border: 1px solid var(--border); border-radius: 8px; background: var(--bg); padding: 10px 12px; max-height: 40vh; overflow-y: auto; font-size: 14px; line-height: 1.55; } .ai-preview > :first-child { margin-top: 0; } .ai-preview > :last-child { margin-bottom: 0; } .ai-foot { display: flex; flex-wrap: wrap; gap: 8px; } .ai-btn { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 8px; padding: 8px 14px; font-size: 14px; cursor: pointer; } .ai-btn:hover { border-color: var(--primary); } .ai-apply { background: var(--primary-btn); color: var(--on-primary); border-color: var(--primary-btn); font-weight: 600; } .ai-apply:hover { filter: brightness(1.06); } .rte-btn[data-rte="ai"] { color: var(--tertiary-text); font-weight: 600; white-space: nowrap; } .rte-btn[data-rte="ai"]:hover { background: var(--tertiary-bg); } @media (max-width: 560px) { .ai-modal { padding: 0; } .ai-card { max-width: none; width: 100%; height: 100%; max-height: 100vh; border: 0; border-radius: 0; } } .ai-suggest--options { color: var(--tertiary-text); } .schedule-field { margin: 4px 0 2px; } .schedule-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; margin-left: -12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--primary); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease; } .schedule-toggle .svgi { width: 17px; height: 17px; } .schedule-toggle:hover { background: var(--primary-bg); } .schedule-toggle:focus-visible { outline: none; box-shadow: var(--ring); } .schedule-toggle[hidden] { display: none; } .schedule-panel { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); } .schedule-panel > label, .sched-edit > label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .schedule-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .schedule-row input[type="datetime-local"] { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; color-scheme: light dark; transition: border-color .15s, box-shadow .15s; } .schedule-row input[type="datetime-local"]:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .schedule-row .btn { min-height: 44px; } .schedule-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); } .schedule-error { margin: 8px 0 0; font-size: 13px; color: var(--danger); } .sched-head { margin: 8px 0 14px; } .sched-head h1 { font-size: 22px; margin: 0 0 4px; } .sched-lead { color: var(--muted); margin: 0; font-size: 13.5px; } .sched-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .sched-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .sched-type { flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--primary-bg); color: var(--primary); } .sched-type .svgi { width: 20px; height: 20px; } .sched-main { flex: 1 1 260px; min-width: 0; } .sched-kind { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .sched-main h3 { margin: 2px 0 4px; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; } .sched-main h3 a { color: var(--text); } .sched-when { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; color: var(--text); } .sched-when .svgi { width: 15px; height: 15px; color: var(--primary); flex: none; } .sched-author { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; color: var(--muted); } .sched-author a { color: var(--text); font-weight: 600; } .sched-author-avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; overflow: hidden; border-radius: 50%; background: var(--bg); font-size: 10px; font-weight: 700; } .sched-author-avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; } .sched-more { margin: 10px 2px 0; font-size: 13px; color: var(--muted); } .sched-edit { margin-top: 12px; } .sched-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; flex: 1 1 100%; } .sched-actions .btn { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; } .sched-actions .btn .svgi { width: 15px; height: 15px; } .scheduled-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; padding: 10px 14px; border: 1px solid var(--primary); border-radius: 10px; background: var(--primary-bg); color: var(--text); font-size: 13.5px; } .scheduled-banner > .svgi { width: 17px; height: 17px; color: var(--primary); flex: none; } .scheduled-banner-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } .scheduled-banner-actions .btn { min-height: 36px; } .feed-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 14px; } .feed-header > div:first-child { min-width: 0; } .feed-header h1 { font-size: 22px; margin: 0 0 4px; overflow-wrap: anywhere; } .feed-header p { margin: 0; color: var(--muted); font-size: 13px; } .infinite-status { text-align: center; padding: 16px 0; color: var(--muted); font-size: 13px; } .tabs { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .tabs button { border: 0; background: transparent; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; } .tabs button.active { background: var(--primary-btn); color: var(--on-primary); } .feed-filter-menu { position: relative; } .feed-filter-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; min-width: 140px; justify-content: space-between; } .feed-filter-btn:hover { border-color: var(--primary); } .feed-filter-menu.is-open .feed-filter-btn { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); } .feed-filter-caret { font-size: 11px; opacity: .7; } .feed-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow-sm); transition: border-color .15s; } .feed-card:hover { border-color: var(--border-dk); box-shadow: var(--shadow); } .feed-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 10px; min-width: 0; overflow-wrap: anywhere; } .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .pill-question { background: var(--pastel-yellow-bg); color: var(--pastel-yellow-text); } .pill-post     { background: var(--pastel-blue-bg);   color: var(--pastel-blue-text); } .pill-service  { background: var(--pastel-gray-bg);   color: var(--pastel-gray-text); } .pill-job      { background: var(--pastel-gray-bg);   color: var(--pastel-gray-text); } .pill-resolved { background: var(--success-bg); color: var(--success); } .svc-feed-cat { display: inline-block; margin: 2px 0 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .feed-service-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .svc-feed-price { margin-left: auto; font-size: 13.5px; color: var(--muted); } .svc-feed-price strong { color: var(--text); font-size: 15px; font-weight: 700; } .svc-feed-cta { flex-shrink: 0; } .community-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); min-width: 0; } .community-chip .icon-sq { width: 18px; height: 18px; border-radius: 4px; background: var(--pastel-gray-bg); color: var(--pastel-gray-text); font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .feed-card-body { display: block; } .feed-card-body > * { min-width: 0; } .feed-featured { display: block; margin: 0 0 10px; border-radius: 12px; overflow: hidden; background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); } .feed-featured img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; } .detail-featured { display: block; width: 100%; max-height: 420px; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius); margin: 0 0 16px; box-shadow: inset 0 0 0 1px var(--border); } .feed-card h2 { margin: 0 0 6px; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; } .feed-card h2 a { color: var(--text); } .feed-card h2 a:hover { color: var(--primary); text-decoration: none; } .feed-excerpt { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .votes { display: inline-flex; flex-direction: row; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); } .vote-btn { width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, color .15s, transform .1s; } .vote-btn::before { content: ""; width: 15px; height: 15px; background-color: currentColor; -webkit-mask: var(--vote-ico) center / contain no-repeat; mask: var(--vote-ico) center / contain no-repeat; } .vote-btn.up   { --vote-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M237,77.47A28,28,0,0,0,216,68H164V56a44.05,44.05,0,0,0-44-44,12,12,0,0,0-10.73,6.63L72.58,92H32a20,20,0,0,0-20,20v88a20,20,0,0,0,20,20H204a28,28,0,0,0,27.78-24.53l12-96A28,28,0,0,0,237,77.47ZM36,116H68v80H36ZM220,96.5l-12,96a4,4,0,0,1-4,3.5H92V106.83L126.82,37.2A20,20,0,0,1,140,56V80a12,12,0,0,0,12,12h64a4,4,0,0,1,4,4.5Z'/%3E%3C/svg%3E"); } .vote-btn.down { --vote-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M243.78,156.53l-12-96A28,28,0,0,0,204,36H32A20,20,0,0,0,12,56v88a20,20,0,0,0,20,20H72.58l36.69,73.37A12,12,0,0,0,120,244a44.05,44.05,0,0,0,44-44V188h52a28,28,0,0,0,27.78-31.47ZM68,140H36V60H68Zm151,22.65a4,4,0,0,1-3,1.35H152a12,12,0,0,0-12,12v24a20,20,0,0,1-13.18,18.8L92,149.17V60H204a4,4,0,0,1,4,3.5l12,96A4,4,0,0,1,219,162.65Z'/%3E%3C/svg%3E"); } .vote-btn:hover { background: var(--bg); color: var(--text); } .vote-btn:active { transform: scale(.88); } .vote-btn.up.active   { background: var(--success-bg); color: var(--success); --vote-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M234,80.12A24,24,0,0,0,216,72H160V56a40,40,0,0,0-40-40,8,8,0,0,0-7.16,4.42L75.06,96H32a16,16,0,0,0-16,16v88a16,16,0,0,0,16,16H204a24,24,0,0,0,23.82-21l12-96A24,24,0,0,0,234,80.12ZM32,112H72v88H32Z'/%3E%3C/svg%3E"); } .vote-btn.down.active { background: var(--danger-bg);  color: var(--danger); --vote-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M239.82,157l-12-96A24,24,0,0,0,204,40H32A16,16,0,0,0,16,56v88a16,16,0,0,0,16,16H75.06l37.78,75.58A8,8,0,0,0,120,240a40,40,0,0,0,40-40V184h56a24,24,0,0,0,23.82-27ZM72,144H32V56H72Z'/%3E%3C/svg%3E"); } .vote-score { font-weight: 700; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; min-width: 16px; text-align: center; line-height: 1; padding: 0 2px; } .votes:has(.vote-btn.up.active)   .vote-score { color: var(--success); } .votes:has(.vote-btn.down.active) .vote-score { color: var(--danger); } .answer-foot { margin-top: 12px; } .tag { display: inline-block; padding: 3px 9px; background: var(--tag-bg); color: var(--tag-text); border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; margin-right: 6px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; } .tag:hover { background: var(--tag-bg); } .feed-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; max-height: 52px; overflow: hidden; } .feed-tags .tag { margin: 0; line-height: 18px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .feed-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 13px; color: var(--muted); flex-wrap: wrap; gap: 8px; } .feed-actions-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .icon-btn { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; padding: 4px 6px; border-radius: 6px; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 500; transition: background .15s, color .15s; } .icon-btn:hover { background: var(--bg); color: var(--text); } .svgi { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex: none; } .icon-btn .svgi               { width: 1.15em; height: 1.15em; } .nav-menu-ico .svgi           { width: 18px; height: 18px; } .sidebar-nav .ico .svgi       { width: 19px; height: 19px; } .composer-cta .cta-ico .svgi  { width: 15px; height: 15px; } .bottom-nav-sheet .ico .svgi  { width: 16px; height: 16px; } .icon-btn.save { --ic-heart:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M178,36c-20.09,0-37.92,7.93-50,21.56C115.92,43.93,98.09,36,78,36a66.08,66.08,0,0,0-66,66c0,72.34,105.81,130.14,110.31,132.57a12,12,0,0,0,11.38,0C138.19,232.14,244,174.34,244,102A66.08,66.08,0,0,0,178,36Zm-5.49,142.36A328.69,328.69,0,0,1,128,210.16a328.69,328.69,0,0,1-44.51-31.8C61.82,159.77,36,131.42,36,102A42,42,0,0,1,78,60c17.8,0,32.7,9.4,38.89,24.54a12,12,0,0,0,22.22,0C145.3,69.4,160.2,60,178,60a42,42,0,0,1,42,42C220,131.42,194.18,159.77,172.51,178.36Z'/%3E%3C/svg%3E"); --ic-heart-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M240,102c0,70-103.79,126.66-108.21,129a8,8,0,0,1-7.58,0C119.79,228.66,16,172,16,102A62.07,62.07,0,0,1,78,40c20.65,0,38.73,8.88,50,23.89C139.27,48.88,157.35,40,178,40A62.07,62.07,0,0,1,240,102Z'/%3E%3C/svg%3E"); } .icon-btn.save::before { content: ""; display: inline-block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--ic-heart) center / contain no-repeat; mask: var(--ic-heart) center / contain no-repeat; transition: transform .12s ease; } .icon-btn.save:hover::before { transform: scale(1.12); } .icon-btn.save.saved::before { -webkit-mask: var(--ic-heart-filled) center / contain no-repeat; mask: var(--ic-heart-filled) center / contain no-repeat; } .icon-btn.save.saved, .icon-btn.save.saved:hover { color: var(--danger); } .q-author { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .q-author strong { color: var(--text); font-weight: 600; } .feed-card-top .q-author .avatar, .detail-meta   .q-author .avatar { width: 18px; height: 18px; font-size: 9px; } .feed-tabs { display: flex; gap: 4px; padding: 4px; margin: 2px 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .feed-tab { position: relative; flex: 1 1 0; min-width: 0; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 7px; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s ease-out, color .15s ease-out; } .feed-tab:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .feed-tab:focus-visible { outline: none; box-shadow: var(--ring); } .feed-tab.is-active { color: var(--primary); font-weight: 700; } .feed-tab.is-active::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 3px; height: 3px; border-radius: 3px; background: var(--primary); } .feed-reason { display: flex; align-items: center; gap: 6px; margin: -4px 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.4; } .feed-reason-icon { display: inline-flex; flex: none; } .feed-reason-icon svg { width: 14px; height: 14px; } .feed-reason a { color: var(--primary); font-weight: 600; } .feed-module-tags, .feed-nudge-chips { display: flex; flex-wrap: wrap; gap: 8px; } .feed-module-tag, .feed-nudge-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .15s ease-out, background .15s ease-out; } .feed-module-tag:hover, .feed-nudge-chip:hover { border-color: var(--primary); background: var(--primary-bg); text-decoration: none; } .feed-module-tag:focus-visible, .feed-nudge-chip:focus-visible { outline: none; box-shadow: var(--ring); } .feed-module, .feed-nudge, .feed-empty { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 12px; } .feed-module { padding: 14px 16px 8px; } .feed-module-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .feed-module-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); } .feed-module-more { font-size: 13px; font-weight: 600; white-space: nowrap; } .feed-module-lead { margin: 6px 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.5; } .feed-module--tags { padding-bottom: 16px; } .feed-module--tags .feed-module-head { margin-bottom: 12px; } .feed-module--end, .feed-module--signin { text-align: center; padding: 22px 18px; } .feed-module--end .feed-module-title, .feed-module--signin .feed-module-title { font-size: 16px; } .feed-module-end-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 50%; background: var(--success-bg); color: var(--success); } .feed-module-actions, .feed-nudge-actions, .feed-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; } .feed-module-actions, .feed-empty-actions { justify-content: center; } .feed-module .btn, .feed-nudge .btn, .feed-empty .btn { min-height: 36px; justify-content: center; } .feed-nudge { display: flex; gap: 14px; padding: 16px 18px; } .feed-nudge[hidden] { display: none; } .feed-nudge-icon, .feed-empty-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--primary-bg); color: var(--primary); } .feed-nudge-body { min-width: 0; flex: 1; } .feed-nudge-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--text); } .feed-nudge-lead { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; line-height: 1.5; } .feed-nudge-chips { margin-bottom: 14px; } .feed-empty { padding: 28px 20px; text-align: center; } .feed-empty-icon { width: 48px; height: 48px; margin-bottom: 12px; } .feed-empty-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--text); } .feed-empty-lead { margin: 0 auto 16px; max-width: 42ch; color: var(--muted); font-size: 14px; line-height: 1.5; } .feed-interests-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .feed-interests-text { flex: 1 1 220px; min-width: 0; } .feed-interests-text h2 { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--text); } .feed-interests-text p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; } .feed-card-top .feed-controls { margin-left: auto; } .feed-controls .owner-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-color: transparent; border-radius: 8px; } .feed-controls .owner-menu-btn:focus-visible { outline: none; box-shadow: var(--ring); } .feed-controls .owner-menu-btn svg { width: 18px; height: 18px; } .feed-controls .owner-menu-panel { min-width: 230px; } .feed-hidden { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 12px 16px; border: 1px dashed var(--border-dk); border-radius: var(--radius); background: var(--surface-2); color: var(--text); font-size: 14px; } .feed-hidden p { margin: 0; min-width: 0; } .feed-hidden .btn { flex: none; min-height: 36px; } .feed-settings { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .feed-switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .feed-switch input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--primary); cursor: pointer; } .feed-switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .feed-switch-text strong { color: var(--text); font-size: 14px; font-weight: 600; } .feed-switch-text span { color: var(--muted); font-size: 13px; line-height: 1.5; } .feed-settings-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .feed-settings-actions .btn { min-height: 36px; } .feed-settings-actions .btn[hidden] { display: none; } .feed-settings-note { margin: 10px 0 0; color: var(--muted); font-size: 13px; } .feed-settings-note:empty { display: none; } .rightbar { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; } .rightbar > * { flex-shrink: 0; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .panel-header { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; display: flex; align-items: center; justify-content: space-between; } .panel-header a { font-size: 12.5px; font-weight: 600; color: var(--primary); } .panel-body { padding: 14px 16px; } .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .stat-grid .cell { background: var(--bg); border-radius: 8px; padding: 10px 12px; } .stat-grid .cell .num { font-size: 18px; font-weight: 700; display: block; } .stat-grid .cell .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .row-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .row-item + .row-item { border-top: 1px solid var(--border); } .row-item .body { flex: 1; min-width: 0; } .row-item .name { font-weight: 600; font-size: 13.5px; } .row-item .meta { font-size: 12px; color: var(--muted); } .row-item .icon-sq { width: 32px; height: 32px; border-radius: 8px; background: var(--pastel-gray-bg); color: var(--pastel-gray-text); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .follow-btn { padding: 4px 10px; font-size: 12px; font-weight: 600; border-radius: var(--radius-btn); border: 1px solid var(--primary); color: var(--primary); background: transparent; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background .15s, color .15s; } .follow-btn:hover { background: var(--primary-bg); } .follow-btn.following { background: var(--primary-btn); border-color: var(--primary-btn); color: var(--on-primary); } .follow-btn.following::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .3em; vertical-align: -0.125em; background: currentColor; -webkit-mask: var(--ic-check) center / contain no-repeat; mask: var(--ic-check) center / contain no-repeat; } .tag-list { display: flex; flex-wrap: wrap; gap: 7px; } .tag-list .tag-row { display: inline-flex; align-items: center; gap: 6px; background: var(--tag-bg); color: var(--tag-text); border: 1px solid transparent; border-radius: 999px; padding: 5px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; animation: rr-in .4s ease-out both; transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease; text-transform: uppercase; letter-spacing: .05em; } .tag-list .tag-row:hover { background: var(--primary-bg); color: var(--primary-dk); border-color: rgba(var(--primary-rgb), .22); text-decoration: none; } .tag-list .tag-row:focus-visible { outline: none; box-shadow: var(--ring); } .tag-list .tag-row .count { color: currentColor; opacity: .55; font-weight: 700; font-size: 11px; padding-left: 1px; } .tag-list .tag-row.followed { background: var(--primary-btn); color: var(--on-primary); border-color: transparent; } .tag-list .tag-row.followed:hover { background: var(--primary-btn-h); } @keyframes rr-in { from { opacity: 0; transform: translateY(8px); } to   { opacity: 1; transform: translateY(0); } } .rightbar .panel-body .row-item { padding: 8px 10px; margin: 0 -8px; border-radius: var(--radius-sm); transition: background .15s ease; animation: rr-in .4s ease-out both; } .rightbar .panel-body .row-item + .row-item { border-top: 0; } .rightbar .panel-body .row-item:hover { background: var(--surface-2); } .rightbar .panel-body .row-item .icon-sq { transition: transform .18s ease; } .rightbar .panel-body .row-item:hover .icon-sq {  } .rightbar .panel-body .row-item .name a:hover { color: var(--primary); text-decoration: none; } .rightbar .row-item .icon-sq { width: 40px; height: 40px; border-radius: var(--radius-sm); font-size: 13px; } .rightbar .row-item > .avatar { width: 40px; height: 40px; font-size: 14px; } .rightbar .row-item .name { font-size: 14px; } .rightbar .row-item .meta { font-size: 12.5px; } .rightbar .row-item .conn-btn { min-height: 28px; padding: 5px 13px; font-size: 12px; font-weight: 600; border-radius: var(--radius-btn); display: inline-flex; align-items: center; justify-content: center; } .rightbar .row-item .conn-btn.connected { background: var(--tertiary-bg); color: var(--tertiary-text); border-color: transparent; font-weight: 700; } .rightbar .row-item .conn-btn.pending { background: var(--success-bg); color: var(--success); border-color: transparent; } .rightbar .row-item .conn-btn.pending:hover { background: var(--danger-bg); color: var(--danger); border-color: transparent; } .rightbar .row-item .conn-btn:focus-visible { outline: none; box-shadow: var(--ring); } .rightbar .follow-btn { min-height: 28px; padding: 5px 14px; background: var(--primary-btn); color: var(--on-primary); border-color: var(--primary-btn); } .rightbar .follow-btn:hover { background: var(--primary-btn-h); } .rightbar .follow-btn.following { background: transparent; color: var(--muted); border-color: var(--border-dk); } .rightbar .follow-btn.following:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-dk); } .rightbar .panel-body .row-item:nth-child(1){animation-delay:.03s} .rightbar .panel-body .row-item:nth-child(2){animation-delay:.06s} .rightbar .panel-body .row-item:nth-child(3){animation-delay:.09s} .rightbar .panel-body .row-item:nth-child(4){animation-delay:.12s} .rightbar .panel-body .row-item:nth-child(5){animation-delay:.15s} .rightbar .panel-body .row-item:nth-child(6){animation-delay:.18s} .rightbar .panel-body .row-item:nth-child(7){animation-delay:.21s} .rightbar .panel-body .row-item:nth-child(8){animation-delay:.24s} .tag-list .tag-row:nth-child(1){animation-delay:.04s} .tag-list .tag-row:nth-child(2){animation-delay:.07s} .tag-list .tag-row:nth-child(3){animation-delay:.10s} .tag-list .tag-row:nth-child(4){animation-delay:.13s} .tag-list .tag-row:nth-child(5){animation-delay:.16s} .tag-list .tag-row:nth-child(6){animation-delay:.19s} .tag-list .tag-row:nth-child(7){animation-delay:.22s} .tag-list .tag-row:nth-child(8){animation-delay:.25s} .tag-list .tag-row:nth-child(9){animation-delay:.28s} .tag-list .tag-row:nth-child(10){animation-delay:.31s} .tag-list .tag-row:nth-child(11){animation-delay:.34s} .tag-list .tag-row:nth-child(12){animation-delay:.37s} @media (prefers-reduced-motion: reduce) { .rightbar .panel-body .row-item, .tag-list .tag-row { animation: none; } .rightbar .panel-body .row-item:hover .icon-sq, .tag-list .tag-row:hover { transform: none; } } .cta-card { position: relative; overflow: hidden; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: none; } .cta-card::before { content: ""; position: absolute; inset: -30%; background: none; pointer-events: none; animation: cta-glow 8s ease-in-out infinite; } @keyframes cta-glow { 0%, 100% { transform: translate(0, 0);      opacity: .95; } 50%      { transform: translate(24%, 14%);  opacity: .55; } } .cta-card .panel-body { padding: 18px; position: relative; z-index: 1; } .cta-card h3 { margin: 0 0 8px; font-size: 16px; letter-spacing: -.01em; } .cta-card-lead { margin: 0; font-size: 12.5px; opacity: .85; } .cta-card-rotate { position: relative; height: 24px; margin: 1px 0 14px; overflow: hidden; } .cta-card-word { display: block; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; will-change: transform, opacity; transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1), opacity .42s ease; } .cta-card-word.out   { transform: translateY(-130%); opacity: 0; } .cta-card-word.reset { transition: none; transform: translateY(130%); opacity: 0; } .cta-card-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-btn); color: var(--on-primary); font-weight: 700; border-radius: var(--radius-btn); box-shadow: none; transition: transform .2s ease, box-shadow .2s ease, color .15s ease; } .cta-card-btn .svgi { width: 16px; height: 16px; } .cta-card-btn:hover { background: var(--primary-btn-h); color: var(--on-primary); box-shadow: none; } .cta-card-btn:active { transform: translateY(0) scale(.97); } .cta-card-btn:focus-visible { outline: none; box-shadow: var(--ring); } @media (prefers-reduced-motion: reduce) { .cta-card::before { animation: none; } .cta-card-word, .cta-card-word.out, .cta-card-word.reset { transition: none; transform: none; opacity: 1; } .cta-card-btn, .cta-card-btn:hover, .cta-card-btn:active { transition: none; transform: none; } } .detail-shell { max-width: 920px; margin: 24px auto; padding: 0 20px; } .detail-shell--rail { max-width: 1200px; } .detail-main { min-width: 0; } @media (min-width: 1100px) { .detail-shell--rail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto 1fr; grid-template-areas: "main side" "main similar"; column-gap: 24px; align-items: start; } .detail-shell--rail > .detail-main { grid-area: main; } .detail-shell--rail > .detail-side { grid-area: side; } .detail-shell--rail > .detail-similar { grid-area: similar; } .detail-shell--rail > .detail-main + .detail-side { grid-row: 1 / span 2; } } @media (min-width: 1100px) and (min-height: 720px) { .detail-shell--rail > .detail-similar, .detail-shell--rail > .detail-main + .detail-side { position: sticky; top: 84px; } } .side-card-banner { height: 64px; border-bottom: 1px solid var(--border); } .side-card .row-item { padding-top: 0; } .side-card .row-item .name { font-size: 15px; } .side-card-desc { margin: 6px 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .side-card-meta { margin: 4px 0 14px; color: var(--muted); font-size: 12.5px; } .side-card-actions { display: flex; gap: 8px; } .side-card-actions > * { flex: 1 1 0; min-width: 0; } .side-card-actions .conn-control { display: flex; gap: 8px; } .side-card-actions .conn-control > * { flex: 1 1 0; } .side-card .conn-btn, .side-card .follow-btn, .side-card-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .side-card-link { width: 100%; } .detail-similar > .panel-header { margin: 0; } .similar-list { list-style: none; margin: 0; padding: 6px 8px 8px; } .similar-row + .similar-row { border-top: 1px solid var(--border); } .similar-link { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 8px; border-radius: var(--radius); color: var(--text); } .similar-link:hover { background: var(--surface-2); text-decoration: none; } .similar-link:hover .similar-title { color: var(--primary); } .similar-link:focus-visible { outline: none; box-shadow: var(--ring); } .similar-thumb { flex: 0 0 56px; width: 56px; height: 56px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface-2); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; } .similar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .similar-thumb .svgi { width: 22px; height: 22px; } .similar-text { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .similar-title { font-weight: 600; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .similar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-size: 12px; } .similar-meta .pill { font-size: 10px; padding: 2px 7px; } .similar-by { min-width: 0; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .body-more { position: relative; } .body-more:not([open]) { text-align: center; } .body-more > .body-more-toggle { list-style: none; position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: -30px 0 4px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; line-height: 1; white-space: normal; cursor: pointer; } .body-more:not([open])::before { content: ''; position: absolute; left: 0; right: 0; bottom: calc(100% - 24px); height: 96px; background: linear-gradient(to bottom, transparent, var(--surface) 85%); pointer-events: none; } .body-more > .body-more-toggle::-webkit-details-marker { display: none; } .body-more > .body-more-toggle:hover { background: var(--surface-2); border-color: var(--border-dk); } .body-more > .body-more-toggle:focus-visible { outline: none; box-shadow: var(--ring); } .body-more > .body-more-toggle .svgi { width: 16px; height: 16px; } .body-more[open] > .body-more-toggle { display: none; } body.cl-full .community-home { max-width: none; } body.cl-custom .community-home { max-width: var(--cl-max, 1280px); } @media (min-width: 1100px) { body.cl-full .community-body, body.cl-custom .community-body { display: flex; justify-content: center; align-items: flex-start; gap: 24px; } body.cl-full .community-main, body.cl-custom .community-main { order: 1; flex: 1 1 auto; min-width: 0; max-width: 900px; } body.cl-full .community-main.cnav-sidebar, body.cl-custom .community-main.cnav-sidebar { max-width: 1130px; } body.cl-full .community-side, body.cl-custom .community-side { order: 2; flex: 0 0 320px; position: sticky; top: 84px; } body.cl-full .community-side:not(:has(> *)), body.cl-custom .community-side:not(:has(> *)) { display: none; } } .detail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px 26px; margin-bottom: 16px; } .detail-shell .panel { margin-bottom: 16px; } .detail-card h1 { font-size: 26px; margin: 0 0 8px; line-height: 1.3; } .detail-card .body-text { color: var(--text); font-size: 15px; line-height: 1.65; white-space: pre-wrap; margin: 10px 0 14px; } .detail-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-bottom: 12px; flex-wrap: wrap; } .section-heading { font-size: 17px; font-weight: 700; margin: 24px 4px 12px; display: flex; align-items: center; justify-content: space-between; } .comment-list { list-style: none; padding: 0; margin: 0; } .comment { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; } .comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; color: var(--muted); } .comment-head strong { color: var(--text); } .comment-body { font-size: 14.5px; line-height: 1.55; margin: 4px 0 8px; white-space: pre-wrap; } .comment-actions { display: flex; gap: 8px; font-size: 13px; } .reply-list { list-style: none; margin: 10px 0 0 36px; padding-left: 14px; border-left: 2px solid var(--border); } .reply-list .comment { background: var(--surface-2); margin-bottom: 8px; } .answer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 12px; } .answer.accepted { border-color: var(--success); box-shadow: 0 0 0 3px var(--success-bg); } .accepted-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--success-bg); color: var(--success); padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .inline-composer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 12px 0 20px; display: flex; gap: 10px; align-items: flex-start; } .inline-composer textarea { flex: 1; min-height: 64px; resize: vertical; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; outline: none; } .inline-composer textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); } .inline-composer .rte { flex: 1; min-width: 0; } .inline-composer .rte .rte-surface { min-height: 120px; } .community-banner { background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%); color: var(--on-media); border-radius: var(--radius); padding: 22px 24px; display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } .community-banner h1 { margin: 0; font-size: 22px; } .community-banner p  { margin: 2px 0 0; opacity: .9; font-size: 14px; } .community-banner--image { aspect-ratio: 3 / 1; overflow: hidden; background-position: center; background-size: cover; } .community-banner .icon-sq { width: 56px; height: 56px; border-radius: 12px; background: var(--on-ink-line); font-size: 18px; } .community-banner .follow-btn { margin-left: auto; background: var(--on-media); color: var(--primary-ink); border-color: var(--on-media); } .community-banner .follow-btn.following { background: var(--on-ink-tint); color: var(--on-media); border-color: var(--on-ink-line); } .tag-hero { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 20px; margin: 12px 0 18px; } .tag-hero-badge { width: 60px; height: 60px; border-radius: var(--radius); background: var(--tag-bg); color: var(--tag-text); font-size: 28px; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: none; } .tag-hero-id { flex: 1; min-width: 0; } .tag-hero-id h1 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; color: var(--text); overflow-wrap: anywhere; } .tag-hero-id h1 .hash { color: var(--primary); font-weight: 700; } .tag-hero-id h1 .verified-badge { vertical-align: -2px; } .tag-hero-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; font-size: 13px; color: var(--muted); } .tag-hero-uses { display: inline-flex; align-items: center; gap: 5px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; font-weight: 600; color: var(--text); } .tag-hero-desc { overflow-wrap: anywhere; } .tag-hero .follow-btn { flex-shrink: 0; white-space: nowrap; } @media (max-width: 560px) { .tag-hero { padding: 15px; gap: 12px; } .tag-hero-badge { width: 48px; height: 48px; border-radius: var(--radius); font-size: 22px; } .tag-hero-id h1 { font-size: 19px; } } .profile-header { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin: 12px 0 16px; } .profile-cover { aspect-ratio: 3 / 1; background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%); background-size: cover; background-position: center; border-radius: var(--radius) var(--radius) 0 0; } .profile-main { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 0 24px 18px; } .profile-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .profile-avatar { position: relative; z-index: 1; align-self: flex-start; width: 104px; height: 104px; margin-top: -52px; border-radius: var(--radius); border: 4px solid var(--surface); background: var(--pastel-gray-bg); color: var(--pastel-gray-text); font-weight: 600; font-size: 34px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; box-shadow: var(--shadow-sm); } .profile-avatar.round { border-radius: 50%; } .profile-avatar > .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } .profile-id { flex: 1; min-width: 0; } .profile-id h1 { margin: 0; font-size: 24px; line-height: 1.25; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; } .profile-meta { margin: 5px 0 0; color: var(--muted); font-size: 13.5px; } .profile-meta a { color: var(--text); font-weight: 600; } .profile-meta a:hover { color: var(--primary); } .profile-meta .time-ago { font-size: inherit; } .profile-tagline { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; } .profile-loc { color: var(--muted); } .profile-counts { margin-top: 4px; } .profile-counts strong { color: var(--text); font-weight: 700; } .profile-link-line { margin: 6px 0 0; } .profile-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--primary); text-decoration: none; } .profile-link svg { width: 14px; height: 14px; } .profile-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 14px; margin-left: auto; } .profile-actions .btn, .profile-actions .conn-btn, .profile-actions .follow-btn { height: 34px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 13.5px; font-weight: 600; border-radius: var(--radius-btn); line-height: 1; } .profile-actions .owner-menu-btn.btn-sm, .profile-actions .icon-only { width: 34px; padding: 0; } .profile-self { font-size: 13px; color: var(--muted); padding: 0 4px; } .community-home .profile-row { align-items: center; } .community-home .profile-actions { padding-top: 0; } @media (max-width: 560px) { .profile-main { padding: 0 16px 16px; } .profile-avatar { width: 84px; height: 84px; margin-top: -42px; font-size: 28px; border-radius: var(--radius); } .profile-id { padding-top: 10px; } .profile-id h1 { font-size: 20px; } .profile-actions { margin-left: 0; width: 100%; padding-top: 10px; } } .profile-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 4px 0 16px; overflow-x: auto; scrollbar-width: none; } .profile-tabs::-webkit-scrollbar { display: none; } .profile-tab { padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; cursor: pointer; transition: color .15s, border-color .15s; } .profile-tab:hover { color: var(--text); text-decoration: none; } .profile-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .profile-tab .count { margin-left: 5px; font-weight: 600; font-size: 12px; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 1px 7px; } .profile-tab.active .count { color: var(--primary); background: var(--primary-bg); } .profile-tabs--pills { flex-wrap: wrap; gap: 8px; border-bottom: 0; overflow: visible; } .profile-tabs--pills .profile-tab { margin: 0; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .profile-tabs--pills .profile-tab:hover { border-color: var(--border-dk); } .profile-tabs--pills .profile-tab.active { border-color: var(--primary); background: var(--primary-bg); color: var(--primary-dk); } .profile-tabs--pills .profile-tab.active .count { background: var(--surface); } .profile-tabs--pills .profile-tab:focus-visible { outline: none; box-shadow: var(--ring); } .community-feed { min-width: 0; } .clx { padding: 20px 22px; } .clx-live { display: flex; gap: 14px; margin: -4px 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--border); } .clx-live-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--success-bg); color: var(--success); animation: clx-pop .32s ease-out .08s both; } .clx-live-icon svg { width: 22px; height: 22px; } @keyframes clx-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } .clx-live-main { flex: 1; min-width: 0; } .clx-live-h { margin: 0; color: var(--text); font-size: 18px; font-weight: 700; line-height: 1.3; } .clx-live-sub { margin: 2px 0 10px; color: var(--muted); font-size: 14px; } .clx-addr { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0 0 12px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 600; } .clx-addr svg { flex: none; width: 15px; height: 15px; color: var(--primary); } .clx-addr span { overflow-wrap: anywhere; } .clx-share { display: flex; flex-wrap: wrap; gap: 8px; } .clx-share .btn { min-height: 40px; padding: 8px 14px; font-size: 13.5px; } .clx-share .btn svg { width: 15px; height: 15px; } .clx-head { display: flex; align-items: flex-start; gap: 12px; } .clx-title { flex: 1; min-width: 0; } .clx-title h2 { margin: 0; color: var(--text); font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; } .clx-count { margin: 2px 0 0; color: var(--muted); font-size: 13px; font-weight: 600; } .clx-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: -10px -10px 0 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; } .clx-close:hover { background: var(--surface-2); color: var(--text); } .clx-close:focus-visible { outline: none; box-shadow: var(--ring); } .clx-close svg { width: 18px; height: 18px; } .clx-bar { height: 6px; margin: 12px 0 8px; overflow: hidden; border-radius: 6px; background: var(--border); } .clx-bar span { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width .3s ease-out; } .clx-list { margin: 0; padding: 0; list-style: none; } .clx-item + .clx-item { border-top: 1px solid var(--border); } .clx-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 4px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; } .clx-link { border-radius: 8px; cursor: pointer; text-decoration: none; } .clx-link:hover { background: var(--surface-2); text-decoration: none; } .clx-link:focus-visible { outline: none; box-shadow: var(--ring); } .clx-tick { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border: 2px solid var(--border-dk); border-radius: 50%; } .clx-tick svg { width: 13px; height: 13px; } .is-done .clx-tick { border-color: var(--success); background: var(--success-bg); color: var(--success); } .clx-text { display: flex; flex: 1; flex-direction: column; min-width: 0; } .clx-label { font-size: 14.5px; font-weight: 600; } .is-done .clx-label { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--border-dk); } .clx-note { color: var(--muted); font-size: 13px; line-height: 1.4; } .clx-go { display: inline-flex; flex: none; color: var(--muted); } .clx-go svg { width: 16px; height: 16px; } .clx-help { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13.5px; line-height: 1.45; } .clx-help svg { flex: none; width: 16px; height: 16px; color: var(--primary); } .clx-help a { color: var(--primary); font-weight: 600; } .clx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .comm-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .comm-empty .btn { min-height: 40px; padding: 8px 14px; font-size: 13.5px; } .comm-empty .btn svg { width: 15px; height: 15px; } @media (prefers-reduced-motion: reduce) { .clx-live-icon { animation: none; } .clx-bar span { transition: none; } } @media (min-width: 900px) { .cnav-sidebar { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; align-items: start; } .profile-tabs--sidebar { position: sticky; top: 84px; flex-direction: column; gap: 2px; margin: 0; padding: 8px; overflow: visible; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); } .profile-tabs--sidebar .profile-tab { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 9px 12px; border: 0; border-radius: var(--radius-sm); } .profile-tabs--sidebar .profile-tab:hover { background: var(--bg); } .profile-tabs--sidebar .profile-tab.active { background: var(--primary-bg); color: var(--primary-dk); } .profile-tabs--sidebar .profile-tab.active .count { background: var(--surface); } .profile-tabs--sidebar .profile-tab:focus-visible { outline: none; box-shadow: var(--ring); } } :root { --ic-cam:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M208,52H182.42L170,33.34A12,12,0,0,0,160,28H96a12,12,0,0,0-10,5.34L73.57,52H48A28,28,0,0,0,20,80V192a28,28,0,0,0,28,28H208a28,28,0,0,0,28-28V80A28,28,0,0,0,208,52Zm4,140a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V80a4,4,0,0,1,4-4H80a12,12,0,0,0,10-5.34L102.42,52h51.15L166,70.66A12,12,0,0,0,176,76h32a4,4,0,0,1,4,4ZM128,84a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,84Zm0,72a24,24,0,1,1,24-24A24,24,0,0,1,128,156Z'/%3E%3C/svg%3E"); --ic-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M230.14,70.54,185.46,25.85a20,20,0,0,0-28.29,0L33.86,149.17A19.85,19.85,0,0,0,28,163.31V208a20,20,0,0,0,20,20H92.69a19.86,19.86,0,0,0,14.14-5.86L230.14,98.82a20,20,0,0,0,0-28.28ZM91,204H52V165l84-84,39,39ZM192,103,153,64l18.34-18.34,39,39Z'/%3E%3C/svg%3E"); --ic-brain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M252,124a60.14,60.14,0,0,0-32-53.08,52,52,0,0,0-92-32.11A52,52,0,0,0,36,70.92a60,60,0,0,0,0,106.14,52,52,0,0,0,92,32.13,52,52,0,0,0,92-32.13A60.05,60.05,0,0,0,252,124ZM88,204a28,28,0,0,1-26.85-20.07c1,0,1.89.07,2.85.07h8a12,12,0,0,0,0-24H64A36,36,0,0,1,52,90.05a12,12,0,0,0,8-11.32V72a28,28,0,0,1,56,0v60.18a51.61,51.61,0,0,0-7.2-3.85,12,12,0,1,0-9.6,22A28,28,0,0,1,88,204Zm104-44h-8a12,12,0,0,0,0,24h8c1,0,1.9,0,2.85-.07a28,28,0,1,1-38-33.61,12,12,0,1,0-9.6-22,51.61,51.61,0,0,0-7.2,3.85V72a28,28,0,0,1,56,0v6.73a12,12,0,0,0,8,11.32,36,36,0,0,1-12,70Zm16-44a12,12,0,0,1-12,12,40,40,0,0,1-40-40V84a12,12,0,0,1,24,0v4a16,16,0,0,0,16,16A12,12,0,0,1,208,116ZM100,88a40,40,0,0,1-40,40,12,12,0,0,1,0-24A16,16,0,0,0,76,88V84a12,12,0,0,1,24,0Z'/%3E%3C/svg%3E"); } .profile-cover { position: relative; } .profile-cover-edit { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 0; border-radius: 999px; background: rgba(17, 17, 17, .55); color: var(--on-media); font: 600 12.5px inherit; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; } .profile-cover-edit::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--ic-cam) center / contain no-repeat; mask: var(--ic-cam) center / contain no-repeat; } .profile-header:hover .profile-cover-edit { opacity: 1; } .profile-cover-edit:focus-visible { opacity: 1; } .profile-cover.has-slider { aspect-ratio: auto; overflow: hidden; } .profile-cover.has-slider .profile-cover-edit { top: 12px; bottom: auto; z-index: 3; } .bs { --bs-dir: -1; --bs-pv: var(--bs-pv-d); --bs-h: var(--bs-h-d); --bs-chip: 40px; position: relative; } .bs[dir="rtl"] { --bs-dir: 1; } .bs-viewport { position: relative; overflow: hidden; touch-action: pan-y; } .bs--h-ratio .bs-viewport { aspect-ratio: var(--bs-ratio); } .bs--h-fixed .bs-viewport { height: var(--bs-h); } .bs--w-boxed { max-width: var(--bs-max); margin-inline: auto; } .profile-cover .bs--w-fill .bs-viewport { border-radius: var(--radius) var(--radius) 0 0; } .bs-track { display: flex; gap: var(--bs-gap); height: 100%; transform: translateX(calc(var(--bs-dir) * var(--bs-pos, var(--bs-start)) * (100% + var(--bs-gap)) / var(--bs-pv) + var(--bs-drag, 0px))); transition: transform var(--bs-speed) var(--bs-ease); } .bs-slide { position: relative; flex: 0 0 calc((100% - (var(--bs-pv) - 1) * var(--bs-gap)) / var(--bs-pv)); min-width: 0; height: 100%; overflow: hidden; background: rgba(17, 17, 17, 0.06); } .bs-img, .bs-blur { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; } .bs--fit-contain .bs-img { position: relative; object-fit: contain; } .bs-blur { position: absolute; inset: 0; filter: blur(18px) saturate(1.1); transform: scale(1.15); } .bs-link { display: block; height: 100%; color: inherit; text-decoration: none; } .bs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .bs--fade .bs-track { display: grid; grid-template: 100% / 100%; transform: none; } .bs--fade .bs-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--bs-speed) var(--bs-ease), visibility 0s linear var(--bs-speed); } .bs--fade .bs-slide.is-active { opacity: 1; visibility: visible; transition: opacity var(--bs-speed) var(--bs-ease), visibility 0s; } .bs.bs-instant .bs-track, .bs.is-dragging .bs-track, .bs.bs-reduce .bs-track, .bs.bs-reduce .bs-slide { transition: none; } .bs.is-dragging .bs-viewport { cursor: grabbing; } .bs-caption { position: absolute; inset-inline: 0; display: flex; padding: 14px 20px; pointer-events: none; } .bs-caption > span { max-width: 70ch; color: var(--on-media); font-size: clamp(14px, 1.8vw, 22px); font-weight: 700; line-height: 1.3; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } .bs--cap-bottom .bs-caption { bottom: 0; padding-top: 40px; background: linear-gradient(to top, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0)); } .bs--cap-top .bs-caption { top: 0; padding-bottom: 40px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0)); } .bs--cap-center .bs-caption { top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); } .bs--cap-at-start .bs-caption { justify-content: flex-start; text-align: start; } .bs--cap-at-center .bs-caption { justify-content: center; text-align: center; } .bs--cap-at-end .bs-caption { justify-content: flex-end; text-align: end; } .profile-cover .bs--cap-bottom .bs-caption { padding-bottom: 60px; } .bs-controls { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .bs-controls > * { pointer-events: auto; } .bs-arrow, .bs-play { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--on-media); cursor: pointer; } .bs-arrow::before, .bs-play::before { content: ""; position: absolute; width: var(--bs-chip); height: var(--bs-chip); border-radius: 50%; background: rgba(17, 17, 17, 0.58); transition: background-color 0.15s ease; } .bs-play { --bs-chip: 34px; top: 6px; left: 6px; } .bs-arrow .svgi, .bs-play .svgi { position: relative; width: 20px; height: 20px; } .bs-play .svgi { width: 15px; height: 15px; } .bs-arrow:hover::before, .bs-play:hover::before { background: rgba(17, 17, 17, 0.78); } .bs-arrow:disabled { opacity: 0.35; cursor: default; } .bs--arrows-small { --bs-chip: 32px; } .bs--arrows-large { --bs-chip: 52px; } .bs--arrows-large .bs-arrow { width: 52px; height: 52px; } .bs--arrows-large .bs-arrow .svgi { width: 26px; height: 26px; } .bs--arrows-square .bs-arrow::before { border-radius: 8px; } .bs--arrows-bare .bs-arrow::before { background: transparent; } .bs--arrows-bare .bs-arrow .svgi { width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); } .bs--arrows-at-sides .bs-arrow { top: 50%; transform: translateY(-50%); } .bs--arrows-at-sides .bs-prev { inset-inline-start: 6px; } .bs--arrows-at-sides .bs-next { inset-inline-end: 6px; } .bs--arrows-at-bottom .bs-arrow { bottom: 6px; } .bs--arrows-at-bottom .bs-next { right: 6px; } .bs--arrows-at-bottom .bs-prev { right: 54px; } .bs--arrows-at-bottom.bs--arrows-large .bs-prev { right: 62px; } .bs[dir="rtl"].bs--arrows-at-bottom .bs-prev { right: 6px; } .bs[dir="rtl"].bs--arrows-at-bottom .bs-next { right: 54px; } .bs[dir="rtl"].bs--arrows-at-bottom.bs--arrows-large .bs-next { right: 62px; } @media (hover: hover) { .bs--hover-arrows .bs-arrow { opacity: 0; transition: opacity 0.15s ease; } .bs--hover-arrows:hover .bs-arrow, .bs--hover-arrows:focus-within .bs-arrow { opacity: 1; } } .bs-dots { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: center; } .bs--dots-at-end .bs-dots { left: auto; right: 10px; } .bs--arrows-at-bottom .bs-dots { right: 110px; } .bs-dot { display: grid; place-items: center; width: 32px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; } .bs-dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.25); transition: width 0.2s ease, background-color 0.2s ease; } .bs-dot[aria-current="true"]::before { width: 20px; background: #fff; } .bs--dots-lines .bs-dot::before { width: 22px; height: 3px; } .bs--dots-lines .bs-dot[aria-current="true"]::before { width: 22px; } .bs-dot-fill { display: none; } .bs--dots-progress .bs-dot { position: relative; } .bs--dots-progress .bs-dot::before { width: 26px; height: 3px; } .bs--dots-progress .bs-dot[aria-current="true"]::before { width: 26px; background: rgba(255, 255, 255, 0.45); } .bs--dots-progress .bs-dot[aria-current="true"] .bs-dot-fill { position: absolute; top: calc(50% - 1.5px); inset-inline-start: 3px; display: block; width: 0; height: 3px; border-radius: 999px; background: #fff; animation: bs-fill var(--bs-delay) linear forwards; } .bs.is-paused .bs-dot-fill { animation-play-state: paused; } @keyframes bs-fill { to { width: 26px; } } .bs-fraction { position: absolute; bottom: 10px; right: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(17, 17, 17, 0.62); color: var(--on-media); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .bs-arrow:focus-visible, .bs-play:focus-visible, .bs-dot:focus-visible, .bs-viewport:focus-visible { outline: 2px solid #fff; outline-offset: -4px; box-shadow: inset 0 0 0 4px rgba(17, 17, 17, 0.7); } .bs--tone-light .bs-arrow, .bs--tone-light .bs-play { color: #111111; } .bs--tone-light .bs-arrow::before, .bs--tone-light .bs-play::before { background: rgba(255, 255, 255, 0.86); } .bs--tone-light .bs-arrow:hover::before, .bs--tone-light .bs-play:hover::before { background: #fff; } .bs--tone-light .bs-dot::before { background: rgba(17, 17, 17, 0.45); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); } .bs--tone-light .bs-dot[aria-current="true"]::before { background: #111111; } .bs--tone-light .bs-fraction { background: rgba(255, 255, 255, 0.9); color: #111111; } @media (prefers-reduced-motion: reduce) { .bs-dot::before, .bs-arrow::before, .bs-play::before { transition: none; } } .profile-cover-edit:hover { background: rgba(17, 17, 17, .78); } .profile-avatar-edit { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 22px; border: 0; border-radius: 999px; background: rgba(17, 17, 17, .6); color: var(--on-media); cursor: pointer; transition: background .15s; } .profile-avatar-edit::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ic-cam) center / contain no-repeat; mask: var(--ic-cam) center / contain no-repeat; } .profile-avatar-edit:hover { background: rgba(17, 17, 17, .82); } .pe-pencil { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s; } .pe-pencil::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ic-edit) center / contain no-repeat; mask: var(--ic-edit) center / contain no-repeat; } .pe-pencil:hover { background: var(--surface-2); color: var(--primary); } .profile-id h1:hover .pe-pencil, .profile-about:hover .pe-pencil { opacity: 1; } .profile-about { position: relative; } .profile-about .pe-pencil { position: absolute; top: 12px; right: 12px; background: var(--surface-2); border: 1px solid var(--border); } @media (hover: none), (max-width: 700px) { .profile-cover-edit, .profile-avatar-edit, .pe-pencil { opacity: 1; } } .owner-menu { position: relative; display: inline-block; margin-left: 4px; } .owner-menu-btn { background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; font-size: 13px; cursor: pointer; color: var(--muted); line-height: 1.2; } .owner-menu-btn:hover { background: var(--bg); color: var(--text); } .owner-menu-panel { display: none; position: absolute; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-md); min-width: 160px; z-index: 10; overflow: hidden; } .owner-menu.open .owner-menu-panel { display: block; } .owner-menu-panel button, .owner-menu-panel a { display: block; box-sizing: border-box; text-decoration: none; width: 100%; text-align: left; background: transparent; border: 0; padding: 8px 14px; font-size: 13px; color: var(--text); cursor: pointer; } .owner-menu-panel button:hover, .owner-menu-panel a:hover { background: var(--bg); text-decoration: none; } .owner-menu-panel button.danger { color: var(--danger); } .owner-menu-panel button.danger:hover { background: var(--danger-bg); } .archived-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--muted); font-size: 13px; } .archived-banner-btn { margin-left: auto; background: var(--primary-btn); color: var(--on-primary); border: 0; border-radius: var(--radius-btn); padding: 6px 12px; font-size: 13px; cursor: pointer; } .archived-banner-btn:hover { filter: brightness(1.05); } .conn-control { display: inline-flex; gap: 8px; align-items: center; } .conn-status { color: var(--success); font-size: 13px; font-weight: 600; white-space: nowrap; } .vis-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--success-bg); color: var(--success); vertical-align: middle; } .vis-badge.vis-ask_to_join { background: var(--hot-bg); color: var(--hot-text); } .vis-badge.vis-private { background: var(--danger-bg); color: var(--danger); } .role-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: var(--bg); color: var(--muted); border: 1px solid var(--border); } .role-badge.role-creator { background: var(--primary-bg); color: var(--primary); border-color: transparent; } .role-badge.role-admin   { background: var(--primary-bg); color: var(--primary); border-color: transparent; } .role-badge.role-editor  { background: var(--tag-bg); color: var(--tag-text); border-color: transparent; } .comm-invite-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md); z-index: 30; overflow: hidden; max-height: 280px; overflow-y: auto; } .comm-invite-results[hidden] { display: none; } .comm-invite-result { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; background: transparent; border: 0; padding: 8px 12px; cursor: pointer; } .comm-invite-result:hover { background: var(--bg); } .comm-invite-result .ci-name { font-weight: 600; font-size: 14px; color: var(--text); } .comm-invite-result .ci-handle { font-size: 12px; color: var(--muted); } .comm-invite-empty { padding: 10px 12px; color: var(--muted); font-size: 13px; } .comm-invite-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .comm-invite-chips[hidden] { display: none; } .comm-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-bg); color: var(--primary); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px; font-weight: 600; } .comm-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(var(--primary-rgb), .15); color: var(--primary); font-size: 14px; line-height: 1; cursor: pointer; } .comm-chip-x:hover { background: var(--primary-btn); color: var(--on-primary); } .rte-toggle { display: inline-block; margin-top: 6px; background: none; border: 0; padding: 0; color: var(--primary); font-weight: 600; font-size: 13.5px; cursor: pointer; } .settings-shell { max-width: none; margin: 22px auto; padding: 0 20px; } body.page-settings .navbar-inner, body.page-settings .site-footer-inner, body.page-settings .footer-bottom { max-width: none; } .settings-head h1 { font-size: 24px; margin: 0 0 4px; } .settings-head p { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; } .settings-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 2px 14px; } .settings-intro p { margin: 0; color: var(--muted); font-size: 13px; } .settings-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start; } .settings-side { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; } .settings-main { min-width: 0; } .settings-side .sidebar-group { margin: 14px 12px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .settings-side .sidebar-sub a { padding-left: 22px; } .settings-danger { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; border-color: var(--danger-bg); } .settings-danger h2 { margin: 0 0 4px; font-size: 16px; color: var(--danger); } .settings-danger p { margin: 0; max-width: 62ch; font-size: 13px; line-height: 1.5; color: var(--muted); } .settings-danger-action { display: grid; gap: 8px; min-width: min(100%, 280px); } .settings-danger-action label { font-size: 13px; color: var(--text); } .settings-danger-action input { padding: 10px 12px; font-size: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); } .settings-danger-action .btn { justify-content: center; min-height: 40px; } .settings-danger-action .btn[disabled] { opacity: 0.5; cursor: not-allowed; } .ap-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; } .ap-preview-col { position: sticky; top: 84px; } .ap-card { margin: 0 0 16px; min-inline-size: 0; } .ap-legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--text); } .ap-legend + * { clear: both; } .ap-help { margin: 0 0 14px; color: var(--muted); font-size: 13px; } .ap-swatches { display: flex; flex-wrap: wrap; gap: 8px; } .ap-swatch, .ap-option { position: relative; cursor: pointer; } .ap-swatch { display: grid; place-items: center; width: 44px; height: 44px; } .ap-swatch input, .ap-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .ap-swatch-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ap-dot { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px var(--border-dk); transition: transform 0.15s ease; } .ap-swatch:hover .ap-dot { transform: scale(1.06); } .ap-swatch input:checked + .ap-dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw); } .ap-swatch input:focus-visible + .ap-dot { outline: 2px solid var(--primary); outline-offset: 5px; } .ap-dot--custom { background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444); } .ap-swatch input:checked + .ap-dot--custom { background: var(--sw); } .ap-custom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; } .ap-picked code { margin-left: 6px; font-family: var(--ff-mono); color: var(--muted); } .ap-color { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); cursor: pointer; } .ap-color input { width: 36px; height: 28px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; } .ap-options { display: grid; gap: 10px; } .ap-options--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ap-option-body { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color 0.15s ease, background-color 0.15s ease; } .ap-option:hover .ap-option-body { border-color: var(--border-dk); } .ap-option input:checked + .ap-option-body { border-color: var(--primary); background: var(--primary-bg); box-shadow: inset 0 0 0 1px var(--primary); } .ap-option input:focus-visible + .ap-option-body { box-shadow: var(--ring); } .ap-option-ico { font-size: 18px; line-height: 1; color: var(--muted); } .ap-option input:checked + .ap-option-body .ap-option-ico { color: var(--primary-dk); } .ap-option-title { font-size: 13.5px; font-weight: 600; color: var(--text); } .ap-option-hint { font-size: 12px; line-height: 1.4; color: var(--muted); } .ap-frame { display: block; height: 44px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); } .ap-frame span { display: block; height: 100%; margin: 0 auto; border-radius: 3px; background: rgba(var(--primary-rgb), 0.22); } .ap-frame--container span { width: 58%; } .ap-frame--full span { width: 100%; } .ap-frame--custom span { width: 78%; outline: 1px dashed rgba(var(--primary-rgb), 0.6); outline-offset: -1px; } .ap-nav { display: grid; grid-template-columns: repeat(3, 22px) 1fr; grid-template-rows: 8px 1fr; gap: 5px; height: 44px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); } .ap-nav span { border-radius: 2px; background: rgba(var(--primary-rgb), 0.22); } .ap-nav span:first-child { background: rgba(var(--primary-rgb), 0.6); } .ap-nav i { grid-column: 1 / -1; border-radius: 3px; background: rgba(var(--primary-rgb), 0.12); } .ap-nav--pills span { border-radius: 999px; } .ap-nav--sidebar { grid-template-columns: 30% 1fr; grid-template-rows: repeat(3, 1fr); gap: 3px 6px; } .ap-nav--sidebar span { grid-column: 1; } .ap-nav--sidebar i { grid-column: 2; grid-row: 1 / -1; } .ap-width { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; } .ap-form:has(input[name="layout"][value="custom"]:not(:checked)) .ap-width { display: none; } .ap-width input { flex: 1; accent-color: var(--primary); } .ap-width output { min-width: 64px; text-align: right; font-family: var(--ff-mono); color: var(--muted); } .ap-actions { display: flex; gap: 10px; } .ap-reset { margin: 18px 0 0; } .ap-preview { margin: 0; padding: 0; overflow: hidden; } .ap-pv-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); } .ap-pv-mark { display: grid; place-items: center; flex: none; width: 28px; height: 28px; overflow: hidden; border-radius: 8px; background: var(--primary-btn); color: var(--on-primary); font-size: 11px; font-weight: 700; } .ap-pv-mark img { width: 100%; height: 100%; object-fit: cover; } .ap-pv-lines { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .ap-pv-lines strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } .ap-pv-lines small { font-size: 10.5px; color: var(--muted); } .ap-pv-body { display: grid; gap: 12px; padding: 14px; } .ap-pv-tabs { display: flex; gap: 6px; font-size: 12px; } .ap-pv-tabs span { padding: 4px 10px; border-radius: 999px; color: var(--muted); } .ap-pv-tabs .is-on { background: var(--primary-bg); color: var(--primary-dk); font-weight: 600; } .ap-pv-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); } .ap-pv-link { color: var(--primary); font-weight: 600; } .ap-pv-row { display: flex; align-items: center; gap: 10px; } .ap-pv-btn { padding: 7px 14px; border-radius: var(--radius-btn); background: var(--primary-btn); color: var(--on-primary); font-size: 12.5px; font-weight: 600; } .ap-pv-tag { padding: 3px 8px; border-radius: 6px; background: var(--primary-bg); color: var(--primary-dk); font-size: 12px; font-weight: 600; } .ap-preview-note { margin: 8px 2px 0; font-size: 12px; } .bn-preview-card { padding: 16px; } .bn-preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .bn-preview-head h2 { margin: 0; font-size: 15px; } .bn-devices { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); } .bn-device { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; } .bn-device.is-on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); } .bn-device:focus-visible { outline: none; box-shadow: var(--ring); } .bn-preview { margin-inline: auto; overflow: hidden; border-radius: var(--radius); transition: max-width 0.2s ease; } .bn-preview[data-size="tablet"] { max-width: 768px; } .bn-preview[data-size="phone"] { max-width: 390px; } .bn-preview[data-size="desktop"] .bs { --bs-pv: var(--bs-pv-d); --bs-h: var(--bs-h-d); } .bn-preview[data-size="tablet"] .bs { --bs-pv: var(--bs-pv-t); --bs-h: var(--bs-h-t); } .bn-preview[data-size="phone"] .bs { --bs-pv: var(--bs-pv-p); --bs-h: var(--bs-h-p); } .bn-preview-msg { min-height: 1em; margin: 10px 2px 0; font-size: 13px; color: var(--muted); } .bn-preview-msg:empty { display: none; } .bn-switch { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 6px 0; cursor: pointer; font-size: 14px; color: var(--text); } .bn-switch input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; } .bn-switch small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); } .bn-switch-ui { position: relative; flex: none; width: 40px; height: 24px; margin-top: 1px; border-radius: 999px; background: var(--border-dk); transition: background-color 0.15s ease; } .bn-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--knob); box-shadow: 0 0 0 1px var(--border); transition: transform 0.15s ease; } .bn-switch input:checked + .bn-switch-ui { background: var(--primary-btn); } .bn-switch input:checked + .bn-switch-ui::after { transform: translateX(16px); background: var(--on-primary); } .bn-switch input:focus-visible + .bn-switch-ui { box-shadow: var(--ring); } .bn-switch--lead strong { font-size: 15px; } .bn-group { margin: 0 0 16px; padding: 0; } .bn-group > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 22px; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; } .bn-group > summary::-webkit-details-marker { display: none; } .bn-group > summary .svgi { transition: transform 0.15s ease; color: var(--muted); } .bn-group[open] > summary .svgi { transform: rotate(180deg); } .bn-group > summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius); } .bn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px 24px; padding: 4px 22px 22px; } .bn-control { min-width: 0; } .bn-chips-set { margin: 0; padding: 0; border: 0; min-inline-size: 0; } .bn-chips-set legend { padding: 0; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); } .bn-chips { display: flex; flex-wrap: wrap; gap: 6px; } .bn-chip { position: relative; cursor: pointer; } .bn-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; } .bn-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; color: var(--text); transition: border-color 0.15s ease, background-color 0.15s ease; } .bn-chip:hover span { border-color: var(--border-dk); } .bn-chip input:checked + span { border-color: var(--primary); background: var(--primary-bg); color: var(--primary-dk); font-weight: 600; } .bn-chip input:focus-visible + span { box-shadow: var(--ring); } .bn-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); } .bn-range { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--text); } .bn-range output { font-family: var(--ff-mono); font-size: 12.5px; font-weight: 400; color: var(--muted); } .bn-control input[type="range"] { width: 100%; accent-color: var(--primary); } .bn-slide-list { display: grid; gap: 12px; margin: 0 0 14px; padding: 0; list-style: none; } .bn-slide { display: grid; grid-template-columns: auto 132px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .bn-slide.is-dragging { opacity: 0.5; } .bn-grip { display: grid; place-items: center; width: 20px; height: 44px; color: var(--muted); cursor: grab; } .bn-thumb { width: 132px; aspect-ratio: 3 / 1; border-radius: var(--radius-sm); object-fit: cover; background: var(--bg); } .bn-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; } .bn-field { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text); } .bn-field small { font-weight: 400; color: var(--muted); } .bn-field input[type="text"] { min-height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 14px; } .bn-field input[type="text"]:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .bn-focal { display: grid; grid-template-columns: repeat(3, 28px); gap: 4px; } .bn-focal-dot { width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); cursor: pointer; } .bn-focal-dot[aria-checked="true"] { border-color: var(--primary); background: var(--primary-btn); } .bn-focal-dot:focus-visible { outline: none; box-shadow: var(--ring); } .bn-row-actions { display: flex; flex-direction: column; gap: 6px; } .bn-row-actions .btn { width: 36px; height: 36px; padding: 0; justify-content: center; } .bn-empty { margin: 0 0 12px; font-size: 13px; color: var(--muted); } .bn-add-row { display: flex; align-items: center; gap: 12px; } .bn-count { font-size: 12.5px; color: var(--muted); } .lg-places { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .lg-place { display: grid; gap: 8px; align-content: start; margin: 0; } .lg-place figcaption { font-size: 12.5px; color: var(--muted); } .lg-shot { display: flex; align-items: center; gap: 10px; min-height: 76px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); } .lg-shot--tab { min-height: 0; max-width: 240px; padding: 9px 12px; border-radius: 10px 10px 0 0; background: var(--surface); font-size: 12.5px; } .lg-mark { display: inline-grid; place-items: center; flex: none; overflow: hidden; background: var(--primary-bg); color: var(--primary-dk); font-weight: 700; } .lg-mark img { display: block; width: 100%; height: 100%; object-fit: cover; } .lg-mark--lg { width: 52px; height: 52px; border: 3px solid var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); font-size: 17px; } .lg-mark--sm { width: 32px; height: 32px; border-radius: 10px; font-size: 12px; } .lg-mark--xs { width: 16px; height: 16px; border-radius: 4px; font-size: 8px; } .lg-lines { display: grid; min-width: 0; } .lg-lines strong { overflow: hidden; font-size: 14px; color: var(--text); white-space: nowrap; text-overflow: ellipsis; } .lg-lines small { font-size: 11px; color: var(--muted); } .lg-tab-title { overflow: hidden; color: var(--text); white-space: nowrap; text-overflow: ellipsis; } .capp-errors { margin: 0 0 16px; } .capp-optional { margin-left: 6px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); } .capp-fields { display: grid; gap: 4px; margin-top: 16px; } .capp-fields .field[hidden], .capp-form .field[hidden] { display: none; } .capp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 24px; margin-bottom: 14px; } .capp-col { min-width: 0; } .capp-sub { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); } .capp-form input[type="range"] { width: 100%; accent-color: var(--primary); } .capp-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .capp-list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--text); } .capp-list .svgi { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--muted); } .capp-stage { position: relative; height: 300px; margin-inline: auto; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); transition: max-width 0.2s ease; } .capp-stage[data-size="phone"] { max-width: 390px; height: 440px; } .capp-stage-page { display: grid; gap: 12px; padding: 24px; } .capp-stage-page span { display: block; height: 14px; border-radius: 7px; background: var(--border); } .capp-stage-page span:nth-child(1) { width: 45%; height: 22px; } .capp-stage-page span:nth-child(2) { width: 90%; } .capp-stage-page span:nth-child(3) { width: 78%; } .capp-stage-page span:nth-child(4) { width: 60%; } .capp-stage-nav { display: none; position: absolute; right: 0; bottom: 0; left: 0; height: 62px; border-top: 1px solid var(--border); background: var(--surface); } .capp-stage[data-size="phone"] .capp-stage-nav { display: block; } .capp-stage[data-size="phone"] .cwa--preview { --cwa-side: 16px; bottom: 78px; } .capp-stage .cwa[hidden] { display: none; } .cfs-stage { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); } .cfs-frame { margin-inline: auto; transform-origin: top left; background: var(--bg); } .cfs-frame .cf { margin-top: 0; } .cfs-switches { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 22px; margin-bottom: 16px; } .cfs-col-list { display: grid; gap: 14px; margin: 0 0 14px; padding: 0; list-style: none; } .cfs-col { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); } .cfs-col-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 12px; } .cfs-col-title { flex: 1; } .cfs-col-head .cfs-row-actions { flex-direction: row; } .cfs-col > .field-error { margin: -4px 0 10px; } .cfs-links { display: grid; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; } .cfs-link, .csl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .cfs-link .field-error, .csl-row .field-error { grid-column: 1 / -1; margin: 0; } .cfs-link { grid-template-columns: auto minmax(0, 1fr) auto; } .cfs-grip { display: grid; place-items: center; align-self: center; width: 20px; height: 44px; color: var(--muted); cursor: grab; } .cfs-link.is-dragging { opacity: .5; } .cfs-links:empty { min-height: 48px; border: 1px dashed var(--border); border-radius: var(--radius-sm); } .cfs-link-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px; } .cfs-field { display: grid; gap: 4px; align-content: start; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); } .cfs-field[hidden] { display: none; } .cfs-field small { font-weight: 400; color: var(--muted); } .cfs-field input, .cfs-field select { width: 100%; min-width: 0; min-height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 14px; } .cfs-field input:focus, .cfs-field select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .cfs-field input[aria-invalid="true"] { border-color: var(--danger); } .cfs-row-actions { display: flex; flex-direction: column; gap: 6px; } .cfs-row-actions .btn { width: 36px; height: 36px; padding: 0; justify-content: center; } .cfs-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .cfs-count { font-size: 12.5px; color: var(--muted); } .cfs-devices { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 18px; } .cfs-device { display: grid; gap: 12px; align-content: start; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); } .cfs-device-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; } .cfs-device-title .svgi { width: 18px; height: 18px; color: var(--muted); } .cfs-device .ap-options { margin: 0; } .cfs-fixed { display: flex; gap: 8px; margin: 14px 0 0; } .cfs-fixed .svgi { flex: none; width: 16px; height: 16px; margin-top: 2px; } .csl-list { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; } .csl-row { grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) auto; } .csl-row .cfs-row-actions, .cfs-link .cfs-row-actions { flex-direction: row; align-self: end; } .csl-preview { min-height: 44px; padding: 16px; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--bg); } .csl-preview:empty { display: none; } .cpg-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; } .cpg-head .ap-legend { margin-bottom: 8px; } .cpg-list { display: grid; margin: 0; padding: 0; list-style: none; } .cpg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 0; border-top: 1px solid var(--border); } .cpg-row:first-child { border-top: 0; padding-top: 4px; } .cpg-main { display: grid; flex: 1 1 260px; gap: 5px; min-width: 0; } .cpg-title { color: var(--text); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; } .cpg-title:hover { color: var(--primary); } .cpg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--muted); } .cpg-url { font-family: var(--ff-mono); font-size: 12px; overflow-wrap: anywhere; } .cpg-badge { display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 600; } .cpg-badge--live { border-color: transparent; background: var(--success-bg); color: var(--success); } .cpg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cpg-actions .icon-only { width: 36px; height: 36px; padding: 0; justify-content: center; } .cpg-starters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .cpg-starter { display: grid; gap: 4px; align-content: start; min-height: 76px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; } .cpg-starter:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text); } .cpg-starter:focus-visible { outline: none; box-shadow: var(--ring); } .cpg-starter[aria-disabled="true"] { opacity: .55; pointer-events: none; } .cpg-starter strong { display: flex; align-items: center; gap: 8px; font-size: 14px; } .cpg-starter strong .svgi { width: 18px; height: 18px; color: var(--primary); } .cpg-starter small { color: var(--muted); font-size: 12.5px; line-height: 1.45; } .cpg-slug { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .cpg-slug:focus-within { border-color: var(--primary); box-shadow: var(--ring); } .cpg-slug-prefix { display: block; align-self: center; max-width: 55%; padding: 0 2px 0 12px; overflow: hidden; color: var(--muted); font-family: var(--ff-mono); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; } .field .cpg-slug input[type="text"] { flex: 1; min-width: 0; padding-left: 2px; border: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; box-shadow: none; background: transparent; } .field .cpg-slug input[type="text"]:focus, .field.has-error .cpg-slug input[type="text"] { box-shadow: none; } .field.has-error .cpg-slug { border-color: var(--danger); } .cpg-form .field select { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; } .cpg-form .field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); } .cpg-status { margin: 14px 0 0; padding: 0; border: 0; } .cpg-form .ap-actions .cpg-delete { margin-left: auto; } @media (prefers-reduced-motion: reduce) { .ap-dot, .ap-option-body { transition: none; } .ap-swatch:hover .ap-dot { transform: none; } } @media (max-width: 1100px) { .ap-grid { grid-template-columns: minmax(0, 1fr); } .ap-preview-col { position: static; order: -1; } } @media (max-width: 560px) { .settings-shell { margin: 14px auto; padding: 0 16px; } .settings-head h1 { font-size: 21px; } } .conn-btn { border: 1px solid var(--primary-btn); background: var(--primary-btn); color: var(--on-primary); border-radius: var(--radius-btn); padding: 6px 16px; font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.3; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; } .conn-btn:hover { background: var(--primary-btn-h); border-color: var(--primary-btn-h); color: var(--on-primary); } .conn-btn.pending, .conn-btn.connected { background: transparent; color: var(--text); border-color: var(--border); } .conn-btn.connected:hover { background: var(--surface); color: var(--text); border-color: var(--border); } .conn-btn.decline { background: transparent; color: var(--danger); border-color: var(--danger); } .conn-btn.decline:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); } .conn-btn.pending .lbl-hover { display: none; } .conn-btn.pending:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); } .conn-btn.pending:hover .lbl-default { display: none; } .conn-btn.pending:hover .lbl-hover { display: inline; } .btn-danger { background: var(--danger); color: var(--on-danger); border-color: var(--danger); } .btn-danger:hover { background: var(--danger-h); border-color: var(--danger-h); color: var(--on-danger); } .report-modal-overlay { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; animation: undModalFade .15s ease; } .report-modal-overlay[hidden] { display: none; } @keyframes undModalFade { from { opacity: 0; } to { opacity: 1; } } @keyframes undModalPop { from { opacity: 0; transform: translateY(10px) scale(.96); } to   { opacity: 1; transform: none; } } .report-modal { background: var(--surface); border-radius: var(--radius); padding: 24px; width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); animation: undModalPop .18s cubic-bezier(.16, 1, .3, 1); } .confirm-modal { max-width: 384px; text-align: center; padding: 26px 24px 22px; } .confirm-icon { width: 52px; height: 52px; margin: 2px auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; line-height: 1; background: var(--primary-bg); color: var(--primary); } .confirm-icon.is-danger { background: var(--danger-bg); color: var(--danger); } .confirm-modal h3 { margin: 0 0 8px; font-size: 18.5px; font-weight: 700; letter-spacing: -.01em; } .confirm-modal .confirm-message { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.55; } .confirm-actions { display: flex; gap: 10px; } .confirm-actions .btn { flex: 1; justify-content: center; padding: 10px 16px; font-size: 14px; font-weight: 600; } @media (max-width: 480px) { .confirm-actions { flex-direction: column-reverse; } } .edit-form { display: none; margin: 12px 0; } .edit-form.open { display: block; } .edit-form input[type="text"], .edit-form textarea, .edit-form select { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font: inherit; margin-bottom: 8px; outline: none; } .edit-form input[type="text"]:focus, .edit-form textarea:focus, .edit-form select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); } .edit-form textarea { min-height: 120px; resize: vertical; } .edit-form .actions { display: flex; gap: 8px; } .edit-form--card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px 22px; margin: 12px 0 16px; } .edit-form .field input[type="text"], .edit-form .field textarea { margin-bottom: 0; } .edit-form-title { margin: 0 0 4px; font-size: 18px; } .edit-form-lead { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; } .edit-form .actions { margin-top: 18px; } .avatar-picker-current { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .avatar-picker-current .avatar { width: 56px; height: 56px; font-size: 18px; } .avatar-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 10px; max-height: 300px; overflow-y: auto; padding: 2px; } .avatar-opt { position: relative; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--bg); cursor: pointer; overflow: hidden; transition: border-color .12s, transform .12s, box-shadow .12s; } .avatar-opt img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-opt:hover {  } .avatar-opt.selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); } .avatar-opt-none { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--muted); border: 2px dashed var(--border-dk); } .avatar-opt-none.selected { color: var(--primary); border-style: solid; } .accept-btn { background: var(--surface); border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; } .accept-btn:hover  { background: var(--success-bg); color: var(--success); border-color: var(--success); } .accept-btn.active { background: var(--success-bg); color: var(--success); border-color: var(--success); } .accept-btn.active::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .3em; vertical-align: -0.125em; background: currentColor; -webkit-mask: var(--ic-check) center / contain no-repeat; mask: var(--ic-check) center / contain no-repeat; } .pexp { position: relative; } .pexp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; } .pexp-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); } .pexp-edit { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: var(--muted); flex-shrink: 0; } .pexp-edit::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ic-edit) center / contain no-repeat; mask: var(--ic-edit) center / contain no-repeat; } .pexp-edit:hover { background: var(--surface-2); color: var(--primary); } .pexp-empty p { margin: 4px 0 0; color: var(--muted); font-size: 14px; } .pexp-list { margin-top: 4px; } .pexp-co { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--border); } .pexp-co:first-child { border-top: 0; padding-top: 8px; } .pexp-co:last-child { padding-bottom: 2px; } .pexp-logo { width: 48px; height: 48px; border-radius: 9px; flex-shrink: 0; background: var(--pastel-gray-bg); color: var(--pastel-gray-text); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } .pexp-logo > .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } .pexp-body { flex: 1; min-width: 0; } .pexp-role  { font-weight: 600; font-size: 15px; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; } .pexp-title { font-weight: 700; font-size: 15px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; } .pexp-company { color: var(--text); } .pexp-company a { color: var(--text); text-decoration: none; } .pexp-meta { font-size: 12.75px; color: var(--muted); margin-top: 1px; overflow-wrap: anywhere; } .pexp-sep { opacity: .65; } .pexp-desc { font-size: 13.5px; color: var(--text); line-height: 1.55; margin-top: 8px; overflow-wrap: anywhere; } .pexp-desc p  { margin: 0; } .pexp-desc ul { margin: 2px 0 0; padding-left: 18px; } .pexp-desc li { margin: 2px 0; } .pexp-roles { position: relative; margin-top: 12px; padding-left: 20px; } .pexp-roles::before { content: ""; position: absolute; left: 4px; top: 5px; bottom: 6px; width: 2px; background: var(--border); } .pexp-role-item { position: relative; padding-bottom: 22px; } .pexp-role-item:last-child { padding-bottom: 0; } .pexp-role-item::before { content: ""; position: absolute; left: -20px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px var(--surface); } .pexp-skills { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--text); font-weight: 500; overflow-wrap: anywhere; } .pexp-skills::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 0; background: var(--muted); -webkit-mask: var(--ic-brain) center / contain no-repeat; mask: var(--ic-brain) center / contain no-repeat; } .pedu-degree { font-size: 14px; color: var(--text); line-height: 1.4; margin-top: 1px; overflow-wrap: anywhere; } .pedu-grade-line { font-size: 13.5px; color: var(--text); margin-top: 8px; overflow-wrap: anywhere; } .pexp-logo-sq { border-radius: 6px; } .pcert-issuer { font-size: 14px; color: var(--text); line-height: 1.4; margin-top: 1px; overflow-wrap: anywhere; } .pcert-link, .ppub-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; text-decoration: none; } .pcert-link svg, .ppub-link svg { width: 14px; height: 14px; } .ppub-co .pexp-body { margin-left: 0; } .pcert-media { display: inline-block; margin-top: 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; max-width: 110px; line-height: 0; } .pcert-media img { display: block; width: 100%; height: auto; } .pcert-media:hover { border-color: var(--muted); } .pexp-count { color: var(--muted); font-weight: 600; } .pskill { padding: 14px 0; border-top: 1px solid var(--border); } .pskill:first-child { border-top: 0; padding-top: 8px; } .pskill:last-child { padding-bottom: 2px; } .pskill-name { font-weight: 700; font-size: 15px; color: var(--text); overflow-wrap: anywhere; } .pskill-src { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; } .pskill-src .pskill-ic { width: 16px; height: 16px; flex: none; color: var(--muted); } .activity-comment { padding: 14px 16px; } .activity-comment .ac-body { font-size: 14px; color: var(--text); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; } .activity-comment .ac-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--muted); } .activity-comment .ac-parent { color: var(--text); font-weight: 600; text-decoration: none; } .activity-comment .ac-sep { opacity: .6; } .act-card { padding: 18px 0 0; scroll-margin-top: 80px; } .act-head { padding: 0 20px 14px; } .act-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); } .act-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; } .act-tab { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: var(--radius-btn); padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .12s, color .12s, border-color .12s; } .act-tab:hover { color: var(--text); border-color: var(--muted); } .act-tab.active { background: var(--primary-btn); color: var(--on-primary); border-color: var(--primary-btn); } .act-panel.hidden { display: none; } .act-empty { color: var(--muted); font-size: 14px; padding: 8px 16px 16px; } .act-slider-wrap { position: relative; border-top: 1px solid var(--border); } .act-slider { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 16px; scroll-padding-left: 16px; scroll-padding-right: 16px; scrollbar-width: none; } .act-slider::-webkit-scrollbar { display: none; } .act-slide { flex: 0 0 clamp(240px, 72%, 292px); scroll-snap-align: start; display: block; text-decoration: none; color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--surface); min-height: 118px; transition: box-shadow .15s, transform .15s, border-color .15s; } .act-slide:hover { box-shadow: var(--shadow-sm);  border-color: var(--muted); text-decoration: none; } .act-slide:hover, .act-slide:hover * { text-decoration: none; } .act-slide-type { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--primary); margin-bottom: 6px; } .act-slide-title { font-weight: 700; font-size: 14.5px; line-height: 1.35; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .act-slide-text { font-size: 13px; color: var(--text); line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .act-slide-text--lg { -webkit-line-clamp: 5; } .act-slide-img { margin-top: 10px; height: 118px; border-radius: 8px; background: var(--bg) center / cover no-repeat; } .act-slide-foot { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); } .act-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; } .act-arrow[hidden] { display: none; } .act-arrow-l { left: 6px; } .act-arrow-r { right: 6px; } .act-arrow:hover { border-color: var(--muted); } .act-seeall { display: block; text-align: center; padding: 12px; border-top: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; } .act-seeall:hover { background: var(--surface-2); text-decoration: none; } .activity-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .activity-back { font-size: 24px; color: var(--text); text-decoration: none; line-height: 1; } .activity-title { font-size: 22px; margin: 0; line-height: 1.2; } .activity-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); } .activity-sub a { color: var(--muted); text-decoration: none; } .auth-modal[hidden] { display: none; } .auth-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: am-fade-in .14s ease-out; } @keyframes am-fade-in { from { opacity: 0; } to   { opacity: 1; } } .auth-modal-backdrop { position: absolute; inset: 0; background: var(--scrim); } .auth-modal-card { position: relative; background: var(--surface); border-radius: var(--radius); padding: 32px 28px 20px; max-width: 380px; width: 100%; box-shadow: var(--shadow-lg); text-align: center; animation: am-scale-up .18s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes am-scale-up { from { transform: scale(0.92); opacity: 0; } to   { transform: scale(1); opacity: 1; } } .auth-modal-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .auth-modal-close:hover { background: var(--bg); color: var(--text); } .auth-modal-icon { width: 56px; height: 56px; border-radius: var(--radius); object-fit: cover; margin: 0 auto 16px; display: block; } .auth-modal-card h2 { margin: 0 0 6px; font-size: 19px; } .auth-modal-message { margin: 0 0 22px; color: var(--muted); font-size: 14px; } .auth-modal-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; } .auth-modal-actions .btn { width: 100%; justify-content: center; padding: 11px 14px; } .auth-modal-dismiss { background: transparent; border: 0; color: var(--muted); font-size: 13px; padding: 8px; margin-top: 4px; cursor: pointer; } .auth-modal-dismiss:hover { color: var(--text); } .auth-modal-card--form { max-width: 420px; text-align: left; max-height: calc(100vh - 40px); overflow-y: auto; } .auth-modal-card--form h2, .auth-modal-card--form .auth-modal-message { text-align: center; } .auth-modal-card--form .auth-modal-message { margin-bottom: 18px; } .auth-modal-form .btn-primary { width: 100%; justify-content: center; padding: 11px 14px; margin-top: 2px; } .auth-modal-error { display: none; background: var(--danger-bg); border: 1px solid var(--danger-bg); color: var(--danger); padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; text-align: left; } .auth-modal-error.show { display: block; } .auth-modal-foot { margin-top: 18px; text-align: center; color: var(--muted); font-size: 13px; } .auth-consent { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); } .auth-consent a { color: var(--link); } .home-legal { display: none; } .signin-card { position: relative; background: var(--glow), var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; color: var(--text); box-shadow: var(--shadow-sm); } .signin-card .signin-mark { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; display: block; flex-shrink: 0; } .signin-card .body { flex: 1; min-width: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; } .signin-card .body strong { color: var(--text); display: block; margin-bottom: 2px; font-size: 14.5px; } .signin-card .actions { display: flex; gap: 8px; flex-shrink: 0; } @media (max-width: 540px) { .signin-card { flex-wrap: wrap; } .signin-card .actions { width: 100%; } .signin-card .actions .btn { flex: 1; justify-content: center; } } .auth-shell { position: relative; max-width: 440px; margin: 56px auto; padding: 0 20px; } .auth-shell::before { content: ""; position: fixed; inset: 0; z-index: -1; background: none; pointer-events: none; } .auth-brand { display: flex; justify-content: center; margin-bottom: 18px; } .auth-brand .brand { color: var(--text); font-weight: 700; font-size: 18px; gap: 10px; } .auth-brand .brand-mark { width: 36px; height: 36px; border-radius: 10px; font-size: 12px; letter-spacing: -0.5px; } .auth-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 32px 26px; } .auth-card .auth-icon { width: 56px; height: 56px; border-radius: var(--radius); background: var(--pastel-gray-bg); color: var(--pastel-gray-text); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; letter-spacing: -1px; margin: 0 auto 16px; } .auth-card h1 { margin: 0 0 4px; font-size: 22px; text-align: center; letter-spacing: -0.01em; } .auth-card .lead { color: var(--muted); font-size: 14px; margin: 0 0 22px; text-align: center; } .auth-card .field input[type="text"], .auth-card .field input[type="email"], .auth-card .field input[type="password"] { padding: 11px 13px; font-size: 14.5px; } .pw-field { position: relative; } .pw-field input { padding-right: 64px !important; } .pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); background: transparent; border: 0; min-height: 32px; display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 6px; font: 600 12px var(--ff-sans); color: var(--muted); cursor: pointer; transition: background .15s, color .15s; user-select: none; } .pw-toggle:hover { background: var(--bg); color: var(--primary); } .pw-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .auth-perks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; text-align: center; } .auth-perks li { font-size: 11.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 6px; line-height: 1.3; } .auth-perks li strong { display: block; color: var(--text); font-size: 12.5px; font-weight: 700; margin-bottom: 1px; } @media (max-width: 420px) { .auth-card { padding: 26px 22px 22px; } .auth-perks { grid-template-columns: 1fr; } } .field { margin-bottom: 14px; } .field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 5px; } .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="url"], .field input[type="tel"], .field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; outline: none; background: var(--surface); color: var(--text); transition: border-color .15s, box-shadow .15s; } .field input::placeholder, .field textarea::placeholder { color: var(--muted); } .field input:focus, .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); } .field textarea { min-height: 90px; resize: vertical; } .field.has-error input, .field.has-error textarea { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); } .field-error { color: var(--danger); font-size: 12px; margin-top: 4px; } .field-help { color: var(--muted); font-size: 12px; margin-top: 4px; } .auth-card .btn-primary { width: 100%; justify-content: center; padding: 11px 14px; } .auth-footer { margin-top: 18px; text-align: center; color: var(--muted); font-size: 13px; } .auth-card .auth-icon .svgi { width: 26px; height: 26px; } .auth-card .auth-icon--muted { background: var(--surface-2); color: var(--muted); box-shadow: none; border: 1px solid var(--border); } .auth-card > .btn { display: flex; width: 100%; justify-content: center; padding: 11px 14px; } .auth-card .form-error { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger); padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; } .reset-done { text-align: center; } .reset-done-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--success-bg); color: var(--success); margin-bottom: 10px; } .reset-done-icon .svgi { width: 22px; height: 22px; } .reset-done-text { color: var(--text); font-size: 14.5px; line-height: 1.5; margin: 0 0 16px; } .reset-done .btn { display: flex; width: 100%; justify-content: center; min-height: 44px; } .auth-forgot { display: flex; justify-content: flex-end; margin: -6px 0 10px; font-size: 13px; } .auth-forgot a { color: var(--primary); font-weight: 600; padding: 4px 0; } .auth-google { margin: 0 0 4px; } .auth-google-btn { display: flex; justify-content: center; min-height: 40px; } .auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; color: var(--muted); font-size: 12.5px; } .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); } .auth-google-link { width: 100%; justify-content: center; gap: 10px; font-weight: 600; } .auth-google-g { flex-shrink: 0; } .flash-stack { position: fixed; top: 76px; right: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: 360px; } .flash { padding: 10px 14px; border-radius: 8px; font-size: 13.5px; box-shadow: var(--shadow); background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .flash.success { background: var(--success-bg); border-color: var(--border); color: var(--success); } .flash.error   { background: var(--danger-bg);  border-color: var(--border); color: var(--danger);  } .und-toast-stack { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1200; display: flex; flex-direction: column; gap: 10px; width: max-content; max-width: min(92vw, 440px); pointer-events: none; } .und-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; line-height: 1.35; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-lg); cursor: pointer; opacity: 0; transform: translateY(14px); transition: opacity .24s ease, transform .3s cubic-bezier(0.16, 1, 0.3, 1); } .und-toast.in { opacity: 1; transform: translateY(0); } .und-toast .svgi { width: 18px; height: 18px; flex: none; } .und-toast-msg { min-width: 0; } .und-toast.error   { background: var(--danger-bg);  border-color: var(--border); color: var(--danger);  } .und-toast.success { background: var(--success-bg); border-color: var(--border); color: var(--success); } .und-toast.info    { background: var(--secondary-bg); border-color: var(--border); color: var(--secondary-text); } @media (prefers-reduced-motion: reduce) { .und-toast { transition: opacity .2s ease; transform: none; } .und-toast.in { transform: none; } } .pill-poll   { background: var(--pastel-green-bg); color: var(--pastel-green-text); } .pill-mcq    { background: var(--pastel-violet-bg); color: var(--pastel-violet-text); } .pill-closed { background: var(--pastel-gray-bg);  color: var(--muted); } .poll-options, .mcq-options { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; } .option-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font: inherit; color: var(--text); cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s, box-shadow .15s; } .option-row:hover:not(:disabled) { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .08); } .option-row:disabled { cursor: default; } .option-row.is-picked { border-color: var(--primary); background: var(--primary-bg); } .option-row.is-correct { border-color: var(--success); background: var(--success-bg); } .option-row.is-wrong { border-color: var(--danger); background: var(--danger-bg); } .option-row .option-bar { position: absolute; inset: 0 auto 0 0; width: 0%; background: rgba(var(--primary-rgb), .08); transition: width .35s cubic-bezier(.4, 0, .2, 1); pointer-events: none; z-index: 0; } .option-row.is-correct .option-bar { background: var(--success-bg); } .option-row.is-wrong   .option-bar { background: var(--danger-bg); } .option-row.show-stats .option-bar { display: block; } .option-row .option-text { flex: 1; min-width: 0; font-weight: 500; position: relative; z-index: 1; } .option-row .option-meta { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); position: relative; z-index: 1; flex-shrink: 0; } .option-row .option-percent { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; } .option-row .option-count { font-size: 12px; background: var(--bg); border-radius: 999px; padding: 2px 7px; color: var(--muted); } .option-row .option-radio { font-size: 18px; color: var(--muted); } .option-row.is-picked .option-radio { color: var(--primary); } .option-row .result-mark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; } .option-row .result-mark.is-correct { color: var(--success); background: var(--success-bg); } .option-row .result-mark.is-wrong { color: var(--danger); background: var(--danger-bg); } .voters-list { margin: 4px 14px 6px 14px; font-size: 12.5px; color: var(--muted); } .voters-list summary { cursor: pointer; list-style: none; padding: 4px 0; } .voters-list summary::-webkit-details-marker { display: none; } .voters-list summary::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .35em; vertical-align: -0.05em; background: var(--muted); -webkit-mask: var(--ic-caret-right) center / contain no-repeat; mask: var(--ic-caret-right) center / contain no-repeat; transition: transform .15s; } .voters-list[open] summary::before { transform: rotate(90deg); } .voters-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); } .voter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: 12.5px; } .voter-chip:hover { background: var(--surface-2); text-decoration: none; } .option-builder { display: flex; flex-direction: column; gap: 8px; } .option-row-input { display: flex; align-items: center; gap: 8px; } .option-row-input input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--success); cursor: pointer; } .option-row-input input[type="text"] { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; font: inherit; outline: none; transition: border-color .15s, box-shadow .15s; } .option-row-input input[type="text"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); } .option-row-input:has(input[data-option-correct]:checked) input[type="text"] { border-color: var(--success); box-shadow: 0 0 0 3px var(--success-bg); } .option-remove { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); } .option-remove .svgi { width: 15px; height: 15px; } .option-remove:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); } .option-add, .ai-suggest--options { align-self: flex-start; margin-top: 4px; } .option-add .svgi, .ai-suggest--options .svgi { width: 14px; height: 14px; } .ai-suggest--options { color: var(--tertiary-text); } .ai-suggest--options:hover { background: var(--tertiary-bg); border-color: var(--tertiary-text); color: var(--tertiary-text); } .option-add:active, .ai-suggest--options:active, .option-remove:active { transform: scale(.95); } @media (prefers-reduced-motion: reduce) { .option-add:active, .ai-suggest--options:active, .option-remove:active { transform: none; } } .mcq-explanation { margin-top: 10px; padding: 10px 14px; border-left: 3px solid var(--success); border-radius: 8px; background: var(--success-bg); color: var(--text); } .mcq-explanation[hidden] { display: none; } .mcq-explanation-label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--success); margin-bottom: 4px; } .mcq-reveal { margin-top: 10px; } .mcq-reveal > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; color: var(--primary); font-size: 14px; font-weight: 600; cursor: pointer; } .mcq-reveal > summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; } .mcq-reveal[open] > summary { margin-bottom: 4px; } .mcq-reveal-why { margin-top: 10px; } .mcq-explanation-text { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; } .page-wrap { max-width: 880px; margin: 28px auto; padding: 0 20px; } @media (max-width: 560px) { .page-wrap { margin: 18px auto; } } @media (prefers-reduced-motion: no-preference) { .reveal-on [data-reveal]:not(.is-in), .reveal-on [data-reveal-stagger]:not(.is-in) > * { opacity: 0; transform: translateY(12px); } .reveal-on [data-reveal].is-in:not(.reveal-now), .reveal-on [data-reveal-stagger].is-in:not(.reveal-now) > * { animation: und-reveal var(--dur-slow) var(--ease) backwards; } .reveal-on [data-reveal-stagger].is-in > *:nth-child(2) { animation-delay: 80ms; } .reveal-on [data-reveal-stagger].is-in > *:nth-child(3) { animation-delay: 160ms; } .reveal-on [data-reveal-stagger].is-in > *:nth-child(4) { animation-delay: 240ms; } .reveal-on [data-reveal-stagger].is-in > *:nth-child(5) { animation-delay: 320ms; } .reveal-on [data-reveal-stagger].is-in > *:nth-child(6) { animation-delay: 400ms; } .reveal-on [data-reveal-stagger].is-in > *:nth-child(n+7) { animation-delay: 480ms; } } @keyframes und-reveal { from { opacity: 0; transform: translateY(12px); } } @media print { [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; animation: none !important; } } .prose { color: var(--text); font-size: 15.5px; line-height: 1.7; } .prose section { scroll-margin-top: 80px; } .prose h2 { font-size: 20px; margin: 34px 0 10px; scroll-margin-top: 80px; } .prose h3 { font-size: 16px; margin: 20px 0 8px; } .prose p  { margin: 0 0 14px; } .prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; } .prose li { margin: 6px 0; } .prose a  { color: var(--primary); } .prose code { background: var(--tag-bg); color: var(--tag-text); padding: 1px 6px; border-radius: 4px; font-size: 13px; } .legal-doc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 36px 40px; } @media (max-width: 560px) { .legal-doc { padding: 24px 20px; } } .legal-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700; color: var(--primary); } .legal-head { border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 8px; } .legal-head h1 { font-size: 30px; line-height: 1.2; margin: 8px 0 6px; } .legal-meta { color: var(--muted); font-size: 13px; margin: 0 0 14px; } .legal-lead { font-size: 16.5px; color: var(--text); margin: 0; } .prose .cpg-eyebrow { text-decoration: none; } .prose .cpg-edit { margin-bottom: 10px; color: var(--text); text-decoration: none; } .cpg-empty { color: var(--muted); } .cpg-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; } .cpg-draft > .svgi { flex: none; width: 18px; height: 18px; } .cpg-draft > span { flex: 1 1 220px; } .legal-toc { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; margin: 24px 0; } .legal-toc h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 10px; } .legal-toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 28px; } .legal-toc li { margin: 5px 0; break-inside: avoid; font-size: 13.5px; } .legal-toc a { color: var(--text); text-decoration: none; } .legal-toc a:hover { color: var(--primary); } @media (max-width: 560px) { .legal-toc ol { columns: 1; } } .legal-callout { border-left: 3px solid var(--primary); background: var(--primary-bg); border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 0 0 14px; } .legal-callout p { margin: 0 0 10px; } .legal-callout ul, .legal-callout ol { margin: 0 0 10px; } .legal-callout > :last-child { margin-bottom: 0; } .legal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 14px; } .legal-table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.5; } .legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); } .legal-table thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; } .legal-table tbody tr:last-child td { border-bottom: 0; } .legal-table td:first-child { font-weight: 600; } .legal-table th:first-child,  .legal-table td:first-child  { width: 17%; } .legal-table th:nth-child(2), .legal-table td:nth-child(2) { width: 49%; } .contact-hero { background: var(--glow), var(--surface); color: var(--text); border-radius: var(--radius); padding: 40px 36px; text-align: center; box-shadow: var(--shadow); border: 1px solid var(--border); } .contact-hero h1 { font-size: 30px; margin: 10px 0; color: var(--text); } .contact-hero .legal-eyebrow { color: var(--muted); } .contact-hero .legal-lead { color: var(--muted); max-width: 560px; margin: 0 auto 22px; } .contact-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .contact-cta { background: var(--primary-btn); color: var(--on-primary); border-color: var(--primary-btn); font-size: 15px; padding: 11px 20px; } .contact-cta:hover { background: var(--primary-btn-h); color: var(--on-primary); border-color: var(--primary-btn-h); } .contact-cta-wa { background: var(--brand-whatsapp); color: var(--on-brand); border-color: var(--brand-whatsapp); display: inline-flex; align-items: center; gap: 8px; } .contact-cta-wa:hover { background: var(--brand-whatsapp-h); color: var(--on-brand); border-color: var(--brand-whatsapp-h); } .contact-cta-wa svg { display: block; } .contact-cta-call { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--text); border-color: var(--border); } .contact-cta-call:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-dk); } .contact-cta-call svg { width: 17px; height: 17px; } .contact-section-title { font-size: 18px; margin: 30px 0 14px; } .contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (max-width: 640px) { .contact-grid { grid-template-columns: 1fr; } } .contact-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; color: var(--text); box-shadow: var(--shadow-sm); transition: border-color .2s ease, box-shadow .22s ease, transform .22s cubic-bezier(0.16, 1, 0.3, 1); } .contact-card:hover { border-color: var(--border-dk); box-shadow: var(--shadow-md); text-decoration: none; } .contact-card-ico { transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1); width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; margin-bottom: 10px; } .contact-card h3 { font-size: 15.5px; margin: 0 0 4px; } .contact-card p { font-size: 13.5px; color: var(--muted); margin: 0 0 10px; } .contact-card p a { color: var(--primary); } .contact-card-link { font-size: 13px; font-weight: 600; color: var(--primary); } .contact-card:hover .contact-card-ico { transform: scale(1.08) rotate(-4deg); } .contact-note { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 18px 0; font-size: 13.5px; color: var(--muted); } .contact-note p { margin: 0; } .contact-community { margin-top: 28px; text-align: center; } .contact-community h2 { font-size: 18px; margin: 0 0 8px; } .contact-community p { color: var(--muted); margin: 0 0 14px; } .contact-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .contact-social-block { margin-top: 28px; text-align: center; } .contact-social-block h2 { font-size: 18px; margin: 0 0 8px; } .contact-social-block p { color: var(--muted); margin: 0 0 16px; } .contact-foot { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 26px; } .contact-foot a { color: var(--link); } .about-wrap { max-width: 1040px; margin: 0 auto; padding: 8px 20px 40px; } .about-hero { text-align: center; padding: 40px 16px 30px; border-bottom: 1px solid var(--border); margin-bottom: 36px; background: var(--glow); } .about-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; } .about-hero h1 { margin: 0 auto; max-width: 720px; font-size: clamp(28px, 5vw, 44px); line-height: 1.15; letter-spacing: -0.02em; color: var(--text); } .about-lead { max-width: 640px; margin: 16px auto 0; font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6; color: var(--muted); } .about-rotate-line { margin: 14px auto 0; height: 1.6em; font-size: clamp(15px, 2.4vw, 19px); font-weight: 600; line-height: 1.6; color: var(--primary); overflow: hidden; } .about-rotate { display: inline-block; overflow: hidden; vertical-align: bottom; } .about-rotword { display: inline-block; transition: transform .42s cubic-bezier(0.16, 1, 0.3, 1), opacity .42s ease; } .about-rotword.out { transform: translateY(-130%); opacity: 0; } .about-rotword.reset { transition: none; transform: translateY(130%); opacity: 0; } .about-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; } .about-hero-cta .btn { padding: 10px 22px; font-size: 15px; } .about-section { margin-bottom: 44px; } .about-h2 { font-size: clamp(21px, 3.4vw, 28px); letter-spacing: -0.01em; color: var(--text); margin: 0; text-align: center; } .about-sub { text-align: center; color: var(--muted); font-size: 15px; margin: 8px 0 26px; } .about-proof { max-width: 760px; margin: -8px auto 26px; padding: 14px 20px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--text); background: var(--primary-bg); border: 1px solid var(--border); border-radius: 12px; } .about-proof code { font-size: 12.5px; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; overflow-wrap: anywhere; } .about-diff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; } .about-diff-card { display: flex; gap: 16px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: box-shadow .22s ease, transform .22s cubic-bezier(0.16, 1, 0.3, 1), border-color .22s ease; } .about-diff-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-dk); } .about-diff-ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-btn); color: var(--on-primary); box-shadow: var(--shadow-sm); transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1); } .about-diff-card:hover .about-diff-ico { transform: scale(1.08) rotate(-4deg); } .about-diff-ico svg { width: 24px; height: 24px; } .about-diff-card h3 { margin: 2px 0 6px; font-size: 17px; color: var(--text); } .about-diff-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; } .about-diff-card code { font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; color: var(--text); overflow-wrap: anywhere; } .about-diff-card p, .about-card p, .about-hero h1, .about-lead { overflow-wrap: anywhere; } .about-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } .about-card { padding: 22px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s, border-color .15s; } .about-card:hover { box-shadow: var(--shadow-md);  border-color: var(--border-dk); } .about-card-ico { width: 44px; height: 44px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1); } .about-card:hover .about-card-ico { transform: scale(1.1) rotate(-4deg); } .about-card-ico svg { width: 22px; height: 22px; } .about-ico--primary { background: var(--primary-bg); color: var(--primary-dk); } .about-ico--success { background: var(--success-bg); color: var(--success); } .about-ico--tag     { background: var(--tag-bg);     color: var(--tag-text); } .about-ico--danger  { background: var(--danger-bg);  color: var(--danger); } .about-card h3 { margin: 0 0 6px; font-size: 16px; color: var(--text); } .about-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; } .about-cta { text-align: center; padding: 40px 20px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); } .about-cta h2 { margin: 0; font-size: clamp(22px, 4vw, 30px); letter-spacing: -0.01em; color: var(--text); } .about-cta p { margin: 10px auto 0; max-width: 520px; color: var(--muted); font-size: 15px; } .about-cta .about-hero-cta { margin-top: 22px; } .about-foot { text-align: center; color: var(--muted); font-size: 13px; margin: 26px 0 0; } .about-foot a { color: var(--link); } @media (max-width: 560px) { .about-hero { padding: 24px 6px 22px; } .about-diff-card { padding: 18px; } } .pricing-wrap { max-width: 1080px; margin: 0 auto; padding: 8px 20px 40px; } .pricing-hero { text-align: center; padding: 40px 16px 22px; background: var(--glow); } .pricing-hero h1 { margin: 0 auto; max-width: 720px; font-size: clamp(28px, 5vw, 42px); line-height: 1.15; letter-spacing: -0.02em; color: var(--text); overflow-wrap: anywhere; } .pricing-toggle { display: inline-flex; gap: 4px; margin-top: 24px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .pricing-toggle-btn { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 8px 18px; border-radius: var(--radius-btn); font-family: inherit; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; } .pricing-toggle-btn.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); } .pricing-save { font-size: 11px; font-weight: 700; color: var(--success); background: var(--success-bg); padding: 2px 7px; border-radius: 999px; } .pricing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 30px; align-items: start; } .pricing-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .pricing-card:hover { box-shadow: var(--shadow-md);  border-color: var(--border-dk); } .pricing-card.is-featured { border-color: var(--tertiary-text); box-shadow: 0 0 0 1px var(--tertiary-text), var(--shadow); } .pricing-card.is-featured:hover { box-shadow: 0 0 0 1px var(--tertiary-text), var(--shadow-lg); } .pricing-cta { transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .pricing-cta:hover {  } .pricing-cta:active { transform: translateY(0) scale(.98); } .pricing-toggle-btn:focus-visible, .pricing-cta:focus-visible { outline: none; box-shadow: var(--ring); } @media (prefers-reduced-motion: reduce) { .pricing-card, .pricing-cta { transition: none; } .pricing-card:hover, .pricing-cta:hover, .pricing-cta:active { transform: none; } } .pricing-badge { position: absolute; top: -11px; left: 22px; background: var(--tertiary); color: var(--on-primary); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; } .pricing-card-head h2 { margin: 0; font-size: 20px; color: var(--text); } .pricing-tagline { margin: 4px 0 0; color: var(--muted); font-size: 13px; } .pricing-price { margin: 16px 0 2px; color: var(--text); display: flex; align-items: baseline; } .pricing-cur { font-size: 20px; font-weight: 700; } .pricing-amt { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; } .pricing-per { font-size: 14px; color: var(--muted); margin-left: 5px; } .pricing-billed { margin: 0 0 16px; font-size: 12.5px; color: var(--muted); min-height: 16px; } .pricing-cta { width: 100%; justify-content: center; padding: 10px 16px; font-size: 14px; } .pricing-talk { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; margin-top: 6px; border-radius: 8px; color: var(--primary); font-size: 13.5px; font-weight: 600; text-decoration: none; } .pricing-talk:hover { background: var(--primary-bg); text-decoration: none; } .pricing-talk:focus-visible { outline: none; box-shadow: var(--ring); } .pricing-talk svg { width: 15px; height: 15px; } .pricing-features { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .pricing-features li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--text); line-height: 1.45; } .pricing-features li .pc-yes { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--success); } .pricing-note { text-align: center; color: var(--muted); font-size: 12.5px; margin: 18px 0 0; } .pricing-compare { margin-top: 44px; } .pc-table { border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; margin-top: 16px; background: var(--surface); } .pc-row { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; align-items: center; min-width: 460px; padding: 12px 16px; border-top: 1px solid var(--border); } .pc-row:first-child { border-top: 0; } .pc-head { background: var(--surface-2); } .pc-head .pc-feature { font-weight: 700; font-size: 15px; color: var(--text); } .pc-head .pc-col { font-weight: 700; font-size: 13px; color: var(--text); } .pc-feature { font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; padding-right: 8px; } .pc-col { text-align: center; font-size: 13px; color: var(--muted); display: flex; align-items: center; justify-content: center; } .pc-col--pro { background: var(--primary-bg); } .pricing-compare .pc-col--pro { align-self: stretch; margin: -12px 0; background: var(--tertiary-bg); } .pc-yes { width: 18px; height: 18px; color: var(--success); } .pc-no { width: 16px; height: 16px; color: var(--muted); } .pc-txt { color: var(--text); font-weight: 500; } .pricing-cta-band { margin-top: 44px; } @media (max-width: 560px) { .pricing-hero { padding: 24px 6px 18px; } } .cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 16px; } .cmp-card { display: block; text-decoration: none; color: inherit; } .cmp-card:focus-visible { outline: none; box-shadow: var(--ring); } .cmp-card h3 { color: var(--text); } .cmp-card-overlap { display: inline-block; margin-top: 12px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--tag-bg); color: var(--tag-text); } .cmp-head { text-align: center; padding: 40px 16px 28px; border-bottom: 1px solid var(--border); margin-bottom: 36px; } .cmp-head h1 { margin: 0 auto; max-width: 760px; font-size: clamp(28px, 5vw, 42px); line-height: 1.15; letter-spacing: -0.02em; color: var(--text); overflow-wrap: anywhere; } .cmp-verified { display: inline-flex; align-items: center; gap: 7px; margin: 14px 0 0; font-size: 13px; color: var(--muted); } .cmp-verified .svgi { width: 15px; height: 15px; color: var(--success); flex: none; } .cmp-verdict { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .cmp-verdict-lede { margin: 10px 0 0; font-size: clamp(15px, 2.2vw, 17px); line-height: 1.6; color: var(--text); overflow-wrap: anywhere; } .cmp-points { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .cmp-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); line-height: 1.6; } .cmp-points li .svgi { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--primary); } .cmp-points li span { overflow-wrap: anywhere; } .cmp-table .pc-row { grid-template-columns: 1.6fr 1fr 1fr; } .cmp-table .pc-col { gap: 7px; } .cmp-table .pc-col--pro { align-self: stretch; padding: 10px 8px; margin: -12px 0; } .cmp-table .pc-no { color: var(--muted); } .cmp-colname { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .cmp-side { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--border-dk); } .cmp-side--ours { border-left-color: var(--primary); } .cmp-side p { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; } .cmp-side-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .cmp-side--ours .cmp-side-label { color: var(--primary); } .cmp-wins { display: flex; flex-direction: column; gap: 14px; padding: 22px; border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: var(--radius); background: var(--surface-2); } .cmp-win { display: flex; gap: 14px; } .cmp-win-ico { flex: none; color: var(--muted); } .cmp-win-ico .svgi { width: 20px; height: 20px; } .cmp-win h3 { margin: 0 0 4px; font-size: 15px; color: var(--text); } .cmp-win p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; } .cmp-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cmp-switch-card { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .cmp-switch--move { border-color: var(--primary); background: var(--primary-bg); } .cmp-switch-card p { margin: 6px 0 0; color: var(--text); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; } .cmp-others { display: flex; flex-wrap: wrap; gap: 8px; } .cmp-chip { display: inline-block; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; text-decoration: none; transition: border-color .15s, background .15s; } .cmp-chip:hover { border-color: var(--primary); background: var(--primary-bg); } .cmp-chip:focus-visible { outline: none; box-shadow: var(--ring); } .cmp-chip--all { font-weight: 600; color: var(--primary); } .user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } .user-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 16px 16px; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s, border-color .15s; } .user-card:hover { box-shadow: var(--shadow);  border-color: var(--muted); } .user-card-main { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; text-decoration: none; color: inherit; } .user-card-avatar { width: 76px; height: 76px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; background: var(--pastel-gray-bg); color: var(--pastel-gray-text); font-weight: 700; font-size: 26px; } .user-card-avatar > .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } .user-card-name { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-weight: 700; font-size: 15px; color: var(--text); max-width: 100%; overflow-wrap: anywhere; } .user-card-main:hover .user-card-name { color: var(--primary); } .user-card-handle { margin-top: 2px; font-size: 12.5px; color: var(--muted); } .user-card-tagline { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .user-card-btn { margin-top: 14px; width: 100%; justify-content: center; } .user-card-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 14px; } .user-card-actions > * { width: 100%; } .user-card-actions .conn-control { display: flex; gap: 6px; } .user-card-actions .conn-control > * { flex: 1 1 0; min-width: 0; } .user-card-actions .owner-menu { display: flex; } .user-card-actions .owner-menu > .conn-btn { flex: 1 1 0; width: 100%; } .user-card-actions .conn-btn, .user-card-actions .follow-btn { box-sizing: border-box; width: 100%; min-width: 0; margin: 0; height: 34px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; border-radius: var(--radius-btn); } @media (max-width: 560px) { .user-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .user-card { padding: 18px 12px 14px; } .user-card-avatar { width: 64px; height: 64px; font-size: 22px; } } .site-footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 40px; } .site-footer-inner { max-width: 1280px; margin: 0 auto; padding: 36px 20px 28px; } .footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; } .footer-brand .brand { margin-bottom: 10px; } .footer-tagline { color: var(--muted); font-size: 13.5px; max-width: 300px; margin: 0; } .footer-brand .social-links { margin-top: 14px; } .social-links { display: flex; flex-wrap: wrap; gap: 10px; } .social-links a { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); transition: color .15s, background .15s, border-color .15s, transform .15s; } .social-links a:hover { color: var(--on-primary); background: var(--primary-btn); border-color: var(--primary-btn); } .social-links svg { display: block; } .social-links-lg { justify-content: center; gap: 12px; } .social-links-lg a { width: 42px; height: 42px; } .social-links-lg svg { width: 20px; height: 20px; } .footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 12px; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin: 0 0 9px; } .footer-col a { color: var(--text); font-size: 13.5px; } .footer-col a:hover { color: var(--primary); } .footer-compare { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); } .footer-compare h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 12px; } .footer-compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .footer-compare-list a { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 12.5px; line-height: 1.35; white-space: nowrap; transition: color .15s, background .15s, border-color .15s; } .footer-compare-list a:hover { color: var(--on-primary); background: var(--primary-btn); border-color: var(--primary-btn); } .footer-compare-list .footer-compare-all { color: var(--primary); border-color: var(--primary); background: transparent; font-weight: 600; } .footer-bottom { max-width: 1280px; margin: 0 auto; padding: 16px 20px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12.5px; } body.cl-full .site-footer-inner, body.cl-full .footer-bottom { max-width: none; } body.cl-custom .site-footer-inner, body.cl-custom .footer-bottom { max-width: var(--cl-max, 1280px); } .footer-legal-links { display: flex; flex-wrap: wrap; gap: 16px; } .footer-legal-links a { color: var(--muted); } .footer-legal-links a:hover { color: var(--primary); } @media (max-width: 820px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 22px; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 480px) { .footer-bottom { flex-direction: column; align-items: flex-start; } } .wa-fab { position: fixed; right: 24px; bottom: 24px; z-index: 45; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-md); transition: transform .15s ease, box-shadow .15s ease; border: 1px solid var(--border); } .wa-fab img { width: 34px; height: 34px; display: block; } .wa-fab:hover {  box-shadow: var(--shadow-lg); } .wa-fab:active { transform: scale(.96); } .wa-fab:focus-visible { outline: none; box-shadow: var(--ring); } @media (prefers-reduced-motion: reduce) { .wa-fab, .wa-fab:hover, .wa-fab:active { transition: none; transform: none; } } @media print { .wa-fab { display: none; } } .cwa { --cwa-side: 24px; position: fixed; bottom: var(--cwa-offset, 24px); z-index: 45; display: flex; flex-direction: column; gap: 10px; max-width: min(320px, calc(100vw - 32px)); } .cwa--right { right: var(--cwa-side); align-items: flex-end; } .cwa--left { left: var(--cwa-side); align-items: flex-start; } .cwa--preview { position: absolute; } .cwa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 56px; height: 56px; padding: 0 11px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: var(--shadow-md); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .cwa-btn:hover {  text-decoration: none; box-shadow: var(--shadow-lg); } .cwa-btn:active { transform: scale(.96); } .cwa-btn:focus-visible { outline: none; box-shadow: var(--ring); } .cwa-mark { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; } .cwa-logo { display: block; width: 34px; height: 34px; } .cwa-glyph { display: none; } .cwa--pill .cwa-btn { padding: 0 20px 0 11px; } .cwa--icon .cwa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cwa--accent .cwa-btn { background: var(--primary-btn); color: var(--on-primary); } .cwa--accent .cwa-btn:hover { background: var(--primary-btn-h); } .cwa--accent .cwa-logo { display: none; } .cwa--accent .cwa-glyph { display: block; } .cwa-greet { position: relative; max-width: 280px; padding: 12px 44px 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 14px; line-height: 1.45; box-shadow: var(--shadow-md); animation: cwa-in .2s ease-out; } .cwa-greet[hidden] { display: none; } .cwa-greet p { margin: 0; overflow-wrap: anywhere; } .cwa-greet-x { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; } .cwa-greet-x:hover { color: var(--text); } .cwa-greet-x:focus-visible { outline: none; box-shadow: var(--ring); } @keyframes cwa-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (min-width: 821px) { .cwa--on-phones:not(.cwa--preview) { display: none; } } @media (prefers-reduced-motion: reduce) { .cwa-btn, .cwa-btn:hover, .cwa-btn:active { transition: none; transform: none; } .cwa-greet { animation: none; } } @media print { .cwa { display: none; } } .cf { container: cf / inline-size; --cf-bg: var(--surface); --cf-fg: var(--text); --cf-dim: var(--muted); --cf-line: var(--border); --cf-hover: var(--primary); margin-top: 40px; border-top: 1px solid var(--cf-line); background: var(--cf-bg); color: var(--cf-fg); } .cf--bg-soft { --cf-bg: var(--primary-bg); } .cf--bg-accent { --cf-bg: var(--primary-ink); --cf-fg: var(--on-ink); --cf-dim: var(--on-ink-dim); --cf-line: var(--on-ink-line); --cf-hover: var(--on-ink); border-top-color: transparent; } .cf-inner { max-width: 1280px; margin: 0 auto; padding: 36px 20px 24px; } body.cl-full .cf-inner, body.cl-full .cf-bottom { max-width: none; } body.cl-custom .cf-inner, body.cl-custom .cf-bottom { max-width: var(--cl-max, 1280px); } .cf-top { display: grid; gap: 28px; } .cf-brand { min-width: 0; } .cf-mark { display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; } .cf-logo-link { display: inline-flex; flex: none; border-radius: var(--radius-sm); } .cf-logo-link:focus-visible { outline: 2px solid var(--cf-hover); outline-offset: 2px; } .cf-brand-lines { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; text-align: start; } .cf-logo { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: var(--radius-sm); background: var(--primary-btn); color: var(--on-primary); font-weight: 700; font-size: 15px; } .cf--bg-accent .cf-logo { box-shadow: 0 0 0 2px var(--on-ink-line); } .cf-logo img { width: 100%; height: 100%; object-fit: cover; display: block; } .cf-name { color: var(--cf-fg); font-size: 17px; font-weight: 700; overflow-wrap: anywhere; } .cf-brand-powered { margin-top: 3px; color: var(--cf-dim); font-size: 12px; font-weight: 500; } .cf-name:hover, .cf-brand-powered:hover { color: var(--cf-hover); text-decoration: none; } .cf-tagline { margin: 8px 0 0; max-width: 340px; color: var(--cf-dim); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; } .cf .cf-social { margin-top: 14px; } .cf-theme { margin-top: 16px; } .cf--bg-accent .footer-theme-label { color: var(--cf-dim); } .cf--bg-accent .footer-theme-seg { background: var(--on-ink-tint); border-color: var(--cf-line); } .cf--bg-accent .footer-theme-seg .theme-option { color: var(--on-ink); } .cf--bg-accent .footer-theme-seg .theme-option.is-active { background: var(--on-ink); color: var(--primary-ink); } .cf--bg-accent .footer-theme-seg .theme-option.is-active .theme-option-ico { background: none; color: var(--primary-ink); } .cf-cols { display: grid; grid-template-columns: repeat(var(--cf-cols-p, 1), minmax(0, 1fr)); gap: 24px 28px; min-width: 0; } .cf-col { min-width: 0; } .cf-col-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cf-dim); } .cf-col-toggle { display: none; } .cf-col ul { list-style: none; margin: 0; padding: 0; } .cf-col li { margin: 0; } .cf-col a { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; color: var(--cf-fg); font-size: 14px; overflow-wrap: anywhere; } .cf-col a:hover { color: var(--cf-hover); } .cf-ext { width: 12px; height: 12px; opacity: .7; } .cf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cf-bottom { max-width: 1280px; margin: 0 auto; padding: 14px 20px 18px; border-top: 1px solid var(--cf-line); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; color: var(--cf-dim); font-size: 13px; } .cf-copy { margin-right: auto; overflow-wrap: anywhere; } .cf-bottom a { color: var(--cf-dim); } .cf-bottom a:hover { color: var(--cf-hover); } .cf-powered { font-size: 12px; } .cf-draft { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px dashed var(--cf-line); border-radius: 999px; color: var(--cf-dim); font-size: 11px; font-weight: 600; vertical-align: middle; } .cf--align-center .cf-brand, .cf--align-center .cf-col { text-align: center; } .cf--align-center .cf-tagline { margin-left: auto; margin-right: auto; } .cf--align-center .cf-social { justify-content: center; } .cf--align-center .cf-col a { justify-content: center; } .cf--align-center .cf-bottom { flex-direction: column; justify-content: center; } .cf--align-center .cf-copy { margin-right: 0; } .cf--align-center .cf-mark { justify-content: center; } @container cf (max-width: 599.98px) { .cf-bottom { flex-direction: column; align-items: flex-start; } .cf--align-center .cf-bottom { align-items: center; } .cf-copy { margin-right: 0; } .cf-col a { min-height: 44px; } .cf-bottom { gap: 0 16px; } .cf-bottom a { display: inline-flex; align-items: center; min-height: 44px; } .cf--fold.cf--js .cf-cols { gap: 0; } .cf--fold.cf--js .cf-col { border-top: 1px solid var(--cf-line); } .cf--fold.cf--js .cf-col:last-child { border-bottom: 1px solid var(--cf-line); } .cf--fold.cf--js .cf-col-title { margin: 0; } .cf--fold.cf--js .cf-col-label { display: none; } .cf--fold.cf--js .cf-col-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 0; border: 0; background: none; color: var(--cf-fg); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } .cf--fold.cf--js .cf-col-toggle:focus-visible { outline: 2px solid var(--cf-hover); outline-offset: 2px; } .cf--fold.cf--js .cf-col-chev { width: 16px; height: 16px; transition: transform .15s ease; } .cf--fold.cf--js .cf-col.is-open .cf-col-chev { transform: rotate(180deg); } .cf--fold.cf--js .cf-col:not(.is-open) > ul { display: none; } .cf--fold.cf--js .cf-col > ul { padding-bottom: 10px; } .cf--fold.cf--js.cf--align-center .cf-col-toggle { justify-content: center; } } @container cf (min-width: 600px) { .cf-cols { grid-template-columns: repeat(var(--cf-cols-t, 2), minmax(0, 1fr)); } } @container cf (min-width: 1024px) { .cf-cols { grid-template-columns: repeat(var(--cf-cols-d, 4), minmax(0, 1fr)); } .cf--brand-side:not(.cf--no-cols):not(.cf--no-brand) .cf-top { grid-template-columns: minmax(220px, 1.2fr) minmax(0, 3fr); gap: 40px; align-items: start; } } @media (prefers-reduced-motion: reduce) { .cf-col-chev { transition: none; } } @media print { .cf-social, .cf-theme { display: none; } } .cs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .cs-link { --cs-size: 38px; display: inline-grid; place-items: center; width: var(--cs-size); height: var(--cs-size); border-radius: 50%; border: 1px solid transparent; text-decoration: none; transition: transform .15s ease, background .15s ease, color .15s ease; } .cs--s .cs-link { --cs-size: 32px; } .cs-link svg, .cs-link .svgi { display: block; width: 46%; height: 46%; } .cs-link:hover {  text-decoration: none; } .cs-link:focus-visible { outline: none; box-shadow: var(--ring); } .cs--brand .cs-link { background: var(--primary-btn); color: var(--on-primary); border-color: var(--on-ink-line); } .cs--brand .cs-link[style*="--cs-brand"] { background: var(--cs-brand); color: var(--on-brand); } .cs--mono .cs-link { background: var(--surface-2); color: var(--text); border-color: var(--border); } .cs--mono .cs-link:hover { background: var(--primary-btn); color: var(--on-primary); border-color: var(--primary-btn); } .cs--outline .cs-link { background: transparent; color: var(--text); border-color: var(--border); } .cs--outline .cs-link:hover { color: var(--primary); border-color: var(--primary); } .cf--bg-accent .cs .cs-link { background: var(--on-ink-tint); color: var(--on-ink); border-color: var(--on-ink-line); } .cf--bg-accent .cs .cs-link:hover { background: var(--on-ink); color: var(--primary-ink); } @media (max-width: 820px) { .cs-link, .cs--s .cs-link { --cs-size: 44px; } } @media (prefers-reduced-motion: reduce) { .cs-link, .cs-link:hover { transition: none; transform: none; } } .share-menu { position: absolute; z-index: 1300; min-width: 190px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 1px; animation: undShareIn .12s ease; } @keyframes undShareIn { from { opacity: 0; transform: translateY(-4px); } to   { opacity: 1; transform: none; } } .share-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: transparent; border-radius: 8px; font: inherit; font-size: 14px; line-height: 1.2; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; } .share-menu-item:hover, .share-menu-item:focus-visible { background: var(--surface-2); color: var(--text); text-decoration: none; outline: none; } .share-menu-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--muted); } .share-menu-item[data-channel="whatsapp"] svg { color: var(--brand-whatsapp); } .share-menu-item[data-channel="x"] svg        { color: var(--brand-x); } .share-menu-item[data-channel="facebook"] svg { color: var(--brand-facebook); } .share-menu-item[data-channel="linkedin"] svg { color: var(--brand-linkedin); } .share-menu-item[data-channel="telegram"] svg { color: var(--brand-telegram); } .share-menu-item[data-channel="reddit"] svg   { color: var(--brand-reddit); } .share-menu-item[data-channel="email"] svg    { color: var(--muted); } .share-menu-item[data-channel="copy"] svg     { color: var(--primary); } :root[data-theme="dark"] .share-menu-item[data-channel="x"] svg { color: var(--text); } .svc-hero { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 24px 26px; margin-bottom: 18px; } .svc-hero::before { content: ""; position: absolute; inset: -40%; background: none; pointer-events: none; animation: svc-hero-glow 9s ease-in-out infinite; } @keyframes svc-hero-glow { 0%, 100% { transform: translate(0, 0); opacity: .9; } 50%      { transform: translate(-16%, 10%); opacity: .5; } } .svc-hero > * { position: relative; } .svc-hero h1 { margin: 0 0 4px; font-size: 27px; letter-spacing: -.01em; } .svc-hero p { margin: 0 0 14px; color: var(--muted); max-width: 640px; } .svc-hero-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--success-bg); color: var(--success); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; } .svc-hero-badge .svgi { width: 14px; height: 14px; } .svc-hero-rotate-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 2px 0 12px; font-size: 17px; font-weight: 600; color: var(--text); } .svc-hero-rotate { display: inline-grid; align-items: center; height: 24px; overflow: hidden; } .svc-hero-rotword, .svc-hero-rotsizer { grid-area: 1 / 1; } .svc-hero-rotsizer { visibility: hidden; white-space: nowrap; font-weight: 700; } .svc-hero-rotword { display: block; white-space: nowrap; color: var(--primary-dk); font-weight: 700; will-change: transform, opacity; transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1), opacity .42s ease; } .svc-hero-rotword.out   { transform: translateY(-130%); opacity: 0; } .svc-hero-rotword.reset { transition: none; transform: translateY(130%); opacity: 0; } .svc-searchbar { display: flex; gap: 8px; flex-wrap: wrap; } .svc-searchbar input[type="search"] { flex: 1 1 260px; min-width: 0; padding: 11px 14px; border: 1px solid var(--border-dk); border-radius: var(--radius); background: var(--surface); font-size: 15px; } .svc-searchbar select { padding: 11px 12px; border: 1px solid var(--border-dk); border-radius: var(--radius); background: var(--surface); font-size: 14px; } .svc-stick-sentinel { height: 1px; margin: 0; } .svc-filterbar { position: sticky; top: 64px; z-index: 20; margin: 0 0 14px; padding: 4px 0 6px; background: var(--bg); transition: padding .22s ease, box-shadow .22s ease, background .22s ease; } .svc-filterbar.is-stuck { padding: 8px 0 8px; background: var(--bg); box-shadow: none; border-bottom: 1px solid var(--border); } .svc-filterbar-top { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 8px; } .svc-filterbar-lead { display: flex; align-items: center; gap: 10px; min-width: 0; } .svc-breadcrumb { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; max-width: 420px; opacity: 1; transition: max-width .28s ease, opacity .18s ease; } .svc-breadcrumb strong { color: var(--text); } .svc-filter-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--text); white-space: nowrap; overflow: hidden; max-width: 0; opacity: 0; transform: translateX(-6px); transition: max-width .3s ease, opacity .2s ease, transform .3s ease; } .svc-filterbar.is-stuck .svc-filter-title { max-width: 240px; opacity: 1; transform: none; } .svc-filterbar.is-stuck .svc-breadcrumb { max-width: 0; opacity: 0; } .svc-filterbar:not(.is-ready), .svc-filterbar:not(.is-ready) .svc-filter-title, .svc-filterbar:not(.is-ready) .svc-breadcrumb { transition: none; } .svc-filterbar-ctrls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .svc-sort-form { display: inline-flex; margin: 0; } .svc-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; height: 40px; padding: 0 36px 0 14px; border: 1px solid var(--border-dk); border-radius: 10px; background-color: var(--surface); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236b6a66'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; transition: border-color .15s ease, box-shadow .15s ease; } .svc-select:hover { border-color: var(--primary); } .svc-select:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .svc-offer-btn { height: 40px; border-radius: 10px; } .svc-offer-btn .svgi { width: 16px; height: 16px; } @media (prefers-reduced-motion: reduce) { .svc-filterbar, .svc-filter-title, .svc-breadcrumb { transition: none; } } .svc-catbar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; margin: 0; } .svc-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; animation: svc-in .4s ease-out both; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; } .svc-chip:hover { border-color: var(--primary); color: var(--primary-dk); background: var(--primary-bg);  text-decoration: none; } .svc-chip:focus-visible { outline: none; box-shadow: var(--ring); } .svc-chip.active { background: var(--primary-btn); border-color: var(--primary-btn); color: var(--on-primary); } .svc-chip.active:hover { background: var(--primary-btn-h); color: var(--on-primary); } .svc-chip .svc-emoji { display: inline-flex; color: var(--muted); } .svc-chip .svc-emoji .svgi { width: 15px; height: 15px; } .svc-catbar .svc-chip:nth-child(1){animation-delay:.02s} .svc-catbar .svc-chip:nth-child(2){animation-delay:.05s} .svc-catbar .svc-chip:nth-child(3){animation-delay:.08s} .svc-catbar .svc-chip:nth-child(4){animation-delay:.11s} .svc-catbar .svc-chip:nth-child(5){animation-delay:.14s} .svc-catbar .svc-chip:nth-child(6){animation-delay:.17s} .svc-catbar .svc-chip:nth-child(7){animation-delay:.20s} .svc-catbar .svc-chip:nth-child(8){animation-delay:.23s} .svc-catbar .svc-chip:nth-child(9){animation-delay:.26s} .svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .svc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; animation: svc-in .45s ease-out both; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .svc-card:hover { box-shadow: var(--shadow-lg); border-color: var(--border-dk);  text-decoration: none; } .svc-card:focus-within { box-shadow: var(--shadow-md); } .svc-card-media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; } .svc-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1); } .svc-card:hover .svc-card-media img { transform: scale(1.06); } @keyframes svc-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .svc-grid .svc-card:nth-child(1){animation-delay:.03s} .svc-grid .svc-card:nth-child(2){animation-delay:.07s} .svc-grid .svc-card:nth-child(3){animation-delay:.11s} .svc-grid .svc-card:nth-child(4){animation-delay:.15s} .svc-grid .svc-card:nth-child(5){animation-delay:.19s} .svc-grid .svc-card:nth-child(6){animation-delay:.23s} .svc-grid .svc-card:nth-child(7){animation-delay:.27s} .svc-grid .svc-card:nth-child(8){animation-delay:.31s} .svc-grid .svc-card:nth-child(9){animation-delay:.35s} .svc-grid .svc-card:nth-child(10){animation-delay:.39s} .svc-grid .svc-card:nth-child(11){animation-delay:.43s} .svc-grid .svc-card:nth-child(12){animation-delay:.47s} .svc-card-media .svc-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--muted); background: var(--surface-2); } .svc-card-save { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-sm); color: var(--muted); } .svc-card-save.saved { color: var(--accent); } .svc-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; } .svc-card-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--primary); } .svc-card-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; } .svc-card-title a { color: var(--text); } .svc-card-title a:hover { color: var(--primary); text-decoration: none; } .svc-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .svc-card-provider { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; } .svc-card-provider .avatar { width: 22px; height: 22px; font-size: 10px; } .svc-card-provider strong { color: var(--text); font-weight: 600; } .svc-card-loc { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; min-width: 0; } .svc-card-loc .svgi { width: 13px; height: 13px; flex-shrink: 0; } .svc-card-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .svc-card-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .svc-card-rating { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); } .svc-card-price { font-size: 12px; color: var(--muted); text-align: right; } .svc-card-price strong { display: block; font-size: 15px; color: var(--text); } .svc-stars { position: relative; display: inline-block; font-size: 14px; line-height: 1; color: var(--border-dk); letter-spacing: 1px; white-space: nowrap; } .svc-stars::before { content: "\2605\2605\2605\2605\2605"; } .svc-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--accent); } .svc-stars-fill::before { content: "\2605\2605\2605\2605\2605"; } .svc-rating-num { font-weight: 700; color: var(--text); font-size: 13px; } .svc-rating-count { color: var(--muted); font-weight: 400; } .svc-card-title a:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; } .svc-empty { background: var(--surface); border: 1px dashed var(--border-dk); border-radius: var(--radius-lg); padding: 48px 24px; text-align: center; color: var(--muted); } .svc-empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius); margin-bottom: 14px; background: var(--primary-bg); color: var(--primary); } .svc-empty-ico .svgi { width: 26px; height: 26px; } .svc-empty h3 { margin: 0 0 6px; color: var(--text); font-size: 18px; } @media (prefers-reduced-motion: reduce) { .svc-card, .svc-chip { animation: none; } .svc-hero::before { animation: none; } .svc-card, .svc-card-media img, .svc-chip { transition: none; } .svc-card:hover { transform: none; } .svc-card:hover .svc-card-media img { transform: none; } .svc-chip:hover { transform: none; } .svc-hero-rotword, .svc-hero-rotword.out, .svc-hero-rotword.reset { transition: none; transform: none; opacity: 1; } } .svc-cat-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .svc-cat-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; } .svc-cat-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .svc-cat-group-head .svc-emoji { display: inline-flex; color: var(--muted); } .svc-cat-group-head .svc-emoji .svgi { width: 22px; height: 22px; } .svc-cat-group-head h2 { margin: 0; font-size: 16px; } .svc-cat-group-head h2 a { color: var(--text); } .svc-cat-links { display: flex; flex-wrap: wrap; gap: 6px 8px; } .svc-cat-link { font-size: 13px; color: var(--muted); } .svc-cat-link .n { color: var(--border-dk); font-size: 11px; } .svc-cat-link:hover { color: var(--primary); } .detail-shell.svc-shell { max-width: 1120px; } .svc-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; } .svc-detail-main { min-width: 0; } .svc-detail-side { position: sticky; top: 78px; } .svc-detail-head h1 { margin: 6px 0 10px; font-size: 25px; line-height: 1.25; } .svc-detail-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-bottom: 14px; } .svc-detail-meta .svc-stars { font-size: 15px; } .svc-paused-banner { background: var(--hot-bg); color: var(--hot-text); border: 1px solid var(--warning-bg); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; font-size: 13px; font-weight: 600; } .svc-gallery { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); margin-bottom: 18px; background: var(--surface-2); } .svc-gallery img { width: 100%; display: block; max-height: 460px; object-fit: cover; } .svc-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; } .svc-section h2 { margin: 0 0 12px; font-size: 18px; } .svc-desc.rte-content { color: var(--text); } .svc-provider { display: flex; align-items: center; gap: 12px; } .svc-provider .avatar, .svc-provider .icon-sq { width: 52px; height: 52px; font-size: 18px; } .svc-provider-meta { min-width: 0; } .svc-provider-meta strong { font-size: 15px; display: flex; align-items: center; gap: 5px; } .svc-provider-meta .sub { color: var(--muted); font-size: 13px; } .svc-provider-actions { margin-left: auto; display: flex; gap: 8px; } .svc-packages { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .svc-pkg-tabs { display: flex; border-bottom: 1px solid var(--border); } .svc-pkg-tab { flex: 1; padding: 12px 8px; border: none; background: var(--surface-2); font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; } .svc-pkg-tab.active { background: var(--surface); color: var(--primary); border-bottom-color: var(--primary); } .svc-pkg-panel { padding: 18px 20px; display: none; } .svc-pkg-panel.active { display: block; } .svc-pkg-price { font-size: 26px; font-weight: 700; margin-bottom: 4px; } .svc-pkg-name { font-weight: 700; margin-bottom: 8px; } .svc-pkg-desc { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; } .svc-pkg-facts { display: flex; gap: 16px; margin-bottom: 14px; color: var(--muted); font-size: 13px; } .svc-pkg-facts span { display: inline-flex; align-items: center; gap: 5px; } .svc-pkg-features { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; } .svc-pkg-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; } .svc-pkg-features li .svgi { color: var(--success); flex: 0 0 auto; margin-top: 2px; } .svc-book-btn { width: 100%; justify-content: center; } .svc-side-note { text-align: center; color: var(--muted); font-size: 12px; margin-top: 10px; } .svc-faq { border: none; border-radius: 0; margin-bottom: 0; background: transparent; overflow: hidden; border-bottom: 1px solid var(--border); } .svc-faq summary { padding: 14px 0; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .svc-faq summary::-webkit-details-marker { display: none; } .svc-faq summary::after { content: "+"; color: var(--muted); font-size: 20px; line-height: 1; } .svc-faq[open] summary::after { content: "\2013"; } .svc-faq-a { padding: 0 0 14px; color: var(--muted); font-size: 14px; } .svc-rev-summary { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; } .svc-rev-score { text-align: center; } .svc-rev-score .big { font-size: 44px; font-weight: 700; line-height: 1; } .svc-rev-bars { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 5px; } .svc-rev-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); } .svc-rev-bar .track { flex: 1; height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; } .svc-rev-bar .fill { height: 100%; background: var(--accent); } .svc-review { padding: 14px 0; border-top: 1px solid var(--border); } .svc-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .svc-review-head .avatar { width: 34px; height: 34px; font-size: 13px; } .svc-review-head strong { font-size: 14px; } .svc-review-head .svc-stars { font-size: 13px; } .svc-review-body { color: var(--text); font-size: 14px; } .svc-review-reply { margin: 10px 0 0 20px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 13px; } .svc-review-reply strong { color: var(--primary); } .svc-form-shell { max-width: 820px; } .svc-form-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--muted); font-size: 13.5px; font-weight: 600; } .svc-form-back:hover { color: var(--primary); text-decoration: none; } .svc-form-back .svgi { width: 16px; height: 16px; } .svc-form-hero { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 18px; } .svc-form-hero-ico { flex: none; width: 52px; height: 52px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; background: var(--primary-btn); color: var(--on-primary); box-shadow: var(--shadow-sm); } .svc-form-hero-ico .svgi { width: 26px; height: 26px; } .svc-form-hero-main { flex: 1; min-width: 0; } .svc-form-hero-main h1 { margin: 0; font-size: 23px; letter-spacing: -0.01em; } .svc-form-hero-main p { margin: 3px 0 0; color: var(--muted); font-size: 14px; } .svc-form-hero-badge { flex: none; display: inline-flex; align-items: center; gap: 5px; background: var(--success-bg); color: var(--success); font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; white-space: nowrap; } .svc-form-hero-badge .svgi { width: 14px; height: 14px; } .svc-form .svc-section { margin-bottom: 16px; } .svc-section-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px; } .svc-section-badge { flex: none; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-bg); color: var(--primary-dk); } .svc-section-badge .svgi { width: 20px; height: 20px; } .svc-section-head h2 { margin: 0; font-size: 17px; } .svc-section-sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; } .svc-form .field { display: block; margin-bottom: 16px; } .svc-form .field:last-child { margin-bottom: 0; } .svc-form .field-label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--text); } .svc-form .field-help-inline { color: var(--muted); font-weight: 400; font-size: 12px; } .svc-form .field-hint { display: block; margin-top: 5px; color: var(--muted); font-size: 11.5px; } .svc-form .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .svc-form input[type="text"], .svc-form input[type="number"], .svc-form select, .svc-form textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--border-dk); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 15px; font-family: inherit; transition: border-color .15s, box-shadow .15s; } .svc-form input:focus, .svc-form select:focus, .svc-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .svc-form input::placeholder, .svc-form textarea::placeholder { color: var(--muted); } .svc-form textarea { resize: vertical; min-height: 96px; } .svc-form .select-wrap { position: relative; display: block; } .svc-form .select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 38px; } .svc-form .select-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .svc-form .select-caret .svgi { width: 18px; height: 18px; } .svc-form .input-prefix, .svc-form .input-suffix { position: relative; display: block; } .svc-form .input-prefix input { padding-left: 30px; } .svc-form .input-suffix input { padding-right: 48px; } .svc-form .input-prefix::before, .svc-form .input-suffix::after { position: absolute; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; pointer-events: none; } .svc-form .input-prefix::before { content: attr(data-prefix); left: 13px; font-size: 14px; } .svc-form .input-suffix::after  { content: attr(data-suffix); right: 13px; font-size: 12.5px; } .svc-pkg-editor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; } .svc-pkg-col { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; transition: border-color .15s, box-shadow .15s, opacity .15s; } .svc-pkg-col.is-popular { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } .svc-pkg-flag { position: absolute; top: 0; right: 0; background: var(--primary-btn); color: var(--on-primary); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; border-bottom-left-radius: 10px; z-index: 1; } .svc-pkg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; cursor: pointer; border-bottom: 1px solid var(--border); background: var(--surface-2); } .svc-pkg-head-main { display: flex; flex-direction: column; min-width: 0; } .svc-pkg-tier { font-weight: 700; font-size: 15px; } .svc-pkg-hint { font-size: 11.5px; color: var(--muted); margin-top: 1px; } .svc-pkg-fields { padding: 14px; } .svc-pkg-col .field { margin-bottom: 12px; } .svc-pkg-col .field-label { font-size: 12px; } .svc-pkg-col input, .svc-pkg-col textarea { font-size: 14px; padding: 9px 11px; } .svc-pkg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .svc-pkg-grid .field:first-child { grid-column: 1 / -1; } .svc-pkg-col.off { opacity: .7; } .svc-pkg-col.off .svc-pkg-head { border-bottom-color: transparent; background: var(--surface); } .svc-pkg-col.off .svc-pkg-fields { display: none; } .svc-nopricing { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; margin-bottom: 16px; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); transition: border-color .15s ease, background .15s ease; } .svc-nopricing:hover { border-color: var(--primary); } .svc-nopricing .svc-switch { flex: none; margin-top: 1px; } .svc-nopricing-txt { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; } .svc-nopricing-txt strong { font-weight: 600; color: var(--text); } .svc-pkg-editor.is-disabled { opacity: .5; pointer-events: none; filter: grayscale(0.35); } .svc-switch { position: relative; flex: none; width: 40px; height: 24px; } .svc-switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .svc-switch-ui { position: absolute; inset: 0; background: var(--border-dk); border-radius: 999px; transition: background .18s; } .svc-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--knob); border-radius: 50%; box-shadow: 0 0 0 1px var(--border); transition: transform .18s; } .svc-switch input:checked + .svc-switch-ui { background: var(--primary-btn); } .svc-switch input:checked + .svc-switch-ui::after { transform: translateX(16px); background: var(--on-primary); } .svc-switch input:focus-visible + .svc-switch-ui { box-shadow: var(--ring); } .svc-faq-editor .svc-faq-row { display: flex; gap: 10px; align-items: stretch; margin-bottom: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; } .svc-faq-row-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .svc-faq-editor input, .svc-faq-editor textarea { margin: 0; } .svc-faq-editor textarea { min-height: 60px; } .svc-row-del { flex: none; width: 42px; background: var(--surface); border: 1px solid var(--border-dk); border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s, background .15s; } .svc-row-del:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); } .svc-row-del .svgi { width: 17px; height: 17px; } .svc-add-row { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px dashed var(--border-dk); border-radius: var(--radius); color: var(--primary); cursor: pointer; padding: 9px 15px; font-weight: 600; font-size: 13.5px; transition: border-color .15s, background .15s; } .svc-add-row:hover { border-color: var(--primary); background: var(--primary-bg); } .svc-add-row .svgi { width: 15px; height: 15px; } .svc-form-actions { position: sticky; bottom: 14px; z-index: 5; display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 8px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .svc-form-actions .btn { padding: 10px 22px; font-size: 14.5px; } .svc-book-body { display: flex; flex-direction: column; gap: 12px; } .svc-book-summary { background: var(--surface-2); border-radius: var(--radius); padding: 12px 14px; font-size: 13.5px; } .svc-book-summary .price { font-size: 20px; font-weight: 700; } .svc-book-note { font-size: 12px; color: var(--secondary-text); background: var(--secondary-bg); padding: 10px 12px; border-radius: var(--radius-sm); } .svc-tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .svc-tab { padding: 10px 16px; border: none; background: none; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; } .svc-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .svc-tab .n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; background: var(--danger); color: var(--on-danger); border-radius: 999px; font-size: 11px; } .svc-tabpane { display: none; } .svc-tabpane.active { display: block; } .svc-booking { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; flex-wrap: wrap; } .svc-booking-thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-2); flex: 0 0 auto; } .svc-booking-main { flex: 1; min-width: 180px; } .svc-booking-main h3 { margin: 0 0 3px; font-size: 15px; } .svc-booking-main h3 a { color: var(--text); } .svc-booking-sub { color: var(--muted); font-size: 12.5px; } .svc-booking-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .svc-booking-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .svc-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-transform: capitalize; } .svc-status.requested   { background: var(--primary-bg); color: var(--primary-dk); } .svc-status.accepted, .svc-status.in_progress { background: var(--hot-bg); color: var(--hot-text); } .svc-status.delivered   { background: var(--pastel-blue-bg); color: var(--pastel-blue-text); } .svc-status.completed   { background: var(--success-bg); color: var(--success); } .svc-status.declined, .svc-status.cancelled   { background: var(--danger-bg); color: var(--danger); } .svc-pay { font-size: 11px; font-weight: 600; } .svc-pay.manual_paid { color: var(--success); } .svc-pay.unpaid { color: var(--muted); } .btn.btn-sm { padding: 6px 12px; font-size: 12.5px; } .btn.btn-danger-ghost { background: none; border: 1px solid var(--border-dk); color: var(--danger); } .svc-star-pick { display: inline-flex; gap: 2px; margin: 4px 0; } .svc-star-btn { background: none; border: none; cursor: pointer; line-height: 1; color: var(--border-dk); padding: 0 2px; display: inline-flex; } .svc-star-btn::before { content: ""; width: 26px; height: 26px; background: currentColor; -webkit-mask: var(--ic-star) center / contain no-repeat; mask: var(--ic-star) center / contain no-repeat; } .svc-star-btn.on { color: var(--accent); } .svc-star-btn.on::before { -webkit-mask-image: var(--ic-star-fill); mask-image: var(--ic-star-fill); } .svc-review-form { padding: 14px 0; border-top: 1px solid var(--border); } .und-loc-modes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .und-loc-mode { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border: 1px solid var(--border-dk); border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text); transition: border-color .15s ease, background .15s ease, color .15s ease; } .und-loc-mode:hover { border-color: var(--primary); } .und-loc-mode input { accent-color: var(--primary); margin: 0; } .und-loc-mode.on { border-color: var(--primary); background: var(--primary-bg); color: var(--primary-dk); } .und-loc .field { display: block; margin-bottom: 14px; } .und-loc .field > label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--text); } .und-loc .field-help-inline { color: var(--muted); font-weight: 400; font-size: 12px; } .und-loc-grid { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: flex-start; } .und-loc-grid > .field { flex: 1 1 155px; min-width: 0; } .und-loc-grid > .field[hidden] { display: none; } .und-loc select, .und-loc input[type="text"] { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--border-dk); border-radius: var(--radius); background: var(--surface); color: var(--text); font-family: inherit; font-size: 15px; line-height: 1.2; transition: border-color .15s ease, box-shadow .15s ease; } .und-loc select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 38px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236b6a66'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 16px; } .und-loc select:hover { border-color: var(--primary); } .und-loc select:focus-visible, .und-loc input[type="text"]:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .und-loc input::placeholder { color: var(--muted); } :root[data-theme="dark"] .und-loc select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%239b9a97'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E"); } .svc-locmodal-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; padding: 24px 28px 0; } .svc-locmodal .svc-loc-form { padding: 0 28px 24px; } .svc-locmodal .form-error:not(:empty) { margin-bottom: 12px; } .svc-locmodal-badge { flex: none; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-bg); color: var(--primary-dk); } .svc-locmodal-badge .svgi { width: 22px; height: 22px; } .svc-locmodal-headmain h2 { margin: 0; font-size: 19px; letter-spacing: -.01em; } .svc-locmodal-sub { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; } .svc-locmodal-foot { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .svc-locmodal-foot .btn { padding: 10px 20px; } .svc-locbtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--border-dk); border-radius: var(--radius-btn); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; max-width: 240px; } .svc-locbtn .svgi { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; } .svc-locbtn-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .svc-locbtn:hover { border-color: var(--primary); } .svc-mobile-book { display: none; } @media (max-width: 560px) { .svc-detail { grid-template-columns: 1fr; } .svc-detail-side { position: static; } .svc-pkg-editor { grid-template-columns: 1fr; } .und-loc-grid > .field { flex-basis: 100%; } .svc-faq-editor .svc-faq-row { grid-template-columns: 1fr; } .svc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .svc-hero { padding: 16px; } .svc-hero h1 { font-size: 21px; } .svc-detail-side { margin-top: 8px; } .svc-form input, .svc-form select, .svc-form textarea, .svc-select, .und-loc select, .und-loc input[type="text"] { font-size: 16px; } .svc-locmodal-foot .btn { flex: 1; } .svc-book-summary .price { font-size: 18px; } } :root[data-theme="dark"] .svc-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%239b9a97'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E"); } .job-hero { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 24px 26px; margin-bottom: 18px; } .job-hero h1 { margin: 0 0 4px; font-size: 27px; letter-spacing: -.01em; } .job-hero p { margin: 0 0 14px; color: var(--muted); max-width: 640px; } .job-hero-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--success-bg); color: var(--success); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; } .job-hero-badge .svgi { width: 14px; height: 14px; } .job-hero-cta { margin-top: 4px; } .job-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; } .job-filterbar .field { display: block; min-width: 150px; flex: 1 1 150px; margin: 0; } .job-filterbar .field-label { display: block; font-weight: 600; font-size: 12px; margin-bottom: 5px; color: var(--text); } .job-filterbar input[type="text"], .job-filterbar input[type="number"], .job-filterbar select { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--border-dk); border-radius: var(--radius); background: var(--surface); color: var(--text); font-family: inherit; font-size: 14px; } .job-filterbar .select-wrap { position: relative; display: block; } .job-filterbar .select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; } .job-filterbar .select-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .job-filterbar .select-caret .svgi { width: 16px; height: 16px; } .job-filterbar input:focus, .job-filterbar select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .job-filterbar-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .job-filter-clear { font-size: 13px; color: var(--muted); font-weight: 600; } .job-filter-clear:hover { color: var(--primary); text-decoration: none; } .job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .job-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .job-card-save { position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-md); } .job-card:hover { box-shadow: var(--shadow-lg); border-color: var(--border-dk);  text-decoration: none; } .job-card:focus-within { box-shadow: var(--shadow-md); } .job-card-media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; } .job-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .job-card-media .job-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--muted); background: var(--surface-2); } .job-card-media .job-card-placeholder .svgi { width: 34px; height: 34px; } .job-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; } .job-card-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--primary); } .job-card-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; } .job-card-title a { color: var(--text); } .job-card-title a:hover { color: var(--primary); text-decoration: none; } .job-card-title a:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; } .job-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .job-card-poster { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; } .job-card-poster .avatar { width: 22px; height: 22px; font-size: 10px; } .job-card-poster strong { color: var(--text); font-weight: 600; } .job-card-loc { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; min-width: 0; } .job-card-loc .svgi { width: 13px; height: 13px; flex-shrink: 0; } .job-card-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .job-card-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .job-card-salary { font-size: 12.5px; font-weight: 700; color: var(--text); } .job-card-time { font-size: 11.5px; color: var(--muted); } .job-empty { background: var(--surface); border: 1px dashed var(--border-dk); border-radius: var(--radius-lg); padding: 48px 24px; text-align: center; color: var(--muted); } .job-empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius); margin-bottom: 14px; background: var(--primary-bg); color: var(--primary); } .job-empty-ico .svgi { width: 26px; height: 26px; } .job-empty h3 { margin: 0 0 6px; color: var(--text); font-size: 18px; } .detail-shell.job-shell { max-width: 820px; } .job-breadcrumb a { color: var(--muted); } .job-breadcrumb a:hover { color: var(--primary); } .job-detail-head { margin-bottom: 4px; } .job-detail-type { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--primary); } .job-detail-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .job-detail-title-row h1 { margin: 6px 0 10px; font-size: 25px; line-height: 1.25; } .job-detail-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-bottom: 16px; } .job-detail-meta span { display: inline-flex; align-items: center; gap: 5px; } .job-detail-meta .svgi { width: 15px; height: 15px; } .job-closed-banner { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; font-size: 13px; font-weight: 600; } .job-cover { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); margin-bottom: 18px; background: var(--surface-2); } .job-cover img { width: 100%; display: block; max-height: 360px; object-fit: cover; } .job-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; } .job-fact { display: flex; flex-direction: column; gap: 4px; } .job-fact-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 600; } .job-fact-label .svgi { width: 14px; height: 14px; } .job-fact-value { color: var(--text); font-size: 14.5px; font-weight: 700; } .job-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; } .job-section h2 { margin: 0 0 12px; font-size: 18px; } .job-desc.rte-content { color: var(--text); } .job-poster { display: flex; align-items: center; gap: 12px; } .job-poster .avatar, .job-poster .icon-sq { width: 52px; height: 52px; font-size: 18px; } .job-poster-meta { min-width: 0; } .job-poster-meta strong { font-size: 15px; display: flex; align-items: center; gap: 5px; } .job-poster-meta .sub { color: var(--muted); font-size: 13px; } .job-poster-actions { margin-left: auto; display: flex; gap: 8px; } .job-form-shell { max-width: 820px; } .job-form-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--muted); font-size: 13.5px; font-weight: 600; } .job-form-back:hover { color: var(--primary); text-decoration: none; } .job-form-back .svgi { width: 16px; height: 16px; } .job-form-hero { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 18px; } .job-form-hero-ico { flex: none; width: 52px; height: 52px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; background: var(--primary-btn); color: var(--on-primary); box-shadow: var(--shadow-sm); } .job-form-hero-ico .svgi { width: 26px; height: 26px; } .job-form-hero-main { flex: 1; min-width: 0; } .job-form-hero-main h1 { margin: 0; font-size: 23px; letter-spacing: -0.01em; } .job-form-hero-main p { margin: 3px 0 0; color: var(--muted); font-size: 14px; } .job-form-hero-badge { flex: none; display: inline-flex; align-items: center; gap: 5px; background: var(--success-bg); color: var(--success); font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; white-space: nowrap; } .job-form-hero-badge .svgi { width: 14px; height: 14px; } .job-form .job-section { margin-bottom: 16px; } .job-section-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px; } .job-section-badge { flex: none; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-bg); color: var(--primary-dk); } .job-section-badge .svgi { width: 20px; height: 20px; } .job-section-head h2 { margin: 0; font-size: 17px; } .job-section-sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; } .job-form .field { display: block; margin-bottom: 16px; } .job-form .field:last-child { margin-bottom: 0; } .job-form .field-label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--text); } .job-form .field-help-inline { color: var(--muted); font-weight: 400; font-size: 12px; } .job-form .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .job-form input[type="text"], .job-form input[type="number"], .job-form input[type="date"], .job-form select, .job-form textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--border-dk); border-radius: var(--radius); background-color: var(--surface); color: var(--text); font-size: 15px; font-family: inherit; transition: border-color .15s, box-shadow .15s; } .job-form input:focus, .job-form select:focus, .job-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .job-form input::placeholder, .job-form textarea::placeholder { color: var(--muted); } .job-form textarea { resize: vertical; min-height: 96px; } .job-form .select-wrap { position: relative; display: block; } .job-form .select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 38px; } .job-form .select-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .job-form .select-caret .svgi { width: 18px; height: 18px; } .job-form .und-loc-fields > .und-loc-grid { display: none; } .job-tags-input { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border-dk); border-radius: var(--radius); background: var(--surface); } .job-tags-input:focus-within { border-color: var(--primary); box-shadow: var(--ring); } .job-tags-chips { display: flex; flex-wrap: wrap; gap: 6px; } .job-tag-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--primary-bg); color: var(--primary-dk); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 13px; font-weight: 600; } .job-tag-chip button { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: none; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; padding: 0; } .job-tag-chip button:hover { background: var(--border); } .job-tag-chip button .svgi { width: 12px; height: 12px; } .job-tags-input input[type="text"] { flex: 1 1 160px; min-width: 120px; border: none; padding: 6px 4px; background: transparent; font-size: 14px; color: var(--text); } .job-tags-input input[type="text"]:focus { outline: none; box-shadow: none; } .job-media-picker { display: flex; align-items: center; gap: 14px; } .job-media-thumb { flex: none; width: 96px; height: 72px; border-radius: var(--radius); background-color: var(--surface-2); background-size: cover; background-position: center; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted); } .job-media-thumb:not(.is-empty) .job-media-thumb-ico { display: none; } .job-media-thumb-ico .svgi { width: 22px; height: 22px; } .job-media-actions { display: flex; gap: 8px; } .job-form-actions { position: sticky; bottom: 14px; z-index: 5; display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 8px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .job-form-actions .btn { padding: 10px 22px; font-size: 14.5px; } @media (prefers-reduced-motion: reduce) { .job-card { transition: none; } .job-card:hover { transform: none; } } .job-apply-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; } .job-apply-cta-text { color: var(--muted); font-size: 13px; } .job-apply-cta .btn { flex: none; } .job-applied-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--success-bg); color: var(--success); border: 1px solid var(--success); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; font-size: 13px; font-weight: 600; } .job-applied-banner .svgi { width: 16px; height: 16px; flex: none; } .job-applied-banner a { color: inherit; font-weight: 700; margin-left: auto; } .job-apply-note { font-size: 12px; color: var(--muted); background: var(--primary-bg); padding: 10px 12px; border-radius: var(--radius-sm); } .job-app-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .job-app-tab { display: inline-flex; align-items: center; padding: 10px 16px; border: none; background: none; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; text-decoration: none; } .job-app-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .job-app-tab:hover { color: var(--primary); text-decoration: none; } .job-app-tab .n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; background: var(--danger); color: var(--on-danger); border-radius: 999px; font-size: 11px; } .job-applicants-filters .job-app-tab .n { background: var(--surface-2); color: var(--muted); } .job-applicants-filters .job-app-tab.active .n { background: var(--primary-bg); color: var(--primary-dk); } .job-app-tabpane { display: none; } .job-app-tabpane.active { display: block; } .job-app-row { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; flex-wrap: wrap; } .job-app-thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-2); flex: 0 0 auto; } .job-app-main { flex: 1; min-width: 180px; } .job-app-main h3 { margin: 0 0 3px; font-size: 15px; } .job-app-main h3 a { color: var(--text); } .job-app-sub { color: var(--muted); font-size: 12.5px; } .job-app-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; padding: 8px 10px; background: var(--secondary-bg); color: var(--secondary-text); border-radius: var(--radius-sm); font-size: 12.5px; } .job-app-note .svgi { width: 14px; height: 14px; flex: none; margin-top: 1px; } .job-app-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .job-app-pipeline { display: flex; align-items: center; gap: 4px; } .job-app-step { width: 20px; height: 6px; border-radius: 999px; background: var(--border); flex: none; } .job-app-step.done { background: var(--primary); } .job-app-step.current { background: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); } .job-app-step.current.hired { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); } .job-app-pipeline-label { display: block; margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--primary-dk); text-align: right; } .job-app-pipeline-label.hired { color: var(--success); } .job-app-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; } .job-app-badge.rejected { background: var(--danger-bg); color: var(--danger); } .job-app-badge.withdrawn { background: var(--surface-2); color: var(--muted); } .job-applicants-shell { max-width: 900px; } .job-applicants-filters { margin-bottom: 18px; } .job-applicant-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; } .job-applicant-head { display: flex; align-items: flex-start; gap: 12px; } .job-applicant-head .job-app-main { flex: 1; min-width: 0; } .job-applicant-note { margin: 10px 0 0; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 13px; color: var(--text); line-height: 1.5; } .job-app-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .job-app-actions .btn { flex: none; } .tools-hero { background: var(--glow), var(--surface); color: var(--text); border-radius: var(--radius); padding: 40px 36px; text-align: center; box-shadow: var(--shadow); margin-bottom: 32px; border: 1px solid var(--border); } .tools-hero h1 { font-size: clamp(26px, 4vw, 36px); margin: 0 0 10px; color: var(--text); } .tools-hero p { margin: 0 auto; max-width: 640px; color: var(--muted); font-size: 15.5px; } .tools-category { margin: 0 0 6px; } .tools-category-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); background: var(--primary-bg); padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; } .tools-category h2 { margin: 0 0 4px; font-size: 21px; color: var(--text); } .tools-category p { margin: 0 0 16px; color: var(--muted); font-size: 14px; } .tools-section { margin-bottom: 40px; } .tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .tool-card { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s, border-color .15s; } .tool-card:hover { box-shadow: var(--shadow-md);  border-color: var(--border-dk); text-decoration: none; } .tool-card-ico { width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; background: var(--primary-bg); color: var(--primary-dk); transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1); } .tool-card:hover .tool-card-ico { transform: scale(1.08) rotate(-4deg); } .tool-card-ico svg { width: 22px; height: 22px; } .tool-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .tool-card h3 { margin: 0; font-size: 15.5px; color: var(--text); } .tool-card-badge { font-size: 10.5px; font-weight: 700; color: var(--success); background: var(--success-bg); padding: 2px 8px; border-radius: 999px; } .tool-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; } .tool-page { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; } .tool-main { min-width: 0; } .tool-workspace { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 20px; } .tool-workspace__header { padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .tool-workspace__title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--text); } .tool-workspace__title svg { width: 18px; height: 18px; color: var(--primary); } .tool-workspace__body { padding: 20px; } .tool-slider-group { margin-bottom: 22px; } .tool-slider-group label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 13.5px; color: var(--text); margin-bottom: 8px; } .tool-slider-group label span { color: var(--primary); font-weight: 700; } .tool-input-row { display: flex; align-items: center; gap: 12px; } .tool-input-row input[type="range"] { flex: 1; accent-color: var(--primary); } .tool-num-input { width: 130px; padding: 8px 10px; border: 1px solid var(--border-dk); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; text-align: right; } .tool-num-input:focus-visible, .tool-input-row input[type="range"]:focus-visible { outline: none; box-shadow: var(--ring); } .tool-select { width: 100%; padding: 8px 36px 8px 12px; border: 1px solid var(--border-dk); border-radius: 8px; background-color: var(--surface); color: var(--text); font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236b6a66'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; } .tool-select:focus-visible { outline: none; box-shadow: var(--ring); } .tool-result { text-align: center; padding: 18px; border-radius: 12px; background: var(--primary-bg); margin-bottom: 16px; } .tool-result__label { font-size: 13px; color: var(--muted); margin-bottom: 4px; } .tool-result__value { font-size: 30px; font-weight: 700; color: var(--primary-dk); letter-spacing: -0.01em; } .tool-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 20px; } .tool-result-item { text-align: center; padding: 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); } .tool-result-item__label { font-size: 12px; color: var(--muted); margin-bottom: 4px; } .tool-result-item__value { font-size: 17px; font-weight: 700; color: var(--text); } .tool-result-item__value--success { color: var(--success); } .tool-result-item__value--danger { color: var(--danger); } .tool-chart { max-width: 280px; margin: 0 auto 20px; } .tool-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; } .tool-table { width: 100%; border-collapse: collapse; min-width: 480px; font-size: 13px; } .tool-table th, .tool-table td { padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; } .tool-table th:first-child, .tool-table td:first-child { text-align: left; } .tool-table thead th { background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; } .tool-table tbody tr:last-child td { border-bottom: 0; } .tool-toggle { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; margin-top: 2px; } .tool-toggle__btn { border: 0; background: transparent; padding: 8px 20px; border-radius: var(--radius-btn); font: inherit; font-weight: 600; font-size: 13.5px; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; } .tool-toggle__btn.active { background: var(--surface); color: var(--primary-dk); box-shadow: var(--shadow-sm); } .tool-dynamic-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .tool-row { display: flex; align-items: center; gap: 10px; } .tool-row__remove { flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; } .tool-row__remove svg { width: 14px; height: 14px; } .tool-row__remove:hover:not(:disabled) { background: var(--surface-2); color: var(--danger); border-color: var(--danger); } .tool-row__remove:disabled { cursor: not-allowed; } .tool-add-row { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px dashed var(--border-dk); border-radius: 8px; background: transparent; color: var(--primary); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; } .tool-add-row svg { width: 14px; height: 14px; } .tool-add-row:hover { background: var(--primary-bg); } .tool-io-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .tool-textarea { width: 100%; min-height: 22rem; padding: 12px; border: 1px solid var(--border-dk); border-radius: 8px; background: var(--surface); color: var(--text); font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 13px; line-height: 1.5; resize: vertical; } .tool-textarea:focus-visible { outline: none; box-shadow: var(--ring); } .tool-stats { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; color: var(--muted); font-size: 13px; } .tool-stats b { color: var(--text); } .tool-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .tool-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 168px; padding: 24px; text-align: center; cursor: pointer; border: 2px dashed var(--border-dk); border-radius: var(--radius); background: var(--surface-2); color: var(--muted); transition: border-color .15s, background .15s; } .tool-drop:hover, .tool-drop.is-over { border-color: var(--primary); background: var(--primary-bg); } .tool-drop:focus-visible { outline: none; box-shadow: var(--ring); } .tool-drop svg { width: 30px; height: 30px; color: var(--primary); } .tool-drop b { color: var(--text); font-size: 15px; } .tool-drop small { font-size: 12.5px; } .tool-local { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12.5px; color: var(--muted); } .tool-local svg { width: 14px; height: 14px; color: var(--success); } .tool-files { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .tool-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13.5px; } .tool-file__thumb { width: 40px; height: 40px; flex: none; border-radius: 6px; object-fit: cover; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); } .tool-file__thumb svg { width: 20px; height: 20px; } .tool-file__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .tool-file__meta { color: var(--muted); font-size: 12.5px; white-space: nowrap; } .tool-file__btn { width: 30px; height: 30px; flex: none; border: none; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .tool-file__btn:hover { background: var(--surface-2); color: var(--text); } .tool-file__btn:disabled { opacity: .35; cursor: default; } .tool-file__btn svg { width: 15px; height: 15px; } .tool-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; } .tool-options label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text); } .tool-options select, .tool-options input[type="number"], .tool-options input[type="text"], .tool-options input[type="date"] { height: 38px; padding: 0 10px; border: 1px solid var(--border-dk); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; } .tool-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; } .tool-compare figure { margin: 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); text-align: center; } .tool-compare img { max-width: 100%; max-height: 260px; object-fit: contain; } .tool-compare figcaption { margin-top: 6px; font-size: 12.5px; color: var(--muted); } .tool-compare figcaption b { color: var(--text); } .tool-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 13px; background: var(--surface-2); color: var(--text); } .tool-note.is-warn { background: var(--warning-bg); } .tool-note.is-ok { background: var(--success-bg); } .tool-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px); opacity: 0; pointer-events: none; background: var(--primary-btn); color: var(--on-primary); padding: 10px 18px; border-radius: 8px; font-size: 13px; z-index: 9999; box-shadow: var(--shadow-md); transition: opacity .2s, transform .2s; } .tool-toast.is-on { opacity: 1; transform: translateX(-50%); } .tool-toast.is-err { background: var(--danger); } .tool-workspace [hidden] { display: none !important; } .tool-actions .btn svg, .tool-note svg { width: 15px; height: 15px; } .tool-table td.is-wrap { white-space: normal; text-align: left; } #rxHighlight mark { background: var(--warning-bg); color: var(--text); border-radius: 2px; padding: 0 1px; } #dfBody del { background: var(--danger-bg); color: var(--text); text-decoration: none; } #dfBody ins { background: var(--success-bg); color: var(--text); text-decoration: none; } #dfBody td { text-align: left; white-space: pre-wrap; word-break: break-word; } .tool-checks { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13.5px; } .tool-checks label { display: inline-flex; align-items: center; gap: 6px; } .tool-io-grid > * { min-width: 0; } .tool-row__cell { display: flex; flex-direction: column; min-width: 0; } .tool-row__label { display: none; margin-bottom: 3px; font-size: 11.5px; font-weight: 600; color: var(--muted); } .tool-workspace select, .tool-workspace input[type="file"] { min-height: 38px; } .tool-related { margin: 28px 0 8px; } .tool-related h2 { margin: 0 0 12px; font-size: 19px; color: var(--text); } .page-wrap .prose code { overflow-wrap: anywhere; } .page-wrap .prose pre { overflow-x: auto; max-width: 100%; } @media (max-width: 640px) { .tool-compare { grid-template-columns: 1fr; } .tool-row { flex-wrap: wrap; } .tool-row--head { display: none; } .tool-row--doc { align-items: flex-end; padding: 10px; border: 1px solid var(--border); border-radius: 8px; } .tool-row--doc .tool-row__cell { flex: 1 1 calc(50% - 10px) !important; } .tool-row--doc .tool-row__cell:first-child { flex-basis: 100% !important; } .tool-row__label { display: block; } } .tool-preview-frame { width: 100%; min-height: 22rem; border: 1px solid var(--border-dk); border-radius: 8px; background: var(--paper); } .tool-faq { border: none; border-radius: 0; margin-bottom: 0; background: transparent; overflow: hidden; border-bottom: 1px solid var(--border); } .tool-faq summary { padding: 14px 0; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .tool-faq summary::-webkit-details-marker { display: none; } .tool-faq summary::after { content: "+"; color: var(--muted); font-size: 20px; line-height: 1; } .tool-faq[open] summary::after { content: "\2013"; } .tool-faq-a { padding: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.6; } .tool-sidebar { position: sticky; top: 20px; } .tool-sidebar-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); } .tool-sidebar-card h3 { margin: 0 0 10px; font-size: 14px; color: var(--text); } .tool-sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .tool-sidebar-list a { display: block; padding: 7px 8px; border-radius: 7px; color: var(--text); font-size: 13.5px; text-decoration: none; } .tool-sidebar-list a:hover { background: var(--surface-2); text-decoration: none; } .tool-sidebar-list a.active { background: var(--primary-bg); color: var(--primary-dk); font-weight: 600; } .tool-sidebar-all { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--primary); } .jf-fullwidth { width: 100%; max-width: none; padding: 0; } .json-tool { --jf-teal: var(--primary-btn); --jf-teal-dark: var(--primary-btn-h); --jf-dark: var(--surface-2); --jf-dark-2: var(--border); --jf-bg: var(--surface); --jf-border: var(--border); --jf-gutter-bg: var(--surface-2); --jf-gutter-fg: var(--muted); display: grid; grid-template-columns: 1fr 220px 1fr; gap: var(--sp-4); align-items: stretch; font-family: var(--ff-mono); } @media (max-width: 1024px) { .json-tool { grid-template-columns: 1fr; } } .jf-pane { display: flex; flex-direction: column; background: var(--jf-bg); border: 1px solid var(--jf-border); border-radius: var(--radius); overflow: hidden; min-height: 560px; } .jf-pane__toolbar { display: flex; align-items: center; justify-content: space-between; background: var(--jf-dark); color: var(--text); padding: 6px 10px; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--border); } .jf-pane__tools, .jf-pane__title { display: flex; align-items: center; gap: 2px; } .jf-tool-btn { background: transparent; border: none; color: var(--muted); width: 28px; height: 28px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; transition: background .15s; } .jf-tool-btn:hover { background: var(--border); } .jf-tool-btn.jf-active { background: var(--primary-bg); color: var(--text); } .jf-tool-btn--text { width: auto; padding: 0 8px; font-size: 12px; gap: 6px; } .jf-tool-btn svg, .jf-view-btn svg, .jf-main-btn svg { width: 14px; height: 14px; } .jf-editor { position: relative; flex: 1; display: flex; background: var(--jf-bg); overflow: hidden; } .jf-gutter { flex: 0 0 56px; background: var(--jf-gutter-bg); color: var(--jf-gutter-fg); font-family: var(--ff-mono); font-size: 12px; line-height: 1.55; padding: 8px 0; border-right: 1px solid var(--jf-border); overflow: hidden; user-select: none; } .jf-gutter > div { display: flex; align-items: center; justify-content: flex-end; padding: 0 4px 0 6px; gap: 4px; } .jf-textarea { flex: 1; width: 100%; border: 0; outline: 0; resize: none; padding: 8px 10px; background: var(--jf-bg); color: var(--text); font-family: var(--ff-mono); font-size: 13px; line-height: 1.55; white-space: pre; overflow: auto; tab-size: 2; } .jf-textarea.jf-wrap { white-space: pre-wrap; word-break: break-word; } .jf-textarea:focus { background: var(--surface); } .jf-tree { flex: 1; padding: 10px 12px; overflow: auto; background: var(--jf-bg); font-size: 13px; line-height: 1.5; } .jf-tree ul { list-style: none; padding-left: 16px; margin: 0; } .jf-tree li { position: relative; } .jf-tree .jf-tree-toggle { cursor: pointer; display: inline-block; width: 12px; color: var(--muted); font-weight: 700; user-select: none; } .jf-tree .jf-tree-key { color: var(--pastel-blue-text); } .jf-tree .jf-tree-str { color: var(--pastel-green-text); } .jf-tree .jf-tree-num { color: var(--pastel-red-text); } .jf-tree .jf-tree-bool { color: var(--pastel-yellow-text); } .jf-tree .jf-tree-null { color: var(--muted); } .jf-tree li.collapsed > ul { display: none; } .jf-pane__status { display: flex; gap: 16px; padding: 4px 10px; background: var(--surface-2); border-top: 1px solid var(--jf-border); font-size: 11px; color: var(--muted); font-family: var(--ff-mono); } .jf-pane__status b { font-weight: 600; color: var(--text); } .jf-center { display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); padding: 14px 12px; border-radius: var(--radius); align-self: stretch; border: 1px solid var(--border); } .jf-main-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 12px; background: var(--jf-teal); color: var(--on-primary); border: 1px solid var(--primary-btn); border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, transform .1s; } .jf-main-btn:hover { background: var(--jf-teal-dark); } .jf-main-btn:active { transform: scale(.98); } .jf-select-wrap { position: relative; } .jf-select { width: 100%; padding: 9px 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23333' d='M0 0l5 6 5-6z'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; } .jf-dropdown { position: relative; } .jf-dropdown__menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--jf-border); border-radius: 6px; box-shadow: var(--shadow-md); z-index: 20; display: none; overflow: hidden; } .jf-dropdown.open .jf-dropdown__menu { display: block; } .jf-dropdown__menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; background: var(--surface); border: 0; font-size: 13px; color: var(--text); cursor: pointer; } .jf-dropdown__menu button:hover { background: var(--surface-2); } .jf-view-switch { position: relative; } .jf-view-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 3px 8px; font-size: 12px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .jf-view-menu { position: absolute; top: calc(100% + 4px); right: 0; background: var(--surface); border: 1px solid var(--jf-border); border-radius: 4px; box-shadow: var(--shadow-md); z-index: 20; display: none; min-width: 90px; } .jf-view-switch.open .jf-view-menu { display: block; } .jf-view-menu button { display: block; width: 100%; text-align: left; padding: 7px 12px; background: var(--surface); border: 0; font-size: 12px; color: var(--text); cursor: pointer; } .jf-view-menu button:hover { background: var(--surface-2); } .jf-pane:fullscreen { background: var(--jf-bg); border-radius: 0; width: 100vw; height: 100vh; display: flex; flex-direction: column; } .jf-pane:fullscreen .jf-editor { flex: 1; } .jf-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--primary-btn); color: var(--on-primary); padding: 10px 18px; border-radius: 6px; font-size: 13px; z-index: 200; box-shadow: var(--shadow-md); } .jf-toast.jf-err { background: var(--danger); } .jf-toast.jf-ok { background: var(--success); } .jf-transform { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; } .jf-transform[hidden] { display: none !important; } .jf-transform__backdrop { position: absolute; inset: 0; background: var(--scrim); } .jf-transform__panel { position: relative; background: var(--surface); border-radius: 6px; width: 560px; max-width: 94vw; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); overflow: hidden; } .jf-transform__header { background: var(--surface-2); color: var(--text); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); } .jf-transform__close { background: transparent; border: 0; color: var(--text); cursor: pointer; font-size: 14px; } .jf-transform__body { padding: 16px 20px 20px; overflow: auto; } .jf-transform__body p { margin: 0 0 14px; font-size: 13px; color: var(--text); line-height: 1.5; } .jf-transform__body a { color: var(--link); text-decoration: none; } .jf-transform__label { display: block; margin: 10px 0 6px; font-size: 13px; font-weight: 600; color: var(--text); } .jf-transform__query { width: 100%; min-height: 72px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 3px; font-family: var(--ff-mono); font-size: 13px; resize: vertical; outline: 0; background: var(--surface); color: var(--text); } .jf-transform__query:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .08); } .jf-transform__preview { margin: 0; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; font-family: var(--ff-mono); font-size: 12px; line-height: 1.5; color: var(--text); min-height: 120px; max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word; } .jf-transform__preview.jf-err { color: var(--danger); } .jf-transform__footer { margin-top: 16px; display: flex; justify-content: flex-start; } .jf-transform__ok { background: var(--surface); border: 1px solid var(--border); padding: 6px 22px; border-radius: 3px; font-size: 13px; cursor: pointer; color: var(--text); } .jf-transform__ok:hover { background: var(--surface-2); } .jf-loadext__url { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; outline: 0; margin-bottom: 16px; color: var(--text); background: var(--surface); } .jf-loadext__url:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .08); } .jf-loadext__actions { display: flex; justify-content: center; margin: 6px 0; } .jf-loadext__btn { background: var(--primary-btn); color: var(--on-primary); border: 0; padding: 8px 22px; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; } .jf-loadext__btn:hover { background: var(--primary-btn-h); } .jf-loadext__sep { height: 3px; background: var(--border); margin: 16px 20%; border-radius: 2px; } .jf-loadext__footer { justify-content: flex-end; } .jwt-tool { --jwt-bg: var(--surface-2); --jwt-panel: var(--surface); --jwt-panel-2: var(--surface-2); --jwt-border: var(--border); --jwt-text: var(--text); --jwt-muted: var(--muted); --jwt-accent: var(--primary-btn); --jwt-h: var(--pastel-red-text); --jwt-p: var(--pastel-green-text); --jwt-s: var(--pastel-blue-text); --jwt-ok: var(--success); --jwt-err: var(--danger); --jwt-warn: var(--warning); --jwt-key: var(--pastel-blue-text); --jwt-str: var(--pastel-green-text); --jwt-num: var(--pastel-red-text); --jwt-bool: var(--pastel-yellow-text); --jwt-null: var(--muted); background: var(--jwt-bg); color: var(--jwt-text); border-radius: 12px; padding: var(--sp-6); } .jwt-topbar { display: flex; align-items: center; justify-content: center; position: relative; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-4); } .jwt-tabs { display: inline-flex; background: var(--jwt-panel); border: 1px solid var(--jwt-border); border-radius: var(--radius-sm); padding: 4px; } .jwt-tabs button { background: transparent; border: 0; color: var(--jwt-muted); padding: 8px 22px; font-size: 14px; font-weight: 600; border-radius: var(--radius-btn); cursor: pointer; font-family: inherit; } .jwt-tabs button.active { background: var(--jwt-panel-2); color: var(--jwt-text); box-shadow: 0 0 0 1px var(--jwt-border); } .jwt-topbar-right { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-left: auto; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } @media (max-width: 900px) { .jwt-topbar-right { position: static; transform: none; margin-left: 0; width: 100%; justify-content: center; } } .jwt-autofocus { display: inline-flex; align-items: center; gap: 6px; color: var(--jwt-muted); font-size: 13px; cursor: pointer; font-weight: 400; } .jwt-example-label { color: var(--jwt-text); font-weight: 600; font-size: 13px; } .jwt-select { background: var(--jwt-panel); color: var(--jwt-text); border: 1px solid var(--jwt-border); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px; font-family: inherit; cursor: pointer; min-width: 220px; } .jwt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: stretch; } .jwt-grid[hidden] { display: none; } @media (max-width: 900px) { .jwt-grid { grid-template-columns: 1fr; } } .jwt-col { display: flex; flex-direction: column; gap: var(--sp-4); } .jwt-section { display: flex; flex-direction: column; } .jwt-section__label { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: 8px; } #jwtDecoder > .jwt-col:first-child, #jwtEncoder > .jwt-col:last-child { height: 100%; } #jwtDecoder > .jwt-col:first-child > .jwt-section, #jwtEncoder > .jwt-col:last-child > .jwt-section { flex: 1; min-height: 0; } #jwtDecoder > .jwt-col:first-child .jwt-panel, #jwtEncoder > .jwt-col:last-child .jwt-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; } #jwtDecoder > .jwt-col:first-child .jwt-panel__body, #jwtEncoder > .jwt-col:last-child .jwt-panel__body { flex: 1; min-height: 0; overflow: auto; } #jwtDecoder > .jwt-col:first-child .jwt-token-display, #jwtEncoder > .jwt-col:last-child .jwt-token-display { min-height: 100%; } .jwt-section__title { font-size: 15px; font-weight: 700; color: var(--jwt-text); } .jwt-section__muted { color: var(--jwt-muted); font-weight: 400; font-size: 13px; } .jwt-section__hint { color: var(--jwt-muted); font-size: 13px; margin: 0 0 10px; } .jwt-panel { background: var(--jwt-panel); border: 1px solid var(--jwt-border); border-radius: 10px; overflow: hidden; } .jwt-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--jwt-muted); background: var(--jwt-panel); border-bottom: 1px solid var(--jwt-border); min-height: 40px; } .jwt-panel__title { display: inline-flex; align-items: center; gap: 8px; color: var(--jwt-muted); font-size: 13px; font-weight: 500; } .jwt-panel__title svg { width: 14px; height: 14px; color: var(--jwt-muted); } .jwt-panel__head-right { display: flex; align-items: center; gap: 6px; } .jwt-sub-tabs { display: inline-flex; background: var(--jwt-bg); border-radius: 6px; padding: 2px; } .jwt-sub-tabs button { background: transparent; border: 0; color: var(--jwt-muted); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 4px; cursor: pointer; font-family: inherit; } .jwt-sub-tabs button.active { background: var(--jwt-panel-2); color: var(--jwt-text); box-shadow: 0 0 0 1px var(--jwt-border); } .jwt-icon-btn { background: transparent; border: 0; color: var(--jwt-muted); cursor: pointer; padding: 4px 6px; border-radius: 4px; font-size: 14px; display: inline-flex; } .jwt-icon-btn svg { width: 14px; height: 14px; } .jwt-icon-btn:hover { background: var(--jwt-panel-2); color: var(--jwt-text); } .jwt-panel__body { padding: 16px 18px; background: var(--jwt-panel); } .jwt-editor { width: 100%; min-height: 180px; background: transparent; border: 0; outline: 0; color: var(--jwt-text); font-family: var(--ff-mono); font-size: 13px; line-height: 1.55; resize: vertical; white-space: pre-wrap; word-break: break-all; } .jwt-token-display { min-height: 180px; font-family: var(--ff-mono); font-size: 13px; line-height: 1.55; word-break: break-all; white-space: pre-wrap; color: var(--jwt-text); outline: 0; caret-color: var(--jwt-text); } .jwt-seg-h { color: var(--jwt-h); } .jwt-seg-p { color: var(--jwt-p); } .jwt-seg-s { color: var(--jwt-s); } .jwt-seg-dot { color: var(--jwt-muted); } .jwt-token-display:empty::before { content: attr(data-placeholder); color: var(--jwt-muted); } .jwt-json { margin: 0; } .jwt-json .k { color: var(--jwt-key); } .jwt-json .s { color: var(--jwt-str); } .jwt-json .n { color: var(--jwt-num); text-decoration: underline; text-decoration-color: var(--border-dk); } .jwt-json .b { color: var(--jwt-bool); } .jwt-json .z { color: var(--jwt-null); } .jwt-json .p { color: var(--jwt-muted); } .jwt-claims { width: 100%; border-collapse: collapse; font-size: 12px; } .jwt-claims th, .jwt-claims td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--jwt-border); vertical-align: top; } .jwt-claims th { color: var(--jwt-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } .jwt-claims td.k { color: var(--jwt-key); font-family: var(--ff-mono); } .jwt-claims td.d { color: var(--jwt-muted); } .jwt-claims td.v { color: var(--jwt-text); font-family: var(--ff-mono); word-break: break-all; } .jwt-claims tr:last-child td { border-bottom: 0; } .jwt-status-below { display: flex; flex-direction: column; gap: 4px; padding: 10px 2px 0; font-size: 13px; } .jwt-status-below span { display: inline-flex; align-items: center; gap: 6px; } .jwt-status-below .ok { color: var(--jwt-ok); } .jwt-status-below .err { color: var(--jwt-err); } .jwt-status-below .warn { color: var(--jwt-warn); } .jwt-toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 11px; color: var(--jwt-muted); font-weight: 600; letter-spacing: .04em; cursor: pointer; } .jwt-toggle input { display: none; } .jwt-toggle__slider { width: 32px; height: 18px; background: var(--border-dk); border-radius: 999px; position: relative; transition: background .15s; } .jwt-toggle__slider::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--knob); border-radius: 50%; transition: transform .15s; } .jwt-toggle input:checked + .jwt-toggle__slider { background: var(--jwt-accent); } .jwt-toggle input:checked + .jwt-toggle__slider::after { transform: translateX(14px); background: var(--on-primary); } .jwt-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--primary-btn); color: var(--on-primary); padding: 10px 18px; border-radius: 8px; font-size: 13px; z-index: 9999; box-shadow: var(--shadow-md); } .jwt-toast.ok { background: var(--success); } .jwt-toast.err { background: var(--danger); } .jwt-panel.is-fs { position: fixed; inset: 20px; z-index: 9998; display: flex; flex-direction: column; } .jwt-panel.is-fs .jwt-panel__body { flex: 1; overflow: auto; } .jwt-intro { color: var(--jwt-muted); font-size: 13px; margin: 0 0 var(--sp-3); } body.page-welcome { background: var(--bg); } .ob { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .ob-top { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 792px; margin: 0 auto; padding: 20px 16px 12px; } .ob-brand { flex: none; margin-right: auto; } .ob-stepnote { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; } .ob-skip { min-height: 36px; } .ob-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; width: calc(100% - 32px); max-width: 760px; margin: 0 auto 16px; } .ob-progress span { height: 4px; border-radius: 4px; background: var(--border); transition: background .22s ease-out; } .ob-progress span.is-on { background: var(--primary); } .ob-panel { display: flex; flex-direction: column; width: calc(100% - 32px); max-width: 760px; margin: 0 auto 32px; background: var(--glow), var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .ob-body { padding: 28px 32px 16px; } .ob-step { animation: ob-in .22s ease-out both; } .ob-step[hidden] { display: none; } @keyframes ob-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .ob-step h1 { margin: 0 0 8px; font-size: 26px; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); } .ob-step h1:focus { outline: none; } .ob-lead { margin: 0 0 20px; max-width: 60ch; color: var(--muted); font-size: 15px; line-height: 1.55; } .ob-search { display: flex; align-items: center; gap: 8px; height: 44px; margin-bottom: 22px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--muted); transition: border-color .15s ease-out, box-shadow .15s ease-out; } .ob-search:focus-within { border-color: var(--primary); box-shadow: var(--ring); } .ob-search svg { width: 18px; height: 18px; flex: none; } .ob-search input { flex: 1; min-width: 0; border: 0; outline: none; box-shadow: none; background: transparent; color: var(--text); font: inherit; font-size: 15px; } .ob-group { margin-bottom: 22px; } .ob-group-label { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--text); font-size: 14px; font-weight: 700; } .ob-group-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--primary-bg); color: var(--primary); } .ob-group-icon svg { width: 15px; height: 15px; } .ob-chips { display: flex; flex-wrap: wrap; gap: 8px; } .ob-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease-out, border-color .15s ease-out, transform .1s ease-out; } .ob-chip:hover { border-color: var(--border-dk); background: var(--surface-2); } .ob-chip:active { transform: scale(.97); } .ob-chip:focus-visible { outline: none; box-shadow: var(--ring); } .ob-chip-check { display: inline-flex; width: 0; overflow: hidden; opacity: 0; color: var(--primary); transition: width .15s ease-out, opacity .15s ease-out, margin .15s ease-out; } .ob-chip-check svg { width: 15px; height: 15px; flex: none; } .ob-chip[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-bg); color: var(--primary-dk); } .ob-chip[aria-pressed="true"] .ob-chip-check { width: 15px; margin-right: 6px; opacity: 1; } .ob-list { display: flex; flex-direction: column; } .ob-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); } .ob-list > .ob-row:first-child, .ob-city + .ob-row { border-top: 0; } .ob-row-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 10px; font-size: 15px; font-weight: 700; } .ob-row-icon:not(.avatar) { background: var(--primary-bg); color: var(--primary); } .ob-row-icon.avatar { border-radius: 50%; } .ob-row-icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .ob-row-main { flex: 1; min-width: 0; } .ob-row-name { display: flex; align-items: center; gap: 4px; margin: 0; color: var(--text); font-size: 15px; font-weight: 700; } .ob-row-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ob-row-meta { margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; } .ob-row-bio { margin: 4px 0 0; color: var(--text); font-size: 13.5px; line-height: 1.45; } .ob-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 108px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--primary-btn); border-radius: var(--radius-btn); background: var(--primary-btn); color: var(--on-primary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s ease-out, border-color .15s ease-out, color .15s ease-out, transform .1s ease-out; } .ob-toggle:hover { background: var(--primary-btn-h); border-color: var(--primary-btn-h); } .ob-toggle:active { transform: scale(.97); } .ob-toggle:focus-visible { outline: none; box-shadow: var(--ring); } .ob-toggle svg { width: 15px; height: 15px; } .ob-toggle-on { display: none; align-items: center; gap: 6px; } .ob-toggle[aria-pressed="true"] { border-color: var(--border-dk); background: var(--surface); color: var(--text); } .ob-toggle[aria-pressed="true"]:hover { background: var(--surface-2); } .ob-toggle[aria-pressed="true"] .ob-toggle-off { display: none; } .ob-toggle[aria-pressed="true"] .ob-toggle-on { display: inline-flex; } .ob-state { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--success); font-size: 13.5px; font-weight: 700; } .ob-state svg { width: 15px; height: 15px; } .ob-sk-icon { width: 44px; height: 44px; flex: none; border-radius: 10px; } .ob-sk-btn { width: 108px; height: 40px; flex: none; border-radius: var(--radius-btn); } .ob-city { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 6px 8px 6px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); } .ob-city-icon { display: inline-flex; flex: none; color: var(--primary); } .ob-city-icon svg { width: 18px; height: 18px; } .ob-city-text { flex: 1; min-width: 0; margin: 0; color: var(--text); font-size: 13.5px; line-height: 1.45; } .ob-city-btn { flex: none; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--primary); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; } .ob-city-btn:hover { background: var(--primary-bg); } .ob-city-btn:focus-visible { outline: none; box-shadow: var(--ring); } .ob-empty { margin: 0; padding: 14px 0; color: var(--muted); font-size: 14px; line-height: 1.5; } .ob-error { padding: 24px 0; text-align: center; color: var(--muted); font-size: 14px; } .ob-error p { margin: 0 0 10px; } .ob-foot { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 14px 32px; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--surface); } .ob-foot[hidden], .ob-back[hidden], .ob-skip[hidden], .ob-later[hidden] { display: none; } .ob-back, .ob-next, .ob-later { min-height: 44px; justify-content: center; } .ob-back svg { width: 16px; height: 16px; } .ob-next { min-width: 132px; padding: 10px 22px; font-size: 15px; } .ob-hint { flex: 1; min-width: 0; margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.4; } .ob-done { padding: 28px 0 24px; text-align: center; } .ob-done .ob-lead { margin-left: auto; margin-right: auto; } .ob-done-check { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 50%; background: var(--success-bg); color: var(--success); animation: ob-pop .32s ease-out .08s both; } .ob-done-check svg { width: 30px; height: 30px; } @keyframes ob-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } .ob-go { min-height: 48px; padding: 12px 28px; font-size: 15px; justify-content: center; } .ob-done-more { margin: 18px 0 0; color: var(--muted); font-size: 13px; } .ob-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ob-cs { container: ocs / inline-size; } .ob-cs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 248px; grid-template-areas: "head head" "form preview" "form gets"; grid-template-rows: auto auto 1fr; column-gap: 28px; } .ob-cs-head { grid-area: head; } .ob-cs-form { grid-area: form; min-width: 0; container: ocsf / inline-size; } .ob-cs-preview { grid-area: preview; align-self: start; } .ob-cs-gets { grid-area: gets; } .ob-cs-eyebrow { display: inline-flex; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px; background: var(--primary-bg); color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .02em; } .ob-cs-label { margin: 0 0 8px; color: var(--text); font-size: 14px; font-weight: 700; } .ob-cs-ideas { margin-bottom: 20px; } .ob-cs-field { margin-bottom: 20px; } .ob-cs-input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; transition: border-color .15s ease-out, box-shadow .15s ease-out; } .ob-cs-input::placeholder { color: var(--muted); } .ob-cs-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .ob-cs-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 24px; margin: 8px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.4; } .ob-cs-status-icon { display: inline-flex; flex: none; } .ob-cs-status-icon svg { width: 16px; height: 16px; } .ob-cs-status-text { min-width: 0; overflow-wrap: anywhere; color: var(--text); font-weight: 600; } .ob-cs-status[data-state="idle"] .ob-cs-status-text { color: var(--muted); font-weight: 500; } .ob-cs-state { color: var(--muted); font-weight: 600; } .ob-cs-status[data-state="ok"] .ob-cs-status-icon, .ob-cs-status[data-state="ok"] .ob-cs-state { color: var(--success); } .ob-cs-status[data-state="taken"] .ob-cs-status-icon, .ob-cs-status[data-state="bad"] .ob-cs-status-icon { color: var(--danger); } .ob-cs-fix { min-height: 32px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--primary); font: inherit; font-size: 13px; font-weight: 700; text-align: left; overflow-wrap: anywhere; cursor: pointer; } .ob-cs-fix:hover { border-color: var(--primary); background: var(--primary-bg); } .ob-cs-fix:focus-visible { outline: none; box-shadow: var(--ring); } .ob-cs-help { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; } .ob-cs-slug { margin-top: 14px; } .ob-cs-slug[hidden] { display: none; } .ob-cs-slugrow { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); } .ob-cs-slugrow:focus-within { border-color: var(--primary); box-shadow: var(--ring); } .ob-cs-slugrow .ob-cs-input { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .ob-cs-affix { flex: none; padding: 0 12px; color: var(--muted); font-size: 14px; white-space: nowrap; } .ob-cs-slugrow .ob-cs-input + .ob-cs-affix { padding-left: 0; } .ob-cs-slugrow .ob-cs-affix + .ob-cs-input { padding-left: 0; } .ob-cs-swatches { display: grid; grid-template-columns: repeat(5, 44px); gap: 6px; } .ob-cs-swatch { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 4px; border: 2px solid transparent; border-radius: 50%; background: var(--sw) content-box; color: var(--on-ink); cursor: pointer; transition: border-color .15s ease-out, transform .1s ease-out; } .ob-cs-swatch svg { width: 16px; height: 16px; opacity: 0; transition: opacity .15s ease-out; } .ob-cs-swatch:hover { border-color: var(--border-dk); } .ob-cs-swatch:active { transform: scale(.94); } .ob-cs-swatch:focus-visible { outline: none; box-shadow: var(--ring); } .ob-cs-swatch[aria-checked="true"] { border-color: var(--primary); } .ob-cs-swatch[aria-checked="true"] svg { opacity: 1; } .ob-cs-preview { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); } .ob-cs-banner { height: 84px; transition: background .2s ease-out; } .ob-cs-pbody { position: relative; padding: 0 14px 14px; } .ob-cs-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-top: -28px; overflow: hidden; border: 3px solid var(--surface); border-radius: var(--radius); background: var(--cs-btn, var(--primary-btn)); color: var(--on-ink); font-size: 22px; font-weight: 700; } .ob-cs-icon img { display: block; width: 100%; height: 100%; object-fit: cover; } .ob-cs-pid { min-width: 0; } .ob-cs-pname { margin: 8px 0 0; overflow-wrap: anywhere; color: var(--text); font-size: 17px; font-weight: 700; line-height: 1.3; } .ob-cs-pname[data-empty] { color: var(--muted); } .ob-cs-paddr { margin: 2px 0 0; overflow-wrap: anywhere; color: var(--muted); font-size: 12.5px; } .ob-cs-pmeta { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; } .ob-cs-join { display: inline-flex; align-items: center; margin-top: 12px; padding: 6px 16px; border-radius: 999px; background: var(--cs-btn, var(--primary-btn)); color: var(--on-ink); font-size: 13px; font-weight: 700; transition: background .2s ease-out; } .ob-cs-gets { margin-top: 18px; } .ob-cs-gets ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .ob-cs-gets li { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: 13.5px; line-height: 1.45; } .ob-cs-gets li svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--primary); } .ob-cs-proof { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); } .ob-cs-proof-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .ob-cs-proof-item { display: flex; align-items: center; gap: 10px; min-width: 0; } .ob-cs-proof-main { display: flex; flex-direction: column; min-width: 0; } .ob-cs-proof-name { overflow: hidden; color: var(--text); font-size: 13.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .ob-cs-proof-meta { color: var(--muted); font-size: 12.5px; } @container ocs (max-width: 599.98px) { .ob-cs-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "preview" "form" "gets"; grid-template-rows: none; } .ob-cs-preview { margin-bottom: 20px; } .ob-cs-banner { height: 56px; } .ob-cs-pbody { display: flex; align-items: flex-end; gap: 12px; } .ob-cs-icon { flex: none; width: 52px; height: 52px; margin-top: -20px; } .ob-cs-pid { flex: 1; } .ob-cs-pname { margin-top: 0; font-size: 16px; } .ob-cs-pmeta { display: none; } .ob-cs-join { flex: none; margin-top: 0; } .ob-cs-gets { margin-top: 4px; } .ob-cs-proof-list { grid-template-columns: minmax(0, 1fr); } } @container ocsf (max-width: 393.98px) { .ob-cs-swatches { column-gap: 12px; row-gap: 8px; } } @media (prefers-reduced-motion: reduce) { .ob-step, .ob-done-check { animation: none; } .ob-chip, .ob-chip-check, .ob-toggle, .ob-progress span { transition: none; } .ob-chip:active, .ob-toggle:active { transform: none; } .ob-cs-input, .ob-cs-swatch, .ob-cs-swatch svg, .ob-cs-banner, .ob-cs-join { transition: none; } .ob-cs-swatch:active { transform: none; } } .seo-panel { margin: 14px 0 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); } .seo-bar { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 14px; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius); } .seo-bar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .seo-meter { flex: none; width: 44px; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; } .seo-meter-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--muted); transition: width .3s ease, background-color .3s ease; } .seo-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .seo-bar-title { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; } .seo-bar-title .svgi { width: 15px; height: 15px; color: var(--muted); } .seo-bar-score { font-weight: 700; } .seo-bar-sub { font-size: 12px; color: var(--muted); } .seo-bar-caret { flex: none; color: var(--muted); transition: transform .2s ease; } .seo-panel.is-open .seo-bar-caret { transform: rotate(180deg); } .seo-panel.is-checking .seo-meter-fill { opacity: .55; } .seo-panel.is-excellent .seo-meter-fill { background: var(--success); } .seo-panel.is-excellent .seo-bar-score { color: var(--success); } .seo-panel.is-good .seo-meter-fill { background: var(--primary); } .seo-panel.is-good .seo-bar-score { color: var(--primary-dk); } .seo-panel.is-fair .seo-meter-fill { background: var(--warning); } .seo-panel.is-fair .seo-bar-score { color: var(--warning); } .seo-panel.is-needs_work .seo-meter-fill { background: var(--danger); } .seo-panel.is-needs_work .seo-bar-score { color: var(--danger); } :root[data-theme="dark"] .seo-panel.is-good .seo-bar-score { color: var(--primary); } .seo-body { padding: 0 14px 12px; } .seo-intro { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--secondary-bg); color: var(--text); font-size: 13px; } .seo-intro p { margin: 0; flex: 1 1 240px; } .seo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .seo-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); } .seo-level { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .seo-item--fix .seo-level { background: var(--danger-bg); color: var(--danger); } .seo-item--improve .seo-level { background: var(--warning-bg); color: var(--warning); } .seo-item--tip .seo-level { background: var(--secondary-bg); color: var(--secondary-text); } .seo-item-main { min-width: 0; } .seo-msg { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); } .seo-why { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); } .seo-go { background: none; border: 0; padding: 4px 0; min-height: 32px; color: var(--primary-dk); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } :root[data-theme="dark"] .seo-go { color: var(--primary); } .seo-more { margin-top: 8px; background: none; border: 0; padding: 6px 0; min-height: 36px; color: var(--primary-dk); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } :root[data-theme="dark"] .seo-more { color: var(--primary); } .seo-done { margin-top: 8px; font-size: 13px; color: var(--muted); } .seo-done summary { cursor: pointer; padding: 6px 0; min-height: 32px; } .seo-done-list { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; } .seo-pill { position: relative; display: inline-block; vertical-align: middle; } .seo-pill > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); } .seo-pill > summary::-webkit-details-marker { display: none; } .seo-pill > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .seo-pill--excellent > summary { color: var(--success); } .seo-pill--good > summary { color: var(--primary-dk); } .seo-pill--fair > summary { color: var(--warning); } .seo-pill--needs_work > summary { color: var(--danger); } .seo-pill--hidden > summary { color: var(--muted); font-weight: 600; } :root[data-theme="dark"] .seo-pill--good > summary { color: var(--primary); } .seo-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(320px, 80vw); padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); font-size: 13px; color: var(--text); text-align: left; white-space: normal; } .seo-pop-head { margin: 0 0 6px; display: flex; flex-direction: column; gap: 2px; } .seo-pop-head span { color: var(--muted); font-size: 12px; } .seo-pop-note { margin: 0 0 8px; color: var(--muted); } .seo-pop-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .seo-level--fix { background: var(--danger-bg); color: var(--danger); } .seo-level--improve { background: var(--warning-bg); color: var(--warning); } .seo-pop .seo-level { font-size: 10px; margin-right: 4px; } .seo-pop-link { font-weight: 600; color: var(--primary-dk); } :root[data-theme="dark"] .seo-pop-link { color: var(--primary); } .seo-report { margin: 12px 0 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); } .seo-report > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; cursor: pointer; border-radius: var(--radius); } .seo-report > summary::-webkit-details-marker { display: none; } .seo-report > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .seo-report[open] .seo-bar-caret { transform: rotate(180deg); } .seo-report--excellent .seo-meter-fill { background: var(--success); } .seo-report--excellent .seo-bar-score { color: var(--success); } .seo-report--good .seo-meter-fill { background: var(--primary); } .seo-report--good .seo-bar-score { color: var(--primary-dk); } .seo-report--fair .seo-meter-fill { background: var(--warning); } .seo-report--fair .seo-bar-score { color: var(--warning); } .seo-report--needs_work .seo-meter-fill { background: var(--danger); } .seo-report--needs_work .seo-bar-score { color: var(--danger); } :root[data-theme="dark"] .seo-report--good .seo-bar-score { color: var(--primary); } .seo-report-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; } .seo-report-note { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text); padding: 10px 12px; border-radius: var(--radius-sm); background: var(--primary-bg); } .seo-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .seo-preview-label { margin: 0 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .seo-google { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); max-width: 600px; } .seo-google-site { font-size: 13px; color: var(--text); } .seo-google-url { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seo-google-title { font-size: 18px; line-height: 1.3; color: var(--google-link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seo-google-desc { font-size: 13px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .seo-ai { margin: 0; padding: 12px 14px; border-left: 3px solid var(--tertiary-text); border-radius: var(--radius-sm); background: var(--surface); font-size: 14px; line-height: 1.5; color: var(--text); } .seo-profile-tips ul { margin: 0 0 6px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; } .seo-profile-tips .seo-why { display: block; } .seo-report-foot { margin: 0; font-size: 12px; color: var(--muted); } .seo-report-foot a { color: var(--primary-dk); font-weight: 600; } :root[data-theme="dark"] .seo-report-foot a { color: var(--primary); } .seo-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; } .seo-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; margin: 0; } .seo-stat-n { font-size: 22px; font-weight: 700; color: var(--text); } .seo-stat-l { font-size: 12px; color: var(--muted); } .seo-stat--excellent .seo-stat-n { color: var(--success); } .seo-stat--good .seo-stat-n { color: var(--primary-dk); } .seo-stat--fair .seo-stat-n { color: var(--warning); } .seo-stat--needs_work .seo-stat-n { color: var(--danger); } :root[data-theme="dark"] .seo-stat--good .seo-stat-n { color: var(--primary); } .seo-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .seo-filter { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; } .seo-filter.is-on { background: var(--primary-btn); border-color: var(--primary-btn); color: var(--on-primary); } .seo-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .seo-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0; } .seo-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .seo-row-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .seo-row-title { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seo-row-note { font-size: 13px; color: var(--muted); } .seo-row-score { flex: none; display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--muted); } .seo-row-score b { font-size: 18px; } .seo-row-score--excellent b { color: var(--success); } .seo-row-score--good b { color: var(--primary-dk); } .seo-row-score--fair b { color: var(--warning); } .seo-row-score--needs_work b { color: var(--danger); } :root[data-theme="dark"] .seo-row-score--good b { color: var(--primary); } .seo-empty { display: flex; gap: 10px; align-items: center; color: var(--muted); } .seo-empty p { margin: 0; } .seo-pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; } .inline-composer { flex-wrap: wrap; } .inline-composer > .seo-panel { flex: 1 0 100%; margin: 2px 0 0; } .seo-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ix-card { margin-bottom: 14px; scroll-margin-top: 80px; } .ix-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--primary-bg); color: var(--primary); } .ix-badge svg { width: 20px; height: 20px; } .ix-card.is-on .ix-badge { background: var(--success-bg); color: var(--success); } .ix-card.is-on .clx-bar span { background: var(--success); } .ix-lead { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.5; } .ix-improve { margin-bottom: 4px; } .ix-score { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 38px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--warning-bg); color: var(--warning); font-size: 13px; font-weight: 700; } .ix-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; } .ix-actions .btn { min-height: 40px; padding: 8px 14px; font-size: 13.5px; } .ix-actions .btn svg { width: 15px; height: 15px; } .ix-rules { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .ix-rule-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.45; color: var(--text); } .ix-rule-list li { display: flex; gap: 8px; align-items: flex-start; } .ix-rule-list svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); } .ix-card.is-on .ix-rule-list svg { color: var(--success); } .ix-allow { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); font-size: 13px; line-height: 1.45; } .ix-allow svg { flex: none; width: 15px; height: 15px; margin-top: 2px; } .ix-allow--on svg { color: var(--success); } .ix-allow--off svg { color: var(--secondary-text); } .ix-allow a { color: var(--primary-dk); font-weight: 600; } :root[data-theme="dark"] .ix-allow a { color: var(--primary); } .inline-composer > .ix-allow { flex: 1 0 100%; } .ix-home .clx-bar { margin: 0 0 12px; } @media (prefers-reduced-motion: reduce) { .seo-meter-fill, .seo-bar-caret { transition: none; } } .ts-entry { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; } .ts-entry p { margin: 0; color: var(--muted); font-size: 14px; min-width: 0; flex: 1 1 220px; } .ts-entry .btn { min-height: 44px; } .ts-tlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ts-tcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .ts-tcard-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .ts-tcard-top .ts-pill .svgi { width: 12px; height: 12px; } .ts-tcard-closed { font-size: 12px; color: var(--muted); } .ts-tcard-comm { color: var(--muted); font-weight: 600; overflow-wrap: anywhere; } .ts-tcard-comm:hover { color: var(--text); } .ts-tcard-title { margin: 2px 0 0; font-size: 17px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; } .ts-tcard-title a { color: var(--text); } .ts-tcard-title a:hover { color: var(--primary); } .ts-tcard-facts { margin: 0; font-family: var(--ff-mono); font-size: 12.5px; color: var(--muted); } .ts-tcard-you { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; } .ts-tcard-you a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; } .ts-tcard-you .svgi { width: 14px; height: 14px; } .ts-tcard-muted { color: var(--muted); } .ts-feedstrip { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; } .ts-feedstrip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ts-feedstrip-head h2 { margin: 0; font-size: 14px; font-weight: 700; } .ts-feedstrip-head a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); min-height: 32px; } .ts-feedstrip-head a:hover { color: var(--text); } .ts-feedstrip-head .svgi { width: 14px; height: 14px; } .ts-mine { display: flex; flex-direction: column; gap: 10px; } .ts-mine-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; } .ts-mine-row h3 { margin: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; } .ts-mine-row h3 a { color: var(--text); } .ts-mine-meta { grid-column: 1; margin: 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; } .ts-mine-score { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-family: var(--ff-mono); font-size: 14px; font-weight: 600; } .ts-mine-score a { display: inline-flex; align-items: center; min-height: 32px; font-family: var(--ff-sans); font-size: 13px; font-weight: 600; } .ts-shell { max-width: 1100px; margin: 0 auto; padding: 0 20px 56px; } .ts-shell [hidden] { display: none !important; } body.ts-player-page .wa-fab, body.ts-player-page .cwa, body.ts-builder-page .wa-fab, body.ts-builder-page .cwa { display: none; } .ts-bar { position: sticky; top: 64px; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: 62px; margin-bottom: 16px; background: var(--bg); border-bottom: 1px solid var(--border); } .ts-back { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius); color: var(--text); } .ts-back:hover { background: var(--surface-2); } .ts-back:focus-visible { outline: none; box-shadow: var(--ring); } .ts-back .svgi { width: 20px; height: 20px; } .ts-bar-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .ts-bar-text h1 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ts-status { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ts-status:empty { display: none; } .ts-actions { display: flex; gap: 8px; flex: none; } .ts-actions .btn { min-height: 40px; } .ts-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 16px; } .ts-card > h2 { margin: 0 0 4px; font-size: 16px; font-weight: 700; } .ts-help { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--muted); } .ts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .ts-grid .ts-wide { grid-column: 1 / -1; } .ts-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ts-field > span { font-size: 13px; font-weight: 600; color: var(--text); } .ts-field small { font-size: 12.5px; color: var(--muted); } .ts-input, .ts-select, .ts-textarea { width: 100%; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--border-dk); border-radius: var(--radius-sm); } .ts-textarea { resize: vertical; min-height: 72px; line-height: 1.5; } .ts-input:focus, .ts-select:focus, .ts-textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .ts-check { display: flex; align-items: center; gap: 8px; font-size: 14px; min-height: 40px; cursor: pointer; } .ts-check input { width: 18px; height: 18px; accent-color: var(--primary); } .ts-notice { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 14px; line-height: 1.45; } .ts-notice .svgi { width: 18px; height: 18px; flex: none; margin-top: 1px; } .ts-notice.is-warn { border-color: var(--warning); background: var(--warning-bg); color: var(--warning); } .ts-errors { border: 1px solid var(--danger); background: var(--danger-bg); color: var(--danger); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 16px; font-size: 14px; } .ts-errors ul { margin: 6px 0 0; padding-left: 18px; } .ts-errors li + li { margin-top: 2px; } .ts-qtools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; } .ts-qcount { margin-left: auto; font-family: var(--ff-mono); font-size: 13px; color: var(--muted); } .ts-q { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; background: var(--surface); } .ts-q.has-error { border-color: var(--danger); } .ts-q-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .ts-q-num { font-family: var(--ff-mono); font-size: 13px; font-weight: 600; color: var(--muted); margin-right: auto; } .ts-q-head .ts-select { width: auto; max-width: 180px; padding: 6px 10px; font-size: 13px; } .ts-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); cursor: pointer; } .ts-icon-btn:hover { color: var(--text); background: var(--surface-2); } .ts-icon-btn:focus-visible { outline: none; box-shadow: var(--ring); } .ts-icon-btn:disabled { opacity: .4; cursor: default; } .ts-icon-btn .svgi { width: 16px; height: 16px; } .ts-opts { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } .ts-sec-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; } .ts-sec-list:empty { display: none; } .ts-opt { display: flex; align-items: center; gap: 8px; } .ts-opt input[type="radio"] { width: 20px; height: 20px; flex: none; accent-color: var(--success); cursor: pointer; } .ts-opt:has(input[type="radio"]:checked) .ts-input { border-color: var(--success); background: var(--success-bg); } .ts-more { margin-top: 6px; } .ts-more > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 6px 0; } .ts-more[open] > summary { margin-bottom: 8px; } .ts-import-table { width: 100%; border-collapse: collapse; font-size: 13px; } .ts-import-table th, .ts-import-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; } .ts-import-table .is-bad td { color: var(--danger); } .ts-mcq-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .ts-mcq-row p { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 14px; overflow-wrap: anywhere; } .ts-dialog:not([hidden]) { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--scrim); } .ts-dialog-box { width: 100%; max-width: 640px; max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; } .ts-dialog-box h2 { margin: 0 0 8px; font-size: 18px; } .ts-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; } .ts-landing h1 { font-family: var(--ff-serif); font-size: 32px; line-height: 1.15; margin: 10px 0 8px; font-weight: 600; } .ts-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .ts-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--pastel-violet-bg); color: var(--pastel-violet-text); } .ts-pill.is-draft { background: var(--pastel-yellow-bg); color: var(--pastel-yellow-text); } .ts-pill.is-pass { background: var(--success-bg); color: var(--success); } .ts-pill.is-fail { background: var(--danger-bg); color: var(--danger); } .ts-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 18px 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--border); } .ts-fact { background: var(--surface); padding: 12px 14px; min-width: 0; } .ts-fact dt { font-family: var(--ff-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .ts-fact dd { margin: 4px 0 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; } .ts-desc { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; } .ts-instructions { white-space: pre-wrap; font-size: 14px; line-height: 1.55; margin: 0; } .ts-privacy { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 14px 0 0; } .ts-privacy .svgi { width: 16px; height: 16px; flex: none; } .ts-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; } .ts-cta .btn { min-height: 44px; padding: 10px 20px; font-size: 15px; } .ts-cta .ts-take { min-height: 44px; padding: 0 6px; color: var(--muted); } .ts-cta .ts-take:hover { color: var(--text); } .ts-cta .ts-take .svgi { width: 14px; height: 14px; } .ts-runs-note { margin: 10px 0 0; font-size: 13.5px; } .ts-dialog-box.is-confirm { max-width: 440px; } .ts-table { width: 100%; border-collapse: collapse; font-size: 14px; } .ts-table th, .ts-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); } .ts-table th { font-family: var(--ff-mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .ts-list { list-style: none; margin: 0; padding: 0; } .ts-list li { padding: 10px 0; border-bottom: 1px solid var(--border); } .ts-list li:last-child { border-bottom: 0; } .ts-play { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; } .ts-timer { font-family: var(--ff-mono); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .ts-timer.is-low { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); } .ts-sections { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; } .ts-sections button { flex: none; min-height: 36px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; } .ts-sections button[aria-selected="true"] { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); } .ts-qcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; } .ts-qcard-head { display: flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: 13px; color: var(--muted); margin-bottom: 10px; } .ts-qcard-head .ts-marking { margin-left: auto; } .ts-qbody { font-size: 17px; line-height: 1.55; margin: 0 0 16px; white-space: pre-wrap; overflow-wrap: anywhere; } .ts-qimg { display: block; max-width: 100%; max-height: 360px; margin: 0 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); } .ts-options .option-row { min-height: 48px; } .ts-options .option-row .option-key { flex: none; font-family: var(--ff-mono); font-size: 13px; color: var(--muted); margin-right: 10px; position: relative; } .ts-play-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .ts-play-actions .btn { min-height: 44px; } .ts-play-actions .ts-next { margin-left: auto; } .ts-palette { position: sticky; top: 142px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; } .ts-palette h2 { margin: 0 0 10px; font-size: 14px; } .ts-pgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-height: 46vh; overflow: auto; padding: 2px; } .ts-pbtn { position: relative; min-height: 40px; border: 1px solid var(--border-dk); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .ts-pbtn:focus-visible { outline: none; box-shadow: var(--ring); } .ts-pbtn.is-unanswered { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); } .ts-pbtn.is-answered { background: var(--success-bg); border-color: var(--success); color: var(--success); } .ts-pbtn.is-marked { background: var(--tertiary-bg); border-color: var(--tertiary); color: var(--tertiary-text); } .ts-pbtn.is-marked.is-answered-too::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--success); } .ts-pbtn.is-current { box-shadow: 0 0 0 2px var(--text); } .ts-legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 12.5px; color: var(--muted); } .ts-legend li { display: flex; align-items: center; gap: 6px; } .ts-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border-dk); background: var(--surface); } .ts-legend i.is-answered { background: var(--success-bg); border-color: var(--success); } .ts-legend i.is-unanswered { background: var(--danger-bg); border-color: var(--danger); } .ts-legend i.is-marked { background: var(--tertiary-bg); border-color: var(--tertiary); } .ts-palette-toggle { display: none; } .ts-save-state { font-size: 12.5px; color: var(--muted); } .ts-summary { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ts-summary li { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; color: var(--muted); } .ts-summary b { display: block; font-size: 20px; color: var(--text); } .ts-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 8px 0 4px; } .ts-score strong { font-family: var(--ff-serif); font-size: 44px; line-height: 1; font-weight: 600; } .ts-score span { font-size: 15px; color: var(--muted); } .ts-bars { display: flex; flex-direction: column; gap: 10px; } .ts-barrow { display: grid; grid-template-columns: minmax(90px, 180px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13.5px; } .ts-barrow > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ts-meter { height: 8px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; } .ts-meter > i { display: block; height: 100%; background: var(--primary); } .ts-barrow b { font-family: var(--ff-mono); font-size: 12.5px; font-weight: 500; color: var(--muted); } .ts-review { border-top: 1px solid var(--border); padding: 18px 0; } .ts-review:first-of-type { border-top: 0; padding-top: 4px; } .ts-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12.5px; color: var(--muted); } .ts-review-head .ts-q-num { margin-right: 4px; } .ts-review .option-row { cursor: default; } .ts-review-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 13px; color: var(--muted); } .ts-why { margin-top: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } .ts-result { font-weight: 600; } .ts-result.is-correct { color: var(--success); } .ts-result.is-wrong { color: var(--danger); } .ts-tabs { display: flex; gap: 4px; margin: 16px 0 0; border-bottom: 1px solid var(--border); overflow-x: auto; } .ts-tabs a { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 14px; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .ts-tabs a:hover { color: var(--text); } .ts-tabs a.is-active { color: var(--text); border-bottom-color: var(--text); } .ts-tabs a:focus-visible { outline: none; box-shadow: var(--ring); } .ts-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--text); color: var(--bg); font-size: 11.5px; font-weight: 700; } .ts-subhead { margin: 4px 0 10px; font-size: 14px; font-weight: 600; } .ts-chart { color: var(--text); } .ts-chart .sp-chart { display: block; width: 100%; height: auto; max-height: 260px; } .ts-chart .sp-grid { stroke: var(--border); stroke-width: 1; } .ts-chart .sp-axis { fill: var(--muted); font-size: 11px; } .ts-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 14px; } .ts-filters .ts-field { flex: 1 1 200px; } .ts-filters .btn { min-height: 42px; } .ts-scroll { overflow-x: auto; } .ts-ptable td, .ts-lb td { white-space: nowrap; } .ts-ptable td:nth-child(2) { white-space: normal; min-width: 140px; } .ts-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; } .ts-pager .ts-help { margin: 0; } .ts-qa.is-dropped .ts-qbody { color: var(--muted); text-decoration: line-through; } .ts-qstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 0 14px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--border); } .ts-qstats > div { background: var(--surface); padding: 10px 12px; min-width: 0; } .ts-qstats dt { font-family: var(--ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .ts-qstats dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; } .ts-optrow > span:first-child b { font-family: var(--ff-mono); font-weight: 600; margin-right: 4px; } .ts-optrow.is-key > span:first-child, .ts-optrow.is-key > b { color: var(--success); } .ts-optrow.is-key .ts-meter > i { background: var(--success); } .ts-flags { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--border); } .ts-flags li { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .ts-flags li p { margin: 4px 0 0; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; } .ts-flag-actions { display: flex; gap: 6px; flex: none; } .ts-regrade { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; } .ts-builder-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; } .ts-builder-links .ts-help { margin: 0 auto 0 0; } .ts-lb tr.is-me td { font-weight: 700; background: var(--surface-2); } .ts-lb-gap td { padding: 2px; border-bottom: 1px dashed var(--border); } .ts-linkbtn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .ts-linkbtn:hover { color: var(--muted); } .ts-linkbtn:focus-visible { outline: none; box-shadow: var(--ring); } .ts-linkbtn:disabled { cursor: default; color: var(--muted); } .ts-flagged { display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-weight: 600; } .ts-preview-q { margin-bottom: 16px; } .ts-preview .option-row { cursor: default; } .ts-pick { max-width: 640px; margin-inline: auto; } .ts-pick h1 { margin: 0 0 6px; font-size: 24px; } .ts-pick-lead { margin: 0 0 14px; color: var(--muted); font-size: 15px; line-height: 1.5; } .ts-pick-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); font-size: 14px; } .ts-pick-note .svgi { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; } .ts-pick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .ts-pick-steps { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0 0 16px; padding: 0; color: var(--muted); font-size: 13px; } .ts-pick-steps li { display: inline-flex; align-items: center; gap: 6px; } .ts-pick-steps span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); font-size: 11px; font-weight: 700; } .ts-pick-steps .is-now { color: var(--text); font-weight: 600; } .ts-pick-steps .is-now span { background: var(--text); border-color: var(--text); color: var(--surface); } .ts-pick-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; margin: 0 0 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--muted); } .ts-pick-search { transition: border-color .15s, box-shadow .15s, background .15s; cursor: text; } .ts-pick-search:hover { border-color: var(--border-dk); } .ts-pick-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .08); } .ts-pick-search:focus-within .svgi { color: var(--primary); } .ts-pick-search .svgi { width: 16px; height: 16px; flex-shrink: 0; } .ts-pick-search input, .ts-pick-search input:hover, .ts-pick-search input:focus, .ts-pick-search input:focus-visible { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; color: var(--text); font: inherit; -webkit-appearance: none; appearance: none; } .ts-pick-search input::-webkit-search-decoration { -webkit-appearance: none; } .ts-pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ts-pick-list > li[hidden] { display: none; } .ts-pick-item { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: background .15s ease, border-color .15s ease; } .ts-pick-item:hover { background: var(--surface-2); border-color: var(--text); text-decoration: none; } .ts-pick-item:focus-visible { outline: none; box-shadow: var(--ring); } .ts-pick-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--pastel-gray-bg); color: var(--pastel-gray-text); font-size: 14px; font-weight: 700; } .ts-pick-ico > img, .ts-pick-ico > .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } .ts-pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ts-pick-name { font-weight: 600; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ts-pick-meta { color: var(--muted); font-size: 13px; } .ts-pick-go { color: var(--muted); display: inline-flex; flex-shrink: 0; } .ts-pick-go .svgi { width: 18px; height: 18px; } .ts-pick-empty { margin: 12px 0 0; color: var(--muted); font-size: 14px; text-align: center; } .tsd { min-width: 0; } .tsd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .tsd-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 24px 20px; margin: 0 0 14px; } .tsd-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 8px; font-size: 13px; color: var(--muted); } .tsd-crumbs a { color: var(--muted); font-weight: 500; } .tsd-crumbs a:hover { color: var(--text); } .tsd-crumbs .svgi { width: 12px; height: 12px; } .tsd-crumbs span { color: var(--text); font-weight: 600; } .tsd-title { margin: 0 0 8px; font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; } .tsd-lead { margin: 0 0 16px; max-width: 62ch; color: var(--muted); font-size: 15.5px; line-height: 1.55; } .tsd-search { display: flex; gap: 8px; align-items: stretch; margin: 0; max-width: 640px; } .tsd-search-box { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--border-dk); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); cursor: text; transition: border-color .15s ease, box-shadow .15s ease; } .tsd-search-box:hover { border-color: var(--text); } .tsd-search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .08); } .tsd-search-box:focus-within .svgi { color: var(--primary); } .tsd-search-box .svgi { width: 18px; height: 18px; flex-shrink: 0; } .tsd-search-box input, .tsd-search-box input:hover, .tsd-search-box input:focus, .tsd-search-box input:focus-visible { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; color: var(--text); font: inherit; font-size: 15px; -webkit-appearance: none; appearance: none; } .tsd-search-box input::placeholder { color: var(--muted); } .tsd-search-box input::-webkit-search-decoration { -webkit-appearance: none; } .tsd-search-btn { min-height: 46px; padding: 0 18px; } .tsd-hero-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; } .tsd-hero-foot:empty { display: none; } .tsd-stats { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; font-family: var(--ff-mono); font-size: 12.5px; color: var(--muted); } .tsd-stats span + span::before { content: "\00b7"; margin: 0 8px; } .tsd-make { min-height: 40px; } .tsd-signin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: 14px; color: var(--text); } .tsd-signin > .svgi { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; } .tsd-signin span { flex: 1 1 220px; min-width: 0; } .tsd-signin .btn { min-height: 36px; } .tsd-h2 { margin: 0 0 10px; font-family: var(--ff-sans); font-size: 15px; font-weight: 700; letter-spacing: 0; } .tsd-continue { margin: 0 0 16px; } .tsd-continue-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; } .tsd-cont { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius); } .tsd-cont-main { flex: 1; min-width: 0; } .tsd-cont-title { margin: 0 0 4px; font-size: 15px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tsd-cont-title a { color: var(--text); } .tsd-cont-title a:hover { color: var(--primary); } .tsd-cont-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 0 0 8px; font-size: 12.5px; color: var(--muted); } .tsd-cont-time { display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-weight: 600; } .tsd-cont-time .svgi { width: 13px; height: 13px; } .tsd-cont-bar { height: 4px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; } .tsd-cont-bar > span { display: block; height: 100%; background: var(--primary-btn); } .tsd-cont-go { flex-shrink: 0; min-height: 44px; } .tsd-stick-sentinel { height: 1px; margin: 0; } .tsd-bar { position: sticky; top: 64px; z-index: 20; margin: 0 0 6px; padding: 6px 0 8px; background: var(--bg); } .tsd-bar.is-stuck { border-bottom: 1px solid var(--border); } .tsd-chiprow { display: flex; align-items: center; gap: 8px; min-width: 0; } .tsd-chips-wrap { flex: 1; min-width: 0; } .tsd-chips { display: flex; gap: 8px; overflow-x: auto; padding: 3px 2px; margin: 0; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; } .tsd-chips::-webkit-scrollbar { display: none; } .tsd-chip, .tsd-chip-filter { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600; white-space: nowrap; scroll-snap-align: start; text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease; } .tsd-chip:hover, .tsd-chip-filter:hover { border-color: var(--primary); background: var(--primary-bg); color: var(--primary-dk); text-decoration: none; } .tsd-chip:focus-visible, .tsd-chip-filter:focus-visible { outline: none; box-shadow: var(--ring); } .tsd-chip-n { font-family: var(--ff-mono); font-size: 12px; font-weight: 500; color: var(--muted); } .tsd-chip:hover .tsd-chip-n { color: inherit; } .tsd-chip.active { background: var(--primary-btn); border-color: var(--primary-btn); color: var(--on-primary); } .tsd-chip.active .tsd-chip-n { color: var(--on-primary); opacity: .85; } .tsd-chip.active:hover { background: var(--primary-btn-h); border-color: var(--primary-btn-h); color: var(--on-primary); } .tsd-chip-filter { display: none; } .tsd-chip-filter .svgi { width: 16px; height: 16px; } .tsd-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--primary-btn); color: var(--on-primary); font-size: 11.5px; font-weight: 700; } .tsd-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 0; } .tsd-sheet-head { display: none; } .tsd-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; flex: 1; min-width: 0; } .tsd-field { display: inline-flex; align-items: center; margin: 0; } .tsd-field-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .tsd-select { height: 40px; font-weight: 500; } .tsd-sort { margin-left: auto; } .tsd-check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--border-dk); border-radius: 10px; background: var(--surface); font-size: 14px; font-weight: 500; cursor: pointer; } .tsd-check:hover { border-color: var(--primary); } .tsd-check:has(input:checked) { border-color: var(--primary); background: var(--primary-bg); color: var(--primary-dk); } .tsd-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary-btn); } .tsd-sheet-actions { display: flex; gap: 8px; } .tsd-filters.is-live .tsd-sheet-actions { display: none; } .tsd-scrim { position: fixed; inset: 0; z-index: 1; background: var(--scrim); } .tsd-scrim[hidden] { display: none; } .tsd-results { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 12px; } .tsd-resline { margin: 0; font-size: 14px; color: var(--muted); } .tsd-resline strong { color: var(--text); font-weight: 700; } .tsd-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; } .tsd-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px 0 12px; border-radius: var(--radius-pill); background: var(--primary-bg); color: var(--primary-dk); font-size: 13px; font-weight: 600; text-decoration: none; max-width: 260px; } .tsd-pill:hover { background: var(--pastel-violet-bg); color: var(--primary-dk); text-decoration: none; } .tsd-pill:focus-visible, .tsd-clearall:focus-visible { outline: none; box-shadow: var(--ring); } .tsd-pill .svgi { width: 14px; height: 14px; flex-shrink: 0; } .tsd-clearall { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; border-radius: var(--radius-btn); font-size: 13px; font-weight: 600; color: var(--text); } .tsd-clearall:hover { color: var(--primary); } .tsd-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .ts-tcard.is-dir { gap: 8px; padding: 16px 16px 14px; } .ts-tcard.is-dir .ts-tcard-top:empty { display: none; } .ts-tcard.is-dir .ts-tcard-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ts-tcard-facts.is-split { display: flex; flex-wrap: wrap; gap: 2px 0; } .ts-tcard-facts.is-split span { white-space: nowrap; } .ts-tcard-facts.is-split span:not(:last-child)::after { content: "\00b7"; margin: 0 7px; } .ts-tcard-by { align-self: flex-start; max-width: 100%; font-size: 13px; font-weight: 500; color: var(--muted); } .ts-tcard-by:hover { color: var(--text); } .ts-tcard-byname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ts-tcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); } .ts-tcard-foot .ts-tcard-you { margin: 0; min-width: 0; font-size: 13.5px; } .ts-tcard-foot .ts-tcard-you strong { font-weight: 700; } .ts-tcard-go { flex-shrink: 0; min-height: 40px; justify-content: center; } .ts-tcard-go .svgi { width: 15px; height: 15px; } .ts-tcard.is-feed { margin-bottom: 12px; padding: 16px 18px 14px; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: border-color .15s; } .ts-tcard.is-feed:hover { border-color: var(--border-dk); box-shadow: var(--shadow); } .ts-tcard.is-feed .feed-reason { margin: 0 0 2px; } .tsd-empty { padding: 36px 24px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .tsd-empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 10px; border-radius: var(--radius); background: var(--surface-2); color: var(--muted); } .tsd-empty-ico .svgi { width: 24px; height: 24px; } .tsd-empty h2 { margin: 0 0 6px; font-family: var(--ff-sans); font-size: 18px; font-weight: 700; } .tsd-empty p { margin: 0 auto 14px; max-width: 44ch; color: var(--muted); font-size: 14.5px; } .tsd-empty-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; } .tsd-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .tsd-empty-actions .btn { min-height: 44px; } .ts-dir-link { margin: 14px 0 0; font-size: 14px; } .ts-dir-link a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; } .ts-dir-link .svgi { width: 16px; height: 16px; } .ts-more-dir { margin: 4px 0 0; } .ts-more-dir .btn { min-height: 44px; } .ts-mine-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 10px; } .ts-mine-head .ts-help { margin: 0; flex: 1 1 240px; } .ts-mine-head .btn { min-height: 44px; } .ts-mine-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .ts-mine-empty p { margin: 0; color: var(--muted); } .ts-mine-empty .btn { min-height: 44px; } [data-ts-lang="en"] .ts-l-hi, [data-ts-lang="hi"] .ts-l-en { display: none; } .ts-qbody [lang="hi"], .ts-qbody:lang(hi), .ts-otext:lang(hi), .ts-why [lang="hi"] { line-height: 1.75; } .ts-lang { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); } .ts-lang button { min-height: 36px; padding: 4px 16px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .ts-lang button[aria-pressed="true"] { background: var(--text); color: var(--surface); } .ts-lang button:focus-visible { outline: none; box-shadow: var(--ring); } .ts-langbar { display: flex; justify-content: flex-end; margin: 0 0 12px; } .ts-preview .ts-lang, .ts-review-lang { margin: 8px 0 0; } .detail-card > .ts-lang { margin: 0 0 14px; } .ts-imgbtn { display: block; max-width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-sm); } .ts-imgbtn:focus-visible { outline: none; box-shadow: var(--ring); } .ts-imgbtn[hidden] { display: none; } .ts-oimg { display: block; max-width: min(100%, 260px); max-height: 180px; height: auto; margin: 2px 0 6px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--paper); } .ts-imgbtn.is-mini { display: inline-block; vertical-align: middle; margin: 0 6px 0 0; } .ts-imgbtn.is-mini .ts-oimg { max-width: 96px; max-height: 56px; margin: 0; } .ts-qimg { background: var(--paper); } .ts-otext { display: block; } .ts-optline { display: flex; align-items: flex-start; gap: 8px; } .ts-optline .option-row { flex: 1 1 auto; min-width: 0; } .ts-optline + .ts-optline { margin-top: 8px; } .ts-zoom-btn { flex: none; width: 40px; height: 40px; margin-top: 4px; border: 1px solid var(--border); } .ts-zoom-box { position: relative; margin: 0; max-width: min(96vw, 1100px); } .ts-zoom-box img { display: block; max-width: 100%; max-height: 86vh; border-radius: var(--radius); background: var(--paper); } .ts-zoom-close { position: absolute; top: 8px; right: 8px; background: var(--surface); border: 1px solid var(--border); } .ts-tex.is-display { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 4px 0; } .ts-tex-preview { margin: 6px 0 0; padding: 8px 10px; border: 1px dashed var(--border-dk); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 15px; white-space: pre-wrap; overflow-x: auto; } .ts-tex-preview[hidden] { display: none; } .ts-optblock { display: flex; flex-direction: column; gap: 6px; } .ts-opt-hi { padding-left: 36px; } .ts-optblock > .ts-tex-preview, .ts-optblock > .ts-thumb { margin-left: 36px; } .ts-sublabel { display: block; margin: 8px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); } .ts-thumb { display: inline-flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; } .ts-thumb img { max-width: 160px; max-height: 100px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--paper); } .ts-qtools-sm { margin: 8px 0 0; } .ts-q-head { flex-wrap: wrap; } .ts-help code { font-family: var(--ff-mono); font-size: 12.5px; padding: 1px 4px; border-radius: 4px; background: var(--surface-2); } @media (prefers-reduced-motion: reduce) { .tsd-chip, .tsd-chip-filter, .tsd-search-box { transition: none; } .tsd-chips { scroll-behavior: auto; } } .help [hidden] { display: none !important; } .help-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .help-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px 22px; margin: 0 0 16px; } .help-title { margin: 0 0 8px; font-family: var(--ff-serif); font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; } .help-lead { margin: 0 0 18px; max-width: 62ch; color: var(--muted); font-size: 15.5px; line-height: 1.55; } .help-search { display: flex; gap: 8px; align-items: stretch; margin: 0; max-width: 680px; } .help-search-box { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border: 1px solid var(--border-dk); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); cursor: text; transition: border-color .15s ease, box-shadow .15s ease; } .help-search-box:hover { border-color: var(--text); } .help-search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .08); } .help-search-box:focus-within .svgi { color: var(--primary); } .help-search-box .svgi { width: 20px; height: 20px; flex-shrink: 0; } .help-search-box input, .help-search-box input:hover, .help-search-box input:focus, .help-search-box input:focus-visible { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; color: var(--text); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; } .help-search-box input::placeholder { color: var(--muted); } .help-search-box input::-webkit-search-decoration { -webkit-appearance: none; } .help-search-btn { min-height: 52px; padding: 0 20px; } .help-stats { margin: 14px 0 0; color: var(--muted); font-size: 13px; } .help-results { margin: 14px 0 0; max-width: 680px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; } .help-results[aria-busy="true"] { opacity: .6; } .help-hit { display: flex; flex-direction: column; gap: 3px; min-height: 44px; padding: 12px 16px; color: inherit; border-top: 1px solid var(--border); } .help-hit:first-child { border-top: 0; } .help-hit:hover { text-decoration: none; background: var(--surface-2); } .help-hit:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .help-hit-q { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4; } .help-hit-meta { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .help-hit-snip { font-size: 13.5px; line-height: 1.5; color: var(--muted); } .help-hit mark { background: var(--pastel-yellow-bg); color: var(--pastel-yellow-text); border-radius: 3px; padding: 0 1px; } .help-noresult { margin: 0; padding: 14px 16px; color: var(--muted); font-size: 14px; } .help-noresult a { font-weight: 600; } .help-hits-all { display: block; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 14px; font-weight: 600; } .help-section { margin: 0 0 22px; } .help-h2 { margin: 0 0 12px; font-family: var(--ff-sans); font-size: 15px; font-weight: 700; letter-spacing: 0; } .help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .help-card { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: inherit; transition: border-color .15s ease; } .help-card:hover { text-decoration: none; border-color: var(--border-dk); } .help-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .help-card-ico { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--primary-bg); color: var(--primary-dk); } .help-card-ico .svgi { width: 20px; height: 20px; } .help-card-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .help-card-name { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.35; } .help-card-count { font-size: 12.5px; color: var(--muted); } .help-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .help-list li + li { border-top: 1px solid var(--border); } .help-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 16px; color: var(--text); } .help-list a:hover { text-decoration: none; background: var(--surface-2); } .help-list a:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .help-list-q { font-size: 14.5px; font-weight: 500; line-height: 1.4; } .help-list-cat { flex: none; font-size: 12px; color: var(--muted); } .help-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .help-contact h2 { margin: 0 0 4px; font-family: var(--ff-sans); font-size: 16px; font-weight: 700; } .help-contact p { margin: 0; color: var(--muted); font-size: 14px; } .help-contact .btn { min-height: 44px; } .help-empty { padding: 28px 20px; text-align: center; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .help-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 10px; font-size: 13px; color: var(--muted); } .help-crumbs a { color: var(--muted); font-weight: 500; display: inline-flex; align-items: center; min-height: 32px; } .help-crumbs a:hover { color: var(--text); } .help-crumbs .svgi { width: 12px; height: 12px; } .help-crumbs span[aria-current] { color: var(--text); font-weight: 600; } .help-cat-head { display: flex; gap: 14px; align-items: flex-start; } .help-cat-head .help-card-ico { width: 48px; height: 48px; border-radius: 12px; } .help-cat-head .help-card-ico .svgi { width: 24px; height: 24px; } .help-cat-head .help-lead { margin-bottom: 0; } .help-faqs { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin: 0 0 22px; } .help-faq { border-top: 1px solid var(--border); scroll-margin-top: 84px; } .help-faq:first-child { border-top: 0; } .help-faq > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 18px; cursor: pointer; list-style: none; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--text); border-radius: var(--radius-lg); } .help-faq > summary::-webkit-details-marker { display: none; } .help-faq > summary:hover { background: var(--surface-2); } .help-faq > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .help-faq-chev { flex: none; display: inline-flex; color: var(--muted); transition: transform .2s ease; } .help-faq-chev .svgi { width: 18px; height: 18px; } .help-faq[open] > summary .help-faq-chev { transform: rotate(180deg); } .help-faq:target > summary, .help-faq.is-target > summary { background: rgba(var(--primary-rgb), .06); } .help-faq-a { padding: 0 18px 4px; color: var(--text); font-size: 15px; line-height: 1.65; max-width: 72ch; } .help-faq-a p { margin: 0 0 12px; } .help-faq-a a { color: var(--link); font-weight: 600; } .help-faq-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 4px 18px 16px; } .help-vote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); } .help-vote .btn, .help-copy { min-height: 44px; } .help-vote-done { color: var(--text); font-weight: 500; } .help-copy .svgi { width: 16px; height: 16px; } .help-related .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (prefers-reduced-motion: reduce) { .help-search-box, .help-card, .help-faq-chev { transition: none; } } @keyframes und-spin    { to   { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes und-shimmer { 100% { transform: translateX(100%); } } .btn            { --spin-color: var(--text); } .btn-primary, .nav-create-btn, .conn-btn       { --spin-color: var(--on-primary); } .btn-danger     { --spin-color: var(--on-danger); } .contact-cta-wa { --spin-color: var(--on-media); } .accept-btn.active { --spin-color: var(--success); } .is-loading { position: relative !important; pointer-events: none; cursor: default; } .btn.is-loading, .icon-btn.is-loading, button.is-loading, a.is-loading, [data-loading].is-loading { color: transparent !important; } .is-loading > * { visibility: hidden !important; } .is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.05em; height: 1.05em; box-sizing: border-box; transform: translate(-50%, -50%); border: 2px solid var(--spin-color, var(--text)); border-top-color: transparent; border-radius: 50%; animation: und-spin .6s linear infinite; } @media (prefers-reduced-motion: reduce) { .is-loading::after { animation-duration: 1.3s; } } .nav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999; background: var(--primary); box-shadow: none; opacity: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; transition: width .2s ease, opacity .35s ease; pointer-events: none; } .nav-progress.is-on { opacity: 1; } .skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-sm); } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: var(--shimmer); animation: und-shimmer 1.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } } .sk-line   { height: 12px; border-radius: 6px; margin: 8px 0; } .sk-line.sh { width: 60%; } .sk-line.md { width: 85%; } .sk-title  { height: 20px; width: 55%; border-radius: 7px; margin: 4px 0 12px; } .sk-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; } .sk-thumb  { width: 100%; aspect-ratio: 1200 / 630; border-radius: 12px; } .sk-chip   { height: 26px; width: 84px; border-radius: 999px; } .sk-btn    { height: 36px; width: 96px; border-radius: var(--radius); } .page-skeleton { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 9000; background: var(--bg); opacity: 0; visibility: hidden; transition: opacity .2s ease; overflow: hidden; } .page-skeleton.is-on { opacity: 1; visibility: visible; } .page-skeleton .container, .page-skeleton .detail-shell, .page-skeleton .settings-shell { margin-top: 8px; margin-bottom: 0; } .page-skeleton .sidebar { position: static; top: auto; } .sk-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow-sm); } .sk-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .sk-card-head .sk-lines { flex: 1; } .sk-navrow { display: flex; align-items: center; gap: 12px; padding: 9px 8px; } .sk-btnrow { display: flex; gap: 12px; margin-top: 16px; } .sk-chips  { display: flex; gap: 8px; margin: 16px 0; overflow: hidden; } .sk-grid   { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .sk-cover  { height: auto; aspect-ratio: 3 / 1; border-radius: 0; } .sk-round  { border-radius: 50%; } .sk-chat { display: flex; height: calc(100vh - 64px); max-width: 1280px; margin: 0 auto; } .sk-chat-list { width: 32%; min-width: 260px; border-right: 1px solid var(--border); padding: 8px; overflow: hidden; } .sk-chat-thread { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 12px; } .sk-bubble { max-width: 70%; } .sk-bubble.me { align-self: flex-end; } .sk-compose { max-width: 1280px; margin: 0 auto; padding: 0 20px; } .sk-compose-bar { display: flex; align-items: center; gap: 12px; height: 62px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .sk-compose-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; } @media (max-width: 1279px) { .sk-compose-grid { grid-template-columns: minmax(0, 1fr) 360px; } } @media (max-width: 1100px) { .sk-compose { max-width: 760px; } .sk-compose-grid { grid-template-columns: minmax(0, 1fr); } .sk-compose-rail { display: none; } } @media (max-width: 560px) { .page-skeleton { top: 56px; } .sk-grid { grid-template-columns: 1fr; } .sk-chat-list { display: none; } .sk-compose { padding: 0 16px; } } .offline-overlay[hidden] { display: none; } .offline-overlay { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); animation: off-fade-in .18s ease-out; } @keyframes off-fade-in { from { opacity: 0; } to { opacity: 1; } } .offline-card { text-align: center; max-width: 380px; width: 100%; } .offline-icon { width: 72px; height: 72px; border-radius: var(--radius); margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; color: var(--primary); background: var(--primary-bg); } .offline-icon svg { width: 38px; height: 38px; } .offline-card h2 { margin: 0 0 8px; font-size: 21px; letter-spacing: -0.01em; color: var(--text); } .offline-card p { margin: 0 0 20px; color: var(--muted); font-size: 14.5px; line-height: 1.55; } .offline-status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; min-height: 20px; margin-bottom: 18px; } .offline-spinner { width: 15px; height: 15px; border: 2px solid var(--border-dk); border-top-color: var(--primary); border-radius: 50%; animation: off-spin .7s linear infinite; flex-shrink: 0; } @keyframes off-spin { to { transform: rotate(360deg); } } .offline-actions .btn { min-width: 150px; justify-content: center; } @media (max-width: 560px) { .feed-tabs { margin: 0 0 10px; } .feed-tab { min-height: 44px; font-size: 15px; } .feed-module .btn, .feed-nudge .btn, .feed-empty .btn { min-height: 44px; flex: 1 1 auto; } .feed-module-tag, .feed-nudge-chip { min-height: 44px; padding: 8px 14px; } .feed-nudge { flex-direction: column; gap: 10px; padding: 16px; } .feed-controls .owner-menu-btn { width: 44px; height: 44px; margin: -6px -8px -6px 0; } .feed-hidden .btn, .feed-settings-actions .btn { min-height: 44px; } .feed-switch input { width: 22px; height: 22px; } .edit-form select { min-height: 44px; font-size: 16px; } .ob-top { padding: 12px 16px 10px; } .ob-top .brand-text { display: none; } .ob-progress { margin-bottom: 0; } .ob-panel { flex: 1; width: 100%; margin: 12px 0 0; border-width: 1px 0 0; border-radius: 0; box-shadow: none; } .ob-body { flex: 1; padding: 20px 16px 16px; } .ob-foot { gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 0; } .ob-step h1 { font-size: 23px; } .ob-lead { font-size: 14.5px; } .ob-search input { font-size: 16px; } .ob-chip { min-height: 44px; } .ob-toggle { min-width: 96px; min-height: 44px; padding: 8px 14px; } .ob-skip { min-height: 44px; } .ob-hint { font-size: 12.5px; } .ob-next { min-width: 0; padding: 10px 18px; } .ob-later { padding: 10px 12px; } .clx { padding: 16px; } .ix-actions .btn { min-height: 44px; flex: 1 1 auto; justify-content: center; } .clx-share .btn, .comm-empty .btn { min-height: 44px; } .ob-cs-input { font-size: 16px; } .schedule-row input[type="datetime-local"] { font-size: 16px; flex-basis: 100%; } .schedule-row .btn { flex: 1; justify-content: center; } .sched-head { padding: 0 14px; } .sched-row { padding: 12px; gap: 10px; } .sched-actions { display: grid; grid-template-columns: 1fr 1fr; justify-content: stretch; } .sched-actions .btn { justify-content: center; min-height: 44px; } .scheduled-banner-actions { margin-left: 0; width: 100%; } .scheduled-banner-actions .btn { flex: 1; justify-content: center; } .svc-form-hero { flex-wrap: wrap; padding: 16px; gap: 12px; } .svc-form-hero-main h1 { font-size: 20px; } .svc-form .field-grid { grid-template-columns: 1fr; } .svc-pkg-editor { grid-template-columns: 1fr; } .svc-form-actions { bottom: 10px; padding: 11px 13px; } .svc-form-actions .btn { flex: 1; justify-content: center; } .svc-filterbar-ctrls { width: 100%; flex-shrink: 1; } .svc-locbtn { flex: 1 1 auto; min-width: 0; max-width: none; } .svc-offer-btn { flex: none; width: 40px; padding: 0; justify-content: center; } .svc-offer-btn .svc-offer-txt { display: none; } .job-form-hero { flex-wrap: wrap; padding: 16px; gap: 12px; } .job-form-hero-main h1 { font-size: 20px; } .job-form .field-grid { grid-template-columns: 1fr; } .job-form-actions { bottom: 10px; padding: 11px 13px; } .job-form-actions .btn { flex: 1; justify-content: center; } .job-form input, .job-form select, .job-form textarea, .job-tags-input input[type="text"], .job-filterbar input, .job-filterbar select { font-size: 16px; } .job-media-picker { flex-wrap: wrap; } .job-filterbar { flex-direction: column; align-items: stretch; } .job-filterbar .field { flex-basis: 100%; } .job-filterbar-actions { width: 100%; justify-content: space-between; } .job-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .job-hero { padding: 16px; } .job-hero h1 { font-size: 21px; } .job-facts { grid-template-columns: repeat(2, 1fr); } .container { margin: 12px auto; padding: 0 10px; gap: 14px; } .composer { padding: 12px; margin-bottom: 10px; } .feed-card { padding: 12px 14px; margin-bottom: 10px; } .feed-card-body { gap: 12px; } .detail-shell { margin: 0 auto; padding: 10px 0; } .settings-danger-action input { font-size: 16px; } .settings-danger-action .btn { min-height: 44px; } .bs[data-banner-slider] { --bs-pv: var(--bs-pv-p); --bs-h: var(--bs-h-p); } .bs-dot { width: 44px; } .bs--swipe-dots.bs--arrows-at-sides .bs-arrow { display: none; } .bn-devices { display: none; } .bn-slide { grid-template-columns: minmax(0, 1fr) auto; } .bn-grip { display: none; } .bn-thumb { grid-column: 1; width: 100%; } .bn-fields { grid-column: 1 / -1; grid-row: 2; } .bn-row-actions { flex-direction: row; grid-column: 2; grid-row: 1; } .bn-row-actions .btn { width: 44px; height: 44px; } .bn-field input[type="text"] { min-height: 44px; font-size: 16px; } .bn-focal { grid-template-columns: repeat(3, 44px); } .bn-focal-dot { width: 44px; height: 44px; } .profile-cover .bs--cap-bottom .bs-caption { padding-bottom: 50px; } .community-home .profile-actions .btn, .community-home .profile-actions .conn-btn { height: 44px; } .community-home .profile-actions .icon-only { width: 44px; } .profile-tabs--pills { flex-wrap: nowrap; overflow-x: auto; } .profile-tabs--pills .profile-tab { min-height: 44px; display: inline-flex; align-items: center; } .ap-options--3 { grid-template-columns: minmax(0, 1fr); } .detail-card { padding: 14px; margin-bottom: 10px; } .detail-shell .panel { margin-bottom: 10px; } .detail-card h1 { font-size: 21px; } .detail-card .body-text { margin: 8px 0 10px; } .detail-meta { gap: 8px; margin-bottom: 10px; } .section-heading { margin: 7px 14px 8px; } .answer { padding: 14px; margin-bottom: 10px; } .comment { padding: 12px; margin-bottom: 8px; } .inline-composer { padding: 10px; margin: 10px 0 7px; flex-wrap: wrap; } .inline-composer > .btn { flex: 1 0 100%; justify-content: center; } .reply-list { margin-left: 14px; padding-left: 10px; } input, textarea, select, .rte-surface { font-size: 16px; } .create-modal { padding: 0; align-items: stretch; } .create-modal-card { max-width: none; width: 100%; height: 100vh; height: 100dvh; max-height: 100dvh; border-radius: 0; } .create-modal-card > h2 { padding: 18px 16px 0; } .create-modal-card > .create-modal-lead { padding: 0 16px; } .create-modal-card > .create-form { padding: 0 16px; } .create-modal-actions { margin: 14px -16px 0; padding: 12px 16px; } .pe-modal .create-modal-card { padding: 0 16px; } .pe-modal .create-modal-card > h2 { padding: 18px 0 0; } .field textarea { min-height: 120px; } .navbar-inner:has(.search.is-focused) .brand, .navbar-inner:has(.search.is-focused) .nav-actions { display: none; } .search.is-focused { display: flex; align-items: center; gap: 8px; } .search.is-focused .search-input-wrap { flex: 1; } .search.is-focused .search-back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -8px; flex-shrink: 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; animation: sb-back-in .18s ease-out; } .search.is-focused .search-back:hover { background: var(--surface); color: var(--text); } .search.is-focused .search-back:focus-visible { outline: none; box-shadow: var(--ring); } .search.is-focused .search-back .svgi { width: 22px; height: 22px; } .search.is-focused .search-results { left: 0; right: 0; } .tools-hero { padding: 24px 18px; margin-bottom: 20px; } .tools-grid { grid-template-columns: 1fr; } .tool-page { grid-template-columns: 1fr; } .tool-sidebar { position: static; order: 2; } .tool-io-grid { grid-template-columns: 1fr; } .tool-input-row { flex-wrap: wrap; } .tool-num-input { width: 100%; font-size: 16px; } .cfs-link, .csl-row { grid-template-columns: minmax(0, 1fr); } .cfs-grip { display: none; } .cfs-link .cfs-row-actions, .csl-row .cfs-row-actions { flex-direction: row; justify-content: flex-end; } .cfs-col-head { flex-wrap: wrap; } .cfs-row-actions .btn, .cpg-actions .icon-only { width: 44px; height: 44px; } .cfs-field input, .cfs-field select { min-height: 44px; font-size: 16px; } .cpg-actions { width: 100%; } .cpg-actions .btn:not(.icon-only) { flex: 1; justify-content: center; min-height: 44px; } .cpg-slug-prefix { max-width: 45%; } .cpg-form .ap-actions .cpg-delete { margin-left: 0; } .seo-item { grid-template-columns: auto 1fr; } .seo-go { grid-column: 2; justify-self: start; min-height: 44px; } .seo-bar { min-height: 52px; } .seo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .seo-stats .seo-stat:first-child { grid-column: 1 / -1; } .seo-filter { min-height: 44px; } .seo-pop { position: fixed; top: auto; left: 16px; right: 16px; bottom: 76px; width: auto; z-index: 60; } .ce-sec { padding: 16px; border-radius: var(--radius); } .ce-bar-icon { display: none; } .ce-bar-title h1 { font-size: 17px; } .ce-help { font-size: 13.5px; } .ce-seg button, .ce-err-link, .ce-ai { min-height: 44px; } .ce-restore-actions { width: 100%; } .ce-restore-actions .btn { flex: 1 1 0; min-height: 44px; justify-content: center; } .ce .rte-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ce .rte-toolbar::-webkit-scrollbar { display: none; } .ce .rte-toolbar > * { flex: none; } .ce .rte-btn { min-width: 40px; height: 40px; } .ce-score { padding: 12px 14px; } .ce-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .ce-form select, .ce-form textarea { font-size: 16px; } .ce-choice-btn[data-ce-move] { display: none; } .ce .ce-choice .option-remove { width: 44px; height: 44px; } .ce-choice-hit { width: 44px; } .ts-shell { padding: 0 12px 88px; } .ts-grid { grid-template-columns: 1fr; } .ts-input, .ts-select, .ts-textarea { font-size: 16px; } .ts-facts { grid-template-columns: 1fr 1fr; } .ts-landing h1 { font-size: 26px; } .ts-card, .ts-qcard { padding: 16px; } .ts-icon-btn { width: 44px; height: 44px; } .ts-pbtn { min-height: 44px; } .ts-pgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ts-play-actions .btn { flex: 1 1 calc(50% - 4px); justify-content: center; } .ts-play-actions .ts-next { margin-left: 0; } .ts-barrow { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) auto; } .ts-bar-text h1 { font-size: 16px; } .ts-bar .ts-actions .btn-ghost { display: none; } .ts-qbody { font-size: 16px; } .ts-summary { grid-template-columns: 1fr; } .ts-qstats { grid-template-columns: 1fr 1fr; } .ts-filters .btn, .ts-builder-links .btn, .ts-flag-actions .btn, .ts-regrade .btn { min-height: 44px; } .ts-filters .ts-field { flex-basis: 100%; } .ts-builder-links .ts-help { flex-basis: 100%; } .ts-linkbtn { min-height: 44px; } .ts-chart .sp-chart { min-width: 480px; } .ts-chart { overflow-x: auto; } .ts-tlist { grid-template-columns: 1fr; } .ts-tcard { padding: 14px; } .ts-tcard.is-feed { padding: 12px 14px; margin-bottom: 10px; } .ts-tcard-you a, .ts-feedstrip-head a, .ts-mine-score a { min-height: 44px; } .ts-mine-row { grid-template-columns: 1fr; } .ts-langbar .ts-lang, .detail-card > .ts-lang { display: flex; width: 100%; } .ts-lang button { flex: 1 1 50%; min-height: 44px; } .ts-zoom-btn { width: 44px; height: 44px; } .ts-opt-hi, .ts-optblock > .ts-tex-preview, .ts-optblock > .ts-thumb { padding-left: 0; margin-left: 0; } .ts-oimg { max-width: 100%; } .ts-qtools-sm .btn { min-height: 44px; } .tsd-hero { padding: 16px 16px 14px; margin-bottom: 12px; } .tsd-title { font-size: 26px; margin-bottom: 6px; } .tsd-lead { font-size: 14.5px; line-height: 1.5; margin-bottom: 12px; } .tsd-search-box { height: 48px; } .tsd-search-box input, .tsd-search-box input:focus, .tsd-search-box input:focus-visible { font-size: 16px; } .tsd-search-btn { min-height: 48px; padding: 0 14px; } .tsd-hero-foot { margin-top: 12px; } .tsd-make { width: 100%; justify-content: center; min-height: 44px; } .tsd-signin { padding: 10px 12px; } .tsd-signin .btn { min-height: 44px; } .tsd-chip, .tsd-chip-filter { min-height: 44px; } .tsd-chip-filter { display: inline-flex; } .tsd-bar { padding: 6px 0; } .tsd-filters { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; flex-direction: column; align-items: stretch; gap: 0; max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); border-radius: 12px 12px 0 0; } .tsd-filters.is-open, .tsd-filters:target { display: flex; } .tsd-bar:has(.tsd-filters.is-open), .tsd-bar:has(.tsd-filters:target) { z-index: 90; } .tsd-sheet-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; padding: 12px 0 6px; background: var(--surface); } .tsd-sheet-head .tsd-h2 { margin: 0; font-size: 17px; } .tsd-sheet-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; border-radius: var(--radius-btn); color: var(--text); } .tsd-sheet-x .svgi { width: 20px; height: 20px; } .tsd-fields { flex-direction: column; align-items: stretch; gap: 14px; padding-top: 6px; } .tsd-field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; } .tsd-field-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: 13px; font-weight: 600; color: var(--muted); } .tsd-select { width: 100%; height: 48px; font-size: 16px; } .tsd-sort { margin-left: 0; } .tsd-check { min-height: 48px; font-size: 16px; } .tsd-filters.is-live .tsd-sheet-actions, .tsd-sheet-actions { display: flex; position: sticky; bottom: 0; margin-top: 18px; padding: 12px 0 0; background: var(--surface); border-top: 1px solid var(--border); } .tsd-sheet-actions .btn { flex: 1; justify-content: center; min-height: 48px; } .tsd-results { margin-bottom: 10px; } .tsd-pill, .tsd-clearall { min-height: 36px; } .tsd-continue-list { grid-template-columns: 1fr; } .tsd-cont { flex-wrap: wrap; } .tsd-cont-go { width: 100%; justify-content: center; } .ts-tcard-go { min-height: 44px; } .tsd-empty { padding: 28px 16px; } .ts-mine-score { grid-column: 1; grid-row: auto; text-align: left; } .help-hero { padding: 18px 16px 16px; } .help-title { font-size: 28px; } .help-lead { font-size: 14.5px; margin-bottom: 14px; } .help-search { flex-direction: column; } .help-search-btn { width: 100%; justify-content: center; min-height: 48px; } .help-grid, .help-related .help-grid { grid-template-columns: 1fr; } .help-list a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; } .help-faq > summary { padding: 12px 14px; font-size: 15px; } .help-faq-a { padding: 0 14px 4px; } .help-faq-foot { padding: 4px 14px 14px; } .help-contact .btn { width: 100%; justify-content: center; } } @media (max-width: 820px) { .ts-play { grid-template-columns: 1fr; } .ts-palette { position: static; display: none; } .ts-palette.is-open { display: block; } .ts-palette-toggle { display: inline-flex; } .bs { --bs-pv: var(--bs-pv-t); --bs-h: var(--bs-h-t); } .sidebar, .rightbar { display: none; } .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 0; } .settings-side { position: static; max-height: none; overflow: visible; margin-bottom: 16px; } .settings-side .sidebar-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .settings-side .sidebar-nav::-webkit-scrollbar { display: none; } .settings-side .sidebar-nav li { flex: none; } .settings-side .sidebar-nav li + li { margin-top: 0; } .settings-side .sidebar-nav li a { white-space: nowrap; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); } .settings-side .sidebar-nav li a.active { border-color: transparent; background: var(--primary-bg); } .settings-side .sidebar-nav li a.active::before, .settings-side .sidebar-nav .ico, .settings-side .sidebar-sep, .settings-side .sidebar-group { display: none; } .cwa:not(.cwa--preview) { --cwa-side: 16px; bottom: calc(62px + 16px + env(safe-area-inset-bottom, 0px)); } .cwa--on-computers:not(.cwa--preview) { display: none; } .cwa-btn { min-width: 52px; height: 52px; } body.page-home .site-footer { display: none; } .home-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin: -4px 0 12px; color: var(--muted); font-size: 12.5px; } .home-legal a { color: var(--muted); } .home-legal a:hover { color: var(--text); } .feed-header { display: none; } .job-shell .feed-header { display: flex; } .und-toast-stack { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); } .wa-fab { right: 16px; bottom: calc(62px + 16px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; } .wa-fab img { width: 32px; height: 32px; } .cmp-head { padding: 24px 6px 20px; } .cmp-verdict { padding: 18px; } .cmp-grid, .cmp-switch { grid-template-columns: 1fr; } .cmp-table .pc-row { grid-template-columns: 1fr; min-width: 0; row-gap: 6px; padding: 14px 16px; } .cmp-table .pc-head { display: none; } .cmp-table .pc-feature { font-weight: 700; padding-right: 0; } .cmp-table .pc-col { justify-content: flex-start; text-align: left; } .cmp-table .pc-col--pro { background: transparent; margin: 0; padding: 0; } .cmp-colname { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; font-weight: 600; color: var(--muted); } .footer-compare { margin-top: 22px; padding-top: 18px; } .footer-compare-list { gap: 6px; } .footer-compare-list a { padding: 5px 10px; font-size: 12px; } .legal-table-wrap { overflow-x: visible; } .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: auto; } .legal-table thead { display: none; } .legal-table tr { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 10px; } .legal-table td { border-bottom: 0; padding: 0 0 8px; } .legal-table tr td:last-child { padding-bottom: 0; } .legal-table td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; } .legal-table td:first-child { font-size: 15px; } body.compose-page .navbar, body.compose-page .bottom-nav { display: none; } body.compose-page { padding-bottom: 0; } .ce { padding: 0 16px calc(96px + env(safe-area-inset-bottom, 0px)); } .ce-bar { top: 0; height: 56px; margin: 0 -16px; padding: 0 16px 0 6px; border-bottom: 0; } .ce-back { width: 44px; height: 44px; } .ce-tabs { top: 56px; gap: 0; margin: 0 -16px 16px; padding: 0 8px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: var(--bg); } .ce-tabs [role="tab"] { min-height: 48px; border-radius: 0; } .ce-tabs [aria-selected="true"] { background: transparent; box-shadow: inset 0 -2px 0 var(--primary); } @supports (overflow: clip) { .ce .rte-toolbar { top: 105px; } } .ce-errors, .ce-sec { scroll-margin-top: 121px; } .ce-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: none; } .ce-actions .btn { min-height: 48px; } .ce-actions .btn-primary { flex: 1 1 auto; } body.ce-typing .ce-actions { display: none; } }