:root {
            --apple-spring: cubic-bezier(0.28, 0.84, 0.42, 1);
            --sys-blue: #007AFF;
            --sys-bg: #F2F2F7;
            --sys-card: #FFFFFF;
            --sys-text: #000000;
            --sys-gray: #8E8E93;
            --sys-gray-light: #C7C7CC;
            --sys-red: #FF3B30;
            --nav-height: calc(56px + env(safe-area-inset-bottom, 0px));
        }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--sys-bg); color: var(--sys-text); -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; overscroll-behavior-y: none; }
        
        .txt-large-title { font-size: 34px; font-weight: 700; letter-spacing: -0.04em; }
        .txt-title2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
        .txt-body { font-size: 15px; font-weight: 400; line-height: 1.4; }
        .txt-caption { font-size: 13px; font-weight: 400; color: var(--sys-gray); }

        .ios-card { background: var(--sys-card); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
        .ios-btn { background: var(--sys-blue); color: white; border-radius: 12px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; padding: 0 16px; transition: transform 0.2s var(--apple-spring), opacity 0.2s; cursor: pointer; user-select: none; width: 100%; border: none; }
        .ios-btn:active { transform: scale(0.96); opacity: 0.8; }
        .ios-btn-danger { background: var(--sys-red); }
        .ios-btn-secondary { background: #E5E5EA; color: var(--sys-text); }
        .ios-input, .ios-select { width: 100%; height: 44px; background: var(--sys-card); border: 1px solid var(--sys-gray-light); border-radius: 12px; padding: 0 16px; font-size: 15px; color: var(--sys-text); appearance: none; -webkit-appearance: none; transition: border-color 0.2s; }
        .ios-input:focus, .ios-select:focus { outline: none; border-color: var(--sys-blue); }
        .ios-row { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--sys-gray-light); }
        .ios-row:last-child { border-bottom: none; }
        
        .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-height); background: rgba(242, 242, 247, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 0.5px solid rgba(0,0,0,0.15); display: flex; justify-content: space-around; padding-top: 8px; padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 50; }
        .nav-item { display: flex; flex-direction: column; align-items: center; color: var(--sys-gray); font-size: 11px; font-weight: 500; gap: 4px; cursor: pointer; width: 25%; }
        .nav-item.active { color: var(--sys-blue); }
        .nav-item ion-icon { font-size: 24px; }
        
        .view { display: none; width: 100%; box-sizing: border-box; padding: 20px; padding-bottom: calc(var(--nav-height) + 20px); padding-top: calc(env(safe-area-inset-top, 20px) + 20px); animation: fadeIn 0.4s var(--apple-spring); }
        .view.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        #toast-container { position: fixed; top: env(safe-area-inset-top, 40px); left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; width: 90%; max-width: 400px; align-items: center; }
        .toast { background: rgba(0,0,0,0.8); color: white; padding: 12px 24px; border-radius: 24px; font-size: 14px; font-weight: 500; text-align: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fadeIn 0.3s var(--apple-spring) forwards; width: fit-content; }
        .toast.danger { background: rgba(255, 59, 48, 0.9); }
        
        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 9000; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
        .modal-overlay.active { opacity: 1; pointer-events: auto; }
        .modal-sheet { background: var(--sys-bg); width: 100%; max-width: 500px; border-radius: 24px 24px 0 0; padding: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 20px)); transform: translateY(100%); transition: transform 0.4s var(--apple-spring); max-height: 90vh; overflow-y: auto; }
        .modal-overlay.active .modal-sheet { transform: translateY(0); }
        .modal-sheet::-webkit-scrollbar { display: none; } /* Hide scrollbar for clean UI */
        .modal-sheet { -ms-overflow-style: none; scrollbar-width: none; }

        .form-group { margin-bottom: 16px; }
        .form-group label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--sys-gray); text-transform: uppercase; }
        .flex-between { display: flex; justify-content: space-between; align-items: center; }
        
        .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--sys-gray-light); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; color: white; flex-shrink: 0; }
        .quick-action-btn { background: rgba(0, 122, 255, 0.1); color: var(--sys-blue); width: 60px; height: 60px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: transform 0.2s; cursor: pointer; border: none; }
        .quick-action-btn:active { transform: scale(0.95); }
        .quick-action-btn ion-icon { font-size: 24px; }
        .bg-orange { background: rgba(255, 149, 0, 0.1); color: #FF9500; }
        .bg-green { background: rgba(52, 199, 89, 0.1); color: #34C759; }
        .bg-purple { background: rgba(175, 82, 222, 0.1); color: #AF52DE; }