:root{--bg-color:#0f1117;--card-bg:#161922;--text-main:#f1f5f9;--text-muted:#94a3b8;--primary:#3b82f6;--primary-hover:#2563eb;--danger:#ef4444;--success:#22c55e;--border:#2a2f3d;}.dark{--bg-color:#0f1117;--card-bg:#161922;--text-main:#f1f5f9;--text-muted:#94a3b8;--border:#2a2f3d;}* {box-sizing: border-box;margin: 0;padding: 0;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}body{background-color: var(--bg-color);color: var(--text-main);display: flex;justify-content: center;align-items: center;min-height: 100vh;}.app-container{width: 100%;max-width: 420px;height: 100vh;max-height: 890px;background-color: var(--card-bg);border-radius: 0;box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);display: flex;flex-direction: column;position: relative;overflow: hidden;border: 1px solid var(--border);}@media(min-width: 480px){.app-container{border-radius: 40px;height: 85vh;}}.app-header{padding: 20px;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid var(--border);}.app-header h1{font-size: 1.25rem;font-weight: 700;letter-spacing: -0.025em;}.status-indicator{display: flex;align-items: center;gap: 6px;font-size: 0.8rem;color: var(--text-muted);}.dot{width: 8px;height: 8px;background-color: var(--success);border-radius: 50%;box-shadow: 0 0 8px var(--success);}.app-content{flex: 1;position: relative;overflow-y: auto;}.view{position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 20px;display: none;flex-direction: column;background-color: var(--card-bg);animation: fadeIn 0.3s ease;}.view.active{display: flex;}@keyframes fadeIn{from{opacity: 0;transform: translateY(4px);}to{opacity: 1;transform: translateY(0);}}.target-user-card{display: flex;align-items: center;gap: 12px;padding: 12px 16px;background: rgba(255,255,255,0.03);border: 1px solid var(--border);border-radius: 16px;margin-bottom: 20px;}.avatar{width: 48px;height: 48px;border-radius: 50%;object-fit: cover;}.avatar.large{width: 80px;height: 80px;}.target-info h3{font-size: 1rem;font-weight: 600;}.code-label{font-size: 0.8rem;color: var(--text-muted);}.signal-strength{margin-left: auto;color: var(--primary);}.walkie-stage{flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;}.ptt-btn{width: 180px;height: 180px;border-radius: 50%;background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);border: none;color: white;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 12px;cursor: pointer;box-shadow: 0 10px 25px -5px rgba(59,130,246,0.5);transition: transform 0.1s ease, box-shadow 0.1s ease;z-index: 2;}.ptt-btn:active{transform: scale(0.95);box-shadow: 0 5px 15px -3px rgba(59,130,246,0.3);}.ptt-btn.transmitting{background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);box-shadow: 0 10px 25px -5px rgba(239,68,68,0.5);animation: pulseGlow 1.5s infinite;}.ptt-text{font-size: 0.75rem;font-weight: 700;letter-spacing: 0.05em;}.state-display{margin-top: 24px;font-size: 0.85rem;font-weight: 600;letter-spacing: 0.1em;color: var(--text-muted);}.visualizer-ring{position: absolute;width: 180px;height: 180px;border-radius: 50%;border: 2px solid var(--primary);opacity: 0;animation: none;pointer-events: none;}.ptt-btn.transmitting ~ .visualizer-ring{animation: ripple 2s infinite linear;}.visualizer-ring.delay{animation-delay: 1s;}@keyframes ripple{0%{transform: scale(1);opacity: 0.8;}100%{transform: scale(1.8);opacity: 0;}}@keyframes pulseGlow{0%{box-shadow: 0 0 0 0 rgba(239,68,68,0.7);}70%{box-shadow: 0 0 0 20px rgba(239,68,68,0);}100%{box-shadow: 0 0 0 0 rgba(239,68,68,0);}}.walkie-controls{display: flex;justify-content: space-between;align-items: center;padding: 10px 0;gap: 12px;}.control-btn{background: rgba(255,255,255,0.05);border: 1px solid var(--border);width: 44px;height: 44px;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: var(--text-main);cursor: pointer;transition: background 0.2s;}.control-btn:hover{background: rgba(255,255,255,0.1);}.control-btn.danger{color: var(--danger);border-color: rgba(239,68,68,0.3);}.volume-slider-container{display: flex;align-items: center;gap: 8px;flex: 1;background: rgba(255,255,255,0.03);padding: 8px 16px;border-radius: 20px;border: 1px solid var(--border);}.volume-slider{flex: 1;accent-color: var(--primary);height: 4px;}.bottom-nav{display: flex;border-top: 1px solid var(--border);background-color: var(--card-bg);padding: 8px 0;}.nav-item{flex: 1;background: none;border: none;display: flex;flex-direction: column;align-items: center;gap: 4px;color: var(--text-muted);font-size: 0.7rem;cursor: pointer;transition: color 0.2s;}.nav-item.active{color: var(--primary);}.section-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 16px;}.section-header h2{font-size: 1.2rem;}.primary-btn{background-color: var(--primary);color: white;border: none;padding: 10px 20px;border-radius: 12px;font-weight: 600;cursor: pointer;transition: background 0.2s;}.primary-btn:hover{background-color: var(--primary-hover);}.primary-btn.small{padding: 6px 12px;font-size: 0.8rem;}.primary-btn.full{width: 100%;}.secondary-btn{background: rgba(255,255,255,0.05);border: 1px solid var(--border);color: var(--text-main);padding: 10px 20px;border-radius: 12px;font-weight: 600;cursor: pointer;}.secondary-btn.small{padding: 6px 12px;font-size: 0.8rem;}.danger-btn{background-color: rgba(239,68,68,0.1);color: var(--danger);border: 1px solid rgba(239,68,68,0.2);padding: 10px 20px;border-radius: 12px;font-weight: 600;cursor: pointer;}.danger-btn.full{width: 100%;}.danger-btn.small{padding: 4px 8px;font-size: 0.75rem;}.search-bar input{width: 100%;padding: 10px 16px;background: rgba(255,255,255,0.03);border: 1px solid var(--border);border-radius: 12px;color: var(--text-main);margin-bottom: 16px;}.contacts-list{display: flex;flex-direction: column;gap: 10px;}.contact-card{display: flex;align-items: center;gap: 12px;padding: 12px;background: rgba(255,255,255,0.02);border: 1px solid var(--border);border-radius: 14px;}.contact-info{flex: 1;}.contact-info h4{font-size: 0.95rem;}.contact-info .code{font-size: 0.75rem;color: var(--text-muted);display: block;}.contact-info .status{font-size: 0.75rem;}.contact-info .status.online{color: var(--success);}.contact-info .status.offline{color: var(--text-muted);}.connect-action-btn{background: rgba(255,255,255,0.05);border: 1px solid var(--border);color: var(--text-main);padding: 6px 12px;border-radius: 8px;font-size: 0.75rem;cursor: pointer;}.connect-action-btn.active-call{background: var(--primary);border-color: var(--primary);color: white;}.activity-list{display: flex;flex-direction: column;gap: 12px;}.activity-item{display: flex;align-items: center;gap: 12px;padding: 12px;background: rgba(255,255,255,0.02);border: 1px solid var(--border);border-radius: 14px;}.activity-icon{width: 32px;height: 32px;border-radius: 50%;display: flex;align-items: center;justify-content: center;}.activity-icon.incoming{background: rgba(34,197,94,0.1);color: var(--success);}.activity-icon.missed{background: rgba(239,68,68,0.1);color: var(--danger);}.activity-details{flex: 1;}.activity-details h4{font-size: 0.9rem;}.activity-details p{font-size: 0.75rem;color: var(--text-muted);}.activity-details .time{font-size: 0.7rem;color: var(--text-muted);}.profile-header{display: flex;flex-direction: column;align-items: center;text-align: center;padding: 20px 0;border-bottom: 1px solid var(--border);margin-bottom: 20px;}.profile-header h3{margin-top: 12px;font-size: 1.1rem;}.my-code{font-size: 0.85rem;color: var(--text-muted);margin: 8px 0 12px 0;}.profile-settings{display: flex;flex-direction: column;gap: 16px;}.setting-item{display: flex;justify-content: space-between;align-items: center;font-size: 0.9rem;}.switch{position: relative;display: inline-block;width: 44px;height: 24px;}.switch input{opacity: 0;width: 0;height: 0;}.slider{position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: var(--border);transition: .3s;border-radius: 24px;}.slider:before{position: absolute;content: "";height: 18px;width: 18px;left: 3px;bottom: 3px;background-color: white;transition: .3s;border-radius: 50%;}input:checked + .slider{background-color: var(--primary);}input:checked + .slider:before{transform: translateX(20px);}.modal{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.6);backdrop-filter: blur(4px);display: none;justify-content: center;align-items: center;z-index: 100;}.modal.active{display: flex;}.modal-content{background: var(--card-bg);border: 1px solid var(--border);padding: 24px;border-radius: 20px;width: 90%;max-width: 360px;display: flex;flex-direction: column;gap: 16px;}.modal-content.wide{max-width: 390px;}.modal-content h3{font-size: 1.1rem;}.modal-content p{font-size: 0.85rem;color: var(--text-muted);}.modal-content input{padding: 10px 14px;background: rgba(255,255,255,0.03);border: 1px solid var(--border);border-radius: 10px;color: var(--text-main);}.modal-actions{display: flex;gap: 10px;justify-content: flex-end;}.admin-stats{display: grid;grid-template-columns: 1fr 1fr;gap: 10px;}.stat-box{background: rgba(255,255,255,0.02);border: 1px solid var(--border);padding: 12px;border-radius: 12px;text-align: center;}.stat-box h4{font-size: 1.2rem;color: var(--primary);}.stat-box p{font-size: 0.75rem;color: var(--text-muted);}.admin-table-container{max-height: 150px;overflow-y: auto;border: 1px solid var(--border);border-radius: 8px;}table{width: 100%;border-collapse: collapse;font-size: 0.75rem;}th, td{padding: 8px;text-align: left;border-bottom: 1px solid var(--border);}th{color: var(--text-muted);}.center-content{justify-content: center;align-items: center;padding: 20px;}.auth-card{background: var(--card-bg);border: 1px solid var(--border);padding: 24px;border-radius: 24px;width: 100%;max-width: 360px;display: flex;flex-direction: column;gap: 16px;}.auth-card h2{font-size: 1.25rem;text-align: center;}.auth-card p{font-size: 0.8rem;color: var(--text-muted);text-align: center;margin-top: -8px;}.auth-step{display: none;flex-direction: column;gap: 12px;}.auth-step.active{display: flex;}.phone-input-group{display: flex;gap: 8px;}.country-select{background: rgba(255,255,255,0.03);border: 1px solid var(--border);border-radius: 10px;color: var(--text-main);padding: 10px;}.phone-input-group input{flex: 1;background: rgba(255,255,255,0.03);border: 1px solid var(--border);border-radius: 10px;color: var(--text-main);padding: 10px;}.otp-inputs{display: flex;justify-content: space-between;gap: 8px;}.otp-inputs input{width: 40px;height: 44px;text-align: center;font-size: 1.2rem;background: rgba(255,255,255,0.03);border: 1px solid var(--border);border-radius: 8px;color: var(--text-main);}.timer{font-size: 0.75rem;text-align: center;color: var(--text-muted);}.terms-label{display: flex;align-items: center;gap: 8px;font-size: 0.75rem;color: var(--text-muted);cursor: pointer;}

/* Karbon Sites Branding */

  #karbon-promo-banner {
      position: fixed;
      bottom: 10px;
      right: 10px;
      background-color: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 8px 16px;
      border-radius: 8px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      font-size: 14px;
      z-index: 10000;
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      transition: transform 0.2s ease-in-out;
  }
  #karbon-promo-banner:hover {
      transform: scale(1.05);
  }