:root{--bg:#ffffff;--panel:#ffffff;--muted:#9aa0a6;--ink:#2b2f33;--accent:#676767;--side:#8c9096;--sideInner:#6f747b}
*{box-sizing:border-box}
body{margin:0;font-size: 10px;font-family:Segoe UI,Arial,Vazirmatn,sans-serif;background:var(--bg);color:var(--ink)}

.bodybg{background: #808080}
.border{border: 12px solid transparent; padding: 12px; border-width: 1px; border-style: solid; border-color: #808080;}
.header-line{position:relative;padding:40px 0 18px 0}
.header-line .rule{position:absolute;left:0;right:36%;top:64px;height:2px;background:#c9ccd1}
.header-line .brand{position:relative;max-width:980px;margin:0 auto}
.logo-text{font-size:64px;letter-spacing:.18em;color:#7a7f86;font-weight:600}
.logo-img{padding-bottom: 27px;}
.container{display:grid;grid-template-columns:0px 1fr;gap:0px;max-width:827px;margin:0 auto;padding:0px}
.sidebar{padding:12px;justify-self: start}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar a{display:block;padding:1px 18px;font-weight:600;margin:6px 0;color:#fff;text-decoration:none;border:1.2px solid #fff}
.sidebar a.active {background: #fff;color: #707173;}
.content{width: 550px;margin: -15px auto;padding: 25px;background:var(--panel);border-radius:6px;justify-self: center}
.content .hero{display:block;margin-top:12px;border-radius:6px;max-width:100%}
.footer{padding:14px;text-align:center;color:var(--muted)}
.card{background:var(--panel);border-radius:6px;}
.card header{padding:16px 16px 0 16px}
.card .body{padding:16px}

table{width:100%;border-collapse:collapse;font-size:10px}
th,td{padding:3px;text-align:left}
th{color:#313234;font-weight:700}
input,select,button{font:inherit}
input[type=text]{width:30px;padding:3px 5px;border:1px solid #c8ccd2;border-radius:3px;margin-right: 0px;}
input.title{width:204px}
select{padding:2px 8px;border:1px solid #d1d5db;border-radius:4px}
button.primary{padding:4px 12px;background:var(--accent);color:white;border:none;border-radius:4px;cursor:pointer}
button.link{background:none;border:none;color:var(--accent);cursor:pointer}
.row{display:flex;gap:8px;align-items:center}
.muted{color:#9aa0a6}
.error{color:#d32f2f}
.auth{width:550px;margin:-15px auto;background:var(--panel);padding:25px}
.auth label{display:block;margin-top:12px;margin-bottom:6px;color:#374151}
.auth input{width:100%;padding:10px;border:1px solid #c8ccd2;border-radius:6px}
.auth .actions{margin-top:16px;display:flex;justify-content: center;gap:12px}
.curved-corners {display: flex;justify-content: center;align-items: center;position: relative;border: none;width: 550px;height: 30px}
.curved-corners .bottom-left {position: absolute;bottom: 0;left: 0;width: 20px;height: 20px;border: 2px solid #707173;border-right: none;border-top: none;border-bottom-left-radius: 9px;}
.curved-corners .bottom-right {position: absolute;bottom: 0;right: 0;width: 20px;height: 20px;border: 2px solid #707173;border-left: none;border-top: none;border-bottom-right-radius: 9px;}
.footer {display: flex;justify-content: center;align-items: center;}
.notice{margin-top:10px;color:#2e7d32}
.error{color:#d32f2f}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0;align-items:center}
.tablink{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid #c7c7c7;background:#f6f6f6;border-radius:6px;text-decoration:none;color:#333;line-height:1.2}
.tablink:hover{background:#ededed}
.tablink.active{background:#555;color:#fff;border-color:#555;text-decoration:none}
.tab{margin-top:8px}
.hidden{display:none}
.form-field{display:flex;gap:12px;align-items:center;margin:8px 0}
.form-field>label{min-width:220px;font-weight:600}
.form-field .title, .form-field input[type="text"], .form-field input[type="email"], .form-field input[type="password"], .form-field select{flex:1}
.actions, .form-actions{margin-top:8px}
/* mobile menu toggle */
.menu-toggle{position:fixed;left:12px;top:12px;z-index:11;background:#707173;color:#fff;border:none;border-radius:6px;padding:8px 10px;display:none}
.menu-toggle .bar{display:block;width:20px;height:2px;background:#fff;margin:3px 0}
.menu-backdrop{display:none}
/* responsive */
@media screen and (max-width: 768px) {  body {transform: scale(0.7);transform-origin: top left;width: 142.85%;overflow-x: hidden;}}
@media (max-width: 768px){
  body{font-size: 10px}
  .container{grid-template-columns: 1fr;gap:0;max-width: 100%;padding:8px}
  .content{max-width:97%;margin:-15px ;padding:16px}
  .auth{width:100%;margin:12px auto;padding:16px}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .sidebar{position:fixed;top:28px;left:0;width:240px;background:#ffffff;border-bottom-right-radius:10px;border-top-right-radius:10px;padding:16px 12px;box-shadow:2px 0 10px rgba(0,0,0,.12);transform:translateX(-100%);transition:transform .25s ease;z-index:10}
  .sidebar a{color:#333;border-color:#c7c7c7}
  .sidebar a.active{background:#555;color:#fff;border-color:#555}
  body.menu-open .sidebar{transform:translateX(0)}
  body.menu-open .menu-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.28);top:-100px;bottom:-800px;z-index:9}
  .card .border{overflow-x:auto}
  table{min-width:520px}
}