* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: white;
            color: black;
            line-height: 1.6;
        }

        .container {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 1rem;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .center {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
        }

        .icon-circle {
            image: url("hey.png")
        }

        .icon-circle {
            width: 8rem;
            height: 8rem;
            background-color: #f9f6e3(254, 215, 270, 0.8);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin: 0 auto 2rem auto;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            text-align: center;
        }

        .title {
            font-size: 3rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 2rem;
            line-height: 1.2;
            color: white;
            text-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
        }

        .btn {
            background-color: #fb923c;
            color: black;
            border: none;
            padding: 1rem 3rem;
            border-radius: 9999px;
            font-size: 1.125rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        .btn:hover {
            background-color: #f97316;
            transform: scale(1.05);
        }

        .btn-blue {
            background-color: #2563eb;
            color: white;
        }

        .btn-blue:hover {
            background-color: #1d4ed8;
        }

        .btn-orange {
            background-color: #ea580c;
            color: white;
        }

        .btn-orange:hover {
            background-color: #dc2626;
        }

        .btn-amber {
            background-color: #b45309;
            color: white;
        }

        .btn-amber:hover {
            background-color: #92400e;
        }

        .btn-green {
            background-color: #16a34a;
            color: white;
        }

        .btn-green:hover {
            background-color: #15803d;
        }

        .btn-ghost {
            background-color: transparent;
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .btn-ghost:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .btn-outline {
            background-color: transparent;
            color: black;
            border: 1px solid #d1d5db;
        }

        .btn-outline:hover {
            background-color: #f9fafb;
        }

        .form-container {
            max-width: 28rem;
            margin: 0 auto;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(4px);
            border-radius: 1rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        .form-header {
            background-color: #fb923c;
            text-align: center;
            padding: 1rem;
            border-radius: 1rem 1rem 0 0;
        }

        .form-header h1 {
            font-size: 1.5rem;
            font-weight: bold;
            color: black;
        }

        .form-content {
            padding: 1.5rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            font-size: 1.125rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
            color: black;
        }

        .form-input {
            width: 100%;
            padding: 0.75rem;
            background-color: #f3f4f6;
            border: 1px solid #d1d5db;
            border-radius: 0.5rem;
            font-size: 1rem;
            height: 3rem;
        }

        .form-input:focus {
            outline: none;
            border-color: #fb923c;
            box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.1);
        }

        .form-input::placeholder {
            color: #6b7280;
        }

        .textarea {
            min-height: 25rem;
            resize: none;
            font-family: inherit;
        }

        .error {
            color: #dc2626;
            text-align: center;
            margin: 1rem 0;
        }

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

        .space-y-4>*+* {
            margin-top: 1rem;
        }

        .space-y-6>*+* {
            margin-top: 1.5rem;
        }

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

        .user-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .user-avatar {
            width: 3rem;
            height: 3rem;
            background-color: rgb(229, 231, 235);
            backdrop-filter: blur(4px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        .user-name {
            color: white;
            font-weight: 500;
            text-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }

        .subject-buttons {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            width: 100%;
            max-width: 20rem;
        }

        .subject-btn {
            width: 100%;
            height: 4rem;
            font-size: 1.25rem;
            font-weight: 600;
            border-radius: 9999px;
            transition: all 0.3s ease;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        .topic-buttons {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            max-width: 28rem;
            margin: 0 auto;
        }

        .topic-btn {
            width: 100%;
            height: 4rem;
            font-size: 1.125rem;
            font-weight: 600;
            border-radius: 9999px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1.5rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        .back-btn {
            margin-bottom: 1.5rem;
        }

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

        .content-info {
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .breadcrumb {
            font-size: 0.875rem;
            margin-bottom: 0.5rem;
        }

        .content-title {
            font-size: 1.875rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .last-modified {
            font-size: 0.875rem;
        }

        .content-area {
            background-color: rgba(255, 255, 255, 0);
            border: 1px solid #ffffff;
            border-radius: 0.5rem;
            padding: 1.5rem;
            min-height: 25rem;
        }

        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 16rem;
            color: #6b7280;
            text-align: center;
        }

        .empty-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .content-text {
            white-space: pre-wrap;
            color: #374151;
            line-height: 1.75;
        }

        .form-actions {
            margin-top: 1.5rem;
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
        }

        .hidden {
            display: none;
        }

        .max-w-4xl {
            max-width: 56rem;
            margin: 0 auto;
        }

        .bg-blue-50 {
            background-color: #eff6ff;
        }

        .text-blue-600 {
            color: #2563eb;
        }

        .text-blue-800 {
            color: #1e40af;
        }

        .bg-orange-50 {
            background-color: #fff7ed;
        }

        .text-orange-600 {
            color: #ea580c;
        }

        .text-orange-800 {
            color: #9a3412;
        }

        .bg-amber-50 {
            background-color: #fffbeb;
        }

        .text-amber-700 {
            color: #b45309;
        }

        .text-amber-800 {
            color: #92400e;
        }

        .btn-blue-light {
            background-color: #dbeafe;
            color: #1e3a8a;
        }

        .btn-blue-light:hover {
            background-color: #bfdbfe;
        }

        .btn-orange-light {
            background-color: #fed7aa;
            color: #9a3412;
        }

        .btn-orange-light:hover {
            background-color: #fdba74;
        }

        .btn-amber-light {
            background-color: #fef3c7;
            color: #92400e;
        }

        .btn-amber-light:hover {
            background-color: #fde68a;
        }

        /* Background images */
        .bg-onboarding {
            background-image: url('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/download%20%283%29.jfif-UyU1ZNc026f9L0qxlgtGOjcCTXvdE2.jpeg');
        }

        .bg-signin,
        .bg-login,
        .bg-home {
            background-image: url('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/download%20%281%29-CIUgyG0i9vduJiQorGGVaxzribrCzh.png');
        }

        .bg-maths {
            background-image: url('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Does-Computer-Science-Require-Math%20-%20Copy.jpg-4aPYAyui6CwCYGlarazDpJjizTtrxk.jpeg');
        }

        .bg-english {
            background-image: url('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/pexels-emily-768125.jpg-abexNh5JEECsvKBzqfS3qDIEMAv6Av.jpeg');
        }

        .bg-literature {
            background-image: url('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/words%20unspoken.jfif-Lbnt444UpjbdUB1WHloG64XImB9AJN.jpeg');
        }

        /* Subject page title styling */
        .subject-title {
            color: black !important;
            text-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
        }

        @media (max-width: 768px) {
            .title {
                font-size: 2rem;
            }

            .container {
                padding: 0.5rem;
            }
        }