* {
            transition: all 0.2s ease;
            font-family: 'IBM Plex Mono', monospace;
            letter-spacing: -0.02em;
        }
        
        body {
            font-family: 'IBM Plex Mono', monospace;
        }
        
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #000;
        }
        
        .light-mode ::-webkit-scrollbar-track {
            background: #fff;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 0;
        }
        
        .light-mode ::-webkit-scrollbar-thumb {
            background: #ccc;
        }
        
        .raised-shadow {
            box-shadow: 0.4rem 0.4rem 0 #222;
            transition: all 0.2s ease;
            border: 2px solid;
        }
        
        .light-mode .raised-shadow {
            box-shadow: 0.4rem 0.4rem 0 #ccc;
        }
        
        .raised-shadow:hover {
            transform: translate(0.1rem, 0.1rem);
            box-shadow: 0.2rem 0.2rem 0 #222;
        }
        
        .light-mode .raised-shadow:hover {
            box-shadow: 0.2rem 0.2rem 0 #ccc;
        }
        
        .theme-toggle-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            width: 50px;
            height: 50px;
            border-radius: 0;
            border: 2px solid;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0.3rem 0.3rem 0 #222;
        }
        
        .light-mode .theme-toggle-btn {
            background: #fff;
            border-color: #000;
            box-shadow: 0.3rem 0.3rem 0 #ccc;
        }
        
        audio {
            width: 100%;
            border: 2px solid;
            border-radius: 0;
            background: #111;
        }
        
        .light-mode audio {
            background: #f9f9f9;
        }
        
        .hidden {
            display: none;
        }
        
        .badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border: 2px solid;
            font-size: 0.75rem;
            font-weight: 500;
            background: transparent;
        }
        
        .status-ready {
            background: rgba(34, 197, 94, 0.15);
            color: rgba(34, 197, 94, 0.9);
            border: 1px solid rgba(34, 197, 94, 0.3);
            padding: 0.05rem 0.35rem;
            font-size: 0.65rem;
            font-weight: 500;
            border-radius: 0;
        }
        
        .status-update {
            background: rgba(245, 158, 11, 0.15);
            color: rgba(245, 158, 11, 0.9);
            border: 1px solid rgba(245, 158, 11, 0.3);
            padding: 0.05rem 0.35rem;
            font-size: 0.65rem;
            font-weight: 500;
            border-radius: 0;
        }
        
        .status-error {
            background: rgba(239, 68, 68, 0.15);
            color: rgba(239, 68, 68, 0.9);
            border: 1px solid rgba(239, 68, 68, 0.3);
            padding: 0.05rem 0.35rem;
            font-size: 0.65rem;
            font-weight: 500;
            border-radius: 0;
        }
        
        .method-get {
            background: #10b981;
            color: #000;
            border: 2px solid #10b981;
            padding: 0.15rem 0.6rem;
            font-size: 0.7rem;
            font-weight: 700;
            border-radius: 0;
        }
        
        .method-post {
            background: #3b82f6;
            color: #fff;
            border: 2px solid #3b82f6;
            padding: 0.15rem 0.6rem;
            font-size: 0.7rem;
            font-weight: 700;
            border-radius: 0;
        }
        
        .method-put {
            background: #f59e0b;
            color: #000;
            border: 2px solid #f59e0b;
            padding: 0.15rem 0.6rem;
            font-size: 0.7rem;
            font-weight: 700;
            border-radius: 0;
        }
        
        .method-delete {
            background: #ef4444;
            color: #fff;
            border: 2px solid #ef4444;
            padding: 0.15rem 0.6rem;
            font-size: 0.7rem;
            font-weight: 700;
            border-radius: 0;
        }
        
        .spinner {
            width: 50px;
            height: 50px;
            border: 3px solid #333;
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        
        .light-mode .spinner {
            border: 3px solid #ccc;
            border-top-color: #000;
        }
        
        .local-spinner {
            width: 16px;
            height: 16px;
            border: 2px solid #333;
            border-top-color: currentColor;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            display: none;
        }
        
        .light-mode .local-spinner {
            border: 2px solid #ccc;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .btn-loading {
            opacity: 0.7;
            cursor: not-allowed;
        }
        
        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .battery-container {
            position: relative;
            width: 40px;
            height: 18px;
            border: 2px solid currentColor;
            border-radius: 0;
            overflow: hidden;
        }
        
        .battery-level {
            height: 100%;
            border-radius: 0;
            transition: width 0.5s ease;
            background: currentColor;
        }
        
        .battery-tip {
            position: absolute;
            right: -4px;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 8px;
            background-color: currentColor;
            border-radius: 0;
        }
        
        .toast {
            position: fixed;
            top: 24px;
            right: 24px;
            background: #000;
            border: 2px solid #fff;
            padding: 16px 20px;
            border-radius: 0;
            color: #fff;
            z-index: 10000;
            transform: translateX(400px);
            transition: transform 0.3s ease;
        }
        
        .light-mode .toast {
            background: #fff;
            border: 2px solid #000;
            color: #000;
        }
        
        .toast.show {
            transform: translateX(0);
        }
        
        .media-preview {
            width: 100%;
            max-width: 100%;
            border: 2px solid;
            overflow: hidden;
        }
        
        .media-iframe {
            width: 100%;
            height: 400px;
            border: none;
        }
        
        .media-image {
            max-width: 100%;
            max-height: 400px;
        }