/* ============================================================
   PasTele Telegram UI — unified visual language
   Inspired by Telegram Web: blue header, chat-sidebar rhythm,
   soft surfaces, compact rows, rounded avatars and clean lists.
   ============================================================ */
:root{
 --tg-blue:#2aabee;--tg-blue-dark:#229ed9;--tg-bg:#e6ebee;--tg-panel:#fff;
 --tg-panel2:#f5f7f9;--tg-text:#17212b;--tg-muted:#70808f;--tg-line:#e1e7eb;
 --tg-hover:#f0f4f7;--tg-active:#e8f4fb;--tg-danger:#e55353;
 --tg-shadow:0 1px 2px rgba(0,0,0,.06);
}
html[data-theme="dark"]{
 --tg-bg:#0e1621;--tg-panel:#17212b;--tg-panel2:#202b36;--tg-text:#eef4f8;
 --tg-muted:#9aaab8;--tg-line:#263442;--tg-hover:#202b36;--tg-active:#2b5278;
 --tg-shadow:0 1px 2px rgba(0,0,0,.25);
}
html,body{background:var(--tg-bg)!important;color:var(--tg-text)!important}
body{
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
 font-size:14px;line-height:1.45;
}
a{color:var(--tg-blue);text-decoration:none}
p,.muted{color:var(--tg-muted)!important}
h1,h2,h3,h4,strong,b{color:var(--tg-text)!important}

/* Telegram-like application frame */
.navbar{
 position:fixed!important;left:0;top:0;bottom:0;width:285px;z-index:1000;
 background:var(--tg-panel)!important;border:0!important;
 box-shadow:1px 0 0 var(--tg-line)!important;backdrop-filter:none!important;
}
.nav-inner{
 width:100%!important;height:100%;min-height:0!important;margin:0!important;
 display:flex!important;flex-direction:column!important;align-items:stretch!important;
 padding:12px 10px!important;gap:8px!important;
}
.brand{
 height:54px;padding:7px 10px;border-radius:10px;
 display:flex!important;align-items:center;gap:11px!important;
 color:var(--tg-text)!important;font-size:17px!important;font-weight:700!important;
}
.brand:hover{background:var(--tg-hover)}
.brand-mark{
 width:42px!important;height:42px!important;border-radius:50%!important;
 background:var(--tg-blue)!important;box-shadow:none!important;color:#fff!important;
}
.nav-links{
 flex:1!important;display:flex!important;flex-direction:column!important;
 justify-content:flex-start!important;align-items:stretch!important;gap:2px!important;
 overflow:auto;padding:5px 0;
}
.nav-links a{
 display:flex!important;align-items:center!important;gap:14px!important;
 padding:10px 12px!important;min-height:44px;border-radius:9px!important;
 color:var(--tg-text)!important;opacity:1!important;font-size:14px!important;
 font-weight:500;text-decoration:none;box-shadow:none!important;
}
.nav-links a i{width:22px;text-align:center;font-size:17px;color:var(--tg-muted)}
.nav-links a:hover{background:var(--tg-hover)!important;color:var(--tg-text)!important}
.nav-links a.active{background:var(--tg-active)!important;color:var(--tg-blue-dark)!important}
.nav-links a.active i{color:var(--tg-blue-dark)}
.nav-account{
 order:-1!important;padding:9px 10px;margin:0!important;
 display:flex!important;align-items:center!important;gap:10px!important;
 border-bottom:1px solid var(--tg-line);min-height:58px!important;
}
.nav-account-info{display:flex!important;align-items:center!important;gap:9px!important;flex:1}
.nav-avatar{
 width:40px!important;height:40px!important;border:0!important;
 background:var(--tg-blue)!important;color:#fff!important;border-radius:50%!important;
}
.nav-name{display:flex!important;flex-direction:column;min-width:0}
.nav-name b{font-size:14px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-name small{font-size:11px!important;color:var(--tg-muted)!important;margin-top:2px}
.nav-balance{
 margin:0!important;padding:0!important;border:0!important;
 color:var(--tg-blue-dark)!important;font-size:12px!important;font-weight:700!important;
 white-space:nowrap;
}
.nav-theme{
 width:38px!important;height:38px!important;min-height:38px!important;padding:0!important;
 border:0!important;border-radius:50%!important;background:transparent!important;
 color:var(--tg-muted)!important;box-shadow:none!important;
}
.nav-theme:hover{background:var(--tg-hover)!important}
.nav-toggle{display:none!important}

/* Shift all application content beside the sidebar */
body>main, body>footer, body>#toast, body>.auth-shell{margin-left:285px}
main{min-height:calc(100vh - 1px)}
.section{padding:28px!important}
.container{width:min(1080px,calc(100% - 20px))!important}

/* Telegram-style content cards */
.card,.panel,.auth-card,.product-card,.profile-head,.admin-side,.admin-main{
 background:var(--tg-panel)!important;border:1px solid var(--tg-line)!important;
 box-shadow:var(--tg-shadow)!important;border-radius:10px!important;
}
.card{padding:18px}
.product-card{overflow:hidden;padding:0!important}
.product-card:hover{border-color:#cbdbe4!important}
.btn{
 min-height:38px!important;border-radius:8px!important;padding:8px 14px!important;
 background:var(--tg-panel)!important;border:1px solid var(--tg-line)!important;
 color:var(--tg-text)!important;box-shadow:none!important;font-weight:600!important;
}
.btn:hover{background:var(--tg-hover)!important;transform:none!important}
.btn.primary,.primary{
 background:var(--tg-blue)!important;border-color:var(--tg-blue)!important;color:#fff!important;
}
.input,.select,.textarea,.composer,textarea,input,select{
 min-height:42px!important;border-radius:8px!important;
 background:var(--tg-panel)!important;color:var(--tg-text)!important;
 border:1px solid var(--tg-line)!important;padding:10px 12px!important;
}
.input:focus,.select:focus,.textarea:focus{
 border-color:var(--tg-blue)!important;box-shadow:0 0 0 2px rgba(42,171,238,.12)!important;
}
.badge,.chip,.eyebrow{
 background:var(--tg-active)!important;color:var(--tg-blue-dark)!important;
 border:0!important;border-radius:7px!important;padding:6px 9px!important;
}
.notice{background:var(--tg-active)!important;border:0!important;border-radius:8px!important}
.list{gap:2px!important}
.list-item,.pt-list-card{
 border:0!important;border-bottom:1px solid var(--tg-line)!important;
 border-radius:0!important;background:transparent!important;padding:12px!important;
}
.list-item:hover,.pt-list-card:hover{background:var(--tg-hover)!important}
.pt-icon{
 width:42px!important;height:42px!important;flex-basis:42px!important;border-radius:50%!important;
 background:var(--tg-blue)!important;color:#fff!important;border:0!important;
}
.pt-status{border:0!important;border-radius:10px!important;padding:4px 8px!important}
.pt-status.success{background:#dff7e7;color:#16824a}
.pt-status.warning{background:#fff2ce;color:#936b00}
.pt-status.danger{background:#ffe0e0;color:#b33a3a}
.pt-status.neutral{background:var(--tg-hover);color:var(--tg-muted)}
.table-wrap{border:1px solid var(--tg-line)!important;border-radius:9px!important}
.table{min-width:680px}
.table th{background:var(--tg-panel2)!important;color:var(--tg-muted)!important;border-bottom:1px solid var(--tg-line)!important}
.table td{border-bottom:1px solid var(--tg-line)!important}
.table tbody tr:hover td{background:var(--tg-hover)!important}

/* Marketplace becomes Telegram-like channel/message list */
.market-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
.market-grid .product-card{border-radius:10px!important}
.product-card .thumb{min-height:130px!important;background:var(--tg-panel2)!important;border-bottom:1px solid var(--tg-line)!important}
.product-card .thumb i{color:var(--tg-blue);font-size:34px}
.product-body{padding:13px 15px!important}
.product-body h3{font-size:15px!important;margin:5px 0!important}

/* Admin sidebar: Telegram folders style */
.admin-layout{grid-template-columns:215px minmax(0,1fr)!important;gap:12px!important}
.admin-side{padding:7px!important}
.admin-nav{gap:1px!important}
.admin-nav a{padding:9px 10px!important;border-radius:8px!important;color:var(--tg-text)!important}
.admin-nav a:hover,.admin-nav a.active{background:var(--tg-active)!important;color:var(--tg-blue-dark)!important}

/* Login/register: Telegram authorization card */
.auth-shell{
 margin-left:285px!important;min-height:100vh!important;
 background:var(--tg-bg)!important;padding:25px 16px!important;
}
.auth-card{max-width:430px!important;padding:30px!important}
.auth-logo{width:64px!important;height:64px!important;border-radius:50%!important;
 background:var(--tg-blue)!important;color:#fff!important;border:0!important}
.auth-card .btn{min-height:44px!important}

/* Footer is kept but made quiet like app info */
.footer{
 background:var(--tg-panel)!important;border-top:1px solid var(--tg-line)!important;
 margin-top:30px!important;padding:22px 0!important;
}
.footer .container{max-width:1080px!important}

/* Floating toast */
#toast{z-index:2000!important}
.toast{border-radius:9px!important;background:var(--tg-text)!important;color:var(--tg-panel)!important}

/* Mobile = Telegram drawer */
@media(max-width:800px){
 .navbar{
  width:min(285px,88vw)!important;transform:translateX(-100%);
  transition:transform .2s ease;
 }
 .navbar.nav-open{transform:translateX(0)}
 .nav-toggle{display:grid!important;position:fixed!important;left:10px;top:10px;
  width:42px!important;height:42px!important;z-index:1001!important;
  border-radius:50%!important;background:var(--tg-blue)!important;color:#fff!important;border:0!important}
 body>main,body>footer,body>#toast,body>.auth-shell{margin-left:0}
 .section{padding:22px 10px!important;padding-top:70px!important}
 .container{width:100%!important}
 .market-grid{grid-template-columns:1fr!important}
 .admin-layout{grid-template-columns:1fr!important}
 .admin-side{display:none}
 .auth-shell{margin-left:0!important;padding:70px 12px 20px!important}
 .footer{margin-left:0!important}
}
@media(min-width:801px){
 body:before{content:"";position:fixed;left:285px;right:0;top:0;height:1px;z-index:999}
}

/* Remove previous neon/glass styling from the older polish layer */
html[data-theme="light"] .card,html[data-theme="light"] .panel,
html[data-theme="light"] .auth-card,html[data-theme="light"] .product-card{background:var(--tg-panel)!important}