#cssbest-cfg{color-scheme:dark;--bg:#101214;--panel:#191c1f;--line:#313539;--muted:#b2b7bc;--accent:#f76b43;--white:#f5f3ee}
#cssbest-cfg *{box-sizing:border-box}
#cssbest-cfg{margin:0;background:var(--bg);color:var(--white);font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#cssbest-cfg a{color:inherit;text-decoration:none}
#cssbest-cfg button,#cssbest-cfg input,#cssbest-cfg select{font:inherit}
#cssbest-cfg a,#cssbest-cfg button,#cssbest-cfg input,#cssbest-cfg select,#cssbest-cfg summary{touch-action:manipulation}
#cssbest-cfg a:focus-visible,#cssbest-cfg button:focus-visible,#cssbest-cfg input:focus-visible,#cssbest-cfg select:focus-visible,#cssbest-cfg summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
#cssbest-cfg header,#cssbest-cfg,#cssbest-cfg footer{width:min(1200px,calc(100% - 48px));margin:auto}
#cssbest-cfg header{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:25px 0;border-bottom:1px solid var(--line)}
#cssbest-cfg .brand{display:flex;flex-direction:column;line-height:1.1}
#cssbest-cfg .brand b{font-size:25px;letter-spacing:-1px}
#cssbest-cfg .brand b>span{margin-left:8px}
#cssbest-cfg .brand b:first-letter{color:var(--accent)}
#cssbest-cfg .brand small{font-size:9px;letter-spacing:2.6px;margin-top:7px;color:var(--muted)}
#cssbest-cfg nav{display:flex;gap:26px;flex-wrap:wrap;font-size:13px;font-weight:650}
#cssbest-cfg nav a[aria-current],#cssbest-cfg nav a:hover{color:var(--accent)}
#cssbest-cfg .cfg-hero{display:grid;grid-template-columns:1.45fr 1fr;align-items:center;gap:70px;padding:65px 0 55px}
#cssbest-cfg .cfg-eyebrow{color:var(--accent);letter-spacing:2px;font-size:11px;font-weight:750;margin:0 0 17px}
#cssbest-cfg h1{font-size:clamp(44px,6.5vw,78px);letter-spacing:-3px;line-height:1.04;margin:0 0 24px}
#cssbest-cfg h1 em{font-style:normal;color:var(--accent)}
#cssbest-cfg .cfg-lead{max-width:540px;font-size:18px;color:var(--muted);margin-bottom:26px}
#cssbest-cfg .cfg-pills{display:flex;flex-wrap:wrap;gap:8px}
#cssbest-cfg .cfg-pills span{font-size:11px;border:1px solid var(--line);padding:6px 11px;border-radius:20px;color:#d5d8db}
#cssbest-cfg .cfg-hero-file{padding:25px 30px;border:1px solid #4b3832;border-radius:16px;background:radial-gradient(ellipse at 50% 0,#57312680,transparent 65%),#191b1d;transform:rotate(3deg);box-shadow:0 25px 70px #0005}
#cssbest-cfg .cfg-file-top{font-size:10px;letter-spacing:1px;display:flex;justify-content:space-between;color:var(--muted)}
#cssbest-cfg .cfg-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
#cssbest-cfg .cfg-hero-file strong{display:block;font-family:monospace;font-size:27px;margin:15px 0}
#cssbest-cfg .cfg-hero-file strong span{color:var(--accent)}
#cssbest-cfg .cfg-file-code{border-top:1px solid var(--line);padding-top:18px;color:#8d959c;font:12px/2 monospace}
#cssbest-cfg .cfg-file-code b{color:#e1b59e;font-weight:400}
#cssbest-cfg .cfg-cross{position:relative;height:76px;width:76px;margin:25px auto 10px}
#cssbest-cfg .cfg-cross i{position:absolute;background:var(--accent)}
#cssbest-cfg .cfg-cross i:nth-child(1){width:2px;height:23px;left:37px;top:0}
#cssbest-cfg .cfg-cross i:nth-child(2){width:2px;height:23px;left:37px;bottom:0}
#cssbest-cfg .cfg-cross i:nth-child(3){width:23px;height:2px;left:0;top:37px}
#cssbest-cfg .cfg-cross i:nth-child(4){width:23px;height:2px;right:0;top:37px}
#cssbest-cfg .cfg-workspace{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:25px;align-items:start}
#cssbest-cfg .cfg-card{padding:30px;background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:20px;min-width:0}
#cssbest-cfg .cfg-section-title{display:flex;align-items:flex-start;gap:17px;margin-bottom:25px}
#cssbest-cfg .cfg-section-title>span{background:#30261f;color:var(--accent);font:13px monospace;padding:9px 10px;border-radius:7px}
#cssbest-cfg .cfg-section-title h2{font-size:23px;letter-spacing:-.6px;margin:0}
#cssbest-cfg .cfg-section-title p{font-size:13px;color:var(--muted);margin:6px 0 0}
#cssbest-cfg .cfg-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}
#cssbest-cfg .cfg-fields label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:550;min-width:0}
#cssbest-cfg .cfg-fields small,#cssbest-cfg .cfg-hint{color:var(--muted);font-size:12px;font-weight:400;line-height:1.5}
#cssbest-cfg .cfg-fields input,#cssbest-cfg .cfg-fields select{width:100%;min-width:0;min-height:47px;padding:11px 12px;border-radius:7px;border:1px solid #3e4449;background:#111416;color:var(--white);font-size:14px}
#cssbest-cfg .cfg-fields input::placeholder{color:#899299}
#cssbest-cfg .cfg-full{grid-column:1/-1}
#cssbest-cfg .cfg-side-card{padding:25px;background:#1e2124;border:1px solid var(--line);border-radius:14px}
#cssbest-cfg .cfg-side-card h2{font-size:23px;line-height:1.2;margin:0 0 25px}
#cssbest-cfg .cfg-profile-line{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}
#cssbest-cfg .cfg-profile-line span{color:var(--muted)}
#cssbest-cfg .cfg-side-card>p:not(.cfg-eyebrow),#cssbest-cfg .cfg-side-note p{font-size:13px;color:var(--muted)}
#cssbest-cfg .cfg-side-card>a{display:inline-block;font-size:13px;margin-top:14px;color:var(--accent)}
#cssbest-cfg .cfg-side-note{padding:25px 12px}
#cssbest-cfg .cfg-side-note b{font-size:14px}
#cssbest-cfg .cfg-generate-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0 22px}
#cssbest-cfg .cfg-generate-bar p{font-size:13px;color:var(--muted);margin:4px 0}
#cssbest-cfg .cfg-primary,#cssbest-cfg .cfg-secondary{display:inline-flex;align-items:center;justify-content:center;gap:25px;min-height:48px;border-radius:8px;padding:13px 22px;font-size:14px;font-weight:700;cursor:pointer;border:1px solid transparent}
#cssbest-cfg .cfg-primary{background:var(--accent);color:#171310}
#cssbest-cfg .cfg-primary:hover{background:#ff865f}
#cssbest-cfg .cfg-secondary{background:transparent;color:var(--white);border-color:#697078}
#cssbest-cfg .cfg-primary[aria-disabled=true],#cssbest-cfg button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
#cssbest-cfg .cfg-result{margin-top:24px;scroll-margin-top:20px}
#cssbest-cfg .cfg-result h2{font-size:30px;margin:0}
#cssbest-cfg .cfg-result-actions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
#cssbest-cfg pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:440px;overflow:auto;background:#0c1012;color:#b5d3bc;padding:20px;border:1px solid var(--line);border-radius:8px;font:13px/1.7 monospace}
#cssbest-cfg .cfg-result ul{padding-left:20px;font-size:14px;color:var(--muted)}
#cssbest-cfg .cfg-result li{margin:10px 0}
#cssbest-cfg .cfg-notice{background:#3a2c1d;padding:14px;border:1px solid #85652b;border-radius:7px;font-size:14px}
#cssbest-cfg .cfg-install{padding:60px 0}
#cssbest-cfg .cfg-install h2{font-size:34px;letter-spacing:-1px;margin:0 0 30px}
#cssbest-cfg .cfg-install-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}
#cssbest-cfg .cfg-install article>span{color:var(--accent);font:12px monospace}
#cssbest-cfg .cfg-install h3{font-size:18px;margin:12px 0}
#cssbest-cfg .cfg-install p{color:var(--muted);font-size:14px}
#cssbest-cfg code{color:#edb79f;overflow-wrap:anywhere}
#cssbest-cfg details{margin-top:22px}
#cssbest-cfg summary{cursor:pointer;font-size:14px;padding:8px 0}
#cssbest-cfg footer{display:flex;align-items:center;gap:30px;border-top:1px solid var(--line);padding:30px 0;font-size:12px;color:var(--muted)}
#cssbest-cfg footer p{flex:1}
#cssbest-cfg .skip{position:absolute;top:-100px;left:16px;background:var(--accent);color:#111;padding:12px;z-index:10}
#cssbest-cfg .skip:focus{top:10px}
#cssbest-cfg [hidden]{display:none!important}
#cssbest-cfg #cssbest-copy-status{font-size:13px;color:var(--muted)}
@media (max-width:960px){#cssbest-cfg .cfg-workspace{grid-template-columns:minmax(0,1fr) 240px}
#cssbest-cfg .cfg-hero{gap:40px}
#cssbest-cfg .cfg-card{padding:23px}
#cssbest-cfg nav{gap:16px}
#cssbest-cfg .cfg-hero-file strong{font-size:23px}}
@media (max-width:760px){#cssbest-cfg header,#cssbest-cfg,#cssbest-cfg footer{width:calc(100% - 32px)}
#cssbest-cfg header{align-items:flex-start;flex-direction:column;gap:20px;padding:20px 0}
#cssbest-cfg nav{gap:10px 20px;font-size:12px}
#cssbest-cfg .cfg-hero{grid-template-columns:1fr;padding:38px 0;gap:26px}
#cssbest-cfg .cfg-hero-file{display:none}
#cssbest-cfg h1{letter-spacing:-2px}
#cssbest-cfg .cfg-lead{font-size:16px}
#cssbest-cfg .cfg-workspace{grid-template-columns:1fr}
#cssbest-cfg .cfg-workspace aside{display:none}
#cssbest-cfg .cfg-fields{gap:18px}
#cssbest-cfg .cfg-fields input,#cssbest-cfg .cfg-fields select{font-size:16px}
#cssbest-cfg .cfg-card{padding:22px 18px}
#cssbest-cfg .cfg-section-title h2{font-size:21px}
#cssbest-cfg .cfg-install-grid{grid-template-columns:1fr;gap:20px}
#cssbest-cfg .cfg-install{padding:38px 0}
#cssbest-cfg footer{flex-wrap:wrap;gap:14px}
#cssbest-cfg footer p{flex-basis:60%}}
@media (max-width:440px){#cssbest-cfg .cfg-fields{grid-template-columns:1fr}
#cssbest-cfg .cfg-generate-bar{align-items:stretch;flex-direction:column}
#cssbest-cfg .cfg-generate-bar .cfg-primary{width:100%}
#cssbest-cfg .cfg-result-actions>*{width:100%}
#cssbest-cfg .cfg-pills{gap:6px}
#cssbest-cfg .cfg-pills span{font-size:10px;padding:5px 8px}}
@media (prefers-reduced-motion:reduce){}
.cssbest-cfg-page{min-width:0;flex:0 0 100%;max-width:100%;width:100%}
#cssbest-cfg{width:100%;margin:0;background:transparent;font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f5f3ee}
#cssbest-cfg .cfg-backup-reminder{margin:0 0 28px;padding:24px;border:1px solid #94694b;border-left:4px solid #f76b43;border-radius:12px;background:#30251e}
#cssbest-cfg .cfg-backup-reminder h2{font-size:21px;margin:0 0 10px;color:#fff1e7}
#cssbest-cfg .cfg-backup-reminder p{font-size:14px;color:#e3d3c8;margin:8px 0}
#cssbest-cfg .cfg-backup-reminder code{background:transparent;color:#ffd0af;font-size:13px}
#cssbest-cfg .cfg-backup-confirm{display:flex;align-items:flex-start;gap:12px;padding:18px;border:1px solid #94694b;border-radius:10px;background:#30251e;font-size:14px;cursor:pointer;margin-bottom:16px}
#cssbest-cfg .cfg-backup-confirm input{appearance:auto!important;position:static!important;opacity:1!important;display:block!important;width:20px;height:20px;min-width:20px;margin:2px 0 0;accent-color:#f76b43}
@media(max-width:767px){#cssbest-cfg{width:100%}#cssbest-cfg .cfg-backup-reminder{padding:18px 15px}#cssbest-cfg .cfg-backup-reminder h2{font-size:19px}}
/* Site login labels float over inputs; generator labels remain in flow. */
#cssbest-cfg label{position:static!important;inset:auto!important;transform:none!important;float:none!important;opacity:1;visibility:visible;height:auto;line-height:1.55;text-align:left;margin-top:0}
#cssbest-cfg .cfg-fields input,#cssbest-cfg .cfg-fields select{position:static!important;transform:none!important;opacity:1!important;visibility:visible!important;float:none;height:auto;margin:0}
#cssbest-cfg label{width:auto!important;max-width:none!important}
#cssbest-cfg .cfg-fields label{width:100%!important}

/* Use CSSBEST theme tokens for both light and dark themes. */
#cssbest-cfg{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;color:var(--color-text);--accent:var(--color-primary);--panel:var(--color-card-bg);--line:var(--color-border);--muted:var(--color-text-light);--white:var(--color-text);color-scheme:light}
[data-theme="dark"] #cssbest-cfg{color-scheme:dark}
#cssbest-cfg .cfg-hero-file{background:radial-gradient(ellipse at 50% 0,rgba(217,113,39,.15),transparent 65%),var(--color-card-bg);border-color:var(--color-border);box-shadow:0 20px 50px var(--color-shadow)}
#cssbest-cfg .cfg-pills span,#cssbest-cfg .cfg-file-code{color:var(--muted)}
#cssbest-cfg .cfg-file-code b,#cssbest-cfg code{color:var(--accent)}
#cssbest-cfg .cfg-fields input,#cssbest-cfg .cfg-fields select{background:var(--color-bg);border-color:var(--color-border)}
#cssbest-cfg .cfg-side-card{background:var(--panel)}
#cssbest-cfg .cfg-section-title>span,#cssbest-cfg .cfg-backup-reminder,#cssbest-cfg .cfg-backup-confirm,#cssbest-cfg .cfg-notice{background:var(--color-primary-bg);border-color:var(--accent)}
#cssbest-cfg .cfg-backup-reminder h2,#cssbest-cfg .cfg-backup-reminder p{color:var(--color-text)}
#cssbest-cfg .cfg-backup-reminder code{color:var(--color-primary-dark)}
[data-theme="dark"] #cssbest-cfg .cfg-backup-reminder code{color:var(--color-primary-light)}
#cssbest-cfg .cfg-primary{color:#171310}
#cssbest-cfg .cfg-result{scroll-margin-top:100px}
#cssbest-cfg .cfg-backup-confirm input{accent-color:var(--accent)}
@media(max-width:480px){#cssbest-cfg{padding:0 16px}#cssbest-cfg .cfg-hero{padding-top:28px}}