/* ===== THEME TOKENS ===== */
    :root{
      --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:hidden;
    }
    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)}
    .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;
    }
    .theme-toggle:hover{transform:rotate(-8deg) scale(1.03); color:var(--accent)}

    /* ===== MAIN WRAPPER ===== */
    .main{display:flex;flex-direction:column; height:100vh; 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;
    }
    .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: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)}
    


    .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:20;
      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(12px);
  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: 99999;
}

.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);min-height:100vh;background:var(--bg);background-image:var(--grad)}
.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}
.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 - 220px);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}
.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:650px}
.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)}}
@media (max-width:1024px){.ui-shell{grid-template-columns:1fr}.ui-sidebar{position:fixed;left:14px;top:14px;bottom:84px;width:280px;transform:translateX(-115%);transition:transform .35s}.ui-shell.ui-open .ui-sidebar{transform:translateX(0)}.ui-toggle{display:flex}}


.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 16px 32px rgba(108, 92, 231, .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;
}



@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: 900px){
body{grid-template-columns:70px 1fr}
.filters{display:none}
.categories-grid-small { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}
@media (max-width: 600px) {
.categories-grid-small { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}