/* ===== THEME TOKENS ===== */
    :root{
      --tg: #229ed9;
      --bg: #f5f7fb;
      --panel: #ffffff;
      --panel-2: #f0f3f9;
      --text: #1d212a;
      --muted: #677089;
      --accent: #6c5ce7;
      --accent-2:#32c48d;
      --danger:#ff6b6b;
      --warn:#ffb020;
      --shadow: 0 10px 30px rgba(10, 20, 40, .08);
      --ring: 0 0 0 3px rgba(108,92,231,.22);
      --radius: 16px;
      --grid-gap: 16px;
      --card-radius: 14px;
      --scroll: rgba(0,0,0,.15);
      --grad: radial-gradient(1200px 600px at 10% -10%, rgba(108,92,231,.08), transparent 40%),
              radial-gradient(900px 500px at 100% 10%, rgba(50,196,141,.09), transparent 40%);
    }
    body.dark{
      --bg:#111318;
      --panel:#171a21;
      --panel-2:#0f1217;
      --text:#e9ecf3;
      --muted:#9aa3b2;
      --accent:#7a6df5;
      --accent-2:#34d399;
      --danger:#ff7b7b;
      --warn:#ffc65c;
      --shadow: 0 12px 40px rgba(0,0,0,.45);
      --scroll: rgba(255,255,255,.2);
      --grad: radial-gradient(1200px 600px at 10% -10%, rgba(122,109,245,.12), transparent 40%),
              radial-gradient(900px 500px at 100% 10%, rgba(52,211,153,.12), transparent 40%);
    }

    /* ===== BASE ===== */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background: var(--bg);
      background-image: var(--grad);
      display:grid;
      grid-template-columns: 82px 1fr;
      overflow:auto;
    }
    a{color:inherit;text-decoration:none}

    ::-webkit-scrollbar {width: 12px; height: 12px;}

    ::-webkit-scrollbar-track { background: var(--panel-2);
      /*box-shadow: 0 8px 24px rgba(108, 92, 231, .35);*/
    }

    ::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      border-radius: 20px;
      border: 3px solid var(--panel-2);
    }


    /* ===== SIDEBAR ===== */
    .sidebar{
      position:relative;
      background:var(--panel);
      box-shadow:var(--shadow);
      display:flex;
      flex-direction:column;
      align-items:center;
      padding:14px 10px;
      gap:10px;
      z-index:9999999;

    }
    .logo{
      width:44px;height:44px;border-radius:12px;
      display:grid;place-items:center;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      color:#fff;font-size:22px;font-weight:700;letter-spacing:.5px;
      box-shadow:0 12px 24px rgba(108,92,231,.35);
      margin-bottom:8px;
    }
    .nav-group{display:flex;flex-direction:column;gap:6px;margin-top:6px}
    .icon-btn{
      width:44px;height:44px;border:none;border-radius:12px;cursor:pointer;
      display:grid;place-items:center;background:var(--panel-2);color:var(--muted);
      transition:.25s transform,.25s box-shadow,.25s background,.25s color;
      position:relative;isolation:isolate; overflow:hidden;
    }
    .icon-btn.active{background:linear-gradient(135deg, rgba(108,92,231,.15), rgba(50,196,141,.15)); color:var(--accent); border: 1px solid rebeccapurple; }
    .icon-btn:hover{transform:translateY(-2px) scale(1.03); color:var(--accent)}
    .icon-btn::after{content:"";position:absolute;inset:auto auto 0 0;width:0;height:0;border-radius:50%;background:radial-gradient(200px 200px at center, rgba(108,92,231,.22), transparent 60%);transform:translate(-40%,40%);transition: .45s;z-index:-1}
    .icon-btn:hover::after{width:380px;height:380px}

    .icon-btn svg{
      fill:var(--muted);
    }
    .icon-btn:hover svg{fill:var(--accent);}


    .spacer{flex:1}
    .theme-toggle{
      margin-top:auto;
      width:44px;height:44px;border-radius:12px;border:none;cursor:pointer;
      background:var(--panel-2); color:var(--muted);
      display:grid;place-items:center; transition:.25s transform,.25s color,.25s background;
      position: absolute;
      bottom: 120px;
      z-index: 9999999;
    }
    .theme-toggle:hover{transform:rotate(-8deg) scale(1.03); color:var(--accent)}

    /* ===== MAIN WRAPPER ===== */
    .main{display:flex;flex-direction:column; /*height:100%; overflow:hidden*/}
    .topbar{
      display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--panel);
      box-shadow:var(--shadow); position:sticky; top:0; z-index:4;margin-top: 70px;
    }
    .tabs{
      background:var(--panel-2);border-radius:12px; padding:4px; display:inline-flex; gap:4px;
    }
    .tab{
      border:none;background:transparent;color:var(--muted);padding:8px 12px;border-radius:10px;cursor:pointer; transition:.2s;
    }
    .tab.active{background:var(--panel); color:var(--text); box-shadow:var(--shadow)}
    .nav-arrows{display:flex;gap:8px;margin-left:10px}
    .nav-arrows button{
      border:none;background:var(--panel-2); color:var(--muted); width:36px;height:36px;border-radius:10px; cursor:pointer; transition:.2s;
    }
    .nav-arrows button:hover{color:var(--accent); transform:translateY(-1px)}
    .today{
      border:none;background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff;
      padding:8px 12px;border-radius:12px; cursor:pointer; box-shadow:0 12px 24px rgba(108,92,231,.35); transition:.2s;
    }
    .today:hover{transform:translateY(-1px)}
    .filters{margin-left:auto; display:flex; gap:8px; align-items:center}
    .filters select,.filters input{
      background:var(--panel-2); color:var(--text); border:1px solid transparent; outline:none;
      padding:8px 12px; border-radius:12px; transition:.2s; box-shadow:inset 0 0 0 1px rgba(0,0,0,.02);
    }
    .filters select:focus, .filters input:focus{box-shadow: var(--ring)}
    .filters .bi{opacity:.8}
    .legend{
      display:flex; gap:14px; align-items:center; margin-left:8px; color:var(--muted); font-size:13px;
    }
    .dot{width:10px;height:10px;border-radius:50%}
    .d-draft{background:var(--warn)}
    .d-scheduled{background:var(--accent)}
    .d-published{background:var(--accent-2)}
    /* ===== WEEK BOARD ===== */
    .board{flex:1;overflow-x: hidden; overflow-y:auto; padding:18px}
    .week{
      display:grid;
      grid-template-columns: repeat(7, minmax(220px,1fr));
      gap:var(--grid-gap);
      min-width:1200px;
    }
    .day-col{
      background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow);
      display:flex; flex-direction:column; min-height:520px;
      position:relative; overflow:hidden;
      transition:.25s transform;
    }
    .day-col.dragover{outline:2px dashed var(--accent); outline-offset:-8px; transform:scale(1.01)}
    .day-head{
      position:sticky; top:0; z-index:2;
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 12px; background:linear-gradient(180deg, var(--panel), color-mix(in oklab, var(--panel) 90%, transparent));
      border-bottom:1px solid color-mix(in oklab, var(--panel-2) 70%, transparent);
    }
    .day-head .date{font-weight:700}
    .day-head .weekday{color:var(--muted); font-size:12px}
    .post-list{padding:12px; display:flex; flex-direction:column; gap:12px}
    /* ===== POST CARD ===== */
    .card{
      background:var(--panel-2); border-radius:var(--card-radius);
      padding:12px; box-shadow:0 8px 18px rgba(0,0,0,.05);
      display:grid; grid-template-columns:48px 1fr; gap:10px; cursor:grab; position:relative;
      opacity:0; transform:translateY(22px) scale(.98);
      animation:cardIn .5s var(--delay,0s) cubic-bezier(.2,.7,.2,1) forwards;
      transition:.25s transform, .25s box-shadow, .25s background;
    }
    .card:active{cursor:grabbing}
    .card:hover{transform:translateY(-4px) scale(1.01); box-shadow:0 14px 30px rgba(0,0,0,.12)}
    .media{
      width:48px;height:48px;border-radius:12px; display:grid; place-items:center; color:#fff; font-size:20px;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow:0 10px 18px rgba(108,92,231,.28)
    }
    .meta{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px;word-break: break-all;}
    .title{font-weight:600; margin-bottom:6px}
    .actions{display:flex; gap:8px; margin-top:8px}
    .chip{
      font-size:11px; padding:4px 8px; border-radius:20px; background:color-mix(in oklab, var(--panel) 75%, transparent);
      border:1px solid color-mix(in oklab, var(--panel) 55%, transparent); color:var(--muted)
    }
    .btn-ico{
      border:none;background:var(--panel); color:var(--muted);
      width:30px;height:30px; border-radius:8px; display:grid; place-items:center; cursor:pointer; transition:.2s
    }
    .btn-ico:hover{color:var(--accent); transform:translateY(-1px)}
    
    .ui-shell {
      overflow: hidden;
    }

    .badge{
      position:absolute; top:8px; right:8px; font-size:11px; padding:4px 8px; border-radius:20px; color:#fff
    }
    .b-draft{background:var(--warn)}
    .b-scheduled{background:var(--accent)}
    .b-published{background:var(--accent-2)}
    @keyframes cardIn{to{opacity:1; transform:translateY(0) scale(1)}}

    /* ===== MONTH GRID ===== */
    .month{display:grid; grid-template-columns:repeat(7,1fr); gap:var(--grid-gap); min-height:540px}
    .mcell{
      background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow);
      padding:12px; display:flex; flex-direction:column; gap:8px; min-height:140px; position:relative; overflow:hidden
    }
    .mcell .mdate{font-weight:700}
    .mcell .count{font-size:12px;color:var(--muted)}
    .mcell .dots{display:flex; gap:6px; flex-wrap:wrap}
    .mcell .dot{width:6px;height:6px;border-radius:50%}

    /* ===== FLOATING ADD BTN ===== */
    .add-btn{
      position:fixed; bottom:24px; left:calc(82px + 50% - 90px); transform:translateX(-50%);
      background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border:none;
      border-radius:28px; padding:14px 18px; display:flex; align-items:center; gap:10px; font-weight:700;
      box-shadow:0 16px 32px rgba(108,92,231,.35); cursor:pointer; z-index:99999;
      transition:.25s transform;
    }
    .add-btn:hover{transform:translateX(-50%) translateY(-2px)}
    .add-btn .bi{font-size:20px}
    .pulse{position:absolute; inset:0; border-radius:28px; pointer-events:none}
    .pulse::before{
      content:""; position:absolute; inset:-6px; border-radius:36px; border:2px solid rgba(108,92,231,.35);
      animation:pulse 1.6s ease-out infinite;
    }
    @keyframes pulse{from{opacity:.7; transform:scale(.9)} to{opacity:0; transform:scale(1.25)}}

    /* ===== MODAL ===== */
    .modal{
      position:fixed; inset:0; background:rgba(4,7,12,.45); display:none; align-items:center; justify-content:center; z-index: 9999999;
      animation:fadeIn .2s ease-out forwards;
    }
    @keyframes fadeIn{from{opacity:0} to{opacity:1}}
    .modal-inner{
      width:min(560px, 90vw); background:var(--panel); color:var(--text); border-radius:18px; box-shadow:var(--shadow);
      padding:18px; display:flex; flex-direction:column; gap:12px; transform:translateY(10px); animation:rise .25s ease-out forwards
    }
    @keyframes rise{to{transform:translateY(0)}}
    .form-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
    .modal input,.modal select,.modal textarea{
      width:100%; background:var(--panel-2); border:1px solid transparent; color:var(--text); padding:10px 12px; border-radius:12px; outline:none; transition:.2s
    }
    .modal input:focus,.modal select:focus,.modal textarea:focus{box-shadow:var(--ring)}
    .modal .actions{display:flex; justify-content:flex-end; gap:8px}
    .btn{
      border:none;border-radius:12px;padding:10px 14px;cursor:pointer;transition:.2s
    }
    .btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff}
    .btn.ghost{background:var(--panel-2); color:var(--text)}
    .hidden{display:none !important}

    /* ===== SKELETON ===== */
    .skeleton{
      background:linear-gradient(90deg, color-mix(in oklab, var(--panel) 70%, transparent), color-mix(in oklab, var(--panel) 90%, transparent), color-mix(in oklab, var(--panel) 70%, transparent));
      background-size:180% 100%; animation:shimmer 1.2s linear infinite; border-radius:12px; height:70px
    }
    @keyframes shimmer{to{background-position:-180% 0}}
.preloader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(20px);
  background: rgba(255,255,255,0.15);
  z-index: 9999;
  animation: fadeIn 0.4s ease;
}

body.dark .preloader {
  background: rgba(0,0,0,0.35);
}

/* --- LOADER ANIMATION --- */
.loader {
  position: relative;
  width: 90px;
  height: 90px;
}

.loader span {
  position: absolute;
  border: 4px solid var(--accent);
  border-radius: 50%;
  animation: pulse 1.5s infinite ease-in-out;
  box-shadow: 0 0 20px rgba(108,92,231,0.6);
}

.loader span:nth-child(1) {
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  animation-delay: 0s;
}
.loader span:nth-child(2) {
  width: 70%;
  height: 70%;
  top: 15%; left: 15%;
  animation-delay: 0.3s;
}
.loader span:nth-child(3) {
  width: 40%;
  height: 40%;
  top: 30%; left: 30%;
  animation-delay: 0.6s;
}
/* --- ANIMATIONS --- */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%      { transform: scale(1.15); opacity: 0.4; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999999999;
}

.toast {
  min-width: 260px;
  max-width: 320px;
  padding: 14px 18px;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: slideIn 0.4s ease forwards;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.toast.success { background: linear-gradient(135deg, var(--accent-2), #28a745); }
.toast.error   { background: linear-gradient(135deg, var(--danger), #d43f3a); }
.toast.warn    { background: linear-gradient(135deg, var(--warn), #ff9800); color: #222; }

.toast .close-btn {
  margin-left: 16px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.toast .close-btn:hover { opacity: 1; }

/* progress bar */
.toast::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  background: rgba(255,255,255,0.8);
  animation: progress 6s linear forwards;
  width: 100%;
}

@keyframes slideIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}
@keyframes progress {
  from { width: 100%; }
  to   { width: 0; }
}

.ui-side-list.searching {gap: 0px;}
.city-district{
    display: block;
    font-size: 11px;
    opacity: .5;
  }
.ui-shell{display:grid;grid-template-columns:420px 1fr;gap:var(--grid-gap);background:transparent;background-image:transparent; margin-top: 70px;margin-bottom: 50px;}
.ui-sidebar{position:relative;background:var(--panel); border-right:1px solid var(--panel-2);box-shadow:var(--shadow);border-radius:var(--radius);margin:var(--grid-gap);padding:20px 18px 18px 18px;overflow:hidden;z-index: 999;}
.ui-sidebar:before{content:"";position:absolute;inset:-40% -60% auto auto;background:conic-gradient(from 180deg at 50% 50%,rgba(108,92,231,.12),transparent 40%);filter:blur(30px);animation:spin 24s linear infinite}
.ui-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ui-logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 8px 24px rgba(108,92,231,.35)}
.ui-title{font-size:15px;font-weight:700;color:var(--text);letter-spacing:.2px}
.ui-search{position:relative;margin:12px 0 16px}
.ui-input{width:100%;height:42px;border-radius:12px;background:var(--panel-2);border:1px solid transparent;padding:0 40px 0 14px;color:var(--text);outline:none;transition:.25s}
.ui-input:focus{border-color:var(--accent);box-shadow:var(--ring)}
.ui-ico{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;opacity:.7;color:var(--muted)}
.ui-side-list{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 320px);overflow:auto;padding-right:4px;overflow-x: hidden;}

.ui-cat-item{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:12px 12px;border-radius:14px;background:var(--panel-2);color:var(--text);font-weight:600;font-size:14px;cursor:pointer;user-select:none;border:1px solid transparent;transform:translateZ(0);transition:transform .25s,border-color .25s,background .25s,color .25s}
.ui-cat-item:before{content:"";position:absolute;left:8px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--muted);transform:translateY(-50%) scale(.9);transition:.25s}
.ui-cat-item:hover{transform:translateX(6px);background:linear-gradient(0deg,rgba(108,92,231,.06),rgba(108,92,231,.06)),var(--panel-2);border-color:rgba(108,92,231,.35)}
.ui-cat-item:hover:before{background:var(--accent)}
.ui-cat-item.active{background:linear-gradient(90deg,rgba(50,196,141,.12),transparent),var(--panel-2);border-color:rgba(50,196,141,.4)}
.ui-cat-item.active:before{background:var(--accent-2);transform:translateY(-50%) scale(1.2)}
.ui-ripple{position:absolute;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(circle at center,rgba(108,92,231,.35),transparent 70%);animation:ripple .7s ease-out forwards}
.ui-badge{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;height:22px;min-width:26px;padding:0 8px;border-radius:999px;background:rgba(108,92,231,.12);color:var(--accent);font-weight:700;font-size:12px}
.ui-skeleton{height:42px;border-radius:12px;background:linear-gradient(90deg,rgba(0,0,0,.05),rgba(255,255,255,.2),rgba(0,0,0,.05));animation:shine 1.4s linear infinite;background-size:300% 100%}
.ui-content{position:relative;margin:var(--grid-gap) var(--grid-gap) var(--grid-gap) 0;background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:34px 34px 42px 34px;overflow:hidden; overflow-y: auto;}
.ui-content:after{content:"";position:absolute;inset:auto -30% -30% auto;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(50,196,141,.18),transparent 70%);filter:blur(20px);animation:pulse 6s ease-in-out infinite}
.ui-hero{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.ui-hero h1{font-size:28px;color:var(--accent);line-height:1.2}
.ui-typing{display:inline-block;white-space:nowrap;overflow:hidden;border-right:2px solid var(--accent);animation:typing 3.5s steps(40,end),blink .9s step-end infinite alternate}
.ui-lead{color:var(--muted);font-size:15px}
.ui-steps{display:grid;gap:12px;margin-top:18px}
.ui-step{display:flex;gap:12px;align-items:flex-start;background:var(--panel-2);border:1px solid transparent;border-radius:16px;padding:14px 16px;transition:.25s;animation:float-up .6s ease both}
.ui-step:hover{transform:translateY(-2px);border-color:rgba(108,92,231,.35)}
.ui-num{width:28px;height:28px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:800;box-shadow:0 10px 20px rgba(108,92,231,.25)}
.ui-chosen{margin-top:20px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(50,196,141,.12);color:var(--accent-2);font-weight:700}
.ui-toggle{display:none;position:fixed;z-index:50;left:14px;bottom:18px;height:46px;width:46px;border-radius:16px;background:var(--panel);border:1px solid var(--panel-2);box-shadow:var(--shadow);align-items:center;justify-content:center}
.ui-burger,.ui-burger:before,.ui-burger:after{content:"";display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:.25s}
.ui-burger:before{transform:translateY(-6px)}
.ui-burger:after{transform:translateY(6px)}
.ui-cat-item span {margin-left: 10px;}

.ui-cat-wrap{display:flex;flex-direction:column}
.ui-cat-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:12px;border-radius:14px;background:var(--panel-2);color:var(--text);font-weight:600;font-size:14px;cursor:pointer;transition:.25s;padding-left: 25px;}
.ui-cat-item:hover{background:linear-gradient(0deg,rgba(108,92,231,.06),rgba(108,92,231,.06)),var(--panel-2)}
.ui-cat-item.active{background:linear-gradient(90deg,rgba(50,196,141,.12),transparent),var(--panel-2)}
.ui-arrow{margin-left:auto;transition:transform .3s ease;color:var(--muted);cursor:pointer}
.ui-arrow.open{transform:rotate(90deg);color:var(--accent)}
.ui-sub-list{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;margin-left:12px;display:flex;flex-direction:column;gap:6px; position: relative;}
.ui-sub-item{padding:8px 12px;border-radius:12px;background:var(--panel-2);font-size:13px;font-weight:500;cursor:pointer;color:var(--muted);transition:.25s}
.ui-sub-item:hover{background:var(--accent);color:#fff}
.ui-sub-list.open{padding:6px 0;max-height:fit-content;}
.ui-cat-item span {margin-left: 10px;display: flex;align-items: center;}
.ui-cat-item span svg{ fill: var(--text); }
.ui-input.sub {padding: 10px;padding-left: 20px;border: 1px solid rgba(50, 196, 141, .5);margin-top: 10px;}

.ui-sub-list { margin: 0;padding: 0;}
.ui-sub-list.searching {margin: 0 !important; padding: 0 !important;}
.ui-sub-list.searching .ui-sub-item {margin: 0 !important;padding: 6px 12px;}


@keyframes spin{to{transform:rotate(1turn)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes ripple{from{width:0;height:0;opacity:.6}to{width:320px;height:320px;opacity:0}}
@keyframes shine{0%{background-position:0 0}100%{background-position:300% 0}}
@keyframes typing{from{width:0}to{width:100%}}
@keyframes blink{50%{border-color:transparent}}
@keyframes float-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}



.ui-side-list.searching input {display: none;}
.ui-sub-list.searching .ui-sub-item {
margin: 0 !important;
padding: 6px 12px;
margin-top: 10px !important;
}

.akb-subhead {
display:flex; align-items:center; gap:10px; padding:6px 4px 10px;
}
.akb-back-btn {
display:inline-flex; align-items:center; justify-content:center;
width:34px; height:34px; border-radius:12px; 
border: none;
background:linear-gradient(135deg, var(--accent), var(--accent-2)); 
box-shadow: 0 12px 24px rgba(108, 92, 231, .35);
cursor:pointer;
color: white;
}
.akb-subtitle { font-weight:600; opacity:.9; }

.akb-channels-wrap {
display:block;
max-height:510px;
overflow-y:auto;
padding-right:6px;
}
.akb-channel-btn {
display:flex; align-items:center; justify-content:flex-start;
position:relative; padding:8px; margin-bottom:6px;
border-radius:10px; border:1px solid var(--border,#e6e6e6);
background:var(--panel-2); cursor:pointer;
}
.akb-avatar {
width:40px; height:40px; border-radius:50%;
display:block; flex-shrink:0;
}
.akb-net {
position: absolute;
right: 0px;
width: 18px;
bottom: 0px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .06);
border-radius: 50%;
}
.akb-net i{
color: var(--text);
}
.akb-net svg{
fill: var(--text);
}

.card.link-card.active {
  border: 1px solid rebeccapurple;
  box-shadow: 0 0px 10px rgb(29 0 255 / 50%);
  background: rgb(165 154 255 / 35%);
}
.meta a {word-break: break-all;}




.week-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 16px;
  margin: 0px 15px;
  padding-bottom: 20px;
}


.week-grid .card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}

.week-grid .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.week-grid .card-img img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
}

.week-grid .card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.week-grid .card-body .title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 6px;
  line-height: 1.2em;
}

.week-grid .card-body .meta {
  font-size: 12px;
  margin-bottom: 6px;
}

.week-grid .text-preview {
  font-size: 14px;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}

.week-grid .actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}
#modalContent {
    max-height: 400px;
    overflow-y: auto;
}
.card-img.gallery, .modal-gallery {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-img.gallery img, .modal-gallery img {
  max-width: 100%;
  display: block;
}
.card-img.gallery button, .modal-gallery button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 1em;
  z-index: 2;
}
.card-img.gallery .prev { left: 5px; }
.card-img.gallery .next { right: 5px; }
.modal-gallery button:first-child { left: 5px; }
.modal-gallery button:last-child { right: 5px; }


.card.magazine {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  margin-bottom: 20px;
}

.card.magazine:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.35);
}

.card.magazine .card-img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.card.magazine .card-body {
  padding: 16px 18px;
}

.card.magazine .title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text, #fff);
  margin-bottom: 8px;
  line-height: 1.4;
}

.card.magazine .meta {
  font-size: 0.85rem;
  color: var(--muted, #a4c1d8);
  margin-bottom: 10px;
}

.card.magazine .text-preview {
  font-size: 0.95rem;
  color: var(--text, #dce7f3);
  line-height: 1.5;
}

.card.magazine .actions {
  margin-top: 12px;
}

.card.magazine .chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}
.card.full-width {
  grid-column: 1 / -1; 
  width: 100%;
}
.card.title-only .title {
  font-size: 1.4rem;
  font-weight: 600;
  white-space: normal;
  overflow: visible;   
  text-overflow: unset;
}

.card.article .article-body {
  max-width: 900px; 
  margin: auto;  
  padding: 1.5rem;
}



/* ====== TITLE-ONLY  ====== */
.card.title-only{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 22px;

  border: 1px solid rebeccapurple;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.card.title-only::before{
  content: "";
  position: absolute;
  left: 8px; top: 10px; bottom: 10px;
  width: 4px;
  background: linear-gradient(180deg, var(--accent), rgba(52,211,153,0));
  border-radius: 4px;
}
.card.title-only .title{
  font-weight: 600;
  color: var(--text, #e6f1fa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card.title-only .meta{
  font-size: .86rem;
  color: var(--muted, #a4c1d8);
  white-space: nowrap;
}
.card.title-only:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.28);
}
.card.title-only:focus-visible{
  outline: 2px solid #2aabef;
  outline-offset: 2px;
  transition: outline .1s ease;
}
.open-link {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 10px;
}
.breadcrumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: var(--muted);
user-select: none;
border-right: 2px solid var(--accent);
padding-right: 20px;
}

.breadcrumbs a,
.breadcrumbs span {
display: flex;
align-items: center;
position: relative;
padding: 6px 12px;
background: linear-gradient(135deg, rgba(108,92,231,.15), rgba(50,196,141,.15));
border-radius: var(--card-radius);
text-decoration: none;
color: var(--text);
transition: all 0.3s ease;
cursor: pointer;
}

.breadcrumbs a:hover {
background: var(--accent);
color: #fff;
transform: translateY(-2px);
box-shadow: var(--shadow);
}

.breadcrumbs .separator {
font-weight: 700;
color: var(--accent-2);
transition: transform 0.3s ease;
}
.ui-sidebar.hidden {
  display: none;
}

.d-block {
  display: block !important;
  padding-left: 20px;
}
.cls-1{fill:none;stroke:var(--text);stroke-linecap:round;stroke-linejoin:round;stroke-width:40px;}
.toggle-hidden {
  margin-left: auto;
  cursor: pointer;
}
.main .ui-sidebar {
  max-width: 600px;
}
.day-head h3 {
  padding: 10px;
}
.day-head h3.active {
  border-bottom: 3px solid rebeccapurple;
}
.ui-district { border-bottom: 1px solid var(--border, #e6e6e6); }
.ui-district-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; cursor:pointer; font-weight:600;
}
.ui-district.open .ui-district-head .ui-arrow { transform: rotate(90deg); }
.ui-sub-cities { padding: 6px 0 8px 8px; }
.ui-sub-cities .ui-sub-item { display:flex; gap:4px; padding:6px 10px; }
.ui-sub-list.searching .ui-district { border-color: transparent; }

.ui-district .ui-sub-cities{display: none!important;}
.ui-district.open .ui-sub-cities{display: block!important;}
span.ui-arrow svg { fill: var(--text);}

.card.article {
  display: grid;
  align-items: center;
}
.card.article img {
  width: 150px;
}

.tg-auth-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg);
  min-height: 100vh;
  padding: 20px;
  background-image: var(--grad);
}

.tg-auth-card {
  background: var(--panel);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  padding: 32px;
  max-width: 560px;
  width: 100%;
}

.tg-auth-title {
  font-size: 24px;
  margin-bottom: 16px;
  color: var(--text);
}

.tg-auth-success {
  background: var(--accent-2);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--radius);
}

.tg-auth-desc {
  color: var(--text);
  margin-bottom: 20px;
}

.tg-auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tg-auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
}

.tg-auth-field label {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 6px;
}

.tg-auth-field input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--panel-2);
  background: var(--panel-2);
  color: var(--text);
  transition: 0.2s;
}

.tg-auth-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.tg-auth-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.tg-auth-hr {
  height: 1px;
  background: var(--panel-2);
  margin: 12px 0;
}

.tg-auth-btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: 0.2s;
}

.tg-auth-btn:hover {
  background: #584ae1;
}

.tg-auth-btn.primary {
  background: var(--tg);
}

.mt-12 {
  margin-top: 12px;
}



.proccess-login-card {
  background: var(--panel);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  margin: 2rem auto;
  max-width: 520px;
  position: relative;
  overflow: hidden;
}

.proccess-login-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.2rem;
}

.proccess-login-error-text {
  color: var(--danger);
  margin-bottom: 1rem;
  font-weight: 500;
}

.proccess-login-success-text {
  color: var(--accent-2);
  margin-bottom: 1rem;
  font-weight: 500;
}

.proccess-login-info-text {
  color: var(--text);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.proccess-login-hint-text {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 1rem;
}

.proccess-login-btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.proccess-login-btn:hover {
  filter: brightness(1.05);
  box-shadow: var(--ring);
}

.proccess-login-btn-back {
  background: var(--panel-2);
  color: var(--text);
}

.proccess-login-btn-primary {
  background: var(--accent);
  color: #fff;
}

.proccess-login-btn-link {
  color: var(--accent);
  text-decoration: underline;
  padding: 0;
  background: none;
  border-radius: 0;
}
.proccess-login-badge {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 0.6rem;
}
.proccess-login-badge-time {
  background: var(--panel-2);
  color: var(--muted);
}
.proccess-login-steps-list {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}
.proccess-login-step-item {
  background: var(--panel-2);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-bottom: 0.8rem;
  color: var(--text);
  line-height: 1.4;
  position: relative;
}
.proccess-login-step-item::before {
  content: "✓";
  color: var(--accent-2);
  font-weight: bold;
  margin-right: 0.6rem;
}
.fixed .ui-sidebar {
  position: fixed;
}
.top-block {
  position: fixed;
  z-index: 999999;
  background: var(--panel-2);
  width: 100%;
  height: 50px;
  box-shadow: 0 12px 24px rgba(108, 92, 231, .35);
  display: flex;
  align-items: center;
}


.user-block {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
}
.user-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 0;
  min-width: 140px;
  z-index: 1000;
  margin-top: 10px;
}

.user-dropdown .dropdown-btn {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
}

.user-dropdown .dropdown-btn:hover {
  background: var(--panel-2);
}

.user-dropdown .dropdown-btn.danger {
  color: var(--panel);
  background: var(--danger);
  border-radius: var(--radius);
  margin: 4px 8px 0 8px;
  text-align: center;
}

.user-dropdown .dropdown-btn.danger:hover {
  opacity: 0.9;
}

.tg-auth-btn {
  padding: 8px 16px;
  border-radius: var(--radius);
  border: none;
  background: var(--accent);
  color: #e9ecf3;
  cursor: pointer;
  transition: 0.2s;
}

.tg-auth-btn:hover {
  opacity: 0.9;
}

#userBlock, #tgAuthBtn {
  margin-left: auto;
  width: fit-content;
  margin-right: 200px;
}
#userBlock, #tgAuthBtn {
    display: flex;
    align-items: center;
    gap: 10px;
}

.add-btn{display: none;}
.breadcrumbs{
  margin-left: 100px;
}
.ui-sub-item.active{
  background: #7a6df5;
  color: white;
}

/*.ui-region-list.my {
  margin-top: 5px;
}
.ui-region-list.my .ui-sub-item {
  margin-top: 3px;
}
.ui-region-list.my .ui-sub-item.active {
  border: 2px solid rebeccapurple;
}*/



.u-block{--pad:18px; border-radius:14px; padding:var(--pad);}

/* header */
.u-block__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.u-block__title-wrap{}
.u-block__title{font-size:1.25rem;margin:0;color:var(--text);font-weight:700}
.u-block__subtitle{margin:4px 0 0 0;color:var(--muted);font-size:0.95rem}

/* header controls */
.u-block__controls{display:flex;gap:8px;align-items:center}
.u-btn{border:0;background:transparent;padding:8px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.u-btn:focus{outline:3px solid color-mix(in srgb, var(--accent) 18%, transparent);outline-offset:3px}
.u-btn--ghost .bi{color:var(--muted)}
.u-btn--primary{background:var(--accent);color:white;padding:8px 12px;border-radius:10px;text-decoration:none;display:inline-block}
.u-btn--primary:active{transform:translateY(1px)}

/* layout */
.u-block__body{display:grid;grid-template-columns:1fr 320px;gap:16px}
@media (max-width:980px){ .u-block__body{grid-template-columns:1fr} }

/* side col and main col */
.u-block__col{min-height:0}
.u-block__col--side{display:flex;flex-direction:column;gap:12px}
.u-block__col--main{}

/* side card */
.u-side-card{padding:14px;border-radius:12px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow)}
.u-side-card__title{margin:0 0 8px 0;font-size:1rem;color:var(--text)}
.u-side-card__text{margin:0 0 12px 0;color:var(--muted);line-height:1.45}
.u-side-card__meta{display:flex;gap:8px;flex-wrap:wrap}
.u-chip{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:6px 8px;border-radius:999px;font-size:0.82rem;color:var(--muted)}

.card-item{transition:transform .42s cubic-bezier(.2,.9,.2,1), box-shadow .42s; border-radius:12px}
.card-item:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(3,10,18,0.08)}

.u-accordion{display:flex;flex-direction:column;gap:10px}
.u-accordion__item{border-radius:12px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}
.u-accordion__header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;gap:12px;cursor:pointer;user-select:none}
.u-accordion__header:focus{outline:3px solid color-mix(in srgb, var(--accent) 14%, transparent);outline-offset:3px;border-radius:10px}
.u-accordion__head-left{display:flex;align-items:center;gap:12px}
.u-accordion__icon{width:38px;height:38px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent)}
.u-accordion__question{margin:0;font-size:1rem;color:var(--text);font-weight:600}
.u-accordion__head-right{display:flex;align-items:center;gap:10px}
.u-accordion__tag{background:transparent;padding:6px 8px;border-radius:999px;border:1px solid rgba(255,255,255,0.03);font-size:0.82rem;color:var(--muted)}
.u-accordion__chev .bi{font-size:1.05rem;color:var(--muted);transition:transform .36s cubic-bezier(.2,.9,.2,1), color .25s}

/* panel */
.u-accordion__panel{padding:0 14px 12px 14px;transition:height .36s cubic-bezier(.2,.9,.2,1), opacity .28s;opacity:0}
.u-accordion__panel-inner{padding-top:10px;color:var(--muted);line-height:1.6}

/* when open - utility states (JS will toggle .is-open) */
.u-accordion__item.is-open .u-accordion__panel{opacity:1}
.u-accordion__item.is-open .u-accordion__chev .bi{transform:rotate(180deg);color:var(--accent)}
.u-accordion__item.is-open .u-accordion__question{color:var(--accent)}

/* subtle entry animation (reveal) */
.u-block[data-revealed="false"]{opacity:0;transform:translateY(10px)}
.u-block[data-revealed="true"]{opacity:1;transform:none;transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.2,1)}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .u-accordion__chev .bi, .u-accordion__item, .u-block{transition:none}
}
.u-prices-table {
  width: 100%;
  border-collapse: separate;
  font-family: 'Inter', sans-serif;
}

.u-prices-table th,
.u-prices-table td {
  padding: 14px 18px;
  border-radius: 12px;
  text-align: left;
  background: rgba(255,255,255,0.05);
  color: var(--text);
}

.u-prices-table th {
  background: rgba(255,255,255,0.08);
  font-weight: 600;
}

.u-prices-table tbody tr {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: default;
}

.u-prices-table tbody tr:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}

.u-prices-table .highlight {
  background: rgba(255, 255, 255, 0.12);
  border-left: 4px solid var(--accent);
}

.u-prices-table td a.u-btn--primary {
  padding: 6px 12px;
  font-size: 0.85rem;
  border-radius: 8px;
  transition: transform 0.15s ease;
}

.u-prices-table td a.u-btn--primary:hover {
  transform: translateY(-1px);
}
.u-prices-table th, .u-prices-table td {
  border: 1px solid rgba(0, 0, 0, .3)!important;
}
.dark .u-prices-table th, .u-prices-table td {
  border: 1px solid rgba(255, 255, 255, .2);
}
.pages-links {
  margin-left: 100px;
}
.pages-links a {
  background: transparent;
  color: var(--text);
}

.pages-links a:hover {
  background: var(--accent);
  color: white;
}
.card-item {
  border: 1px solid #bcbbbb;
}
.card-item:hover {
  border: 1px solid #bcbbbb;
}
.u-accordion__item {
  border: 1px solid #bcbbbb;
}




.mini-slider {
    margin-top: 12px;
    width: 80%;
    margin: auto;
}
.mini-slider .ms-main {
  position: relative;
  width: 100%;
  padding-top: 56.25%; 
  background:#efefef;
  border-radius:6px;
  overflow:hidden;
}
.mini-slider .ms-main img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.mini-slider .ms-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.45); color:#fff; border:none; width:36px; height:36px; border-radius:4px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:5;
}
.mini-slider .ms-btn.prev { left:8px; }
.mini-slider .ms-btn.next { right:8px; }
.mini-slider .ms-btn:focus { outline:3px solid rgba(100,150,255,0.6); }


.mini-slider .ms-thumbs {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px;
}
.mini-slider .ms-thumb {
  padding:0; border:0; background:transparent; cursor:pointer; overflow:hidden; border-radius:6px;
  box-shadow:0 1px 2px rgba(0,0,0,0.06); transition:transform .12s, box-shadow .12s;
}
.mini-slider .ms-thumb img { width:100%; height:200px; object-fit:cover; display:block; }
.mini-slider .ms-thumb.active { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.12); outline:2px solid #4a90e2; }

.step-3-grid { display:block; }


.s3-row {
  display: grid;
  grid-template-columns: 1fr 360px; 
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}


.s3-col { box-sizing: border-box; }
.s3-col--text { min-width: 0; } 
.s3-col--media figure { margin: 0; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.s3-col--media img { display:block; width:100%; height:auto; object-fit:cover; }

.s3-col--media figcaption { font-size:13px; color:black; padding:8px; text-align:center; }

#global-gallery { position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.85); z-index:99999999999999; visibility:hidden; opacity:0; transition:opacity .18s, visibility .18s;}
#global-gallery.open { visibility:visible; opacity:1; }

.gg-inner { position:relative; max-width:92vw; max-height:92vh; width: min(1200px, 96%); }
.gg-image { display:block; max-width:100%; max-height:100%; margin:0 auto; object-fit:contain; border-radius:6px; }
.gg-close, .gg-prev, .gg-next { position:absolute; background:rgba(0,0,0,0.5); color:#fff; border:0; padding:10px; border-radius:6px; cursor:pointer; }
.gg-close { right:-8px; top:-50px; width:40px; height:40px; font-size:18px; }
.gg-prev { left:-54px; top:50%; transform:translateY(-50%); width:44px; height:44px; font-size:20px; }
.gg-next { right:-54px; top:50%; transform:translateY(-50%); width:44px; height:44px; font-size:20px; }

.gg-meta { margin-top:8px; color:#eee; text-align:center; font-size:14px; }
.gg-counter { opacity:.85; font-size:13px; margin-left:8px; color:#ddd; }





.filters{
  margin-top: 60px;
}
#weekView .ui-sidebar {
  box-shadow: none;
  margin: 0px;
}
#weekView {
  display: flex;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
}

#weekView .day-col:first-child {
  width: 320px;
  flex-shrink: 0; 
  overflow-y: auto;
  z-index: 1;
}

#weekView .day-col.c-news {
  flex: 1;
  overflow-y: auto;
}


.similar-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(8px); 
  background: rgba(0, 0, 0, 0.35); 
  animation: fadeIn 0.3s ease forwards;
}

.similar-modal-window {
  background: var(--panel-2);
  border-radius: var(--radius);
  max-width: 900px;
  width: 90%;
  max-height: 80%;
  overflow-y: auto;
  box-shadow: var(--shadow);
  animation: slideIn 0.3s ease forwards;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--scroll);
}

.similar-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--scroll);
  background-color: var(--panel-2);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  color: var(--text);
}

.similar-modal-header h5 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.similar-modal-close {
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  color: var(--muted);
  transition: color 0.2s;
}

.similar-modal-close:hover {
  color: var(--danger);
}

.similar-modal-body {
  display: flex;
  flex-wrap: wrap;
  padding: 16px;
  gap: var(--grid-gap);
  color: var(--text);
}

.similar-left, .similar-right {
  flex: 1;
  min-width: 250px;
}

.similar-left h6, .similar-right h6 {
  margin-top: 0;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted);
}

.sim-copy-card {
  border: 1px solid var(--scroll);
  border-radius: var(--card-radius);
  padding: 10px 12px;
  margin-bottom: 12px;
  background-color: var(--panel);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sim-copy-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

.sim-copy-title {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
  color: var(--text);
}

.sim-copy-meta {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.sim-copy-text {
  font-size: 0.85rem;
  line-height: 1.3;
  margin-bottom: 6px;
  color: var(--text);
}

.sim-copy-footer {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
}

.sim-copy-source a {
  color: var(--accent-2);
  text-decoration: none;
}

.sim-copy-source a:hover {
  text-decoration: underline;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes slideIn {
  from {transform: translateY(-20px); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}
.badge{
  color: var(--text);
}
iframe {
  width: 100%;
  height: 400px;
}


.ui-sub-item { display: flex; align-items: baseline; gap: 8px; }
.city-district.small { font-size: 12px; opacity: 0.75; margin-left: 6px; text-transform: none; }
.ui-search-results { padding: 6px 0; }
.ui-no-results { padding: 8px; color: #777; font-size: 13px; }
.ui-loader {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  border: 2px solid #ccc;
  border-top-color: #666;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

.ui-count {
  margin-left: 6px;
  font-size: 0.9em;
  color: #888;
}

.city-count {
  margin-left: 8px;
  font-size: 0.85em;
  color: var(--text);
  vertical-align: middle;
}
footer {
  position: fixed;
  z-index: 999999;
  background: var(--panel);
  width: 100%;
  height: 40px;
  box-shadow: 0 -6px 14px rgba(108, 92, 231, .2);
  display: flex;
  align-items: center;
  bottom: 0px;
  justify-content: center;
}
.main .ui-shell{
  display: block;
}
.ui-shell.board.d-block section[data-special="links"]{
  display: none;
}
.week .ui-sidebar{
      padding: 20px 18px 18px 18px;
}
.u-block__subtitle {
  padding-top: 20px;
}


.u-block__col--main {
  padding-right: 20px;
  padding-bottom: 100px;
}

#currencySelect {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 6px 34px 6px 12px;
  font-size: 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  color: var(--text);
  cursor: pointer;
  transition: 0.25s ease;
  outline: none;
  min-width: 90px;
  font-weight: 500;
  border: 1px solid #bcbbbb;
}
#currencySelect option{
  color: #1d212a;
}
#currencySelect:hover {
  background: rgba(255,255,255,0.27);
}

#currencySelect:focus {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.32);
}

#currencySelect {
  background-image: url("data:image/svg+xml,%3Csvg fill='var(--text)' xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath d='M5.516 7.548a.625.625 0 0 1 .884 0L10 11.148l3.6-3.6a.625.625 0 1 1 .884.884L10.442 12.47a1.25 1.25 0 0 1-1.768 0L5.516 8.432a.625.625 0 0 1 0-.884z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}
.u-block__controls {
  display: flex;
  align-items: center;
  gap: 10px;
}







@media (max-width: 1500px) {
  .s3-row {
    grid-template-columns: 1fr 460px; 
  }
}

@media (max-width: 1400px) {
  .d-block {
    padding-left: 0px;
  }
  
}

@media (max-width: 1370px){
  .week-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }
}


@media (max-width: 1200px){
.week{min-width:1000px}
.categories-grid-small { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
@media (max-width:1100px) { 
}

@media (max-width:1024px){
  .ui-shell{grid-template-columns:1fr}
  .ui-sidebar {
    position: fixed;
    left: 60px;
    top: 60px;
    bottom: 50px;
    width: 280px;
    transform: translateX(0%);
    transition: transform .35s;
    z-index: 99999999999;
  }
  .ui-shell.ui-open .ui-sidebar{transform:translateX(0)}.ui-toggle{display:flex}
  .ui-content {
    margin-left: 20px;
  }
  footer{
    z-index: 9999999;
  }
  .sidebar {
    padding-top: 60px;
  }
  .top-block {
    z-index: 99999999;
  }
}


@media (max-width: 980px){
  .u-prices-table thead {
    display: none;
  }
  .u-prices-table, .u-prices-table tbody, .u-prices-table tr, .u-prices-table td {
    display: block;
    width: 100%;
  }
  .u-prices-table tr {
    margin-bottom: 14px;
  }
  .u-prices-table td {
    padding-left: 50%;
    position: relative;
    text-align: left;
    border-radius: 12px;
  }
  .u-prices-table td::before {
    position: absolute;
    top: 14px;
    left: 18px;
    width: 45%;
    white-space: nowrap;
    font-weight: 600;
    color: var(--muted);
    content: attr(data-label);
  }
}

@media (max-width: 900px){
body{grid-template-columns:70px 1fr}
.filters{display:none}
.categories-grid-small { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.week-grid {grid-template-columns: repeat(2, minmax(220px, 1fr));}

.s3-row { grid-template-columns: 1fr; }
.s3-col--media { order: 2; } 
.s3-col--text { order: 1; }


}
@media(max-width:767px){
  .d-block {
    display: grid !important;
  }
  .ui-typing {
    white-space: normal;
  }
  .ui-step {
    flex-flow: wrap;
  }
  .ui-sidebar {
    z-index: 99999;
    transform: translateX(20%);
    height: 96.5vh;
    top: 0px;
    padding: 15px;
    width: 77%;
    left: 0px;
    border: 1px solid rebeccapurple;
    padding-top: 60px;
  }
  #weekView {
    display: block !important;
    min-width: auto;
    width: 90%;
  }
  .day-col {
    margin-bottom: 10px;
  }
  .week-grid {grid-template-columns: repeat(1, minmax(220px, 1fr));}
  .board {
    padding-right: 0px;
  }
  .ui-shell .ui-content{
    display: none;
  }
  .ui-shell.d-block .ui-content{
    display: block;
  }
  .breadcrumbs {
    gap: 1px;
    font-size: 9px;
    font-weight: 300;
    border-right: none;
  }
  .breadcrumbs a, .breadcrumbs span {
    padding: 5px;
  }
  .topbar {
    padding: 10px;
  }
  .board {
    padding: 10px;
  }

  .pages-links{
    display: none;
  }
  .d-block {
    margin-left: 0px
  }
  .u-block__body {
    display: block; 
  }
  .mini-slider {
    width: 95%;
  }
  .mini-slider .ms-thumb img {
    height: 50px;
  }
  figure img {
    width: 100%;
  }
  #weekView .ui-sidebar {
    padding-top: 80px;
  }
  .day-head {
    z-index: 0;
  }
  .ui-shell {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .ui-content {
    margin: 0px;
    padding-top: 60px;
  }
  .sidebar {
    padding-left: 0px;
    padding-right: 0px;
    width: 60px;
  }
  body {
    grid-template-columns: 60px 1fr;
  }
  .tg-auth-btn {
    padding: 4px;
  }
}

@media (max-width:700px) {
  .gg-prev { left:8px; }
  .gg-next { right:8px; }
}

@media (max-width: 600px) {
.categories-grid-small { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}

@media (max-width:560px) { 
  .akb-cards { grid-template-columns: 1fr; } 
  .akb-tab { padding:10px 12px; } 
  .akb-tablist { overflow:auto; } 
}

@media (max-width: 420px) {
  .s3-row { gap: 12px; }
  .s3-col--media img { height: auto; }
}


@media (max-width:420px){
  .mini-slider .ms-main { padding-top:66.66%; }
  .mini-slider .ms-thumb img { height:56px; }
}