refactor(web): restructure myai.css with section comments and cleanup

- Add section block comments throughout for navigability
- Merge two duplicate @media (max-width:900px) blocks into one
- Remove dead .ai-mark rule (replaced by <img> logo, never rendered)
- Move .cookie-overlay, .cookie-manage to display:none by default
  (removes need for inline style="display:none;" on those elements)
- Add .loader-overlay.loader-visible{display:flex} so JS can use
  class toggling instead of .css('display','flex') — works correctly
  with jQuery 4.0's getComputedStyle-based visibility detection
- Consolidate brand-mark, console-line, nav-actions rules next to
  their related blocks (were scattered at end of file)

Closes #31

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/wwwroot/css/myai.css

@@ -1,3 +1,6 @@
+/* ============================================================
+   DESIGN TOKENS
+   ============================================================ */
 :root {
     --bg: #041120;
     --bg-soft: #0a1c34;
@@ -11,6 +14,9 @@
     --shadow: 0 18px 60px rgba(0,0,0,.28)
 }
 
+/* ============================================================
+   RESET / BASE
+   ============================================================ */
 * {
     box-sizing: border-box
 }
@@ -36,6 +42,9 @@ img {
     display: block
 }
 
+/* ============================================================
+   LAYOUT HELPERS
+   ============================================================ */
 .container {
     width: 100%;
     max-width: 1120px;
@@ -48,6 +57,9 @@ img {
     overflow: hidden
 }
 
+/* ============================================================
+   STATUS PAGE (job-search redirect result)
+   ============================================================ */
 .status-hero {
     min-height: 100vh;
     display: flex;
@@ -75,6 +87,9 @@ img {
     line-height: 1.6
 }
 
+/* ============================================================
+   HEADER / NAVIGATION
+   ============================================================ */
 .header {
     position: sticky;
     top: 0;
@@ -103,15 +118,11 @@ img {
     height: 48px
 }
 
-.ai-mark {
+.brand-mark img {
-    display: inline-flex;
+    width: 100%;
-    align-items: center;
+    height: 100%;
-    justify-content: center;
+    object-fit: contain;
-    border-radius: 16px;
+    filter: drop-shadow(0 16px 26px rgba(95,160,255,.24))
-    background: linear-gradient(135deg,var(--primary),var(--primary-strong));
-    font-weight: 900;
-    color: #fff;
-    box-shadow: 0 18px 40px rgba(95,160,255,.24)
 }
 
 .brand-text {
@@ -141,6 +152,7 @@ img {
             color: #fff
         }
 
+/* Hamburger — hidden on desktop, shown via media query */
 .menu-toggle {
     display: none;
     background: transparent;
@@ -156,6 +168,61 @@ img {
         margin: 5px 0
     }
 
+/* Language selector */
+.nav-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px
+}
+
+.lang-switch {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px;
+    border-radius: 18px;
+    background: rgba(255,255,255,.04);
+    border: 1px solid rgba(255,255,255,.1)
+}
+
+.lang-flag {
+    width: 46px;
+    height: 32px;
+    padding: 3px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid transparent;
+    border-radius: 12px;
+    background: transparent;
+    cursor: pointer;
+    opacity: .78;
+    transition: transform .2s ease,border-color .2s ease,background-color .2s ease,opacity .2s ease
+}
+
+    .lang-flag img {
+        width: 100%;
+        height: 100%;
+        display: block;
+        border-radius: 8px;
+        object-fit: cover;
+        box-shadow: 0 8px 18px rgba(0,0,0,.18)
+    }
+
+    .lang-flag:hover {
+        opacity: 1;
+        transform: translateY(-1px)
+    }
+
+    .lang-flag[aria-pressed=true] {
+        opacity: 1;
+        border-color: rgba(95,160,255,.65);
+        background: rgba(95,160,255,.1)
+    }
+
+/* ============================================================
+   HERO SECTION
+   ============================================================ */
 .hero {
     padding: 72px 0 48px
 }
@@ -200,6 +267,44 @@ img {
     margin-top: 30px
 }
 
+/* Hero card / AI console */
+.banner-card {
+    overflow: hidden
+}
+
+.showcase-banner {
+    width: 100%;
+    border-radius: 22px;
+    margin-bottom: 18px;
+    border: 1px solid rgba(255,255,255,.12);
+    box-shadow: 0 20px 55px rgba(0,0,0,.22)
+}
+
+.console-line {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    margin: 12px 0;
+    padding: 16px 18px;
+    border-radius: 18px;
+    background: rgba(255,255,255,.05);
+    color: #dce8ff
+}
+
+    .console-line span {
+        min-width: 76px;
+        color: #8fb8ff;
+        font-weight: 900
+    }
+
+    .console-line b {
+        font-weight: 700;
+        color: #dce8ff
+    }
+
+/* ============================================================
+   BUTTONS
+   ============================================================ */
 .btn {
     border-radius: 999px;
     padding: 13px 22px;
@@ -218,12 +323,15 @@ img {
     color: #fff
 }
 
-/* Bootstrap replacement utilities (btn-sm, btn-dark, btn-warning, shadow) */
+/* Bootstrap replacement utilities */
 .btn-sm { padding: 5px 10px; font-size: .875rem }
 .btn-dark { background: #1e2730; color: #fff; border-color: #1e2730 }
 .btn-warning { background: #ffc107; color: #212529; border: 0 }
 .shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important }
 
+/* ============================================================
+   SECTION / DEMO GRID
+   ============================================================ */
 .section {
     padding: 76px 0
 }
@@ -246,34 +354,6 @@ img {
         line-height: 1.8
     }
 
-.ai-console-card, .ai-panel, .demo-card, .contact-form {
-    background: var(--panel);
-    border: 1px solid var(--panel-border);
-    border-radius: var(--card-radius);
-    box-shadow: var(--shadow)
-}
-
-.ai-console-card {
-    padding: 30px
-}
-
-.console-line {
-    display: flex;
-    gap: 16px;
-    align-items: center;
-    margin: 12px 0;
-    padding: 16px 18px;
-    border-radius: 18px;
-    background: rgba(255,255,255,.05);
-    color: #dce8ff
-}
-
-    .console-line span {
-        min-width: 76px;
-        color: #8fb8ff;
-        font-weight: 900
-    }
-
 .demo-grid {
     display: grid;
     grid-template-columns: repeat(3,1fr);
@@ -317,6 +397,23 @@ img {
     font-size: .82rem
 }
 
+/* ============================================================
+   SHARED CARD STYLES
+   ============================================================ */
+.ai-console-card, .ai-panel, .demo-card, .contact-form {
+    background: var(--panel);
+    border: 1px solid var(--panel-border);
+    border-radius: var(--card-radius);
+    box-shadow: var(--shadow)
+}
+
+.ai-console-card {
+    padding: 30px
+}
+
+/* ============================================================
+   CV MATCHER — INPUT / RESULT PANELS
+   ============================================================ */
 .matcher-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -447,6 +544,7 @@ img {
         margin: 0
     }
 
+/* Result panel */
 .result-panel {
     position: sticky;
     top: 110px
@@ -479,6 +577,9 @@ img {
     line-height: 1.8
 }
 
+/* ============================================================
+   CONTACT SECTION
+   ============================================================ */
 .contact {
     background: rgba(255,255,255,.03)
 }
@@ -513,6 +614,9 @@ img {
     padding: 28px
 }
 
+/* ============================================================
+   FORM MESSAGES & FEEDBACK
+   ============================================================ */
 .form-message {
     display: block;
     margin-top: 14px
@@ -558,6 +662,9 @@ img {
     color: #f7d488 !important
 }
 
+/* ============================================================
+   SUBSCRIBE FORM
+   ============================================================ */
 .subscribe-form {
     margin-top: 28px;
     padding: 28px;
@@ -592,6 +699,9 @@ img {
     margin-top: 12px
 }
 
+/* ============================================================
+   FOOTER
+   ============================================================ */
 .footer {
     padding: 26px 0;
     border-top: 1px solid rgba(255,255,255,.08);
@@ -624,7 +734,13 @@ img {
     font-family: monospace
 }
 
+/* ============================================================
+   COOKIE BANNER & MANAGE BUTTON
+   Initial display:none ensures they are hidden before JS runs;
+   JS calls .fadeIn() / .show() to reveal them.
+   ============================================================ */
 .cookie-overlay {
+    display: none;
     position: fixed;
     left: 0;
     right: 0;
@@ -663,13 +779,22 @@ img {
     flex-wrap: wrap
 }
 
+/* "Cookie settings" button — hidden until consent is given */
 .cookie-manage {
+    display: none;
     position: fixed;
     bottom: 20px;
     z-index: 40
 }
 
+/* ============================================================
+   LOADER OVERLAY
+   Hidden by default; JS adds .loader-visible to show it.
+   Two-class selector (0,2,0) wins over single-class (0,1,0)
+   so no !important is needed.
+   ============================================================ */
 .loader-overlay {
+    display: none;
     position: fixed;
     inset: 0;
     z-index: 80;
@@ -679,6 +804,10 @@ img {
     backdrop-filter: blur(2px)
 }
 
+.loader-overlay.loader-visible {
+    display: flex
+}
+
 .loader-box {
     max-width: 360px;
     padding: 22px 28px;
@@ -714,6 +843,9 @@ img {
     animation: loader-spin .8s linear infinite
 }
 
+/* ============================================================
+   ANIMATIONS
+   ============================================================ */
 @keyframes loader-spin {
     to { transform: rotate(360deg) }
 }
@@ -723,20 +855,16 @@ img {
 }
 
 @keyframes shake {
-    25% {
+    25% { transform: translateX(-5px) }
-        transform: translateX(-5px)
+    50% { transform: translateX(5px) }
-    }
+    75% { transform: translateX(-3px) }
-
-    50% {
-        transform: translateX(5px)
-    }
-
-    75% {
-        transform: translateX(-3px)
-    }
 }
 
+/* ============================================================
+   RESPONSIVE — tablets and below (≤900px)
+   ============================================================ */
 @media (max-width:900px) {
+    /* Single-column layouts */
     .hero-grid, .matcher-grid, .contact-grid, .demo-grid {
         grid-template-columns: 1fr
     }
@@ -745,6 +873,7 @@ img {
         position: static
     }
 
+    /* Nav becomes a dropdown */
     .nav {
         position: absolute;
         top: 84px;
@@ -756,7 +885,8 @@ img {
         background: #071326;
         border: 1px solid rgba(255,255,255,.12);
         border-radius: 20px;
-        padding: 20px
+        padding: 20px;
+        z-index: 30
     }
 
         .nav.is-open {
@@ -764,15 +894,36 @@ img {
         }
 
     .menu-toggle {
-        display: block
+        display: block;
+        order: 4
+    }
+
+    .nav-actions {
+        margin-left: auto
+    }
+
+    .nav-wrap {
+        position: relative
     }
 
     .cookie-box {
         align-items: flex-start;
         flex-direction: column
     }
+
+    .lang-switch {
+        padding: 4px
     }
 
+    .lang-flag {
+        width: 42px;
+        height: 30px
+    }
+}
+
+/* ============================================================
+   RESPONSIVE — mobile (≤560px)
+   ============================================================ */
 @media (max-width:560px) {
     .hero {
         padding-top: 46px
@@ -791,112 +942,7 @@ img {
         width: 100%;
         text-align: center
     }
-}
 
-/* MyAi brand + main-page language selector */
-.brand-mark img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    filter: drop-shadow(0 16px 26px rgba(95,160,255,.24))
-}
-
-.nav-actions {
-    display: flex;
-    align-items: center;
-    gap: 12px
-}
-
-.lang-switch {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px;
-    border-radius: 18px;
-    background: rgba(255,255,255,.04);
-    border: 1px solid rgba(255,255,255,.1)
-}
-
-.lang-flag {
-    width: 46px;
-    height: 32px;
-    padding: 3px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid transparent;
-    border-radius: 12px;
-    background: transparent;
-    cursor: pointer;
-    opacity: .78;
-    transition: transform .2s ease,border-color .2s ease,background-color .2s ease,opacity .2s ease
-}
-
-    .lang-flag img {
-        width: 100%;
-        height: 100%;
-        display: block;
-        border-radius: 8px;
-        object-fit: cover;
-        box-shadow: 0 8px 18px rgba(0,0,0,.18)
-    }
-
-    .lang-flag:hover {
-        opacity: 1;
-        transform: translateY(-1px)
-    }
-
-    .lang-flag[aria-pressed=true] {
-        opacity: 1;
-        border-color: rgba(95,160,255,.65);
-        background: rgba(95,160,255,.1)
-    }
-
-.banner-card {
-    overflow: hidden
-}
-
-.showcase-banner {
-    width: 100%;
-    border-radius: 22px;
-    margin-bottom: 18px;
-    border: 1px solid rgba(255,255,255,.12);
-    box-shadow: 0 20px 55px rgba(0,0,0,.22)
-}
-
-.console-line b {
-    font-weight: 700;
-    color: #dce8ff
-}
-
-@media (max-width:900px) {
-    .nav-actions {
-        margin-left: auto
-    }
-
-    .nav-wrap {
-        position: relative
-    }
-
-    .menu-toggle {
-        order: 4
-    }
-
-    .nav {
-        z-index: 30
-    }
-
-    .lang-switch {
-        padding: 4px
-    }
-
-    .lang-flag {
-        width: 42px;
-        height: 30px
-    }
-}
-
-@media (max-width:560px) {
     .brand-text {
         font-size: 1.35rem
     }