/*
 ==========================================================================
   FAYL JOYI:  /var/www/margilanim/assets/entry.css
   VAZIFASI:   USLUB — "Bugun" kirish sahifasi (inc/entry_page.php).
               Boshqa sahifalarga ta'sir qilmaydi — faqat shu sahifada ulanadi.
 ==========================================================================
*/
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
button,input{font:inherit;color:inherit}
svg.g{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

:root{
  --bg:#F2F3F5;--ink:#15171C;--mute:#687080;--line:#E1E4E9;
  --card:#fff;--field:#F6F7F9;--field-line:#DCDFE4;--ring:rgba(21,23,28,.09);
  --btn:#15171C;--btn-ink:#fff;--glass:rgba(255,255,255,.74);
  --shadow:0 30px 50px -30px rgba(21,23,28,.28);
  --lib:#1F7A5A;--eng:#2F5BD3;--bsb:#D2771F;--oly:#7447BF;--sel:#B9BEC7;--warn:#B5610F;
}
[data-theme="dark"]{
  --bg:#0E1014;--ink:#ECEEF2;--mute:#8C93A1;--line:#262A32;
  --card:#16191F;--field:#1D2027;--field-line:#2C3039;--ring:rgba(236,238,242,.1);
  --btn:#ECEEF2;--btn-ink:#0E1014;--glass:rgba(22,25,31,.74);
  --shadow:0 30px 60px -30px rgba(0,0,0,.7);
  --lib:#3DB489;--eng:#6A8FF5;--bsb:#F09A45;--oly:#A07CEB;--sel:#4A505C;--warn:#F5A55A;
}
body{font-family:'Geist',system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;transition:background-color .4s,color .4s}
:focus-visible{outline:2.5px solid var(--eng);outline-offset:3px}
#bg{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ---------------- tepa panel ---------------- */
.top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px clamp(16px,3vw,28px);padding-top:max(14px,env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);min-width:0}
.mark{flex:none;width:30px;height:30px;border-radius:9px;background:var(--card);border:1px solid var(--line);display:grid;grid-template-columns:repeat(2,6px);gap:4px;place-content:center}
.mark i{width:6px;height:6px;border-radius:50%}
.mark i:nth-child(1){background:var(--lib)}.mark i:nth-child(2){background:var(--eng)}.mark i:nth-child(3){background:var(--bsb)}.mark i:nth-child(4){background:var(--oly)}
.brand-t{font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25;min-width:0}
.brand-t small{display:block;font-size:12.5px;font-weight:400;color:var(--mute)}
.brand-t .short{display:none}
.ctrls{display:flex;gap:8px;flex:none}
.seg{display:flex;padding:3px;border-radius:999px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.seg button{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--mute);font-size:13px;font-weight:500;cursor:pointer;transition:background-color .2s,color .2s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.seg svg{width:16px;height:16px;flex:none}

/* ---------------- asosiy maydon ---------------- */
.stage{position:relative;z-index:1;flex:1;display:grid;place-items:center;padding:6px clamp(16px,3vw,28px) 40px}
.wrap{width:100%;max-width:1060px;display:grid;justify-items:center}
.left{width:100%;display:flex;flex-direction:column;align-items:center}

.news{display:inline-flex;align-items:center;gap:10px;max-width:min(520px,100%);padding:6px 14px 6px 6px;border-radius:999px;background:var(--glass);border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:13.5px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin-bottom:18px}
.news b{flex:none;font-weight:500;font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--ink);color:var(--bg)}
.news span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.news:hover{border-color:var(--mute)}

/* soat atrofida tinch zona — matn nuqtalar ustida yaxshi o'qilsin */
.head{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.head::before{content:"";position:absolute;inset:-14px -150px -4px;background:radial-gradient(closest-side,var(--bg) 60%,transparent);z-index:-1;transition:background .4s}
.name{display:none;font-size:14px;font-weight:500;color:var(--mute);margin-bottom:6px}
.clock{font-weight:200;font-size:clamp(66px,9vw,112px);letter-spacing:-.05em;line-height:1;margin:0 0 8px;font-variant-numeric:tabular-nums}
.clock i{font-style:normal;animation:blink 2s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.date{font-size:17px;color:var(--mute);margin:0}
.date b{color:var(--ink);font-weight:500}
.lesson{margin:10px 0 0;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:14px;color:var(--mute);min-height:20px}
.lesson strong{color:var(--ink);font-weight:500}
.bar{width:160px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink);border-radius:3px;transition:width .6s}
.bar[hidden]{display:none}

/* bo'limlar paneli */
.dock{width:min(460px,100%);margin:24px 0 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:14px 8px 12px;border-radius:26px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.app{border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 2px;border-radius:14px;min-width:0}
.app .ic{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;color:#fff;background:var(--c);transition:transform .15s;box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)}
.app .ic svg{width:27px;height:27px}
.app:hover .ic{transform:translateY(-2px)}
.app.sel .ic{outline:2.5px solid var(--ink);outline-offset:3px}
.app>span:last-child{font-size:13px;font-weight:500;line-height:1.2;text-align:center}
.app[data-m="lib"]{--c:var(--lib)}.app[data-m="eng"]{--c:var(--eng)}.app[data-m="bsb"]{--c:var(--bsb)}.app[data-m="oly"]{--c:var(--oly)}
[data-theme="dark"] .app .ic{color:#0E1014}

/* kirish oynasi */
.card{width:min(400px,100%);background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px 24px 18px;box-shadow:var(--shadow);transition:background-color .4s,border-color .4s;scroll-margin:16px}
.card.shake{animation:shake .38s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.card h1{font-size:21px;font-weight:600;letter-spacing:-.02em;margin:0 0 5px}
.to{font-size:14px;color:var(--mute);margin:0 0 16px;line-height:1.45}
.to .row{display:flex;align-items:center;gap:8px}
.to .dot{width:9px;height:9px;border-radius:50%;background:var(--sel);flex:none;transition:background-color .3s}
.to small{display:block;font-size:13px;margin:3px 0 0 17px}
.to small:empty{display:none}
.fld{display:block;margin-bottom:12px}
.fld>span{display:block;font-size:13.5px;font-weight:500;margin-bottom:6px}
.in{position:relative;display:block}
.fld input{width:100%;height:46px;padding:0 14px;border-radius:10px;border:1px solid var(--field-line);background:var(--field);font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s,background-color .4s}
.fld input:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--ring)}
.in input{padding-right:48px}
.eye{position:absolute;right:4px;top:4px;width:38px;height:38px;border:0;background:none;border-radius:8px;cursor:pointer;color:var(--mute);display:grid;place-items:center}
.eye svg{width:19px;height:19px}
.eye.on{color:var(--ink)}
.caps{display:block;font-size:12.5px;color:var(--warn);margin-top:6px}
.caps[hidden]{display:none}
.remember{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.3;margin:2px 0 16px;cursor:pointer;user-select:none}
.remember input{flex:none;appearance:none;width:18px;height:18px;margin:1px 0 0;border-radius:5px;border:1.5px solid var(--field-line);background:var(--field);display:grid;place-items:center;cursor:pointer}
.remember input:checked{background:var(--ink);border-color:var(--ink)}
.remember input:checked::after{content:"";width:9px;height:5px;border:2px solid var(--bg);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.remember small{display:block;color:var(--mute);font-size:12.5px;margin-top:2px}
.go{width:100%;height:48px;border:0;border-radius:11px;background:var(--btn);color:var(--btn-ink);font-size:16px;font-weight:600;cursor:pointer;transition:transform .08s,opacity .15s}
.go:hover{opacity:.9}.go:active{transform:translateY(1px)}
.msg{font-size:13.5px;line-height:1.45;margin:10px 0 0;border-radius:9px;padding:9px 12px}
.msg:empty{display:none}
.msg.bad{color:#B42318;background:#FEF3F2}
.msg.ok{color:#05603A;background:#ECFDF3}
.msg.info{color:#1D3F8F;background:#EEF3FF;margin:0 0 14px}
.card>.msg{margin:0 0 14px}
[data-theme="dark"] .msg.bad{color:#FDA29B;background:rgba(240,68,56,.12)}
[data-theme="dark"] .msg.ok{color:#6CE9A6;background:rgba(18,183,106,.12)}
[data-theme="dark"] .msg.info{color:#A9C1FF;background:rgba(106,143,245,.14)}
.go[disabled]{opacity:.6;cursor:progress}
.help{font-size:13px;line-height:1.5;margin:14px 0 0;color:var(--mute)}

/* ---------------- KOMPYUTER: ikki ustun ---------------- */
@media (min-width:980px) and (min-height:560px){
  .wrap{grid-template-columns:minmax(0,1fr) 400px;column-gap:clamp(40px,6vw,96px);align-items:center}
  .dock{margin-bottom:0}
  .clock{font-size:clamp(96px,8.6vw,124px)}
}

/* katta monitor (1600px+): hammasi biroz kattaroq, markazda kichrayib qolmasin */
@media (min-width:1600px) and (min-height:900px){.wrap{zoom:1.15}}

/* ---------------- TELEFON ---------------- */
@media (max-width:640px){
  .brand-t .full{display:none}
  .brand-t .short{display:block}
  .name{display:block}
  .seg button span{display:none}
  .seg button{padding:0 9px;height:34px}
  .stage{place-items:start center;padding-top:2px}
  .news{margin-bottom:16px;font-size:13px}
  .clock{font-size:clamp(62px,19vw,84px)}
  .date{font-size:15.5px}
  .dock{margin:20px 0 16px;padding:12px 4px 10px;border-radius:22px}
  .card{padding:22px 18px 18px;border-radius:20px}
}
@media (max-width:380px){
  .app .ic{width:50px;height:50px;border-radius:15px}
  .app .ic svg{width:24px;height:24px}
  .app>span:last-child{font-size:11.5px}
  .mark{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}