/* CSS Reset */
        *,::after,::before{box-sizing:border-box}*{margin:0}@media (prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#__next,#root{isolation:isolate}

        /* CSS Variables */
        :root {
            --background: 0 0% 100%;
            --foreground: 240 10% 3.9%;
            --card: 0 0% 100%;
            --card-foreground: 240 10% 3.9%;
            --popover: 0 0% 100%;
            --popover-foreground: 240 10% 3.9%;
            --primary: 240 5.9% 10%;
            --primary-foreground: 0 0% 98%;
            --secondary: 240 4.8% 95.9%;
            --secondary-foreground: 240 5.9% 10%;
            --muted: 240 4.8% 95.9%;
            --muted-foreground: 240 3.8% 46.1%;
            --accent: 240 4.8% 95.9%;
            --accent-foreground: 240 5.9% 10%;
            --destructive: 0 84.2% 60.2%;
            --destructive-foreground: 0 0% 98%;
            --border: 240 5.9% 90%;
            --input: 240 5.9% 90%;
            --ring: 240 10% 3.9%;
            --radius: 0.5rem;
        }

        [data-theme="dark"] {
            --background: 240 10% 3.9%;
            --foreground: 0 0% 98%;
            --card: 240 10% 3.9%;
            --card-foreground: 0 0% 98%;
            --popover: 240 10% 3.9%;
            --popover-foreground: 0 0% 98%;
            --primary: 0 0% 98%;
            --primary-foreground: 240 5.9% 10%;
            --secondary: 240 3.7% 15.9%;
            --secondary-foreground: 0 0% 98%;
            --muted: 240 3.7% 15.9%;
            --muted-foreground: 240 5% 64.9%;
            --accent: 240 3.7% 15.9%;
            --accent-foreground: 0 0% 98%;
            --destructive: 0 62.8% 30.6%;
            --destructive-foreground: 0 0% 98%;
            --border: 240 3.7% 15.9%;
            --input: 240 3.7% 15.9%;
            --ring: 240 4.9% 83.9%;
        }

        /* Base Styles */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
            font-size: 16px;
            line-height: 1.5;
            color: hsl(var(--foreground));
            background-color: hsl(var(--background));
        }
        
        /* Add transitions after initial load */
        body.transitions-enabled {
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header/Navbar Styles */
        .navbar,
        header {
            border-bottom: 1px solid hsl(var(--border));
            padding: 1rem 0;
            background-color: hsl(var(--card));
        }

        .nav-container,
        header .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav-brand,
        h1 {
            font-size: 1.5rem;
            font-weight: 600;
            color: hsl(var(--foreground));
            text-decoration: none;
        }

        h1 a {
            color: inherit;
            text-decoration: none;
        }

        .nav-links,
        .nav {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .nav-link,
        .nav-item {
            padding: 0.5rem 1rem;
            border-radius: calc(var(--radius) - 2px);
            font-size: 0.875rem;
            font-weight: 500;
            color: hsl(var(--muted-foreground));
            text-decoration: none;
            transition: all 0.2s;
        }

        .nav-link:hover,
        .nav-item:hover {
            background-color: hsl(var(--accent));
            color: hsl(var(--foreground));
        }

        .nav-link.active,
        .nav-item.active {
            background-color: hsl(var(--primary));
            color: hsl(var(--primary-foreground));
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .auth-section {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .user-menu {
            position: relative;
        }

        .user-menu-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: calc(var(--radius) - 2px);
            border: 1px solid hsl(var(--border));
            background-color: hsl(var(--background));
            color: hsl(var(--foreground));
            cursor: pointer;
            transition: all 0.2s;
            font-size: 0.875rem;
			height: 40px;
			padding-right: 0;
        }

        .user-menu-btn:hover {
            background-color: hsl(var(--accent));
        }

        .user-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 0.5rem;
            background-color: hsl(var(--card));
            border: 1px solid hsl(var(--border));
            border-radius: var(--radius);
            min-width: 150px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            z-index: 50;
        }

        .dropdown-item {
            display: block;
            width: 100%;
            padding: 0.5rem 1rem;
            border: none;
            background: none;
            text-align: left;
            color: hsl(var(--foreground));
            cursor: pointer;
            transition: all 0.2s;
            font-size: 0.875rem;
        }

        .dropdown-item:hover {
            background-color: hsl(var(--accent));
        }

        @media (max-width: 768px) {
            .nav-links,
            .nav {
                display: none;
            }
            
            /* Shrink header on mobile */
            .navbar {
                padding: 0.75rem 0;
            }
            
            .nav-container {
                padding: 0 15px;
            }
            
            .nav-brand {
                font-size: 1.25rem;
            }
            
            /* Truncate email on mobile */
            #userEmail {
                max-width: 120px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            
            .user-menu-btn {
                padding: 0.375rem 0.75rem;
                font-size: 0.8125rem;
            }
        }

        .user-greeting {
            font-size: 0.875rem;
            color: hsl(var(--muted-foreground));
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        /* Button Styles */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: calc(var(--radius) - 2px);
            font-size: 0.875rem;
            font-weight: 500;
            height: 2.5rem;
            padding: 0 1rem;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
        }

        .btn-primary {
            background-color: hsl(var(--primary));
            color: hsl(var(--primary-foreground));
        }

        .btn-primary:hover {
            background-color: hsl(var(--primary) / 0.9);
        }

        .btn-secondary {
            background-color: hsl(var(--secondary));
            color: hsl(var(--secondary-foreground));
            border: 1px solid hsl(var(--border));
        }

        .btn-secondary:hover {
            background-color: hsl(var(--secondary) / 0.8);
        }

         .btn-block {
             width: 100%;
         }

         .btn-sm {
             height: 2rem;
             padding: 0 0.75rem;
             font-size: 0.8125rem;
         }

        .theme-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: calc(var(--radius) - 2px);
            border: 1px solid hsl(var(--border));
            background-color: transparent;
            color: hsl(var(--foreground));
            cursor: pointer;
            transition: all 0.2s;
        }

        .theme-toggle:hover {
            background-color: hsl(var(--accent));
        }

        .sun-icon {
            display: block;
        }

        .moon-icon {
            display: none;
        }

        [data-theme="dark"] .sun-icon {
            display: none;
        }

        [data-theme="dark"] .moon-icon {
            display: block;
        }

        /* Main Content */
        main {
            padding: 3rem 0;
        }

        .content {
            text-align: center;
        }

        .content h2 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
			margin-top: 1.5rem;
        }

        .content p {
            color: hsl(var(--muted-foreground));
        }

        /* Form Styles */
        .form-group {
            margin-bottom: 1rem;
        }

        .form-group label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .form-group input,
        .form-group select,
        .form-group textarea,
        .input {
            width: 100%;
            padding: 0.5rem 0.75rem;
            border: 1px solid hsl(var(--input));
            border-radius: calc(var(--radius) - 2px);
            background-color: hsl(var(--background));
            color: hsl(var(--foreground));
            font-size: 0.875rem;
            transition: all 0.2s;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus,
        .input:focus {
            outline: none;
            border-color: hsl(var(--ring));
            box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1);
        }

        /* Input Variants */
        .input-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }

        .input-lg {
            padding: 0.75rem 1rem;
            font-size: 1rem;
        }

        /* Select Styles */
        .select,
        .form-select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 0.5rem center;
            background-repeat: no-repeat;
            background-size: 1.5em 1.5em;
            padding-right: 2.5rem;
        }

        .form-select-inline {
            width: auto;
            padding: 0.5rem 2.5rem 0.5rem 0.75rem;
            border: 1px solid hsl(var(--input));
            border-radius: calc(var(--radius) - 2px);
            background-color: hsl(var(--background));
            color: hsl(var(--foreground));
            font-size: 0.875rem;
            transition: all 0.2s;
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 0.5rem center;
            background-repeat: no-repeat;
            background-size: 1.5em 1.5em;
        }
        
        .form-select-inline:focus {
            outline: none;
            border-color: hsl(var(--ring));
            box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1);
        }

        /* Checkbox and Radio */
        .checkbox,
        .radio {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
        }

        .checkbox input[type="checkbox"],
        .radio input[type="radio"] {
            width: auto;
            margin: 0;
            accent-color: hsl(var(--primary));
        }

        .checkbox-inline,
        .radio-inline {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            font-size: 0.875rem;
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
			backdrop-filter: blur(8px);
        }

        .modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background-color: hsl(var(--card));
            padding: 2rem;
            border-radius: var(--radius);
            border: 1px solid hsl(var(--border));
            width: 90%;
            max-width: 400px;
            position: relative;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .modal-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin: 0;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: hsl(var(--muted-foreground));
			user-select: none;
        }

        .modal-close:hover {
            color: hsl(var(--foreground));
        }

        .auth-switch {
            text-align: center;
            margin-top: 1rem;
        }

        .auth-switch button {
            background: none;
            border: none;
            color: hsl(var(--primary));
            cursor: pointer;
            text-decoration: underline;
        }

        .error-message {
            color: hsl(var(--destructive));
            font-size: 0.875rem;
            margin-top: 0.5rem;
        }

        .success-message {
            color: hsl(var(--primary));
            font-size: 0.875rem;
            margin-top: 0.5rem;
        }

        /* Card Styles */
        .card {
            background: hsl(var(--card));
            border: 1px solid hsl(var(--border));
            border-radius: var(--radius);
            padding: 2rem;
        }

        .card-sm {
            padding: 1rem;
        }

        .card-lg {
            padding: 3rem;
        }

        /* Section Styles */
        .section {
            margin-bottom: 2rem;
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: hsl(var(--foreground));
        }

        /* Text Utilities */
        .text-sm {
            font-size: 0.875rem;
        }

        .text-xs {
            font-size: 0.75rem;
        }

        .text-lg {
            font-size: 1.125rem;
        }

        .text-xl {
            font-size: 1.25rem;
        }

        .text-2xl {
            font-size: 1.5rem;
        }

        .text-muted {
            color: hsl(var(--muted-foreground));
        }

        .text-center {
            text-align: center;
        }

        .text-left {
            text-align: left;
        }

        .text-right {
            text-align: right;
        }

        .font-mono {
            font-family: monospace;
        }

        .font-semibold {
            font-weight: 600;
        }

        .font-bold {
            font-weight: 700;
        }

        /* Spacing Utilities */
        .mt-1 { margin-top: 0.25rem; }
        .mt-2 { margin-top: 0.5rem; }
        .mt-3 { margin-top: 0.75rem; }
        .mt-4 { margin-top: 1rem; }
        .mt-5 { margin-top: 1.25rem; }
        .mt-6 { margin-top: 1.5rem; }
        .mt-8 { margin-top: 2rem; }

        .mb-1 { margin-bottom: 0.25rem; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-3 { margin-bottom: 0.75rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mb-5 { margin-bottom: 1.25rem; }
        .mb-6 { margin-bottom: 1.5rem; }
        .mb-8 { margin-bottom: 2rem; }

        .mx-auto { margin-left: auto; margin-right: auto; }

        .p-1 { padding: 0.25rem; }
        .p-2 { padding: 0.5rem; }
        .p-3 { padding: 0.75rem; }
        .p-4 { padding: 1rem; }
        .p-5 { padding: 1.25rem; }
        .p-6 { padding: 1.5rem; }
        .p-8 { padding: 2rem; }

        /* Layout Utilities */
        .flex {
            display: flex;
        }

        .inline-flex {
            display: inline-flex;
        }

        .flex-col {
            flex-direction: column;
        }

        .items-center {
            align-items: center;
        }

        .justify-center {
            justify-content: center;
        }

        .justify-between {
            justify-content: space-between;
        }

        .gap-1 { gap: 0.25rem; }
        .gap-2 { gap: 0.5rem; }
        .gap-3 { gap: 0.75rem; }
        .gap-4 { gap: 1rem; }
        .gap-5 { gap: 1.25rem; }
        .gap-6 { gap: 1.5rem; }

        .flex-1 {
            flex: 1;
        }

        .w-full {
            width: 100%;
        }

        .max-w-sm { max-width: 24rem; }
        .max-w-md { max-width: 28rem; }
        .max-w-lg { max-width: 32rem; }
        .max-w-xl { max-width: 36rem; }
        .max-w-2xl { max-width: 42rem; }
        .max-w-3xl { max-width: 48rem; }
        .max-w-4xl { max-width: 56rem; }

        /* Border Utilities */
        .border {
            border: 1px solid hsl(var(--border));
        }

        .border-2 {
            border: 2px solid hsl(var(--border));
        }

        .border-dashed {
            border-style: dashed;
        }

        .rounded {
            border-radius: var(--radius);
        }

        .rounded-sm {
            border-radius: calc(var(--radius) - 4px);
        }

        .rounded-lg {
            border-radius: calc(var(--radius) + 4px);
        }

        /* Background Utilities */
        .bg-background {
            background-color: hsl(var(--background));
        }

        .bg-card {
            background-color: hsl(var(--card));
        }

        .bg-muted {
            background-color: hsl(var(--muted));
        }

        .bg-primary {
            background-color: hsl(var(--primary));
        }

        .bg-secondary {
            background-color: hsl(var(--secondary));
        }

        /* Common Components */
        .empty-state {
            text-align: center;
            color: hsl(var(--muted-foreground));
            padding: 2rem;
        }

        .divider {
            height: 1px;
            background-color: hsl(var(--border));
            margin: 1rem 0;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            font-weight: 500;
            border-radius: calc(var(--radius) - 4px);
            background-color: hsl(var(--secondary));
            color: hsl(var(--secondary-foreground));
        }

        .badge-primary {
            background-color: hsl(var(--primary));
            color: hsl(var(--primary-foreground));
        }

        .badge-destructive {
            background-color: hsl(var(--destructive));
            color: hsl(var(--destructive-foreground));
        }

         /* Icon Button */
         .btn-icon {
             background: none;
             border: none;
             padding: 0.375rem;
             border-radius: calc(var(--radius) - 2px);
             cursor: pointer;
             color: hsl(var(--muted-foreground));
             transition: all 0.2s;
             display: inline-flex;
             align-items: center;
             justify-content: center;
         }

         .btn-icon:hover {
             background: hsl(var(--accent));
             color: hsl(var(--foreground));
         }

         /* Icon Spacing - Consolidated */
         /* Icons next to text in buttons */
         .btn svg,
         .btn-primary svg,
         .btn-secondary svg,
         .btn-sm svg,
         button svg {
             margin-right: 0.5rem;
         }

         /* Icons in icon-only buttons should have no margin */
         .btn-icon svg,
         .copy-button svg,
         .open-button svg,
         .theme-toggle svg {
             margin-right: 0;
         }

         /* General icon spacing for common patterns */
         .file-info svg,
         .list-item svg,
         .dropdown-item svg {
             margin-right: 0.5rem;
         }

        /* Code Display */
        .code-display {
            background: hsl(var(--background));
            border: 1px solid hsl(var(--border));
            border-radius: var(--radius);
            padding: 2rem;
            text-align: center;
        }

        .code-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
        }

        /* Copy Button */
        .copy-button {
            background: none;
            border: 1px solid hsl(var(--border));
            border-radius: calc(var(--radius) - 2px);
            padding: 0.5rem;
            cursor: pointer;
            color: hsl(var(--muted-foreground));
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .copy-button:hover {
            background: hsl(var(--muted) / 0.5);
            color: hsl(var(--foreground));
        }

        .copy-button.copied {
            color: hsl(142 76% 36%);
            border-color: hsl(142 76% 36%);
        }

        /* Open Button */
        .open-button {
            background: none;
            border: 1px solid hsl(var(--border));
            border-radius: calc(var(--radius) - 2px);
            padding: 0.5rem;
            cursor: pointer;
            color: hsl(var(--muted-foreground));
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .open-button:hover {
            background: hsl(var(--muted) / 0.5);
            color: hsl(var(--foreground));
        }

        .open-button.opened {
            color: hsl(142 76% 36%);
            border-color: hsl(142 76% 36%);
        }

        /* Upload Area */
        .upload-area {
            border: 2px dashed hsl(var(--border));
            border-radius: calc(var(--radius) - 2px);
            padding: 2rem;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
            background: hsl(var(--background));
        }

        .upload-area.dragover {
            border-color: hsl(var(--primary));
            background: hsl(var(--primary) / 0.05);
        }

        .upload-area:hover {
            border-color: hsl(var(--primary));
        }

        /* List Container */
        .list-container {
            background: hsl(var(--card));
            border: 1px solid hsl(var(--border));
            border-radius: var(--radius);
            padding: 0.5rem;
        }

        .list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid hsl(var(--border));
        }

        .list-item:last-child {
            border-bottom: none;
        }

        /* File List Styles */
        .file-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .file-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem;
            border: 1px solid hsl(var(--border));
            border-radius: calc(var(--radius) - 2px);
            background: hsl(var(--card));
        }

        .file-info {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex: 1;
            min-width: 0;
        }

        .file-icon {
            color: hsl(var(--muted-foreground));
            flex-shrink: 0;
        }

        .file-name {
            font-size: 0.875rem;
            color: hsl(var(--foreground));
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .file-size {
            font-size: 0.75rem;
            color: hsl(var(--muted-foreground));
            flex-shrink: 0;
        }

        /* Password Form Styles */
        .password-card {
            background: hsl(var(--card));
            border: 1px solid hsl(var(--border));
            border-radius: var(--radius);
            padding: 3rem;
            width: 100%;
            max-width: 400px;
            text-align: center;
        }

        .password-icon {
            display: flex;
            justify-content: center;
            margin-bottom: 1.5rem;
            color: hsl(var(--primary));
        }

        /* URL Display Styles */
        .short-url-display {
            flex: 1;
            max-width: 500px;
            padding: 0.75rem;
            font-size: 1rem;
            font-family: monospace;
            background: hsl(var(--background));
            color: hsl(var(--primary));
            border: 2px solid hsl(var(--border));
            border-radius: var(--radius);
            text-align: center;
        }

        .short-url-display:focus {
            outline: none;
            border-color: hsl(var(--ring));
            box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1);
        }

        /* Transfer Code Styles */
        .transfer-code {
            font-size: 2rem;
            font-weight: 700;
            letter-spacing: 0.25rem;
            color: hsl(var(--primary));
            font-family: monospace;
            user-select: all;
        }

        /* Remove Button Styles */
        .remove-file {
            background: none;
            border: none;
            padding: 0.25rem;
            cursor: pointer;
            color: hsl(var(--muted-foreground));
            transition: color 0.2s;
        }

        .remove-file:hover {
            color: hsl(var(--destructive));
        }

        /* URL Container Styles */
        .url-container {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .url-container .input {
            flex: 1;
            background: hsl(var(--muted) / 0.5);
        }

        /* QR Code Styles */
        .qr-code-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
        }

        .qr-code-wrapper {
            position: relative;
            display: inline-block;
        }

        .qr-code-wrapper-small {
            width: 100px;
            height: 100px;
        }

        .qr-code-image {
            border: 1px solid hsl(var(--border));
            border-radius: 0.5rem;
            padding: 0.5rem;
            background: white;
            display: block;
        }

        .qr-code-copy-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 0.2s;
            background: hsl(var(--background) / 0.9);
            backdrop-filter: blur(4px);
        }

        .qr-code-wrapper:hover .qr-code-copy-overlay {
            opacity: 1;
        }

        .qr-code-actions {
            display: flex;
            gap: 0.5rem;
            justify-content: center;
        }

        .qr-code-actions .btn {
            display: flex;
            align-items: center;
        }

        /* Inline QR Code for Lists */
        .url-item-wrapper:not(:last-child) {
            border-bottom: 1px solid hsl(var(--border));
        }

        .url-item-wrapper .list-item {
            border-bottom: none;
        }

        .qr-code-inline {
            padding: 1rem;
            background: hsl(var(--muted) / 0.3);
            display: flex;
            align-items: center;
            gap: 1rem;
            border-top: 1px solid hsl(var(--border));
        }

        .qr-code-small {
            width: 100px;
            height: 100px;
            border: 1px solid hsl(var(--border));
            border-radius: 0.375rem;
            padding: 0.375rem;
            background: white;
        }

        /* Spinner/Loading Animation */
        .spinner {
            border: 3px solid hsl(var(--border));
            border-top: 3px solid hsl(var(--primary));
            border-radius: 50%;
            width: 24px;
            height: 24px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .loading-container {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            gap: 0.75rem;
        }

        /* Alert Styles */
        .alert {
            display: flex;
            gap: 1rem;
            padding: 1.25rem;
            border-radius: var(--radius);
            align-items: flex-start;
            border: 1px solid;
        }

        .alert-icon {
            flex-shrink: 0;
        }

        .alert-content {
            flex: 1;
            min-width: 0;
        }

        .alert-title {
            font-size: 1rem;
            font-weight: 600;
            margin: 0 0 0.5rem 0;
        }

        .alert-message {
            font-size: 0.875rem;
            margin: 0;
            line-height: 1.5;
        }

        /* Alert Variants */
        .alert-error {
            background: hsl(0 100% 97%);
            border-color: hsl(0 84.2% 90%);
        }

        .alert-error .alert-icon {
            color: hsl(0 84.2% 60.2%);
        }

        .alert-error .alert-title {
            color: hsl(0 84.2% 60.2%);
        }

        .alert-error .alert-message {
            color: hsl(0 84.2% 40%);
        }

        [data-theme="dark"] .alert-error {
            background: hsl(0 62.8% 15%);
            border-color: hsl(0 62.8% 30%);
        }

        [data-theme="dark"] .alert-error .alert-icon {
            color: hsl(0 84.2% 70%);
        }

        [data-theme="dark"] .alert-error .alert-title {
            color: hsl(0 84.2% 70%);
        }

        [data-theme="dark"] .alert-error .alert-message {
            color: hsl(0 84.2% 80%);
        }

        .alert-warning {
            background: hsl(38 100% 97%);
            border-color: hsl(38 100% 85%);
        }

        .alert-warning .alert-icon {
            color: hsl(38 92% 50%);
        }

        .alert-warning .alert-title {
            color: hsl(38 92% 50%);
        }

        .alert-warning .alert-message {
            color: hsl(38 92% 30%);
        }

        [data-theme="dark"] .alert-warning {
            background: hsl(38 92% 15%);
            border-color: hsl(38 92% 30%);
        }

        [data-theme="dark"] .alert-warning .alert-icon {
            color: hsl(38 92% 60%);
        }

        [data-theme="dark"] .alert-warning .alert-title {
            color: hsl(38 92% 60%);
        }

        [data-theme="dark"] .alert-warning .alert-message {
            color: hsl(38 92% 70%);
        }

        .alert-success {
            background: hsl(142 76% 97%);
            border-color: hsl(142 76% 85%);
        }

        .alert-success .alert-icon {
            color: hsl(142 76% 36%);
        }

        .alert-success .alert-title {
            color: hsl(142 76% 36%);
        }

        .alert-success .alert-message {
            color: hsl(142 76% 26%);
        }

        [data-theme="dark"] .alert-success {
            background: hsl(142 76% 15%);
            border-color: hsl(142 76% 30%);
        }

        [data-theme="dark"] .alert-success .alert-icon {
            color: hsl(142 76% 50%);
        }

        [data-theme="dark"] .alert-success .alert-title {
            color: hsl(142 76% 50%);
        }

        [data-theme="dark"] .alert-success .alert-message {
            color: hsl(142 76% 60%);
        }

        .alert-info {
            background: hsl(199 89% 97%);
            border-color: hsl(199 89% 85%);
        }

        .alert-info .alert-icon {
            color: hsl(199 89% 48%);
        }

        .alert-info .alert-title {
            color: hsl(199 89% 48%);
        }

        .alert-info .alert-message {
            color: hsl(199 89% 28%);
        }

        [data-theme="dark"] .alert-info {
            background: hsl(199 89% 15%);
            border-color: hsl(199 89% 30%);
        }

        [data-theme="dark"] .alert-info .alert-icon {
            color: hsl(199 89% 58%);
        }

        [data-theme="dark"] .alert-info .alert-title {
            color: hsl(199 89% 58%);
        }

        [data-theme="dark"] .alert-info .alert-message {
            color: hsl(199 89% 68%);
        }

        /* Prose/Markdown Styles */
        .prose {
            line-height: 1.7;
            padding: 1rem;
            background: hsl(var(--secondary));
            border-radius: var(--radius);
            word-wrap: break-word;
            text-align: left;
            white-space: normal;
        }

        .prose h1 {
            font-size: 1.75rem;
            font-weight: 700;
            margin-top: 2rem;
            margin-bottom: 1rem;
            color: hsl(var(--foreground));
            border-bottom: 2px solid hsl(var(--border));
            padding-bottom: 0.5rem;
        }

        .prose h1:first-child {
            margin-top: 0;
        }

        .prose h2 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-top: 1.75rem;
            margin-bottom: 0.75rem;
            color: hsl(var(--foreground));
        }

        .prose h3 {
            font-size: 1.25rem;
            font-weight: 600;
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
            color: hsl(var(--foreground));
        }

        .prose h4 {
            font-size: 1.125rem;
            font-weight: 600;
            margin-top: 1.25rem;
            margin-bottom: 0.5rem;
            color: hsl(var(--foreground));
        }

        .prose h5, .prose h6 {
            font-size: 1rem;
            font-weight: 600;
            margin-top: 1rem;
            margin-bottom: 0.5rem;
            color: hsl(var(--foreground));
        }

        .prose p {
            margin: 1rem 0;
            color: hsl(var(--muted-foreground));
        }

        .prose p:first-child {
            margin-top: 0;
        }

        .prose p:last-child {
            margin-bottom: 0;
        }

        .prose ul, .prose ol {
            margin: 1rem 0;
            padding-left: 1.5rem;
            color: hsl(var(--muted-foreground));
        }

        .prose li {
            margin: 0.5rem 0;
        }

        .prose li > ul, .prose li > ol {
            margin: 0.5rem 0;
        }

        .prose a {
            color: hsl(var(--primary));
            text-decoration: underline;
            text-underline-offset: 2px;
            transition: color 0.2s ease;
        }

        .prose a:hover {
            text-decoration-thickness: 2px;
        }

        .prose code {
            background: hsl(var(--muted));
            padding: 0.125rem 0.25rem;
            border-radius: calc(var(--radius) - 4px);
            font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
            font-size: 0.875em;
            color: hsl(var(--foreground));
        }

        .prose pre {
            background: hsl(var(--muted));
            padding: 1rem;
            border-radius: var(--radius);
            overflow-x: auto;
            margin: 1rem 0;
            border: 1px solid hsl(var(--border));
        }

        .prose pre code {
            background: transparent;
            padding: 0;
            border-radius: 0;
            font-size: 0.875rem;
        }

        .prose table {
            width: 100%;
            border-collapse: collapse;
            margin: 1rem 0;
            border: 1px solid hsl(var(--border));
            border-radius: var(--radius);
            overflow: hidden;
        }

        .prose th {
            background: hsl(var(--muted));
            padding: 0.75rem;
            text-align: left;
            font-weight: 600;
            border-bottom: 1px solid hsl(var(--border));
            color: hsl(var(--foreground));
        }

        .prose td {
            padding: 0.75rem;
            border-bottom: 1px solid hsl(var(--border));
            color: hsl(var(--muted-foreground));
        }

        .prose tr:last-child td {
            border-bottom: none;
        }

        .prose strong {
            font-weight: 600;
            color: hsl(var(--foreground));
        }

        .prose em {
            font-style: italic;
            color: hsl(var(--muted-foreground));
        }

        .prose blockquote {
            border-left: 4px solid hsl(var(--border));
            padding-left: 1rem;
            margin: 1rem 0;
            color: hsl(var(--muted-foreground));
            font-style: italic;
        }

        /* Utility Classes */
        .hidden {
            display: none;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }

        .truncate {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .transition {
            transition: all 0.2s;
        }

        .cursor-pointer {
            cursor: pointer;
        }

        .select-none {
            user-select: none;
        }

        .select-all {
            user-select: all;
        }

        /* Responsive Utilities */
        @media (max-width: 640px) {
            .flex-col-mobile {
                flex-direction: column;
            }
            
            /* Fix expiry options layout on mobile */
            .flex.items-center.gap-4.flex-wrap {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .checkbox-inline {
                margin-top: 0.5rem;
            }
            
            /* Fix code container layout on mobile */
            .code-container {
                flex-wrap: wrap;
                justify-content: center;
                gap: 1rem;
            }
            
            .short-url-display {
                width: 100%;
                max-width: none;
                flex-basis: 100%;
            }
            
            .copy-button,
            .open-button {
                flex-shrink: 0;
                min-width: 44px;
                min-height: 44px;
            }
            
            /* Fix URL container layout on mobile */
            .url-container {
                flex-direction: column;
                gap: 1rem;
            }
            
            .url-container .input {
                width: 100%;
            }
        }