```javascript
class ArchSettingsPanel extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.settings = new Map();
  }
  
  connectedCallback() {
    this.render();
    this.loadSettings();
    this.setupListeners();
  }
  
  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: flex;
          flex-direction: column;
          height: 100vh;
          width: 100vw;
          background: #0f172a;
          font-family: 'JetBrains Mono', monospace;
        }
        .header {
          padding: calc(env(safe-area-inset-top, 24px) + 24px) 24px 16px;
          background: linear-gradient(to bottom, #020617, transparent);
          border-bottom: 1px solid #334155;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .title {
          font-size: 20px;
          color: #06b6d4;
          font-weight: 700;
        }
        .subtitle {
          font-size: 11px;
          color: #64748b;
          margin-top: 4px;
        }
        .close-btn {
          width: 40px;
          height: 40px;
          border: 1px solid #334155;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #94a3b8;
          cursor: pointer;
          background: rgba(51, 65, 85, 0.5);
        }
        .close-btn:active {
          background: #334155;
          color: #e2e8f0;
        }
        .content {
          flex: 1;
          overflow-y: auto;
          padding: 8px 20px calc(env(safe-area-inset-bottom, 24px) + 100px);
        }
        .section {
          margin-bottom: 24px;
        }
        .section-title {
          font-size: 10px;
          text-transform: uppercase;
          letter-spacing: 2px;
          color: #475569;
          margin-bottom: 12px;
          padding: 0 4px;
        }
        .tile-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 12px;
        }
        .tile {
          background: rgba(30, 41, 59, 0.8);
          border: 1px solid #334155;
          border-radius: 16px;
          padding: 16px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          cursor: pointer;
          transition: all 0.2s;
        }
        .tile:active {
          background: rgba(6, 182, 212, 0.1);
          border-color: #06b6d4;
        }
        .tile.active {
          background: rgba(6, 182, 212, 0.15);
          border-color: #06b6d4;
        }
        .tile-icon {
          width: 40px;
          height: 40px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(51, 65, 85, 0.5);
          color: #06b6d4;
        }
        .tile.active .tile-icon {
          background: #06b6d4;
          color: #0f172a;
        }
        .tile-info {
          flex: 1;
        }
        .tile-name {
          font-size: 13px;
          color: #e2e8f0;
          font-weight: 500;
        }
        .tile-status {
          font-size: 11px;
          color: #64748b;
          margin-top: 2px;
        }
        /* Slider styles */
        .slider-container {
          background: rgba(30, 41, 59, 0.8);
          border: 1px solid #334155;
          border-radius: 16px;
          padding: 20px;
          margin-bottom: 12px;
        }
        .slider-header {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 16px;
        }
        .slider-label {
          font-size: 13px;
          color: #e2e8f0;
        }
        .slider-value {
          margin-left: auto;
          font-size: 13px;
          color: #06b6d4;
        }
        input[type="range"] {
          width: 100%;
          height: 4px;
          background: #334155;
          border-radius: 2px;
          outline: none;
          -webkit-appearance: none;
        }
        input[type="range"]::-webkit-slider-thumb {
          -webkit-appearance: none;
          width: 20px;
          height: 20px;
          background: #06b6d4;
          border-radius: 50%;
          cursor: pointer;
          box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
        }
        .footer-hint {
          position: absolute;
          bottom: 24px;
          left: 50%;
          transform: translateX(-50%);
          color: #64748b;
          font-size: 11px;
          display: flex;
          align-items: center;
          gap: 6px;
        }
        .arrow {
          animation: bounce 1s infinite;
        }
        @keyframes bounce {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-4px); }
        }
      </style>
      
      <div class="header">
        <div>
          <div class="title">Quick Settings</div>
          <div class="subtitle" id="device-name">SM-S918B</div>
        </div>
        <button class="close-btn" id="close-btn">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
      
      <div class="content">
        <!-- Toggles -->
        <div class="section">
          <div class="section-title">Quick Toggles</div>
          <div class="tile-grid">
            <div class="tile" id="wifi-toggle" data-setting="wifi_enabled">
              <div class="tile-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M5 12.55a11 11 0 0 1 14.08 0"></path>
                  <path d="M1.42 9a16 16 0 0 1 21.16 0"></path>
                  <path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path>
                  <line x1="12" y1="20" x2="12.01" y2="20"></line>
                </svg>
              </div>
              <div class="tile-info">
                <div class="tile-name">Wi-Fi</div>
                <div class="tile-status" id="wifi-status">ON</div>
              </div>
            </div>
            
            <div class="tile" id="bt-toggle" data-setting="bluetooth_enabled">
              <div class="tile-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="6.5 6.5 17.5 17.5 12 23 12 1 17.5 6.5 6.5 17.5"></polyline>
                </svg>
              </div>
              <div class="tile-info">
                <div class="tile-name">Bluetooth</div>
                <div class="tile-status" id="bt-status">OFF</div>
              </div>
            </div>
            
            <div class="tile" id="dnd-toggle" data-setting="sound_dnd">
              <div class="tile-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                </svg>
              </div>
              <div class="tile-info">
                <div class="tile-name">Do Not Disturb</div>
                <div class="tile-status" id="dnd-status">OFF</div>
              </div>
            </div>
            
            <div class="tile" id="location-toggle" data-setting="location_mode">
              <div class="tile-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
                </svg>
              </div>
              <div class="tile-info">
                <div class="tile-name">Location</div>
                <div class="tile-status" id="location-status">High accuracy</div>
              </div>
            </div>
            
            <div class="tile" id="auto-rotate-toggle" data-setting="display_auto_rotate">
              <div class="tile-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.3"></path>
                </svg>
              </div>
              <div class="tile-info">
                <div class="tile-name">Auto-rotate</div>
                <div class="tile-status" id="rotate-status">ON</div>
              </div>
            </div>
            
            <div class="tile" id="flashlight-toggle">
              <div class="tile-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M9 18h6"></path>
                  <path d="M10 22h4"></path>
                  <path d="M15.09 14c.18-.9.27-1.48-.38-6.51a.77.77 0 0 0-.16-.3.73.74 0 0 0-.61-.29H9.07a.74.74 0 0 0-.6.29.77.77 0 0 0-.17.3c-.64 5.02-.55 5.6-.38 6.5A2 2 0 0 0 10 16h4a2 2 0 0 0 2.09-2z"></path>
                </svg>
              </div>
              <div class="tile-info">
                <div class="tile-name">Flashlight</div>
                <div class="tile-status" id="flash-status">OFF</div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Sliders -->
        <div class="section">
          <div class="section-title">Brightness & Volume</div>
          <div class="slider-container">
            <div class="slider-header">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #06b6d4;">
                <circle cx="12" cy="12" r="5"></circle>
                <line x1="12" y1="1" x2="12" y2="3"></line>
                <line x1="12" y1="21" x2="12" y2="23"></line>
                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                <line x1="1" y1="12" x2="3" y2="12"></line>
                <line x1="21" y1="12" x2="23" y2="12"></line>
                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
              </svg>
              <span class="slider-label">Brightness</span>
              <span class="slider-value" id="brightness-value">72%</span>
            </div>
            <input type="range" id="brightness-slider" min="0" max="255" value="183">
          </div>
          
          <div class="slider-container">
            <div class="slider-header">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #06b6d4;">
                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
              </svg>
              <span class="slider-label">Media Volume</span>
              <span class="slider-value" id="volume-value">80%</span>
            </div>
            <input type="range" id="volume-slider" min="0" max="100" value="80">
          </div>
        </div>
        
        <!-- System Shortcuts -->
        <div class="section">
          <div class="section-title">System</div>
          <div class="tile-grid">
            <div class="tile" id="settings-shortcut">
              <div class="tile-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <circle cx="12" cy="12" r="3"></circle>
                  <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
                </svg>
              </div>
              <div class="tile-info">
                <div class="tile-name">Settings</div>
                <div class="tile-status">All settings</div>
              </div>
            </div>
            
            <div class="tile" id="power-shortcut">
              <div class="tile-icon" style="background: rgba(239, 68, 68, 0.2); color: #ef4444;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path>
                  <line x1="12" y1="2" x2="12" y2="12"></line>
                </svg>
              </div>
              <div class="tile-info">
                <div class="tile-name">Power</div>
                <div class="tile-status">Shut down</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="footer-hint">
        <span>sw
___METADATA_START___
{"isNew":true,"userName":"jonin925"}
___METADATA_END___