/* =============================================
   KRIDTECH — SUPPORT PAGE
   Same design tokens as dashboard.css
   ============================================= */

   @import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

   :root {
       --bg-base: #070707;
       --bg-sidebar: #111111;
       --bg-card: #1A1A1A;
       --accent-pink: #df2fc4;
       --accent-purple: #702ae0;
       --accent-gradient: linear-gradient(135deg, #f472b6 0%, #a855f7 100%);
       --accent-neon: #ec4899;
       --accent-cyan: #ba84fb;
       --text-primary: #f5f0f0;
       --text-secondary: #a1a1aa;
       --text-muted: #71717a;
       --border-glass: #27272a;
       --shadow-pop: 0 10px 40px rgba(236, 72, 153, 0.15);
       --shadow-lg: 0 20px 60px rgba(236, 72, 153, 0.2);
       --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       --bg-input: #0d0d0d;
       --bg-subtle: rgba(112, 42, 224, 0.06);
       --bg-tint: rgba(112, 42, 224, 0.11);
       --border: rgba(112, 42, 224, 0.3);
       --border-subtle: rgba(112, 42, 224, 0.14);
       --shadow-md: 0 8px 32px rgba(0,0,0,0.6);
       --green: #10b981;
       --font-heading: 'Albert Sans', system-ui, sans-serif;
       --font-body: 'Inter', system-ui, sans-serif;
       --nav-height: 64px;
       --radius-sm: 6px;
       --radius-md: 8px;
       --radius-lg: 10px;
       --radius-xl: 14px;
   }
   
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   html, body { height: 100%; }
   
   body {
       font-family: var(--font-body);
       background: var(--bg-base);
       color: var(--text-primary);
       -webkit-font-smoothing: antialiased;
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 100vh;
       padding: 20px;
       overflow: hidden;
       background-image:
           radial-gradient(ellipse at 15% 15%, rgba(112, 42, 224, 0.07) 0, transparent 55%),
           radial-gradient(ellipse at 85% 85%, rgba(236, 72, 153, 0.05) 0, transparent 55%);
   }
   
   a { text-decoration: none; }
   button { font-family: inherit; cursor: pointer; }
   input, select, textarea { font-family: inherit; }
   
   /* ---- App shell ---- */
   #app {
       width: 100%;
       max-width: 100%;
       height: 100vh;
       max-height: 100vh;
       background: var(--bg-sidebar);
       border-radius: 0;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       box-shadow: none;
       position: relative;
   }
   
   /* ---- Top nav ---- */
   .sidebar {
       width: 100%;
       height: var(--nav-height);
       background: transparent;
       border-bottom: 1px solid var(--border-glass);
       padding: 0 28px;
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
       flex-shrink: 0;
       gap: 20px;
       position: relative;
       z-index: 20;
   }
   
   .sidebar .logo img {
       display: block;
       width: 140px;
       height: 32px;
       object-fit: contain;
       object-position: left center;
   }
   
   .sidebar .nav-group {
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: 2px;
   }
   
   .sidebar .nav-item {
       display: flex;
       align-items: center;
       padding: 6px 14px;
       border-radius: var(--radius-sm);
       font-size: 0.82rem;
       font-weight: 500;
       color: var(--text-muted);
       background: transparent;
       transition: var(--transition);
       white-space: nowrap;
   }
   
   .sidebar .nav-item:hover { color: var(--text-secondary); background: var(--bg-subtle); }
   .sidebar .nav-item.active { color: var(--accent-cyan); background: var(--bg-subtle); font-weight: 600; }
   
   /* ---- Content ---- */
   .content {
       flex: 1;
       overflow: hidden;
       display: flex;
       flex-direction: column;
   }
   
   /* ---- Icon pill ---- */
   .icon-pill {
       position: absolute;
       left: 16px;
       top: 50%;
       transform: translateY(-30%);
       width: 44px;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0;
       padding: 8px 0;
       background: var(--bg-card);
       border: 1px solid var(--border-glass);
       border-radius: 22px;
       z-index: 15;
       box-shadow: var(--shadow-md);
   }
   
   .pill-icon {
       width: 36px;
       height: 36px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
       color: var(--text-muted);
       transition: var(--transition);
       position: relative;
   }
   
   .pill-icon:hover { color: var(--accent-cyan); background: var(--bg-subtle); }
   .pill-icon.active { color: var(--accent-cyan); background: var(--bg-tint); }
   .pill-icon.active::after {
       content: '';
       position: absolute;
       right: 0;
       top: 50%;
       transform: translateY(-50%);
       width: 2px;
       height: 12px;
       background: var(--accent-gradient);
       border-radius: 2px 0 0 2px;
   }
   
   /* =============================================
      SUPPORT LAYOUT
      ============================================= */
   .support-layout {
       display: grid;
       grid-template-columns: 300px 1fr;
       height: 100%;
       overflow: hidden;
   }
   
   /* ---- Left side ---- */
   .support-side {
       padding: 32px 24px 28px 80px;
       display: flex;
       flex-direction: column;
       gap: 28px;
       border-right: 1px solid var(--border-glass);
       overflow-y: auto;
   }
   
   .support-header {
       display: flex;
       align-items: center;
       gap: 14px;
   }
   
   .support-avatar {
       width: 48px;
       height: 48px;
       flex-shrink: 0;
       background: var(--accent-gradient);
       border-radius: var(--radius-lg);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.2rem;
       color: white;
       box-shadow: var(--shadow-pop);
   }
   
   .support-header h1 {
       font-family: var(--font-heading);
       font-size: 1.2rem;
       font-weight: 800;
       color: var(--text-primary);
   }
   
   .support-header p {
       font-size: 0.78rem;
       color: var(--text-muted);
       margin-top: 3px;
   }
   
   /* ---- Contact block ---- */
   .contact-block {
       display: flex;
       flex-direction: column;
       gap: 6px;
   }
   
   .contact-item {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 12px 14px;
       background: var(--bg-card);
       border: 1px solid var(--border-glass);
       border-radius: var(--radius-md);
       transition: var(--transition);
       color: inherit;
   }
   
   .contact-item:hover {
       background: #202020;
       border-color: var(--border);
   }
   
   .contact-item:hover .contact-arrow { color: var(--accent-cyan); transform: translateX(2px); }
   
   .contact-icon {
       width: 32px;
       height: 32px;
       flex-shrink: 0;
       background: var(--bg-subtle);
       border: 1px solid var(--border-subtle);
       border-radius: var(--radius-sm);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 0.82rem;
       color: var(--accent-cyan);
   }
   
   .contact-body {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 2px;
       min-width: 0;
   }
   
   .contact-label {
       font-size: 0.78rem;
       font-weight: 600;
       color: var(--text-primary);
   }
   
   .contact-value {
       font-size: 0.72rem;
       color: var(--text-muted);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   
   .contact-arrow {
       font-size: 0.72rem;
       color: var(--text-muted);
       transition: var(--transition);
       flex-shrink: 0;
   }
   
   /* ---- Response note ---- */
   .response-note {
       margin-top: auto;
       display: flex;
       align-items: center;
       gap: 7px;
       font-size: 0.72rem;
       color: var(--text-muted);
       padding-top: 12px;
       border-top: 1px solid var(--border-glass);
   }
   
   .response-note i { color: var(--accent-cyan); }
   
   /* =============================================
      FORM SIDE
      ============================================= */
   .form-side {
       padding: 28px 32px;
       overflow-y: auto;
       display: flex;
       align-items: flex-start;
   }
   
   .form-card {
       width: 100%;
       max-width: 520px;
   }
   
   .form-title {
       font-family: var(--font-heading);
       font-size: 1.15rem;
       font-weight: 800;
       color: var(--text-primary);
       margin-bottom: 4px;
   }
   
   .form-subtitle {
       font-size: 0.8rem;
       color: var(--text-muted);
       margin-bottom: 24px;
   }
   
   .form-body {
       display: flex;
       flex-direction: column;
       gap: 14px;
   }
   
   /* ---- Fields ---- */
   .field {
       display: flex;
       flex-direction: column;
       gap: 6px;
   }
   
   .field label {
       font-size: 0.75rem;
       font-weight: 600;
       color: var(--text-secondary);
       text-transform: uppercase;
       letter-spacing: 0.05em;
   }
   
   .field-group.two-col {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 12px;
   }
   
   input[type="text"],
   input[type="email"],
   textarea {
       background: var(--bg-input);
       border: 1px solid var(--border-glass);
       border-radius: var(--radius-sm);
       color: var(--text-primary);
       font-size: 0.84rem;
       padding: 9px 12px;
       outline: none;
       transition: var(--transition);
       width: 100%;
   }
   
   input[type="text"]:focus,
   input[type="email"]:focus,
   textarea:focus {
       border-color: var(--border);
       box-shadow: 0 0 0 3px rgba(112, 42, 224, 0.08);
   }
   
   input::placeholder,
   textarea::placeholder { color: var(--text-muted); }
   
   textarea {
       resize: vertical;
       min-height: 110px;
       line-height: 1.55;
   }
   
   /* ---- Select ---- */
   .select-wrap {
       position: relative;
   }
   
   select {
       width: 100%;
       background: var(--bg-input);
       border: 1px solid var(--border-glass);
       border-radius: var(--radius-sm);
       color: var(--text-primary);
       font-size: 0.84rem;
       padding: 9px 34px 9px 12px;
       outline: none;
       appearance: none;
       -webkit-appearance: none;
       cursor: pointer;
       transition: var(--transition);
   }
   
   select:focus { border-color: var(--border); box-shadow: 0 0 0 3px rgba(112, 42, 224, 0.08); }
   
   /* Fix for option background in dark mode */
   select option { background: #1a1a1a; color: var(--text-primary); }
   
   .select-chevron {
       position: absolute;
       right: 12px;
       top: 50%;
       transform: translateY(-50%);
       font-size: 0.7rem;
       color: var(--text-muted);
       pointer-events: none;
   }
   
   /* ---- Account note ---- */
   .field-account {
       display: flex;
       align-items: center;
       gap: 7px;
       font-size: 0.72rem;
       color: var(--text-muted);
       padding: 8px 12px;
       background: var(--bg-subtle);
       border: 1px solid var(--border-subtle);
       border-radius: var(--radius-sm);
   }
   
   .field-account i { color: var(--accent-cyan); flex-shrink: 0; }
   
   /* ---- Send button ---- */
   .btn-send {
       background: var(--accent-gradient);
       border: none;
       color: white;
       padding: 11px 28px;
       border-radius: var(--radius-lg);
       font-size: 0.88rem;
       font-weight: 600;
       display: flex;
       align-items: center;
       gap: 8px;
       transition: var(--transition);
       box-shadow: var(--shadow-pop);
       align-self: flex-start;
   }
   
   .btn-send:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
   .btn-send:active { transform: translateY(0); }
   .btn-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
   
   /* ---- Success message ---- */
   .success-msg {
       display: flex;
       align-items: flex-start;
       gap: 12px;
       padding: 14px 16px;
       background: rgba(16, 185, 129, 0.07);
       border: 1px solid rgba(16, 185, 129, 0.25);
       border-radius: var(--radius-md);
       animation: fadeIn 0.3s var(--ease);
   }
   
   .success-msg i {
       font-size: 1.1rem;
       color: var(--green);
       flex-shrink: 0;
       margin-top: 1px;
   }
   
   .success-msg strong {
       display: block;
       font-size: 0.85rem;
       font-weight: 600;
       color: var(--text-primary);
       margin-bottom: 3px;
   }
   
   .success-msg p {
       font-size: 0.78rem;
       color: var(--text-muted);
       line-height: 1.5;
   }
   
   .success-msg a {
       color: var(--accent-cyan);
       text-decoration: underline;
       text-decoration-color: rgba(186,132,251,0.4);
   }
   
   .hidden { display: none !important; }
   
   @keyframes fadeIn {
       from { opacity: 0; transform: translateY(4px); }
       to   { opacity: 1; transform: translateY(0); }
   }
   
   /* =============================================
      RESPONSIVE
      ============================================= */
   @media (max-width: 700px) {
       body { padding: 0; }
   
       #app {
           max-width: 100%;
           height: 100vh;
           max-height: 100vh;
           border-radius: 0;
       }
   
       .support-layout {
           grid-template-columns: 1fr;
           grid-template-rows: auto 1fr;
           overflow-y: auto;
       }
   
       .support-side {
           padding: 20px 20px 20px 20px;
           border-right: none;
           border-bottom: 1px solid var(--border-glass);
       }
   
       .form-side { padding: 20px; }
   
       .field-group.two-col { grid-template-columns: 1fr; }
   
       .icon-pill { display: none; }
   }