@import "https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap";:root{color:#16313a;font-synthesis:none;--ink:#16313a;--ink-soft:#5f7475;--navy:#0f2d3d;--green:#237c66;--green-soft:#e2f0e9;--sand:#b68a4c;--paper:#fbfaf7;--line:#dfded6;--rose:#a9514c;background:#f4f0e9;font-family:IBM Plex Sans Arabic,Cairo,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 5% 0,#fffdf7 0,#0000 34%),#f4f0e9;min-width:320px;margin:0;overflow-x:hidden}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:2px;outline:3px solid #237c6638}.app-shell{min-height:100vh}.topbar{background:var(--navy);color:#fffaf2;justify-content:space-between;align-items:center;height:84px;padding:0 5vw;display:flex;box-shadow:0 6px 20px #0f2d3d1f}.brand-block{align-items:center;gap:13px;display:flex}.brand-mark,.login-mark{width:42px;height:42px;color:var(--navy);background:#e9c67d;border-radius:12px 12px 12px 4px;place-items:center;font-size:23px;font-weight:800;display:grid}.brand-block h1{letter-spacing:-.4px;margin:1px 0 0;font-size:20px}.eyebrow,.section-kicker{color:#b9d1c7;letter-spacing:.08em;margin:0;font-size:11px;font-weight:700}.top-actions{align-items:center;gap:12px;display:flex}.secure-pill{color:#cde7d6;align-items:center;gap:7px;font-size:12px;display:inline-flex}.dot{background:#85d7a8;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #85d7a81f}.icon-button{color:#fffaf2;background:0 0;border:1px solid #ffffff2e;border-radius:9px;padding:8px 12px}.main-content{width:min(1400px,90vw);margin:0 auto;padding:52px 0 30px}.hero-row{justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px;display:flex}.hero-row h2{color:var(--ink);letter-spacing:-1px;margin:8px 0 5px;font-size:clamp(27px,4vw,40px);line-height:1.15}.hero-row .section-kicker{color:var(--green)}.muted{color:var(--ink-soft);margin:0;font-size:14px}.primary-button,.soft-button,.danger-button{border:0;border-radius:10px;padding:12px 19px;font-weight:700;transition:transform .16s,box-shadow .16s,background .16s}.primary-button{color:#fff;background:var(--green);box-shadow:0 8px 20px #237c662e}.primary-button:hover{background:#1d6c59;transform:translateY(-2px);box-shadow:0 12px 24px #237c6642}.primary-button.small{padding:9px 15px;font-size:13px}.primary-button.full{justify-content:space-between;align-items:center;width:100%;display:flex}.plus{margin-left:9px;font-size:22px;line-height:12px}.soft-button{color:var(--ink);background:#efede6;border:1px solid #e0ded5}.soft-button:hover{background:#e5e3da}.danger-button{color:#a04743;background:#fff0ee;border:1px solid #f0d1ce}.stats-grid{grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:25px;display:grid}.stat-card{border:1px solid var(--line);background:var(--paper);border-radius:14px;align-items:center;gap:15px;min-height:112px;padding:20px;display:flex}.stat-card p{color:var(--ink-soft);margin:0 0 5px;font-size:12px}.stat-card strong{color:var(--ink);font-size:31px;line-height:1;display:block}.stat-icon{width:45px;height:45px;color:var(--navy);background:#e4eff0;border-radius:12px;place-items:center;font-size:15px;font-weight:800;display:grid}.stat-card.green .stat-icon{color:var(--green);background:var(--green-soft);font-size:24px}.stat-card.sand .stat-icon{color:#856333;background:#f4ead7}.workspace-card{border:1px solid var(--line);background:var(--paper);border-radius:15px;overflow:hidden;box-shadow:0 15px 45px #26312f0d}.toolbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:18px;padding:19px 22px;display:flex}.search-wrap{flex:1;min-width:220px;position:relative}.search-wrap input{width:100%;height:45px;color:var(--ink);direction:rtl;background:#fffefa;border:1px solid #d6d9d3;border-radius:10px;padding:0 42px 0 40px}.search-wrap input::placeholder{color:#94a09c}.search-icon{z-index:1;color:var(--green);font-size:23px;position:absolute;top:8px;right:14px;transform:rotate(-20deg)}.clear-search{color:#83918e;background:0 0;border:0;font-size:22px;position:absolute;top:8px;left:8px}.toolbar-actions{align-items:center;gap:7px;display:flex}.toolbar-actions .soft-button{padding:9px 11px;font-size:12px}.filter-row{border-bottom:1px solid var(--line);background:#f8f6f1;flex-wrap:wrap;align-items:center;gap:8px;padding:13px 22px;display:flex}.filter-label{color:var(--ink-soft);margin-left:4px;font-size:12px;font-weight:700}.filter-row select{min-width:120px;height:34px;color:var(--ink-soft);background:#fff;border:1px solid #deddd6;border-radius:7px;padding:0 9px;font-size:12px}.results-count{color:var(--ink-soft);margin-right:auto;font-size:12px}.table-scroll{overflow-x:auto}.students-table{border-collapse:collapse;text-align:right;width:100%;min-width:920px}.students-table th{color:#71817e;white-space:nowrap;background:#f8f6f1;padding:14px 13px;font-size:11px;font-weight:700}.students-table td{color:#405553;white-space:nowrap;border-top:1px solid #ecebe4;padding:15px 13px;font-size:12px}.students-table tbody tr{transition:background .15s}.students-table tbody tr:hover{background:#fcfaf5}.name-column{min-width:185px}.serial{color:var(--green);font-size:13px;font-weight:800}.code-chip{color:#5f704f;direction:ltr;background:#f0f3df;border-radius:6px;padding:5px 8px;font-size:11px;font-weight:700;display:inline-block}.name-link{color:var(--ink);background:0 0;border:0;padding:0;font-weight:700}.name-link:hover{color:var(--green);text-decoration:underline}.gender-tag{color:#517272;background:#e8f0ef;border-radius:5px;padding:4px 7px;font-size:11px;display:inline-block}.gender-tag.female{color:#98566b;background:#f6e8ee}.result-pill{text-align:center;border-radius:5px;min-width:55px;padding:4px 7px;font-size:10px;display:inline-block}.result-pill.passed{color:#2d785b;background:#e3f1e8}.result-pill.failed{color:#a74f4b;background:#fae9e7}.result-pill.pending{color:#88734e;background:#f5eedf}.row-actions{gap:6px;display:flex}.row-actions button{color:var(--green);background:0 0;border:0;padding:4px;font-size:11px}.row-actions button:hover{text-decoration:underline}.row-actions .danger-link{color:#b05651}.empty-state{text-align:center;padding:75px 20px}.empty-icon{width:50px;height:50px;color:var(--green);background:var(--green-soft);border-radius:50%;place-items:center;margin:0 auto 13px;font-size:26px;display:grid}.empty-state h3{color:var(--ink);margin:0 0 7px;font-size:17px}.empty-state p{color:var(--ink-soft);margin:0;font-size:13px}.footer-note{color:#8b9691;justify-content:space-between;gap:15px;padding:17px 3px;font-size:11px;display:flex}.modal-backdrop{z-index:10;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f2d3d80;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.modal{background:var(--paper);border:1px solid #ffffff80;border-radius:17px;width:min(680px,100%);max-height:min(88vh,860px);overflow:hidden;box-shadow:0 25px 80px #0f2d3d33}.wide-modal{width:min(1040px,100%)}.details-modal{width:min(850px,100%)}.settings-modal{width:min(570px,100%)}.modal-header{border-bottom:1px solid var(--line);background:#fffdf9;justify-content:space-between;align-items:flex-start;gap:20px;padding:23px 25px 18px;display:flex}.modal-header h2{color:var(--ink);margin:5px 0 0;font-size:23px}.modal-header .section-kicker{color:var(--green)}.close-button{color:#7f8c87;background:#f0eee8;border:0;border-radius:8px;width:32px;height:32px;font-size:24px;line-height:1}.form-scroll,.details-scroll{max-height:calc(88vh - 147px);padding:22px 25px 8px;overflow-y:auto}.form-section{background:#fffefa;border:1px solid #e5e3db;border-radius:12px;margin-bottom:23px;padding:17px}.form-section-title{border-bottom:1px solid #eeeae0;margin-bottom:14px;padding-bottom:10px}.form-section-title h3,.detail-group h3{color:var(--navy);margin:0;font-size:15px}.form-section-title p{color:#8b9691;margin:4px 0 0;font-size:11px}.form-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.field,.serial-field{flex-direction:column;gap:6px;display:flex}.field>span,.serial-field>span{color:#657874;font-size:11px;font-weight:700}.field b{color:#b1524e;margin-right:3px}.field input,.field select{width:100%;height:40px;color:var(--ink);background:#fff;border:1px solid #d9ddd7;border-radius:8px;padding:0 11px;font-size:12px}.field input::placeholder{color:#adb6b0}.serial-field strong{height:40px;color:var(--green);background:var(--green-soft);border-radius:8px;align-items:center;padding:0 11px;font-size:14px;display:grid}.terms-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.terms-grid .form-section{margin-bottom:10px}.modal-footer{border-top:1px solid var(--line);background:#fffdf9;align-items:center;gap:9px;padding:15px 25px;display:flex}.footer-spacer{flex:1}.modal-footer .primary-button,.modal-footer .soft-button,.modal-footer .danger-button{padding:10px 14px;font-size:12px}.detail-group{border-bottom:1px solid #e8e6df;padding:18px 0}.detail-group:first-child{padding-top:0}.detail-grid{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:13px;display:grid}.detail-item{background:#f5f3ed;border-radius:8px;min-height:57px;padding:10px 12px}.detail-item span{color:#82908a;margin-bottom:5px;font-size:10px;display:block}.detail-item strong{color:var(--ink);font-size:12px;font-weight:700}.settings-body{padding:26px}.settings-icon{width:48px;height:48px;color:var(--green);background:var(--green-soft);border-radius:14px;place-items:center;margin-bottom:16px;font-size:26px;display:grid}.settings-body h3{color:var(--ink);margin:0 0 7px;font-size:17px}.settings-body>p{color:var(--ink-soft);margin:0 0 22px;font-size:12px;line-height:1.8}.setup-note{color:#756447;background:#fff8e9;border-right:3px solid #d9af68;border-radius:6px;margin-top:15px;padding:11px 13px;font-size:11px;line-height:1.7}.settings-body details{color:var(--ink-soft);margin-top:17px;font-size:11px}.settings-body summary{cursor:pointer;color:var(--green);font-weight:700}.settings-body details p{line-height:1.8}.toast{z-index:20;color:#236b58;background:#eff9f2;border:1px solid #cfe4d9;border-radius:9px;align-items:center;gap:9px;max-width:min(380px,100vw - 30px);padding:13px 16px;font-size:12px;animation:.25s ease-out slide-in;display:flex;position:fixed;bottom:25px;right:25px;box-shadow:0 10px 30px #0f2d3d1f}.toast>span{color:#fff;background:var(--green);border-radius:50%;place-items:center;width:21px;height:21px;font-weight:800;display:grid}.toast.error{color:#a64e49;background:#fff0ee;border-color:#f0d0cd}.toast.error>span{background:#b3524b}.toast.info{color:#7d663e;background:#fff8e8;border-color:#ead9ae}.toast.info>span{background:#b68a4c}@keyframes slide-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.login-page{background:var(--navy);direction:ltr;grid-template-columns:minmax(340px,470px) minmax(0,1fr);min-height:100vh;display:grid}.login-panel{background:var(--paper);direction:rtl;flex-direction:column;justify-content:center;min-width:0;padding:8vh clamp(30px,7vw,100px);display:flex}.login-mark{width:52px;height:52px;margin-bottom:28px;font-size:29px}.login-panel .eyebrow{color:var(--green)}.login-panel h1{color:var(--ink);letter-spacing:-1px;margin:7px 0;font-size:clamp(29px,4vw,42px)}.login-copy{max-width:290px;color:var(--ink-soft);margin:0 0 33px;font-size:13px;line-height:1.8}.login-panel form{width:min(100%,320px)}.login-panel label{color:var(--ink);margin-bottom:15px;font-size:11px;font-weight:700;display:block}.login-panel input{width:100%;height:45px;color:var(--ink);text-align:left;direction:ltr;background:#fff;border:1px solid #d9ddd7;border-radius:8px;margin-top:6px;padding:0 12px;font-size:13px;display:block}.form-error{color:#b3524b;margin:-2px 0 12px;font-size:11px}.login-hint{color:#8c9791;margin:19px 0 0;font-size:10px}.login-side{color:#eaf4ed;direction:rtl;background:linear-gradient(140deg,#123a48,#0f2d3d 70%);flex-direction:column;justify-content:center;min-width:0;padding:80px clamp(40px,8vw,150px);display:flex;position:relative;overflow:hidden}.login-side:before,.login-side:after{content:"";border:1px solid #d7bf803d;border-radius:50%;position:absolute}.login-side:before{width:480px;height:480px;top:-100px;right:-150px}.login-side:after{width:300px;height:300px;bottom:-100px;left:-150px}.side-number{color:#d9b46d;letter-spacing:.2em;font-size:13px;font-weight:800}.login-side h2{z-index:1;letter-spacing:-2px;margin:14px 0 17px;font-size:clamp(33px,5vw,65px);line-height:1.12;position:relative}.login-side p{z-index:1;color:#bcd0c9;max-width:320px;font-size:13px;line-height:1.8;position:relative}@media (width<=930px){.toolbar{flex-direction:column;align-items:stretch}.toolbar-actions{flex-wrap:wrap}.login-page{grid-template-columns:1fr}.login-side{display:none}}@media (width<=700px){.topbar{height:72px;padding:0 5vw}.brand-block h1{font-size:16px}.secure-pill{display:none}.main-content{width:92vw;padding-top:32px}.hero-row{flex-direction:column;align-items:stretch;gap:17px}.hero-row h2{font-size:30px}.hero-row .primary-button{align-self:flex-start}.stats-grid{gap:8px}.stat-card{gap:9px;min-height:92px;padding:12px}.stat-icon{width:34px;height:34px;font-size:11px}.stat-card strong{font-size:24px}.stat-card p{font-size:10px}.workspace-card{border-radius:11px}.toolbar,.filter-row{padding:14px}.filter-row{align-items:stretch}.filter-row select{flex:1;min-width:0}.results-count{width:100%;margin:3px 0 0}.footer-note{flex-direction:column}.form-grid{grid-template-columns:1fr 1fr}.form-section{padding:13px}.form-scroll,.details-scroll{padding:16px 14px 3px}.modal-header,.modal-footer{padding-left:17px;padding-right:17px}.modal-footer{flex-wrap:wrap}.terms-grid{grid-template-columns:1fr;gap:0}.detail-grid{grid-template-columns:repeat(2,1fr)}.toast{bottom:15px;right:15px}}@media (width<=430px){.top-actions .icon-button{padding:7px 8px;font-size:11px}.stats-grid{grid-template-columns:1fr 1fr 1fr}.stat-card{flex-direction:column;align-items:flex-start}.stat-card:nth-child(3){display:none}.form-grid{grid-template-columns:1fr}.field input,.field select{height:43px}.modal-footer>.soft-button:nth-child(2){order:3;width:100%}.modal-footer>.primary-button{flex:1}.detail-grid{grid-template-columns:1fr 1fr}.login-panel{padding:45px 28px}}
