@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');
:root{--deep:#2b0f18;--maroon:#7b1830;--rose:#b44b65;--gold:#d8b25f;--text:#3a2028;--muted:#735b61;--line:rgba(123,24,48,.12);--shadow:0 16px 45px rgba(50,10,20,.13)}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:'Tajawal',Arial,sans-serif;background:radial-gradient(circle at top right,rgba(216,178,95,.18),transparent 28%),radial-gradient(circle at bottom left,rgba(180,75,101,.13),transparent 32%),linear-gradient(145deg,#fffafb,#fff4f6,#ffffff);color:var(--text);overflow-x:hidden}
@keyframes fadeUp{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeDown{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:translateY(0)}}@keyframes softScale{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes glowPulse{0%,100%{box-shadow:0 0 12px rgba(241,207,118,.28),0 0 28px rgba(241,207,118,.12)}50%{box-shadow:0 0 18px rgba(241,207,118,.65),0 0 45px rgba(241,207,118,.28)}}
.app-shell{width:100%;min-height:100vh}.app-topbar{animation:fadeDown .75s ease both;position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(123,24,48,.09);padding:12px 14px}.app-topbar-inner{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:11px;min-width:0;text-decoration:none}.brand-icon{width:42px;height:42px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--maroon),var(--rose));color:#fff;font-weight:900;box-shadow:0 10px 25px rgba(123,24,48,.22);flex:none}.brand-text strong{display:block;font-size:16px;color:var(--deep);line-height:1.2;white-space:nowrap}.brand-text span{display:block;font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap}.nav-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.nav-links a{text-decoration:none;color:#5f3d05;background:#fff5db;border:1px solid rgba(216,178,95,.35);padding:9px 13px;border-radius:999px;font-size:12px;font-weight:900;transition:.2s}.nav-links a:hover,.nav-links a.active{background:linear-gradient(135deg,var(--maroon),var(--rose));color:#fff;border-color:transparent}
.hero,.page-hero{max-width:1180px;margin:18px auto 0;padding:0 16px}.hero-card{animation:softScale .95s ease both;position:relative;overflow:hidden;border-radius:34px;min-height:430px;display:flex;align-items:flex-end;background:linear-gradient(to top,rgba(43,15,24,.88),rgba(43,15,24,.40),rgba(43,15,24,.08)),url('images/work-1.jpg') center/cover no-repeat;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.55)}.hero-card:before,.page-hero-card:before{content:"";position:absolute;inset:16px;border:1px solid rgba(255,255,255,.22);border-radius:26px;pointer-events:none}.hero-content{position:relative;z-index:2;padding:46px;max-width:760px;color:#fff}.hero-badge,.page-badge{display:inline-flex;padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(14px);color:#ffe8a7;font-size:13px;font-weight:900;margin-bottom:18px;animation:fadeUp .85s ease both}.hero h1{font-size:62px;line-height:1.08;font-weight:900;letter-spacing:-1px;animation:fadeUp .85s .12s ease both}.hero h1 span,.page-hero-card h1 span{color:#f1cf76}.hero p{margin-top:16px;max-width:660px;font-size:18px;line-height:2;color:#fff3f5;animation:fadeUp .85s .24s ease both}.quick-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;animation:fadeUp .85s .36s ease both}.quick-tags span{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:999px;padding:8px 13px;font-size:13px;font-weight:800}
.page-hero-card{position:relative;overflow:hidden;border-radius:34px;min-height:330px;padding:48px;display:flex;align-items:center;background:linear-gradient(135deg,rgba(43,15,24,.94),rgba(123,24,48,.88)),url('images/work-2.jpg') center/cover no-repeat;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.55);color:#fff;animation:softScale .95s ease both}.page-hero-card h1{font-size:48px;line-height:1.25;font-weight:900;animation:fadeUp .85s .12s ease both}.page-hero-card p{margin-top:16px;max-width:760px;font-size:17px;line-height:2;color:#fff3f5;animation:fadeUp .85s .24s ease both}
.section{max-width:1180px;margin:auto;padding:44px 16px 22px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px;animation:fadeUp .85s ease both}.section-title small{display:inline-block;background:linear-gradient(135deg,var(--maroon),var(--rose));color:#fff;padding:7px 15px;border-radius:999px;font-size:12px;font-weight:900;margin-bottom:10px}.section-title h2{font-size:34px;color:var(--deep);line-height:1.3}.section-desc{max-width:520px;color:var(--muted);line-height:1.9;font-size:15px}.gallery-grid,.delete-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.gallery-item,.delete-item{position:relative;overflow:hidden;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 34px rgba(50,10,20,.09);animation:fadeUp .85s ease both}.gallery-item{cursor:pointer}.gallery-image{position:relative;aspect-ratio:4/3;overflow:hidden;background:#f7edf0}.gallery-image img,.delete-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease,filter .55s ease}.delete-item img{height:220px}.gallery-item:hover .gallery-image img{transform:scale(1.06);filter:saturate(1.08)}.gallery-image:after{content:"اضغط للتكبير";position:absolute;left:12px;bottom:12px;padding:7px 11px;border-radius:999px;background:rgba(43,15,24,.72);color:#fff;font-size:11px;font-weight:800;backdrop-filter:blur(10px)}.gallery-info,.delete-info{padding:15px 16px 17px}.gallery-info h3,.delete-info h3{font-size:18px;color:var(--deep);margin-bottom:7px}.gallery-info p,.delete-info p{font-size:13.5px;line-height:1.75;color:var(--muted);margin-bottom:12px}
.project-card,.content-block,.upload-card,.delete-card{margin-top:28px;background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:30px;padding:28px;box-shadow:var(--shadow);animation:fadeUp .85s ease both}.project-card{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start}.project-card h2,.content-block h2,.upload-card h2,.delete-card h2{font-size:30px;color:var(--maroon);margin-bottom:13px}.project-card p,.content-block p,.content-block li{line-height:2.05;color:#5b454b;font-size:16px}.content-block ul{padding-right:22px}.points{display:grid;gap:12px}.point,.step-box,.tech-item{background:#fff;border:1px solid rgba(123,24,48,.08);border-radius:20px;padding:15px}.point strong{display:block;color:var(--deep);margin-bottom:5px;font-size:15px}.point span{display:block;color:var(--muted);line-height:1.7;font-size:13px}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}.step-no{width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--maroon),var(--rose));color:#fff;font-weight:900;margin-bottom:12px}.step-box h3{font-size:17px;color:var(--deep);margin-bottom:8px}.step-box p{font-size:14px;color:var(--muted);line-height:1.8}.tech-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}.tech-item strong{display:block;color:var(--deep);margin-bottom:7px}.tech-item span{display:block;color:var(--muted);line-height:1.8;font-size:14px}
.upload-form{display:grid;gap:15px;max-width:720px}.field label{display:block;font-weight:900;color:var(--deep);margin-bottom:8px}.field input,.field textarea{width:100%;border:1px solid rgba(123,24,48,.16);border-radius:16px;padding:14px;font-family:'Tajawal',Arial,sans-serif;font-size:15px;background:#fff;color:var(--text);outline:none}.field textarea{min-height:100px;resize:vertical}.btn{border:none;border-radius:18px;padding:14px 22px;background:linear-gradient(135deg,var(--maroon),var(--rose));color:#fff;font-family:'Tajawal',Arial,sans-serif;font-size:16px;font-weight:900;cursor:pointer;box-shadow:0 12px 30px rgba(123,24,48,.22);text-decoration:none;display:inline-flex;justify-content:center;align-items:center}.btn.danger{background:linear-gradient(135deg,#8a1028,#c03952)}.btn.ghost{background:#fff;color:var(--maroon);border:1px solid rgba(123,24,48,.18);box-shadow:none}.alert{padding:14px 16px;border-radius:18px;margin-bottom:16px;font-weight:800;line-height:1.8}.alert.ok{background:#ecfff5;color:#0b5d35;border:1px solid #bce8cf}.alert.err{background:#fff0f2;color:#8a1028;border:1px solid #f0bcc8}
.lightbox,.modal-overlay{position:fixed;inset:0;z-index:999;background:rgba(24,7,13,.92);display:none;align-items:center;justify-content:center;padding:22px}.modal-overlay{z-index:1000;background:rgba(24,7,13,.72);backdrop-filter:blur(8px)}.lightbox.active,.modal-overlay.active{display:flex}.lightbox-panel{position:relative;width:min(980px,100%);max-height:92vh;display:flex;flex-direction:column;gap:12px;animation:zoomIn .22s ease}@keyframes zoomIn{from{transform:scale(.94);opacity:.3}to{transform:scale(1);opacity:1}}.lightbox-img-wrap{background:#12060a;border-radius:24px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.16)}.lightbox img{width:100%;max-height:76vh;object-fit:contain;display:block;background:#12060a}.lightbox-caption{color:#fff;text-align:center;line-height:1.7;font-weight:700;font-size:15px;padding:0 54px}.lightbox-close,.lightbox-next,.lightbox-prev{position:absolute;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(12px);transition:.2s}.lightbox-close{top:-6px;left:-6px;width:46px;height:46px;border-radius:16px;font-size:24px}.lightbox-next,.lightbox-prev{top:50%;transform:translateY(-50%);width:48px;height:60px;border-radius:18px;font-size:30px}.lightbox-next{left:-10px}.lightbox-prev{right:-10px}
.modal-box{width:min(480px,100%);background:#fff;border-radius:28px;padding:28px;text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.35);animation:softScale .22s ease}.modal-icon{width:62px;height:62px;margin:0 auto 14px;border-radius:22px;background:#fff0f2;color:#8a1028;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:900}.modal-box h3{font-size:25px;color:var(--deep);margin-bottom:9px}.modal-box p{color:var(--muted);line-height:1.9;margin-bottom:20px}.modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.footer{max-width:1180px;margin:22px auto 34px;padding:0 16px;animation:fadeUp .85s ease both}.footer-box{border-radius:28px;background:linear-gradient(135deg,var(--deep),var(--maroon));color:#fff;text-align:center;padding:30px 18px;box-shadow:var(--shadow)}.footer-box h3{color:#f1cf76;font-size:28px;margin-bottom:8px}.footer-box p{color:#fff2f5;line-height:1.8}.student-credit{margin:22px auto 0;width:fit-content;max-width:100%;padding:12px 24px;border-radius:999px;background:linear-gradient(135deg,rgba(241,207,118,.18),rgba(255,255,255,.08));border:1px solid rgba(241,207,118,.45);color:#ffe59a;font-size:17px;font-weight:900;text-shadow:0 0 12px rgba(241,207,118,.55);animation:glowPulse 2.4s ease-in-out infinite}.student-credit span{color:#fff;text-shadow:0 0 14px rgba(255,255,255,.45)}
@media(max-width:900px){.gallery-grid,.delete-grid{grid-template-columns:repeat(2,1fr)}.project-card{grid-template-columns:1fr}.steps-grid,.tech-list{grid-template-columns:1fr}.hero h1{font-size:48px}.hero-content{padding:34px}.section-head{display:block}.section-desc{margin-top:10px}}@media(max-width:620px){.app-topbar-inner{align-items:flex-start}.brand-icon{width:38px;height:38px;border-radius:14px}.brand-text strong{font-size:14px}.brand-text span{font-size:11px}.nav-links{gap:6px}.nav-links a{font-size:11px;padding:8px 10px}.hero,.page-hero{margin-top:12px;padding:0 12px}.hero-card{min-height:430px;border-radius:28px}.hero-content{padding:24px}.hero h1{font-size:38px}.hero p{font-size:15px}.section{padding:30px 12px 16px}.section-title h2{font-size:25px}.gallery-grid,.delete-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.gallery-image{aspect-ratio:1/1}.delete-item img{height:150px}.gallery-info,.delete-info{padding:11px}.gallery-info h3,.delete-info h3{font-size:14px}.gallery-info p,.delete-info p{font-size:11.5px}.project-card,.content-block,.upload-card,.delete-card{padding:20px;border-radius:24px}.project-card h2,.content-block h2,.upload-card h2,.delete-card h2{font-size:23px}.page-hero-card{min-height:310px;border-radius:28px;padding:30px 24px}.page-hero-card h1{font-size:31px}.page-hero-card p{font-size:14.5px}.student-credit{font-size:14px;padding:11px 16px}.footer{padding:0 12px}.lightbox{padding:12px}.lightbox img{max-height:72vh}.lightbox-caption{font-size:13px;padding:0 44px}.modal-box{padding:22px;border-radius:24px}}