/* Самостоятельные визуальные системы демо-проектов.
   Школа — яркий edtech, салон — тёплый beauty-editorial, CRM — строгий SaaS. */

/* Онлайн-школа: кобальт, сирень, крупный гротеск и округлые интерфейсные элементы. */
body[data-case="school"] {
  --paper: #f3f6ff;
  --ink: #1a2343;
  --muted: #697391;
  --line: #d8def2;
  --moss: #5658df;
  --rust: #06a4a6;
  --serif: 'DM Sans', Arial, sans-serif;
  --sans: 'DM Sans', Arial, sans-serif;
  background: #f3f6ff;
}
body[data-case="school"] .case-nav { border-color: #dbe1f2; background: rgba(247,249,255,.92); }
body[data-case="school"] .case-hero { gap: clamp(25px,5vw,72px); }
body[data-case="school"] .case-hero h1 { font-weight: 700; letter-spacing: -.075em; }
body[data-case="school"] .case-hero h1 em, body[data-case="school"] .case-section>h2 em { color: #5759dc; }
body[data-case="school"] .case-artboard { border-radius: 28px; background: radial-gradient(circle at 78% 24%,#d7d6ff 0 12%,transparent 13%),linear-gradient(135deg,#e1edff,#f3e9ff 56%,#d9f6f3); }
body[data-case="school"] .case-artboard:before, body[data-case="school"] .case-artboard:after { border-color: rgba(80,80,210,.19); }
body[data-case="school"] .art-window { border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 25px 60px rgba(76,76,175,.17); }
body[data-case="school"] .art-window h2 { font-weight: 700; }
body[data-case="school"] .art-pill, body[data-case="school"] .case-button.primary { border-radius: 999px; background: #5759dc; }
body[data-case="school"] .case-button { border-radius: 999px; }
body[data-case="school"] .case-info { border: 1px solid #dfe4f5; border-radius: 18px; background: #fff; }
body[data-case="school"] .demo-shell { border-radius: 26px; background: linear-gradient(135deg,#e1eaff,#efe9ff 60%,#daf5f1); }
body[data-case="school"] .school-demo { overflow: hidden; border: 1px solid #e2e6f3; border-radius: 20px; font-family: var(--sans); box-shadow: 0 22px 60px rgba(42,52,112,.12); }
body[data-case="school"] .school-top { min-height: 56px; padding-inline: clamp(16px,3vw,30px); border-color: #edf0f8; font-size: 10px; }
body[data-case="school"] .school-top>a:first-child i { color: #6261df; }
body[data-case="school"] .school-hero { background: linear-gradient(120deg,#f3f6ff,#f1efff 70%,#e7faf8); }
body[data-case="school"] .school-hero small, body[data-case="school"] .school-enroll small, body[data-case="school"] .school-catalog-head small { color: #585be0; }
body[data-case="school"] .school-hero h2 { font-weight: 700; }
body[data-case="school"] .school-hero h2 em { color: #6261df; }
body[data-case="school"] .school-cta { border-radius: 999px; background: #5759dc; box-shadow: 0 8px 18px rgba(87,89,220,.2); }
body[data-case="school"] .school-shape { border-radius: 22px; background: linear-gradient(145deg,#c8c7ff,#afb7ff 48%,#a9e7e4); }
body[data-case="school"] .school-shape:after { border-color: rgba(61,62,166,.3); }
body[data-case="school"] .school-catalog { padding: clamp(24px,4vw,42px); background: #fff; }
body[data-case="school"] .school-filters button { border-radius: 999px; border-color: #dce1f1; }
body[data-case="school"] .school-filters button.is-current { border-color: #5759dc; background: #5759dc; }
body[data-case="school"] .course-grid { gap: 14px; }
body[data-case="school"] .course-grid article { padding: 18px; border: 1px solid #e2e6f3; border-radius: 16px; background: #f8f9ff; transition: transform .22s,box-shadow .22s; }
body[data-case="school"] .course-grid article:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(50,61,145,.1); }
body[data-case="school"] .course-grid button { border-color: #d5d9f1; border-radius: 999px; color: #4f53cb; }
body[data-case="school"] .school-enroll { background: #e8e8ff; }
body[data-case="school"] .school-enroll .case-field { color: #30395e; }
body[data-case="school"] .school-enroll input, body[data-case="school"] .school-enroll select { border-radius: 10px; border-color: #d5d9f1; }

/* Салон: румяная палитра, журнальная антиква и мягкие тактильные формы. */
body[data-case="beauty"] {
  --paper: #fbf4f1;
  --ink: #392a32;
  --muted: #83716f;
  --line: #e8d8d3;
  --moss: #a56572;
  --rust: #c88668;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
  background: #fbf4f1;
}
body[data-case="beauty"] .case-nav { border-color: #eadbd7; background: rgba(252,246,243,.92); }
body[data-case="beauty"] .case-hero h1 { font-family: var(--serif); font-weight: 500; }
body[data-case="beauty"] .case-hero h1 em, body[data-case="beauty"] .case-section>h2 em { color: #a56572; }
body[data-case="beauty"] .case-artboard { border-radius: 48% 48% 4px 4px; background: radial-gradient(ellipse at 50% 75%,#f1d6d1 0 24%,transparent 25%),linear-gradient(150deg,#f6e8e2,#ead1c9 48%,#d9b9b0); }
body[data-case="beauty"] .case-artboard:before { width: 72%; border-style: solid; border-color: rgba(147,86,99,.3); }
body[data-case="beauty"] .case-artboard:after { width: 88%; border-style: solid; border-color: rgba(147,86,99,.18); }
body[data-case="beauty"] .art-window { width: 54%; border: 1px solid rgba(255,255,255,.7); border-radius: 48% 48% 2px 2px; background: rgba(255,249,245,.82); box-shadow: 0 22px 50px rgba(91,54,55,.14); }
body[data-case="beauty"] .art-window h2 { font-family: var(--serif); }
body[data-case="beauty"] .art-window h2 em { color: #a56572; }
body[data-case="beauty"] .art-pill, body[data-case="beauty"] .case-button.primary { border-radius: 2px; background: #67444d; }
body[data-case="beauty"] .case-button { border-radius: 2px; }
body[data-case="beauty"] .case-info { border: 1px solid #ecdeda; background: #fffaf8; }
body[data-case="beauty"] .demo-shell { background: #eeddd7; }
body[data-case="beauty"] .beauty-demo { overflow: hidden; border: 1px solid #eadbd7; background: #fffaf7; box-shadow: 0 22px 50px rgba(84,52,52,.13); }
body[data-case="beauty"] .beauty-top { min-height: 58px; border-color: #eadbd7; font-size: 10px; }
body[data-case="beauty"] .beauty-top nav { font-size: 8px; }
body[data-case="beauty"] .beauty-top>a:last-child { color: #8f5562; }
body[data-case="beauty"] .beauty-hero { background: #fbf3ef; }
body[data-case="beauty"] .beauty-hero small, body[data-case="beauty"] .beauty-services>div small, body[data-case="beauty"] .beauty-booking small { color: #a56572; }
body[data-case="beauty"] .beauty-hero h2 { font-family: var(--serif); }
body[data-case="beauty"] .beauty-hero h2 em { color: #a56572; }
body[data-case="beauty"] .beauty-figure { border-radius: 46% 46% 2px 2px; background: linear-gradient(145deg,#efd9d1,#d7b8af); }
body[data-case="beauty"] .beauty-figure i { width: 145px; background: radial-gradient(circle at 36% 30%,#fff4ed,#c2897c 56%,#76515a); }
body[data-case="beauty"] .beauty-services { padding: 32px clamp(18px,4vw,42px); background: #fffaf7; }
body[data-case="beauty"] .beauty-services article { padding-block: 16px; border-color: #ecded9; }
body[data-case="beauty"] .beauty-services article span { color: #a56572; }
body[data-case="beauty"] .beauty-services article b { font-size: 17px; }
body[data-case="beauty"] .beauty-services article strong { color: #67444d; }
body[data-case="beauty"] .beauty-booking { background: #f0e2dd; }
body[data-case="beauty"] .beauty-booking select, body[data-case="beauty"] .beauty-booking input { border-color: #dfc9c3; background: #fffaf7; }
body[data-case="beauty"] .beauty-booking .case-button.primary { background: #67444d; }

/* CRM: холодный B2B SaaS с плотной сеткой, системным гротеском и синим акцентом. */
body[data-case="crm"] {
  --paper: #f3f6fa;
  --ink: #1c2940;
  --muted: #69778b;
  --line: #dbe2ec;
  --moss: #3977d5;
  --rust: #e39948;
  --serif: 'DM Sans', Arial, sans-serif;
  --sans: 'DM Sans', Arial, sans-serif;
  background: #f3f6fa;
}
body[data-case="crm"] .case-nav { border-color: #dbe2ec; background: rgba(248,250,253,.93); }
body[data-case="crm"] .case-hero h1, body[data-case="crm"] .case-section>h2 { font-family: var(--sans); font-weight: 650; letter-spacing: -.055em; }
body[data-case="crm"] .case-hero h1 em, body[data-case="crm"] .case-section>h2 em { color: #3977d5; }
body[data-case="crm"] .case-artboard { border: 1px solid #dbe2ec; border-radius: 18px; background-color: #e7edf6; background-image: linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size: 28px 28px; }
body[data-case="crm"] .case-artboard:before, body[data-case="crm"] .case-artboard:after { display: none; }
body[data-case="crm"] .art-window { width: 72%; min-height: 236px; border: 1px solid #d8e0ed; border-radius: 10px; background: #fff; box-shadow: 0 18px 45px rgba(34,55,88,.13); animation: none; }
body[data-case="crm"] .art-window h2 { font-family: var(--sans); font-weight: 700; }
body[data-case="crm"] .art-window h2 em { color: #3977d5; }
body[data-case="crm"] .art-pill, body[data-case="crm"] .case-button.primary { border-radius: 6px; background: #3977d5; }
body[data-case="crm"] .case-button { border-radius: 6px; }
body[data-case="crm"] .case-info { border: 1px solid #dbe2ec; border-radius: 10px; background: #fff; }
body[data-case="crm"] .case-info h3 { font-family: var(--sans); font-weight: 650; }
body[data-case="crm"] .demo-shell { border: 1px solid #dbe2ec; border-radius: 14px; background: #e7edf6; }
body[data-case="crm"] .crm-demo-app { overflow: hidden; border: 1px solid #dbe2ec; border-radius: 10px; background: #f7f9fc; box-shadow: 0 20px 48px rgba(30,47,75,.11); font-family: var(--sans); }
body[data-case="crm"] .crm-sidebar { background: #17263e; color: #dbe8ff; }
body[data-case="crm"] .crm-side-icon.is-on { border-radius: 7px; background: #2d4770; color: #fff; }
body[data-case="crm"] .crm-toolbar h3 { font-family: var(--sans); font-size: 23px; font-weight: 650; }
body[data-case="crm"] .crm-toolbar .case-button.primary { border-color: #3977d5; background: #3977d5; }
body[data-case="crm"] .crm-metrics div { border: 1px solid #e1e7f0; border-radius: 7px; background: #fff; }
body[data-case="crm"] .crm-metrics b { color: #2c66b8; font-family: var(--sans); font-weight: 700; }
body[data-case="crm"] .crm-list-head { border-radius: 5px 5px 0 0; background: #edf2f8; }
body[data-case="crm"] .crm-row { background: #fff; }
body[data-case="crm"] .crm-row:hover { background: #f6f9ff; }
body[data-case="crm"] .crm-client b { color: #23334d; font-size: 10px; }
body[data-case="crm"] .crm-status { border-color: #c9daf2; border-radius: 999px; background: #eef5ff; color: #326ab7; }
body[data-case="crm"] .crm-controls input, body[data-case="crm"] .crm-controls select { border-radius: 6px; border-color: #d5deea; }
body[data-case="crm"] .case-field input:focus, body[data-case="crm"] .case-field select:focus { outline-color: #80a7e2; }

@media(max-width:700px) {
  body[data-case="beauty"] .case-artboard { border-radius: 44% 44% 4px 4px; }
  body[data-case="beauty"] .art-window { width: 66%; }
  body[data-case="crm"] .art-window { width: 82%; }
  body[data-case="school"] .school-demo, body[data-case="beauty"] .beauty-demo { border-radius: 14px; }
}
@media(prefers-reduced-motion:reduce) {
  body[data-case="school"] .course-grid article, body[data-case="beauty"] .beauty-figure i { animation:none; transition:none; }
}