.case-design .main-header .header-lower { position:relative; top:auto; background:#111315; }.case-design .header-style-one::before { content:none; }
.case-workspace { padding:28px 0 68px; background:#f5f6f8; color:#29313e; }.case-shell { width:min(1280px,calc(100% - 64px)); margin-inline:auto; }.case-breadcrumb { display:flex; gap:12px; font-size:12px; color:#7c8490; margin-bottom:32px; }.case-breadcrumb a { color:#4b5361; }
.case-heading { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-bottom:34px; }.case-eyebrow { color:#b52f39; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.13em; }.case-heading h1 { font-size:clamp(30px,3.7vw,48px); line-height:1.2; letter-spacing:-.04em; font-weight:800; color:#222834; margin:12px 0; }.case-heading p { font-size:15px; color:#737c89; margin:0; max-width:70ch; }.case-private { display:flex; align-items:center; gap:14px; color:#ac303b; background:#fff; border:1px solid #e2e5eb; padding:14px 18px; border-radius:12px; font-size:30px; line-height:1; font-weight:800; flex-shrink:0; }.case-private span { font-size:11px; font-weight:600; color:#677b70; max-width:16ch; line-height:1.6; }
.case-workspace button { font-family:inherit; font-size:12px; font-weight:700; line-height:1.5; border:1px solid #dce0e6; background:#fff; color:#515c6e; border-radius:7px; padding:10px 14px; cursor:pointer; }.case-workspace button:hover { color:#a52a34; border-color:#c55660; }.case-workspace button:disabled { opacity:.45; cursor:default; }.case-workspace :is(button,textarea,summary):focus-visible { outline:2px solid #b52f39; outline-offset:3px; }.case-workspace [hidden] { display:none !important; }
.case-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:18px; }.case-modes { display:flex; flex-wrap:wrap; gap:5px; background:#fff; border:1px solid #dce0e6; padding:5px; border-radius:10px; }.case-modes button { border-color:transparent; padding:9px 14px; }.case-modes button[aria-pressed=true] { background:#b8303a; border-color:#b8303a; color:#fff; }.case-file-actions { display:flex; gap:8px; }
.case-editors { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }.case-panel { min-width:0; overflow:hidden; border:1px solid #dce1e8; border-radius:14px; background:white; box-shadow:0 4px 22px #15263b04; }.case-panel-heading { display:flex; justify-content:space-between; gap:10px; min-height:64px; align-items:center; border-bottom:1px solid #eceef2; padding:12px 20px; }.case-panel-heading label { font-size:14px; font-weight:800; margin:0; color:#303948; }.case-panel-heading > span { font-size:11px; color:#a72d37; background:#fff0f1; padding:5px 9px; border-radius:5px; }.case-panel-heading > div { display:flex; align-items:center; gap:14px; }.case-panel-heading button { padding:4px 0; background:none; border:0; font-size:10px; color:#828b99; }
.case-panel textarea { display:block; width:100%; min-height:380px; border:0; border-radius:0; resize:vertical; font-family:inherit; font-size:17px; line-height:1.85; padding:24px; color:#303b4b; background:#fff; }.case-panel textarea::placeholder { color:#969eaa; }.case-panel textarea:focus-visible { outline-offset:-3px; }.case-output-panel { border-color:#dfc9cc; }.case-output-panel textarea { background:#fffdfc; }
.case-stats { display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding:14px 20px; background:#fafbfc; border-top:1px solid #eceef2; color:#858e9c; font-size:11px; }.case-stats strong { color:#576273; font-size:12px; }.case-stats > span:last-child { margin-left:auto; }
.case-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-top:18px; }.case-bottom > p { font-size:12px; line-height:1.7; color:#627b6c; margin:0; }.case-bottom > p.is-error { color:#ac2c35; }.case-bottom > div { display:flex; flex-wrap:wrap; gap:10px; }.case-bottom button { padding:12px 18px; }.case-bottom button span { margin-left:12px; }.case-workspace .case-primary { background:#b8303a; border-color:#b8303a; color:white; }.case-workspace .case-primary:hover { background:#9d2730; color:white; }
.case-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:38px; margin:50px 0; }.case-features article > span { font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:#b52f39; font-weight:800; }.case-features h2 { font-size:20px; font-weight:800; line-height:1.4; letter-spacing:-.025em; color:#303b4b; margin:12px 0; }.case-features p { margin:0; font-size:13px; line-height:1.85; color:#7b8594; }
.case-faq { max-width:900px; margin:0 auto 42px; border:1px solid #e0e4eb; border-radius:14px; background:white; padding:28px; }.case-faq h2 { font-size:24px; font-weight:800; letter-spacing:-.03em; color:#303b4b; margin-bottom:20px; }.case-faq details + details { border-top:1px solid #e6e9ee; }.case-faq summary { padding:16px 0; cursor:pointer; font-weight:700; font-size:14px; color:#4b5768; }.case-faq p { margin:0 0 18px; font-size:14px; line-height:1.8; color:#788291; }.case-related { display:flex; align-items:center; flex-wrap:wrap; gap:24px; font-size:12px; padding-top:24px; border-top:1px solid #dde2e9; }.case-related strong { margin-right:auto; color:#657184; }.case-related a { color:#b52f39; font-weight:700; }.case-notice { background:#fff3df; border:1px solid #e9d3ae; padding:16px; border-radius:8px; }
@media(max-width:1099px) { .case-heading { align-items:flex-start; }.case-private { display:none; }.case-panel-heading { flex-wrap:wrap; }.case-stats { gap:10px; }.case-stats > span:last-child { width:100%; margin-left:0; } }
@media(max-width:767px) { .case-shell { width:calc(100% - 32px); }.case-editors { grid-template-columns:1fr; gap:18px; }.case-toolbar { gap:12px; }.case-modes { width:100%; }.case-modes button { padding:8px 10px; font-size:11px; }.case-panel textarea { min-height:240px; font-size:16px; padding:18px; }.case-panel-heading { padding:12px 16px; }.case-stats { padding:12px 16px; }.case-bottom > div { width:100%; }.case-bottom button { flex:1; padding:12px; font-size:11px; }.case-bottom button span { margin-left:6px; }.case-features { grid-template-columns:1fr; gap:26px; margin:38px 0; }.case-faq { padding:20px; }.case-related { gap:16px; }.case-related strong { width:100%; } }