/* ═══════════════════════════════════════════
   css/profile.css — algo-freedom society
   Stili specifici di profile.php — Profilo Membro
   ═══════════════════════════════════════════ */

    .profile-hero{
      position:relative;
      background:
        linear-gradient(135deg, rgba(15,35,58,.92) 0%, rgba(15,35,58,.65) 55%, rgba(15,35,58,.30) 100%),
        linear-gradient(135deg, #051426 0%, #0a2845 35%, #1a3a5c 65%, #2d5a7b 100%);
      overflow:hidden;
      padding:0;
    }
    .profile-hero canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.5; }
    .profile-hero::after{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(900px 420px at 8% 20%, rgba(255,255,255,.08), transparent 60%),
        radial-gradient(600px 300px at 80% 60%, rgba(105,168,232,.12), transparent 65%);
      pointer-events:none;
    }
    .profile-hero-inner{
      position:relative; z-index:2;
      padding:58px 0 52px;
      color:#fff;
      display:grid;
      grid-template-columns: auto 1fr auto;
      gap:40px;
      align-items:center;
    }

    /* Avatar */
    .profile-avatar-wrap{ flex:0 0 auto; }
    .profile-avatar{
      width:150px; height:150px;
      border-radius:50%;
      background:radial-gradient(circle at 38% 32%, rgba(105,168,232,.35), transparent 60%),
        linear-gradient(135deg, #c8ddf0, #daeaf8 40%, #b8cfe6);
      border:4px solid rgba(255,255,255,.35);
      box-shadow:0 18px 48px rgba(0,0,0,.36), 0 0 0 1px rgba(255,255,255,.12);
      display:flex; align-items:center; justify-content:center;
      position:relative;
    }
    .profile-avatar svg{ width:72px; height:72px; fill:none; stroke:rgba(31,53,80,.65); stroke-width:1.6; }
    .profile-avatar-badge{
      position:absolute; bottom:-4px; right:-4px;
      background:linear-gradient(135deg, var(--accent-2), var(--accent));
      border:3px solid #1a3a5c;
      border-radius:999px;
      padding:5px 12px;
      font-size:10.5px; font-weight:800; color:#fff;
      letter-spacing:.4px; text-transform:uppercase;
      white-space:nowrap;
    }

    /* Profile Info */
    .profile-info{}
    .profile-breadcrumb{
      display:inline-flex; align-items:center; gap:8px;
      background:rgba(105,168,232,.14); border:1px solid rgba(105,168,232,.28);
      border-radius:999px; padding:5px 14px;
      font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
      color:rgba(105,168,232,.95); margin-bottom:14px;
      animation: fadeSlide .6s ease both;
    }
    .profile-breadcrumb .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2s ease infinite; }
    .profile-name{
      margin:0 0 6px; font-size:52px; font-weight:900; line-height:1.04;
      letter-spacing:-.5px; text-shadow:0 12px 32px rgba(0,0,0,.35);
      animation:fadeSlide .6s .08s ease both;
    }
    .profile-name .thin{ font-weight:100; opacity:.88; }
    .profile-role-line{
      margin:0 0 18px; font-size:18px; color:rgba(255,255,255,.82); font-weight:600;
      animation:fadeSlide .6s .16s ease both;
    }
    .profile-role-line strong{ color:var(--accent); font-weight:800; }
    .profile-tags{
      display:flex; flex-wrap:wrap; gap:8px;
      animation:fadeSlide .6s .24s ease both;
    }
    .profile-tag{
      display:inline-flex; align-items:center; gap:6px;
      background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
      border-radius:999px; padding:6px 14px;
      font-size:12px; font-weight:700; color:rgba(255,255,255,.9);
    }
    .profile-tag svg{ width:12px; height:12px; fill:none; stroke:var(--accent); stroke-width:2.2; }

    /* Stats column */
    .profile-stats{
      display:flex; flex-direction:column; gap:14px; flex:0 0 auto;
      animation:fadeSlide .6s .32s ease both;
    }
    .stat-box{
      background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
      border-radius:12px; padding:14px 20px; text-align:center; min-width:110px;
      backdrop-filter:blur(8px);
    }
    .stat-box .stat-n{ display:block; font-size:28px; font-weight:900; line-height:1; color:#fff; }
    .stat-box .stat-l{ display:block; font-size:11px; font-weight:700; color:rgba(255,255,255,.6); letter-spacing:.4px; margin-top:4px; text-transform:uppercase; }

    @keyframes pulse{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(1.3);} }
    @keyframes fadeSlide{ from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:translateY(0);} }

    /* ── Quick Nav (sticky below hero) ──────────────── */
    .profile-nav{
      background:var(--card); border-bottom:2px solid rgba(15,23,42,.09);
      position:sticky; top:var(--header-h, 76px); z-index:40;
      box-shadow:0 4px 12px rgba(15,23,42,.06);
    }
    .profile-nav-inner{ display:flex; align-items:center; gap:0; padding:0; overflow-x:auto; scrollbar-width:none; }
    .profile-nav-inner::-webkit-scrollbar{ display:none; }
    .pnav-btn{
      display:inline-flex; align-items:center; gap:7px;
      padding:15px 20px; font-size:13px; font-weight:700; color:var(--muted);
      background:none; border:none; border-bottom:3px solid transparent;
      cursor:pointer; white-space:nowrap; transition:color .15s,border-color .15s;
      position:relative; top:2px;
    }
    .pnav-btn svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; }
    .pnav-btn:hover{ color:var(--accent-2); }
    .pnav-btn.active{ color:var(--accent-2); border-bottom-color:var(--accent-2); }

    /* ── Main layout ─────────────────────────────────── */
    main{ padding:0; }
    .profile-body{
      display:grid;
      grid-template-columns: 1fr 340px;
      gap:28px;
      padding:32px 0 0;
      align-items:start;
    }
    .profile-main{}
    .profile-sidebar{}

    /* ── Section titles ──────────────────────────────── */
    .section-title{
      margin:0 0 4px; font-size:24px; font-weight:900; color:#1b2a44;
      letter-spacing:-.2px; display:flex; align-items:center; gap:18px;
    }
    .title-divider{ flex:1; height:1px; background:rgba(15,23,42,.12); }
    .section-sub{ margin:0 0 20px; color:var(--muted); font-weight:600; font-size:14px; }

    /* ── Panel / Card base ───────────────────────────── */
    .panel{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:20px; }
    .panel-head{
      padding:18px 22px 14px; border-bottom:1px solid rgba(15,23,42,.07);
      display:flex; align-items:center; gap:12px;
    }
    .panel-head-ico{
      width:34px; height:34px; border-radius:9px;
      background:rgba(105,168,232,.12); border:1px solid rgba(105,168,232,.2);
      display:grid; place-items:center; flex:0 0 auto;
    }
    .panel-head-ico svg{ width:18px; height:18px; fill:none; stroke:var(--accent-2); stroke-width:2.2; }
    .panel-head-title{ font-size:15px; font-weight:900; color:#1b2a44; margin:0; }
    .panel-body{ padding:20px 22px; }

    /* ── Bio ─────────────────────────────────────────── */
    .bio-text{ margin:0 0 14px; color:var(--muted); line-height:1.7; font-size:14.5px; }
    .bio-text:last-child{ margin-bottom:0; }

    /* ── Research interests ──────────────────────────── */
    .interest-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .interest-item{
      display:flex; align-items:flex-start; gap:10px;
      padding:12px 14px; border-radius:10px;
      background:linear-gradient(135deg, rgba(105,168,232,.07), rgba(63,121,183,.04));
      border:1px solid rgba(105,168,232,.15);
    }
    .interest-ico{
      width:28px; height:28px; border-radius:8px; flex:0 0 auto;
      background:linear-gradient(135deg, var(--nav-1), var(--nav-3));
      display:grid; place-items:center;
    }
    .interest-ico svg{ width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2.2; }
    .interest-item h5{ margin:0 0 3px; font-size:13px; font-weight:800; color:#1b2a44; }
    .interest-item p{ margin:0; font-size:12px; color:var(--muted); line-height:1.4; }

    /* ── Publications ────────────────────────────────── */
    @keyframes blink-animation {
      from,
      to {
        opacity: 0;
      }

      50% {
        opacity: 1;
      }
    }
    @-webkit-keyframes blink-animation {
      from,
      to {
        opacity: 0;
      }

      50% {
        opacity: 1;
      }
    }

    .pub-item{
      padding:16px 0;
      border-bottom:1px solid rgba(15,23,42,.07);
    }
    .pub-item:last-child{ border-bottom:none; padding-bottom:0; }
    .pub-meta{
      display:flex; align-items:center; gap:8px; margin-bottom:7px; flex-wrap:wrap;
    }
    .pub-type{
      display:inline-flex; align-items:center;
      padding:3px 10px; border-radius:999px; font-size:10.5px; font-weight:800;
      letter-spacing:.3px; text-transform:uppercase;
    }
    .pub-type.article{ background:rgba(105,168,232,.12); color:#2d6aa8; border:1px solid rgba(105,168,232,.25); }
    .pub-type.policy{ background:rgba(45,160,100,.10); color:#1e7a46; border:1px solid rgba(45,160,100,.22); }
    .pub-type.report{ background:rgba(200,120,30,.10); color:#8a4d0a; border:1px solid rgba(200,120,30,.22); }
    .pub-type.forthcoming{ background:rgba(224, 126, 60, 0.1); color:#F5A327; border:1px solid rgba(200, 183, 30, 0.22); animation:blink-animation 2s infinite; -webkit-animation: blink-animation 1s steps(5, start) infinite;}
    /* ── Preset colore badge (pt-c-*) — sovrascrivono lo stile slug ── */
    .pub-type.pt-c-blue  { background:rgba(59,130,246,.12)  !important; color:#1d4ed8 !important; border:1px solid rgba(59,130,246,.25)  !important; }
    .pub-type.pt-c-sky   { background:rgba(14,165,233,.12)  !important; color:#0284c7 !important; border:1px solid rgba(14,165,233,.25)  !important; }
    .pub-type.pt-c-teal  { background:rgba(20,184,166,.12)  !important; color:#0f766e !important; border:1px solid rgba(20,184,166,.25)  !important; }
    .pub-type.pt-c-green { background:rgba(34,197,94,.12)   !important; color:#15803d !important; border:1px solid rgba(34,197,94,.25)   !important; }
    .pub-type.pt-c-amber { background:rgba(245,158,11,.12)  !important; color:#b45309 !important; border:1px solid rgba(245,158,11,.25)  !important; }
    .pub-type.pt-c-orange{ background:rgba(249,115,22,.12)  !important; color:#c2410c !important; border:1px solid rgba(249,115,22,.25)  !important; }
    .pub-type.pt-c-red   { background:rgba(239,68,68,.12)   !important; color:#b91c1c !important; border:1px solid rgba(239,68,68,.25)   !important; }
    .pub-type.pt-c-rose  { background:rgba(244,63,94,.12)   !important; color:#be123c !important; border:1px solid rgba(244,63,94,.25)   !important; }
    .pub-type.pt-c-purple{ background:rgba(168,85,247,.12)  !important; color:#7e22ce !important; border:1px solid rgba(168,85,247,.25)  !important; }
    .pub-type.pt-c-indigo{ background:rgba(99,102,241,.12)  !important; color:#4338ca !important; border:1px solid rgba(99,102,241,.25)  !important; }
    .pub-type.pt-c-gray  { background:rgba(100,116,139,.12) !important; color:#475569 !important; border:1px solid rgba(100,116,139,.25) !important; }
    /* ── Effetti badge (pt-fx-*) ── */
    @keyframes pt-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
    @keyframes pt-pulse  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }
    @keyframes pt-shine  { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.2)} }
    .pub-type.pt-fx-blink { animation:pt-blink 1.4s ease-in-out infinite !important; }
    .pub-type.pt-fx-pulse { animation:pt-pulse 1.8s ease-in-out infinite !important; }
    .pub-type.pt-fx-shine { animation:pt-shine 2s ease-in-out infinite !important; }
    .pub-year{ font-size:12px; font-weight:700; color:var(--muted); }
    .pub-title{ margin:0 0 5px; font-size:14px; font-weight:800; color:#1b2a44; line-height:1.35; }
    .pub-authors{ margin:0 0 6px; font-size:12px; color:var(--muted); font-weight:600; }
    .pub-authors strong{ color:var(--accent-2); }
    .pub-venue{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:5px; }
    .pub-venue svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; flex:0 0 auto; }
    .pub-actions{ margin-top:8px; display:flex; gap:8px; }
    .pub-btn{
      display:inline-flex; align-items:center; gap:5px;
      padding:5px 12px; border-radius:7px; font-size:11.5px; font-weight:700;
      border:1px solid var(--border); background:var(--bg); color:var(--muted);
      cursor:pointer; transition:color .12s, border-color .12s, background .12s;
    }
    .pub-btn:hover{ color:var(--accent-2); border-color:rgba(105,168,232,.4); background:#fff; }
    .pub-btn svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2; }

    /* ── Sidebar panels ──────────────────────────────── */
    .contact-list{ display:grid; gap:10px; }
    .contact-row{ display:flex; align-items:center; gap:12px; }
    .contact-ico{
      width:32px; height:32px; border-radius:8px; flex:0 0 auto;
      background:rgba(105,168,232,.10); border:1px solid rgba(105,168,232,.18);
      display:grid; place-items:center;
    }
    .contact-ico svg{ width:15px; height:15px; fill:none; stroke:var(--accent-2); stroke-width:2.2; }
    .contact-label{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:1px; }
    .contact-value{ font-size:13px; font-weight:700; color:#1b2a44; }
    .contact-value a{ color:var(--accent-2); }
    .contact-value a:hover{ text-decoration:underline; }

    /* Skills / competencies */
    .skill-list{ display:grid; gap:10px; }
    .skill-item{}
    .skill-top{ display:flex; justify-content:space-between; margin-bottom:5px; font-size:12.5px; font-weight:700; color:#1b2a44; }
    .skill-top span:last-child{ color:var(--muted); font-weight:600; }
    .skill-bar{ height:5px; background:rgba(15,23,42,.08); border-radius:999px; overflow:hidden; }
    .skill-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent-2),var(--accent)); }

    /* Education timeline */
    .edu-list{ display:grid; gap:14px; }
    .edu-item{ display:flex; gap:12px; }
    .edu-dot-col{ display:flex; flex-direction:column; align-items:center; flex:0 0 auto; }
    .edu-dot{ width:10px; height:10px; border-radius:50%; background:var(--accent-2); border:2px solid rgba(105,168,232,.3); flex:0 0 auto; margin-top:4px; }
    .edu-line{ width:1px; flex:1; background:rgba(15,23,42,.1); margin-top:4px; }
    .edu-year{ font-size:11px; font-weight:800; color:var(--accent-2); text-transform:uppercase; letter-spacing:.4px; margin-bottom:3px; }
    .edu-degree{ font-size:13px; font-weight:800; color:#1b2a44; margin-bottom:2px; }
    .edu-inst{ font-size:12px; color:var(--muted); font-weight:600; }
    .edu-grade{ display:inline-block; font-size:11px; font-weight:700; color:var(--accent-2); background:rgba(105,168,232,.12); border:1px solid rgba(105,168,232,.28); border-radius:999px; padding:1px 8px; margin-top:4px; }

    /* Membership badges */
    .badge-grid{ display:flex; flex-wrap:wrap; gap:7px; }
    .org-badge{
      display:inline-flex; align-items:center; gap:6px;
      padding:6px 12px; border-radius:8px; font-size:12px; font-weight:700;
      background:linear-gradient(135deg, rgba(31,53,80,.06), rgba(43,79,114,.04));
      border:1px solid rgba(15,23,42,.10); color:#1b2a44;
    }
    .org-badge svg{ width:12px; height:12px; fill:none; stroke:var(--accent-2); stroke-width:2.2; }

    /* ── CTA Band ─────────────────────────────────────── */
    .cta-band{
      position:relative;
      background:radial-gradient(820px 280px at 35% 10%,rgba(105,168,232,.16),transparent 62%),
        linear-gradient(90deg,var(--nav-1),var(--nav-3));
      color:#fff; padding:42px 0;
      border-top:1px solid rgba(255,255,255,.10);
      border-bottom:1px solid rgba(255,255,255,.10);
      margin-top:40px; text-align:center;
    }
    .cta-band h3{ margin:0 0 10px; font-size:26px; font-weight:900; letter-spacing:-.2px; }
    .cta-band p{ margin:0 auto 22px; color:rgba(255,255,255,.85); font-weight:600; max-width:520px; font-size:14.5px; line-height:1.6; }
    .cta-actions{ display:flex; gap:14px; justify-content:center; }
    .btn-primary{ display:inline-flex; align-items:center; gap:10px; padding:12px 24px; background:linear-gradient(180deg,rgba(105,168,232,.85),rgba(63,121,183,.85)); border:1px solid rgba(255,255,255,.20); color:#fff; border-radius:10px; font-weight:800; font-size:14px; cursor:pointer; box-shadow:0 16px 30px rgba(0,0,0,.28); transition:transform .12s ease,box-shadow .12s ease; }
    .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 18px 34px rgba(0,0,0,.32); }
    .btn-ghost{ border:1px solid rgba(255,255,255,.22); background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.08)); color:#fff; padding:12px 22px; border-radius:10px; font-weight:900; font-size:14px; cursor:pointer; box-shadow:0 12px 22px rgba(0,0,0,.20); transition:transform .12s ease,box-shadow .12s ease; }
    .btn-ghost:hover{ transform:translateY(-1px); box-shadow:0 14px 26px rgba(0,0,0,.26); }

    /* ── Footer ──────────────────────────────────────── */
    footer{ background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0)),linear-gradient(90deg,var(--nav-1),var(--nav-2)); color:#fff; border-top:1px solid rgba(255,255,255,.10); }
    .footer-inner{ padding:34px 0 18px; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:26px; }
    .footer-title{ margin:0 0 10px; font-weight:900; letter-spacing:.2px; }
    .footer-text{ margin:0; color:rgba(255,255,255,.84); line-height:1.55; font-weight:600; font-size:13.5px; }
    .footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
    .footer-links a{ color:rgba(255,255,255,.86); font-weight:700; font-size:13.5px; }
    .footer-links a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
    .footer-bottom{ border-top:1px solid rgba(255,255,255,.10); padding:14px 0 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; color:rgba(255,255,255,.78); font-weight:600; font-size:12.5px; }

    /* ── Responsive ──────────────────────────────────── */

    /* ─── Hamburger button ───────────────────────────── */
    .hamburger{
      display:none;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap:5px;
      width:42px; height:42px;
      background:none;
      border:1px solid rgba(255,255,255,.22);
      border-radius:8px;
      cursor:pointer;
      padding:0;
      flex-shrink:0;
    }
    .hamburger span{
      display:block;
      width:22px; height:2px;
      background:#fff;
      border-radius:999px;
      transition:transform .25s ease, opacity .25s ease;
    }
    .hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2){ opacity:0; }
    .hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

    /* ─── Side drawer ────────────────────────────────── */
    .nav-overlay{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.55);
      z-index:99;
      opacity:0;
      transition:opacity .25s ease;
    }
    .nav-overlay.visible{ opacity:1; }
    .side-drawer{
      position:fixed;
      top:0; right:0;
      width:min(320px, 85vw);
      height:100%;
      background:linear-gradient(160deg,#0f2235,#1a3a5c);
      z-index:100;
      transform:translateX(100%);
      transition:transform .28s cubic-bezier(.4,0,.2,1);
      display:flex;
      flex-direction:column;
      box-shadow:-6px 0 30px rgba(0,0,0,.35);
    }
    .side-drawer.open{ transform:translateX(0); }
    .drawer-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:20px 22px;
      border-bottom:1px solid rgba(255,255,255,.10);
    }
    .drawer-brand{
      font-size:15px;
      font-weight:700;
      color:#fff;
      letter-spacing:.2px;
    }
    .drawer-close{
      background:none;
      border:none;
      cursor:pointer;
      color:rgba(255,255,255,.7);
      font-size:24px;
      line-height:1;
      padding:4px 8px;
    }
    .drawer-close:hover{ color:#fff; }
    .drawer-menu{
      list-style:none;
      margin:0; padding:18px 0;
      flex:1;
      overflow-y:auto;
    }
    .drawer-menu li a{
      display:flex;
      align-items:center;
      gap:12px;
      padding:15px 24px;
      color:rgba(255,255,255,.88);
      font-weight:600;
      font-size:16px;
      border-left:3px solid transparent;
      transition:background .15s ease, border-color .15s ease, color .15s ease;
    }
    .drawer-menu li a:hover,
    .drawer-menu li a.active{
      background:rgba(105,168,232,.12);
      border-left-color:var(--accent);
      color:#fff;
    }
    .drawer-footer{
      padding:20px 22px;
      border-top:1px solid rgba(255,255,255,.10);
    }
    .drawer-footer .btn-join{
      width:100%;
      text-align:center;
      display:block;
    }

    @media(max-width:960px){
      .profile-hero-inner{ grid-template-columns:auto 1fr; }
      .profile-stats{ display:none; }
      .profile-body{ grid-template-columns:1fr; }
      .profile-sidebar{ order:3; }
      .interest-grid{ grid-template-columns:1fr; }
      .footer-inner{ grid-template-columns:1fr; }
    }
    @media(max-width:760px){
      .profile-name{ font-size:38px; }
      .profile-hero-inner{ grid-template-columns:1fr; gap:22px; }
      .profile-avatar{ width:110px; height:110px; }
      .cta-actions{ flex-direction:column; align-items:center; }
    }
  

    @media(max-width:1111px){
      .hamburger{ display:flex; }
      .nav{ height:auto; padding:14px 0; }
      nav[aria-label="Primary"]{ display:none; }
      .nav-cta{ display:none; }
    }
      @media(max-width:640px){
      /* Hero centering mobile */
      .profile-hero-inner { text-align:center; }
    }

    /* ── Pagination (condiviso con publications.css) ─────────────── */
    .pagination{ display:flex; justify-content:center; align-items:center; gap:8px; padding:18px 0 6px; flex-wrap:wrap; }
    .page-btn{ width:38px; height:38px; border-radius:9px; border:1px solid var(--border); background:var(--card); display:grid; place-items:center; font-size:13.5px; font-weight:700; color:var(--muted); cursor:pointer; transition:all .12s; box-shadow:0 2px 6px rgba(15,23,42,.07); }
    .page-btn:hover:not(:disabled){ border-color:var(--accent); color:var(--accent-2); }
    .page-btn:disabled{ opacity:.45; cursor:not-allowed; }
    .page-btn.active{ background:linear-gradient(135deg,var(--nav-1),var(--nav-3)); border-color:transparent; color:#fff; box-shadow:0 6px 14px rgba(31,53,80,.22); }
    .page-btn.arrow svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.3; }