:root{--bg:#f4f3ef;--surface:#fff;--surface-2:#f0f3f1;--text:#142b28;--muted:#76827f;--line:#e0e6e3;--primary:#b9874d;--primary-strong:#8e612f;--accent:#103b36;--success:#23836a;--danger:#c4565b;--shadow:0 14px 40px #193b3410}
html[data-theme=dark]{--bg:#091714;--surface:#10231f;--surface-2:#17302a;--text:#edf5f2;--muted:#9baca7;--line:#24423b;--primary:#d2a468;--primary-strong:#e3b77d;--accent:#0b1e1a;--success:#54bd99;--danger:#ed777d;--shadow:0 18px 55px #0004;color-scheme:dark}
body,button,input,select,textarea{font-family:"Cairo","Segoe UI",Tahoma,sans-serif}body{background:var(--bg);background-image:radial-gradient(circle at 15% 5%,#c79a5f10,transparent 25%),radial-gradient(circle at 80% 90%,#1a685914,transparent 28%);transition:background-color .35s,color .35s}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s;animation-timing-function:ease-out}
.designer-credit{position:fixed;z-index:50;left:18px;bottom:12px;padding:7px 11px;border:1px solid color-mix(in srgb,var(--line) 72%,transparent);border-radius:999px;background:color-mix(in srgb,var(--surface) 86%,transparent);color:var(--muted);font-size:9px;direction:ltr;letter-spacing:.025em;backdrop-filter:blur(12px);box-shadow:0 6px 18px #071d1812;opacity:.72;transition:opacity .2s,transform .2s}.designer-credit:hover{opacity:1;transform:translateY(-2px)}.designer-credit a{color:var(--primary-strong);font-weight:700}.designer-credit a:hover{text-decoration:underline}
.shell{position:relative;align-items:flex-start}
.sidebar{width:286px;padding:30px 20px;background:linear-gradient(165deg,#123f3a 0%,#0b2d29 52%,#071f1c 100%);border-left:1px solid #ffffff0e;box-shadow:-12px 0 45px #06181522;overflow:hidden}
.sidebar:before{content:"";position:absolute;width:220px;height:220px;right:-100px;top:-75px;border:1px solid #d6a7672b;border-radius:50%;box-shadow:0 0 0 28px #d6a7670b,0 0 0 58px #d6a76708;pointer-events:none}.sidebar:after{content:"ES";position:absolute;left:-20px;bottom:45px;color:#ffffff05;font:800 130px Georgia,serif;letter-spacing:-.08em;pointer-events:none}
.sidebar .brand{position:relative;z-index:1;padding:7px 8px 24px;border-bottom:1px solid #ffffff12;gap:13px}.sidebar .brand dotlottie-player,.sidebar .brand img{width:46px!important;height:46px!important;padding:5px;background:#fff;border-radius:14px 5px 14px 5px;box-shadow:0 10px 25px #0003}.sidebar .brand span{font-size:17px;letter-spacing:.04em}.sidebar .brand small{color:#d1aa75;font-size:9px;font-weight:500;letter-spacing:.05em}
.nav{position:relative;z-index:1;gap:7px}.nav a{min-height:49px;padding:0 14px;display:flex;align-items:center;gap:12px;border:1px solid transparent;border-radius:13px;color:#b9cbc6;font-size:13px;font-weight:600;transition:background .25s,color .25s,transform .25s,border-color .25s}.nav a:hover{background:#ffffff0a;border-color:#ffffff0d;color:#fff;transform:translateX(-3px)}.nav a.active{background:linear-gradient(110deg,#ffffff18,#ffffff0a);border-color:#ffffff17;color:#fff;box-shadow:inset -3px 0 #d3a366,0 9px 24px #04141125;transform:none}.nav-icon{width:20px;height:20px;display:grid;place-items:center;flex:0 0 auto;color:#d7ab70}.nav-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sidebar-foot{position:relative;z-index:1;padding:16px;border:1px solid #ffffff0c;border-radius:14px;background:#ffffff08;color:#9eb2ac;line-height:1.9}.sidebar-foot:before{content:"";display:inline-block;width:7px;height:7px;margin-left:7px;border-radius:50%;background:#62c6a2;box-shadow:0 0 0 5px #62c6a216;animation:statusPulse 2.4s infinite}
.main{position:relative;min-height:100vh}.main:before{content:"";position:fixed;width:340px;height:340px;left:-190px;top:170px;border:1px solid color-mix(in srgb,var(--primary) 12%,transparent);border-radius:50%;pointer-events:none}
.topbar{height:88px;padding:0 34px;background:color-mix(in srgb,var(--surface) 90%,transparent);border-color:var(--line);backdrop-filter:blur(16px);position:sticky;top:0;z-index:10}.topbar h1{position:relative;padding-right:17px;font-size:21px}.topbar h1:before{content:"";position:absolute;right:0;top:5px;width:4px;height:22px;border-radius:4px;background:linear-gradient(var(--primary),var(--primary-strong))}.topbar-actions .btn{width:auto;min-height:42px;border:1px solid var(--line);box-shadow:none}.theme-toggle{width:44px!important;padding:0!important;justify-content:center}.theme-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.content{position:relative;padding:30px 34px 45px}.content>*{animation:contentRise .55s cubic-bezier(.2,.75,.25,1) both}.content>*:nth-child(2){animation-delay:.07s}.content>*:nth-child(3){animation-delay:.12s}
.card{position:relative;border-color:var(--line);border-radius:18px;box-shadow:var(--shadow);transition:border-color .25s,box-shadow .25s,transform .25s}.card:hover{border-color:color-mix(in srgb,var(--primary) 28%,var(--line));box-shadow:0 18px 48px #183b3417}
.stats{gap:16px}.stat{min-height:135px;padding:22px 24px;border:0;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 90%,var(--primary) 10%))}.stat:before{content:"";position:absolute;right:0;top:22px;width:3px;height:34px;border-radius:4px;background:var(--primary)}.stat:after{width:110px;height:110px;left:-38px;bottom:-50px;background:var(--primary);opacity:.08}.stat .label{font-weight:600}.stat .value{color:var(--text);font-size:32px;letter-spacing:-.035em}
.section-head{margin-bottom:20px}.section-head h2{color:var(--text);font-size:18px}.label{color:var(--muted)}
.btn{min-height:43px;padding:10px 17px;border-radius:12px;background:linear-gradient(115deg,var(--primary),var(--primary-strong));box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 25%,transparent);transition:transform .22s,box-shadow .22s,filter .22s}.btn:hover{background:linear-gradient(115deg,var(--primary),var(--primary-strong));filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 12px 25px color-mix(in srgb,var(--primary) 32%,transparent)}.btn.secondary{background:var(--surface-2);border:1px solid var(--line);color:var(--text);box-shadow:none}.btn.secondary:hover{background:color-mix(in srgb,var(--surface-2) 87%,var(--primary) 13%)}
.field{gap:8px}.field label{color:var(--text);font-size:12px}.field input,.field select,.field textarea{min-height:48px;padding:12px 14px;border-color:var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 84%,var(--surface-2) 16%);transition:border-color .2s,box-shadow .2s,background .2s}.field input:hover,.field select:hover,.field textarea:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.field textarea{min-height:110px}
.table-wrap{border:1px solid var(--line);border-radius:13px}table{background:var(--surface)}th{padding:15px 13px;background:var(--surface-2);color:var(--muted);font-size:11px}td{padding:15px 13px}tbody tr{transition:background .2s}tbody tr:hover{background:color-mix(in srgb,var(--primary) 5%,var(--surface))}.badge{padding:6px 10px;font-weight:700}
.flash{border:1px solid color-mix(in srgb,var(--success) 22%,transparent);border-radius:13px}.flash.error{border-color:color-mix(in srgb,var(--danger) 22%,transparent)}
.rental-date{display:grid;gap:6px;min-width:150px}.rental-date strong{font-size:12px;color:var(--text);white-space:nowrap}.date-countdown{width:max-content;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:800;background:color-mix(in srgb,var(--success) 12%,transparent);color:var(--success)}.date-countdown.soon{background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary-strong)}.date-countdown.urgent,.date-countdown.overdue{background:color-mix(in srgb,var(--danger) 13%,transparent);color:var(--danger)}.date-countdown.urgent{animation:datePulse 2s ease-in-out infinite}@keyframes datePulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--danger) 0%,transparent)}}
html[data-theme=dark] input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1)}
@keyframes contentRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes statusPulse{50%{box-shadow:0 0 0 8px transparent}}
@media(max-width:950px){.sidebar{width:230px}.content{padding:24px}.topbar{padding-inline:24px}}
@media(max-width:680px){.shell{display:block}.sidebar{width:100%;height:auto;min-height:0;border-left:0;border-bottom:1px solid #ffffff12}.sidebar:after,.sidebar:before,.main:before{display:none}.sidebar .brand{justify-content:flex-start;padding-bottom:13px}.sidebar .nav{padding-bottom:3px}.nav a{min-height:44px}.topbar{height:68px;padding-inline:16px}.content{padding:16px}.content>*{animation-duration:.4s}.stats{gap:12px}.stat{min-height:112px}.card:hover{transform:none}.table-wrap{border-radius:11px}}
@media(max-width:680px){.designer-credit{left:50%;bottom:6px;transform:translateX(-50%);white-space:nowrap;font-size:8px}.designer-credit:hover{transform:translateX(-50%) translateY(-1px)}}
@media(prefers-reduced-motion:reduce){.content>*,.sidebar-foot:before{animation:none!important}.card,.btn,.nav a{transition:none!important}}
.login-field input{direction:rtl;text-align:right;padding-right:50px;padding-left:46px}.login-field .input-icon{right:17px;left:auto}.login-field .password-toggle{left:10px;right:auto}.login-field .input-wrap:has(.password-toggle) input{padding-left:54px}