/* ✅ THEME VARIABLES */
    :root {
        --primary-color: #0088cc;
        --primary-hover: #006699;
        --primary-light: #e0f2fe;
        --text-dark: #0f172a;
        --text-gray: #64748b;
        --bg-color: #f0f9ff;
        --card-shadow: 0 8px 20px rgba(0, 136, 204, 0.08);
        --card-radius: 20px;
        --success-green: #10b981;
        --warning-orange: #f59e0b;
        --danger-red: #ef4444;
      }
  
      body {
        background-color: var(--bg-color);
        font-family: 'Plus Jakarta Sans', sans-serif;
        color: var(--text-dark);
        padding-bottom: 90px;
      }
  
      /* === HEADER === */
      .app-header {
        background: #fff;
        padding: 15px 20px;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 4px 15px rgba(0,0,0,0.03);
        display: flex;
        align-items: center;
        gap: 12px;
      }
      
      .header-title {
        font-weight: 800;
        font-size: 1.1rem;
        color: var(--text-dark);
      }
  
      .back-btn {
        color: var(--text-dark);
        font-size: 1.2rem;
        text-decoration: none;
      }
  
      /* === STATUS CARD === */
      .status-card {
        background: #fff;
        border-radius: var(--card-radius);
        padding: 24px 20px;
        box-shadow: var(--card-shadow);
        margin-bottom: 24px;
        text-align: center;
        border: 1px solid rgba(255,255,255,0.6);
        position: relative;
        overflow: hidden;
      }
  
      .status-icon {
          font-size: 2.5rem;
          margin-bottom: 10px;
          display: block;
      }
  
      .status-title {
          font-weight: 800;
          font-size: 1.1rem;
          margin-bottom: 6px;
          color: var(--text-dark);
      }
  
      .status-desc {
          font-size: 0.9rem;
          color: var(--text-gray);
          line-height: 1.5;
          margin-bottom: 0;
      }
  
      /* Status Variants */
      .status-pending .status-icon { color: var(--warning-orange); }
      .status-pending { border-bottom: 4px solid var(--warning-orange); }
      
      .status-live .status-icon { color: var(--success-green); }
      .status-live { border-bottom: 4px solid var(--success-green); }
  
      .status-incomplete .status-icon { color: var(--text-gray); opacity: 0.5; }
  
      /* === FORM SECTIONS === */
      .section-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text-gray);
        text-transform: uppercase;
        margin-bottom: 12px;
        margin-top: 24px;
        letter-spacing: 0.5px;
      }
  
      .form-card {
        background: #fff;
        border-radius: var(--card-radius);
        padding: 20px;
        box-shadow: var(--card-shadow);
        border: 1px solid rgba(255,255,255,0.6);
      }
  
      .form-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 6px;
      }
  
      .form-control {
        background: #f8fafc;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        padding: 12px;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-dark);
        transition: all 0.2s;
      }
      .form-control:focus {
        background: #fff;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 4px rgba(0, 136, 204, 0.1);
      }
      .form-control:disabled, .form-control[readonly] {
        background: #f1f5f9;
        color: #94a3b8;
        border-color: #f1f5f9;
      }
  
      /* === BUTTONS === */
      .save-btn {
        background-color: var(--primary-color);
        color: #fff;
        border: none;
        border-radius: 16px;
        padding: 16px;
        font-weight: 700;
        font-size: 1rem;
        width: 100%;
        margin-top: 30px;
        box-shadow: 0 10px 20px rgba(0, 136, 204, 0.2);
        transition: all 0.2s ease;
      }
      .save-btn:active { transform: scale(0.98); background: var(--primary-hover); }
  
      .unlock-btn {
        border: 2px dashed var(--warning-orange);
        background: #fffbeb;
        color: var(--warning-orange);
        width: 100%;
        padding: 12px;
        border-radius: 12px;
        font-weight: 700;
        font-size: 0.9rem;
        margin-top: 15px;
        transition: 0.2s;
      }
      .unlock-btn:active { background: #fef3c7; transform: scale(0.98); }
  
      .logout-btn {
        display: block;
        text-align: center;
        color: var(--danger-red);
        font-weight: 700;
        text-decoration: none;
        margin-top: 30px;
        padding: 15px;
        background: #fff;
        border-radius: 16px;
        box-shadow: var(--card-shadow);
      }
      .logout-btn:active { background: #fef2f2; }
  
      .app-version {
        text-align: center;
        color: #94a3b8;
        font-size: 0.75rem;
        margin-top: 20px;
        font-weight: 600;
      }
  
      /* === BOTTOM NAV === */
      .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
        display: flex;
        justify-content: space-around;
        padding: 12px 0;
        z-index: 1000;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
      }
  
      .nav-item {
        text-align: center;
        color: #94a3b8;
        font-size: 0.7rem;
        text-decoration: none;
        font-weight: 600;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        transition: 0.2s;
      }
  
      .nav-item i {
        font-size: 1.4rem;
        margin-bottom: 2px;
      }
  
      .nav-item.active {
        color: var(--primary-color);
      }


    /* Inline overrides if needed, consistent with previous design */
    body { background-color: #f0f9ff; font-family: 'Plus Jakarta Sans', sans-serif; color: #0f172a; padding-bottom: 90px; }
    .status-card { background: #fff; border-radius: 20px; padding: 24px 20px; box-shadow: 0 8px 20px rgba(0, 136, 204, 0.08); margin-bottom: 24px; text-align: center; border: 1px solid rgba(255,255,255,0.6); }
    .form-card { background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 8px 20px rgba(0, 136, 204, 0.08); margin-bottom: 20px; }
    .form-control:disabled, .form-control[readonly] { background-color: #f1f5f9; color: #64748b; opacity: 1; }
    .input-group-text { background-color: #f8fafc; border-color: #e2e8f0; color: #64748b; }
    .save-btn { background-color: #0088cc; color: #fff; border: none; border-radius: 16px; padding: 16px; font-weight: 700; width: 100%; margin-top: 20px; box-shadow: 0 10px 20px rgba(0, 136, 204, 0.2); }
    .spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.15em; }