*{margin:0;padding:0;box-sizing:border-box}
        :root{
            --p:#4F46E5;
            --s:#10B981;
            --d:#EF4444;
            --w:#F59E0B;
            --y:#FCD34D;
            --bg:#F8FAFC;
            --card:#FFF;
            --txt:#1F2937;
            --txtL:#6B7280;
            --brd:#E5E7EB;
            --shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
            --radius:12px;
            --transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            
            /* Dark mode variables */
            --dark-bg:#1a1a2e;
            --dark-card:#16213e;
            --dark-txt:#e6e6e6;
            --dark-txtL:#b8b8b8;
            --dark-brd:#2a2a3a;
        }
        body{
            font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
            background:var(--bg);
            color:var(--txt);
            line-height:1.5;
            padding-bottom:80px;
            transition:var(--transition);
        }
        
        body.dark-mode {
            background:var(--dark-bg);
            color:var(--dark-txt);
        }
        
        /* Improved math expression and table styling */
        .math-exp {
            display: inline-block;
            vertical-align: middle;
            position: relative;
            margin: 0 2px;
        }
        
        .math-num {
            text-align: center;
            display: block;
            padding: 0;
        }
        
        .math-line {
            display: block;
            border-top: 1px solid;
            padding: 0;
            text-align: center;
        }
        
        /* Table overflow container */
        .table-container {
            width: 100%;
            overflow-x: auto;
            margin: 12px 0;
            -webkit-overflow-scrolling: touch;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 8px 0;
        }
        
        table, th, td {
            border: 1px solid var(--brd);
        }
        
        th, td {
            padding: 8px 12px;
            text-align: left;
        }
        
        .dark-mode table, 
        .dark-mode th, 
        .dark-mode td {
            border-color: var(--dark-brd);
        }
        
        /* Image containment styles */
        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 8px 0;
            border-radius: 4px;
        }
        
        /* Ensure images don't overflow in any container */
        .q-txt img, .opt-txt img, .sol img, .comp img {
            max-width: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
        }
        
        /* Specific image containers */
        .img-container {
            width: 100%;
            overflow: hidden;
            border-radius: 4px;
            margin: 8px 0;
        }
        
        .hdr{
            background:var(--card);
            border-bottom:1px solid var(--brd);
            padding:12px 16px;
            display:grid;
            grid-template-columns:1fr auto 1fr;
            align-items:center;
            position:sticky;
            top:0;
            z-index:100;
            box-shadow:var(--shadow);
            transition:var(--transition);
        }
        
        .dark-mode .hdr {
            background:var(--dark-card);
            border-bottom-color:var(--dark-brd);
            color:var(--dark-txt);
        }
        
        .hdr-l{
            display:flex;
            align-items:center;
            gap:12px;
            justify-self:start
        }
        .hdr-c{
            text-align:center;
            font-weight:600;
            font-size:15px
        }
        .hdr-r{
            display:flex;
            justify-self:end;
            align-items:center;
            gap:8px
        }
        .q-info{
            font-size:14px;
            font-weight:600
        }
        .timer{
            background:#FEF3C7;
            color:#92400E;
            padding:6px 12px;
            border-radius:16px;
            font-size:13px;
            font-weight:600
        }
        .btn{
            border:none;
            border-radius:8px;
            font-weight:500;
            cursor:pointer;
            transition:var(--transition);
            font-size:13px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:6px;
        }
        .btn-sm{
            padding:8px 12px
        }
        .btn-p{
            background:var(--p);
            color:white
        }
        .btn-o{
            background:transparent;
            border:1px solid var(--brd);
            color:var(--txt)
        }
        .dark-mode .btn-o {
            border-color:var(--dark-brd);
            color:var(--dark-txt);
        }
        .btn-w{
            background:var(--y);
            color:#78350F;
            font-weight:600;
        }
        .btn-w.active{
            background:var(--w);
            color:white;
        }
        .btn:active{
            transform:scale(.98)
        }
        .cont{
            padding:16px;
            max-width:100%;
            overflow-x:hidden;
        }
        .dark-mode .cont {
            background:var(--dark-bg);
        }
        .q-card{
            background:var(--card);
            border-radius:var(--radius);
            padding:20px;
            margin-bottom:16px;
            border:1px solid var(--brd);
            overflow:hidden;
            box-shadow:var(--shadow);
            transition:var(--transition);
        }
        .dark-mode .q-card {
            background:var(--dark-card);
            border-color:var(--dark-brd);
            color:var(--dark-txt);
        }
        .lang{
            display:flex;
            background:#F3F4F6;
            border-radius:8px;
            padding:2px;
            margin-bottom:16px
        }
        .dark-mode .lang {
            background:#2a2a3a;
        }
        .lang-btn{
            flex:1;
            padding:8px;
            border:none;
            background:transparent;
            border-radius:6px;
            font-size:13px;
            cursor:pointer;
            transition:var(--transition)
        }
        .lang-btn.active{
            background:white;
            color:var(--p);
            box-shadow:0 1px 3px rgba(0,0,0,.1)
        }
        .dark-mode .lang-btn.active {
            background:var(--dark-card);
            color:var(--p);
        }
        .comp{
            background:#F0F9FF;
            border:1px solid #BAE6FD;
            border-radius:8px;
            padding:16px;
            margin-bottom:20px;
            overflow:hidden
        }
        .dark-mode .comp {
            background:#1e3a8a;
            border-color:#1e40af;
        }
        .comp h4{
            color:#0369A1;
            font-size:14px;
            margin-bottom:8px
        }
        .dark-mode .comp h4 {
            color:#93c5fd;
        }
        .q-txt{
            font-size:16px;
            line-height:1.6;
            margin-bottom:20px;
            color:var(--txt);
            overflow:hidden;
            word-wrap:break-word
        }
        .dark-mode .q-txt {
            color:var(--dark-txt);
        }
        .opts{
            display:flex;
            flex-direction:column;
            gap:12px
        }
        .opt{
            display:flex;
            align-items:center;
            padding:16px;
            background:var(--card);
            border:2px solid var(--brd);
            border-radius:12px;
            cursor:pointer;
            transition:var(--transition);
            gap:12px;
            overflow:hidden
        }
        .dark-mode .opt {
            background:var(--dark-card);
            border-color:var(--dark-brd);
        }
        .opt:hover:not(.submitted){
            border-color:var(--p);
            transform:translateY(-2px);
            box-shadow:var(--shadow);
        }
        .opt.sel{
            border-color:var(--p);
            background:#F0F9FF
        }
        .dark-mode .opt.sel {
            background:#1e3a8a;
        }
        .opt.correct{
            border-color:var(--s);
            background:#F0FDF4 !important
        }
        .dark-mode .opt.correct {
            background:#064e3b !important;
            border-color:#047857;
        }
        .opt.wrong{
            border-color:var(--d);
            background:#FEF2F2 !important
        }
        .dark-mode .opt.wrong {
            background:#7f1d1d !important;
            border-color:#b91c1c;
        }
        .opt.submitted{
            cursor:default
        }
        .opt-radio{
            width:20px;
            height:20px;
            border:2px solid var(--brd);
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            flex-shrink:0
        }
        .dark-mode .opt-radio {
            border-color:var(--dark-brd);
        }
        .opt.sel .opt-radio{
            border-color:var(--p);
            background:var(--p)
        }
        .opt.sel .opt-radio::after{
            content:'✓';
            color:white;
            font-size:12px;
            font-weight:bold
        }
        .opt.correct .opt-radio{
            border-color:var(--s) !important;
            background:var(--s) !important
        }
        .opt.correct .opt-radio::after{
            content:'✓';
            color:white;
            font-size:12px;
            font-weight:bold
        }
        .opt.wrong .opt-radio{
            border-color:var(--d) !important;
            background:var(--d) !important
        }
        .opt.wrong .opt-radio::after{
            content:'✗';
            color:white;
            font-size:12px;
            font-weight:bold
        }
        .opt-txt{
            flex:1;
            font-size:15px;
            overflow:hidden;
            word-wrap:break-word
        }
        .dark-mode .opt-txt {
            color:var(--dark-txt);
        }
        .sol{
            background:#F0FDF4;
            border:1px solid #BBF7D0;
            border-radius:8px;
            padding:16px;
            margin-top:20px;
            display:none;
            overflow:hidden
        }
        .dark-mode .sol {
            background:#064e3b;
            border-color:#047857;
        }
        .sol.show{
            display:block
        }
        .sol h4{
            color:var(--s);
            font-size:14px;
            margin-bottom:8px;
            display:flex;
            align-items:center;
            gap:6px
        }
        .dark-mode .sol h4 {
            color:#34d399;
        }
        .sol-info{
            display:flex;
            gap:12px;
            margin-bottom:12px;
            font-size:13px;
            color:var(--txtL);
        }
        .dark-mode .sol-info {
            color:var(--dark-txtL);
        }
        .sol-info span{
            display:flex;
            align-items:center;
            gap:4px;
        }
        .nav{
            position:fixed;
            bottom:0;
            left:0;
            right:0;
            background:var(--card);
            border-top:1px solid var(--brd);
            padding:12px 16px;
            display:flex;
            justify-content:space-between;
            align-items:center;
            z-index:100;
            box-shadow:0 -2px 10px rgba(0,0,0,0.05);
            transition:var(--transition);
        }
        .dark-mode .nav {
            background:var(--dark-card);
            border-top-color:var(--dark-brd);
        }
        .nav-btn{
            padding:12px 20px;
            border-radius:8px;
            font-weight:600;
            min-width:80px
        }
        .nav-btn:disabled{
            opacity:.5;
            cursor:not-allowed
        }
        .prog{
            text-align:center;
            font-size:13px;
            color:var(--txtL)
        }
        .dark-mode .prog {
            color:var(--dark-txtL);
        }
        .panel{
            position:fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background:var(--card);
            z-index:200;
            transform:translateY(100%);
            transition:transform .3s ease;
            overflow-y:auto;
            display:none;
        }
        .dark-mode .panel {
            background:var(--dark-card);
        }
        .panel.open{
            transform:translateY(0);
            display:block;
        }
        .panel-hdr{
            background:var(--p);
            color:white;
            padding:16px;
            display:flex;
            justify-content:space-between;
            align-items:center;
            position:sticky;
            top:0;
            z-index:1;
        }
        .panel-close{
            background:none;
            border:none;
            color:white;
            font-size:18px;
            cursor:pointer
        }
        .q-grid{
            display:grid;
            grid-template-columns:repeat(5,1fr);
            gap:12px;
            padding:20px
        }
        .q-num{
            aspect-ratio:1;
            display:flex;
            align-items:center;
            justify-content:center;
            background:#F3F4F6;
            border-radius:8px;
            font-weight:600;
            cursor:pointer;
            transition:var(--transition);
            font-size:14px
        }
        .dark-mode .q-num {
            background:#2a2a3a;
            color:var(--dark-txt);
        }
        .q-num.cur{
            background:var(--p);
            color:white
        }
        .q-num.ans{
            background:var(--s);
            color:white
        }
        .q-num.wrong{
            background:var(--d);
            color:white
        }
        .q-num.review{
            background:var(--y);
            color:#78350F;
            font-weight:bold;
        }
        .q-num.unattempted {
            background:#E5E7EB;
            color:#6B7280;
        }
        .dark-mode .q-num.unattempted {
            background:#4B5563;
            color:#D1D5DB;
        }
        .q-num:hover{
            transform:scale(1.05)
        }
        .modal{
            position:fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background:rgba(0,0,0,.5);
            z-index:300;
            display:none;
            align-items:center;
            justify-content:center;
            padding:20px
        }
        .modal.show{
            display:flex
        }
        .result{
            background:var(--card);
            border-radius:16px;
            padding:24px;
            width:100%;
            max-width:400px;
            text-align:center
        }
        .dark-mode .result {
            background:var(--dark-card);
        }
        .score{
            font-size:2rem;
            font-weight:bold;
            color:var(--p);
            margin:16px 0
        }
        .stats{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:12px;
            margin:20px 0
        }
        .stat{
            text-align:center;
            padding:12px;
            border-radius:8px;
            border:1px solid var(--brd)
        }
        .dark-mode .stat {
            border-color:var(--dark-brd);
        }
        .stat-val{
            font-size:1.5rem;
            font-weight:bold;
            margin-bottom:4px
        }
        .stat-lbl{
            font-size:12px;
            color:var(--txtL)
        }
        .dark-mode .stat-lbl {
            color:var(--dark-txtL);
        }
        .stat.c{
            border-color:var(--s);
            background:#F0FDF4
        }
        .dark-mode .stat.c {
            background:#064e3b;
            border-color:#047857;
        }
        .stat.w{
            border-color:var(--d);
            background:#FEF2F2
        }
        .dark-mode .stat.w {
            background:#7f1d1d;
            border-color:#b91c1c;
        }
        .stat.c .stat-val{
            color:var(--s)
        }
        .dark-mode .stat.c .stat-val {
            color:#34d399;
        }
        .stat.w .stat-val{
            color:var(--d)
        }
        .dark-mode .stat.w .stat-val {
            color:#f87171;
        }
        .modal-acts{
            display:flex;
            gap:12px;
            margin-top:20px
        }
        .modal-btn{
            flex:1;
            padding:12px;
            border-radius:8px;
            font-weight:600
        }
        .print-btn{
            position:fixed;
            bottom:100px;
            right:20px;
            width:50px;
            height:50px;
            border-radius:50%;
            background:var(--p);
            color:white;
            display:flex;
            align-items:center;
            justify-content:center;
            box-shadow:0 4px 10px rgba(0,0,0,0.2);
            z-index:50;
            cursor:pointer;
            transition:var(--transition);
            border:none;
        }
        .print-btn:hover{
            transform:scale(1.1);
        }
        .dark-mode .print-btn {
            background:var(--p);
        }
        .desktop-sidebar{
            display:none;
            position:fixed;
            right:0;
            top:0;
            bottom:0;
            width:300px;
            background:var(--card);
            border-left:1px solid var(--brd);
            padding:20px;
            overflow-y:auto;
            z-index:90;
            transition:var(--transition);
        }
        .dark-mode .desktop-sidebar {
            background:var(--dark-card);
            border-left-color:var(--dark-brd);
        }
        .desktop-sidebar h3{
            margin-bottom:16px;
            padding-bottom:12px;
            border-bottom:1px solid var(--brd);
            color:var(--txt);
        }
        .dark-mode .desktop-sidebar h3 {
            border-bottom-color:var(--dark-brd);
            color:var(--dark-txt);
        }
        .theme-toggle{
            background:none;
            border:none;
            color:var(--txt);
            font-size:18px;
            cursor:pointer;
            margin-left:8px;
        }
        .dark-mode .theme-toggle {
            color:var(--dark-txt);
        }
        @media (min-width: 1024px) {
            .cont{
                padding-right:320px;
            }
            .desktop-sidebar{
                display:block;
            }
            .panel{
                display:none !important;
            }
        }
        @media (max-width:375px){
            .hdr{padding:10px 12px}
            .cont{padding:12px}
            .q-card{padding:16px}
            .q-grid{grid-template-columns:repeat(4,1fr)}
        }