/*
Theme Name: VoidToon
Theme URI: https://example.com/voidtoon
Author: Your Name
Author URI: https://example.com
Description: A dark, purple-accented WordPress theme for manhwa and webtoon reading sites — hero carousel, trending + popular rankings, latest updates feed, chapter-by-chapter reader with real progress tracking, mobile navigation, and lazy-loaded images throughout.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gutter
*/

:root{
  --ink:#0B0B14;
  --panel:#15131F;
  --card:#1C1929;
  --card-hi:#252032;
  --line:#2D2740;
  --text:#F2F1F7;
  --muted:#948FA3;
  --blue:#8B5CF6;
  --pink:#FF4D8D;
  --amber:#FFB84D;
  --blue-glow: rgba(139,92,246,0.35);
  --pink-glow: rgba(255,77,141,0.35);
  --amber-glow: rgba(255,184,77,0.3);
  --display: 'Unbounded', sans-serif;
  --body: 'Manrope', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
::selection{background:var(--pink);color:var(--ink);}

.gutter-line{position:relative;}
.gutter-line::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:linear-gradient(180deg,var(--blue),var(--pink));
  border-radius:2px;
}

.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
@media (max-width:640px){.wrap{padding:0 20px;}}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,13,20,0.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  max-width:1240px; margin:0 auto;
}
.logo{
  font-family:var(--display);
  font-weight:800;
  font-size:22px;
  letter-spacing:0.5px;
  display:flex; align-items:center; gap:8px;
}
.logo a{display:flex; align-items:center; gap:8px;}
.logo .mark{
  width:10px;height:26px;
  background:linear-gradient(180deg,var(--blue),var(--pink));
  border-radius:2px;
  display:inline-block;
}
.nav-links{display:flex; gap:32px; font-size:15px; font-weight:600; color:var(--muted);}
.nav-links ul{list-style:none; display:flex; gap:32px;}
.nav-links a:hover{color:var(--text);}
@media (max-width:860px){.nav-links{display:none;}}
.nav-actions{display:flex; align-items:center; gap:14px;}
.btn{
  font-family:var(--body);
  font-weight:700;
  font-size:14px;
  padding:10px 20px;
  border-radius:8px;
  border:1px solid var(--line);
  cursor:pointer;
  display:inline-block;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--text);}
.btn-ghost:hover{border-color:var(--blue);}
.btn-solid{
  background:linear-gradient(135deg,var(--blue),var(--pink));
  color:#0B0D14;
  border:none;
}
.btn-solid:hover{box-shadow:0 8px 24px var(--pink-glow);}
.icon-btn{
  width:38px;height:38px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  cursor:pointer;
}
.icon-btn:hover{color:var(--text); border-color:var(--blue);}

/* ---------- HERO ---------- */
.hero{padding:88px 0 60px; position:relative;}
.hero .wrap{display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center;}
@media (max-width:960px){.hero .wrap{grid-template-columns:1fr; gap:48px;}}
.eyebrow{
  font-family:var(--mono); font-size:13px; color:var(--blue);
  letter-spacing:2px; text-transform:uppercase; margin-bottom:18px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:"//"; color:var(--pink);}
h1{
  font-family:var(--display); font-weight:900;
  font-size:clamp(40px, 5.6vw, 68px); line-height:1.02; letter-spacing:-0.5px;
}
h1 .accent{
  background:linear-gradient(120deg,var(--blue),var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{margin-top:22px; font-size:17px; color:var(--muted); max-width:460px;}
.hero-cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.btn-lg{padding:14px 28px; font-size:15px; border-radius:10px;}
.hero-stats{display:flex; gap:36px; margin-top:46px;}
.stat b{display:block; font-family:var(--display); font-size:26px; font-weight:800;}
.stat span{font-size:13px; color:var(--muted);}

.strip{position:relative; display:flex; flex-direction:column; gap:0; perspective:1000px;}
.panel{position:relative; border-radius:14px; border:1px solid var(--line); overflow:hidden; margin-bottom:16px; transition:transform .35s ease;}
.panel:nth-child(1){height:150px; transform:rotate(-1.2deg);}
.panel:nth-child(2){height:190px; transform:rotate(0.8deg); margin-left:22px;}
.panel:nth-child(3){height:150px; transform:rotate(-0.6deg);}
.panel:hover{transform:scale(1.02) rotate(0deg);}
.p1{background:linear-gradient(135deg,#28345f,#5B8CFF 130%);}
.p2{background:linear-gradient(135deg,#5c2340,#FF4D8D 130%);}
.p3{background:linear-gradient(135deg,#5c4419,#FFB84D 130%);}
.panel .tag{
  position:absolute; top:12px; left:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:1px;
  background:rgba(0,0,0,0.35); padding:4px 10px; border-radius:6px; text-transform:uppercase;
}
.panel .glyph{position:absolute; bottom:10px; right:14px; opacity:0.5;}
.scroll-cue{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:6px; margin-left:22px;}
.scroll-cue .arrow{animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}
@media (prefers-reduced-motion:reduce){.scroll-cue .arrow{animation:none;} .panel{transition:none;}}

/* ---------- GENRE CHIPS ---------- */
.genres{padding:36px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.chip-row{display:flex; gap:12px; overflow-x:auto; scrollbar-width:none;}
.chip-row::-webkit-scrollbar{display:none;}
.chip{
  font-size:14px; font-weight:600; white-space:nowrap;
  padding:9px 18px; border-radius:999px; border:1px solid var(--line); color:var(--muted);
  cursor:pointer; transition:all .15s ease; flex-shrink:0; display:inline-block;
}
.chip.active, .chip:hover{color:var(--ink); background:var(--text); border-color:var(--text);}

/* ---------- SECTION HEADS ---------- */
section{padding:64px 0;}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:32px; padding-left:16px;}
.sec-head h2{font-family:var(--display); font-weight:800; font-size:28px;}
.sec-head .see-all{font-size:14px; font-weight:700; color:var(--blue);}

/* ---------- GRID / CARDS ---------- */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.grid{grid-template-columns:1fr;}}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.card:hover{transform:translateY(-6px); border-color:var(--blue); box-shadow:0 14px 32px rgba(0,0,0,0.4);}
.card a{color:inherit; text-decoration:none; display:block;}
.cover{height:200px; position:relative; display:flex; align-items:flex-end; padding:14px;}
.cover .rank{position:absolute; top:12px; right:12px; font-family:var(--display); font-size:22px; font-weight:900; opacity:0.85;}
.cover .badge{font-family:var(--mono); font-size:10px; letter-spacing:1px; background:rgba(0,0,0,0.4); padding:4px 8px; border-radius:6px; text-transform:uppercase;}
.card-body{padding:16px;}
.card-body h3{font-size:16px; font-weight:700; margin-bottom:6px;}
.card-body .meta{font-size:13px; color:var(--muted); display:flex; justify-content:space-between;}
.card-body .meta .ep{font-family:var(--mono); color:var(--blue);}

.cv-1{background:linear-gradient(160deg,#1a2550,#3d5bd9);}
.cv-2{background:linear-gradient(160deg,#4a1230,#d92e6e);}
.cv-3{background:linear-gradient(160deg,#4a3410,#d99a2e);}
.cv-4{background:linear-gradient(160deg,#132a2a,#2ea3a3);}
.cv-5{background:linear-gradient(160deg,#2a1345,#8a4fd9);}
.cv-6{background:linear-gradient(160deg,#301313,#d94f4f);}
.cv-7{background:linear-gradient(160deg,#132a1a,#4fd97a);}
.cv-8{background:linear-gradient(160deg,#2a1a13,#d97a4f);}

/* ---------- EPISODE TICKER ---------- */
.ticker-row{display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin;}
.ep-tile{flex-shrink:0; width:150px; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer; transition:border-color .15s ease;}
.ep-tile:hover{border-color:var(--pink);}
.ep-thumb{height:90px; position:relative;}
.ep-thumb .num{position:absolute; bottom:8px; left:8px; font-family:var(--mono); font-size:12px; font-weight:600; background:rgba(0,0,0,0.5); padding:3px 8px; border-radius:5px;}
.ep-info{padding:10px 12px;}
.ep-info .title{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ep-info .sub{font-size:11px; color:var(--muted); margin-top:2px;}

/* ---------- CONTINUE READING ---------- */
.cr-list{display:flex; flex-direction:column; gap:14px;}
.cr-item{display:flex; align-items:center; gap:18px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 18px;}
.cr-thumb{width:56px; height:56px; border-radius:8px; flex-shrink:0;}
.cr-mid{flex:1; min-width:0;}
.cr-mid h4{font-size:15px; font-weight:700;}
.cr-mid .cr-sub{font-size:12px; color:var(--muted); margin-top:2px;}
.progress{height:5px; background:var(--line); border-radius:4px; margin-top:8px; overflow:hidden;}
.progress .fill{height:100%; background:linear-gradient(90deg,var(--blue),var(--pink));}
.cr-cta{font-size:13px; font-weight:700; color:var(--amber); flex-shrink:0;}

/* ---------- CTA / FOOTER ---------- */
.cta-band{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:64px 0;}
.cta-inner{display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap;}
.cta-inner h2{font-family:var(--display); font-size:30px; font-weight:800; max-width:480px;}
.cta-form{display:flex; gap:10px;}
.cta-form input{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:13px 16px; color:var(--text); font-family:var(--body); font-size:14px; width:240px;}
.cta-form input:focus{outline:2px solid var(--blue); outline-offset:2px;}

footer{padding:56px 0 40px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid var(--line); margin-bottom:24px;}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}
.foot-col h5{font-size:13px; letter-spacing:1px; color:var(--muted); margin-bottom:14px; text-transform:uppercase;}
.foot-col a{display:block; font-size:14px; margin-bottom:10px; color:var(--text);}
.foot-col a:hover{color:var(--blue);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted); flex-wrap:wrap; gap:12px;}

/* ---------- GENERIC PAGE / SINGLE CONTENT ---------- */
.page-content{padding:64px 0; max-width:820px; margin:0 auto;}
.page-content h1{margin-bottom:24px;}
.page-content p{color:var(--text); margin-bottom:16px; font-size:16px; line-height:1.7;}

.single-series-hero{padding:56px 0; border-bottom:1px solid var(--line);}
.single-series-hero .wrap{display:grid; grid-template-columns:280px 1fr; gap:40px;}
@media (max-width:760px){.single-series-hero .wrap{grid-template-columns:1fr;}}
.single-cover{height:360px; border-radius:16px; border:1px solid var(--line);}
.single-meta{display:flex; gap:10px; margin:18px 0; flex-wrap:wrap;}
.single-meta span{font-family:var(--mono); font-size:12px; background:var(--card); border:1px solid var(--line); padding:5px 12px; border-radius:6px; color:var(--muted);}

/* ---------- EPISODE LIST (on the series page) ---------- */
.ep-list{display:flex; flex-direction:column; gap:2px; margin-top:24px;}
.ep-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; background:var(--card); border:1px solid var(--line);
  border-radius:10px; margin-bottom:8px; transition:border-color .15s ease;
}
.ep-row:hover{border-color:var(--blue);}
.ep-row .ep-row-num{font-family:var(--mono); color:var(--blue); font-size:13px; width:70px; flex-shrink:0;}
.ep-row .ep-row-title{flex:1; font-size:15px; font-weight:600;}
.ep-row .ep-row-date{font-size:13px; color:var(--muted); flex-shrink:0;}

/* ---------- READER PAGE ---------- */
.reader-header{
  position:sticky; top:65px; z-index:40;
  background:rgba(11,13,20,0.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:14px 0;
}
.reader-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.reader-header .series-link{font-size:13px; color:var(--muted);}
.reader-header .series-link a:hover{color:var(--blue);}
.reader-header .ep-title{font-family:var(--display); font-weight:700; font-size:18px; margin-top:2px;}
.reader-header .ep-progress-text{font-family:var(--mono); font-size:12px; color:var(--muted); flex-shrink:0;}

.reader-content{
  max-width:720px; margin:0 auto; padding:40px 20px 20px;
}
.reader-content img{width:100%; display:block; margin:0 0 4px;}
.reader-content p{color:var(--text); font-size:16px; line-height:1.8; margin-bottom:16px;}

.reader-nav{
  position:sticky; bottom:0; z-index:40;
  background:rgba(11,13,20,0.92); backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:16px 0; margin-top:40px;
}
.reader-nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:14px;}
.reader-nav .nav-btn{
  display:flex; align-items:center; gap:8px;
  font-weight:700; font-size:14px; padding:11px 20px; border-radius:8px;
  border:1px solid var(--line); flex:1; justify-content:center;
}
.reader-nav .nav-btn.next{background:linear-gradient(135deg,var(--blue),var(--pink)); color:var(--ink); border:none;}
.reader-nav .nav-btn.disabled{opacity:0.35; pointer-events:none;}
.reader-nav .back-to-series{font-size:13px; color:var(--muted); text-align:center; flex-shrink:0; padding:0 10px;}
.reader-nav .back-to-series:hover{color:var(--text);}

/* ---------- MOBILE NAV ---------- */
.mobile-menu-btn{display:none;}
@media (max-width:860px){
  .mobile-menu-btn{display:flex;}
  .nav-links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--ink); border-bottom:1px solid var(--line);
    padding:12px 20px 20px;
  }
  .nav-links.is-open{display:block;}
  .nav-links ul{flex-direction:column; gap:4px;}
  .nav-links a{display:block; padding:10px 4px;}
  .hide-on-small{display:none;}
}
header{position:sticky; /* keep existing */ }
nav{position:relative;}

/* ---------- SEARCH TOGGLE ---------- */
.search-box{position:relative; display:flex; align-items:center;}
.search-form{
  position:absolute; right:0; top:calc(100% + 10px);
  width:260px; opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease;
}
.search-box.is-open .search-form{opacity:1; pointer-events:auto; transform:translateY(0);}
.search-form input{
  width:100%; background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:11px 14px; color:var(--text); font-family:var(--body); font-size:14px;
}
.search-form input:focus{outline:2px solid var(--blue); outline-offset:2px;}
@media (max-width:520px){.search-form{width:200px;}}

/* ---------- ANNOUNCEMENT BAR ---------- */
.announce{
  background:linear-gradient(90deg, rgba(139,92,246,0.14), rgba(255,77,141,0.1));
  border-bottom:1px solid var(--line);
  padding:10px 0;
}
.announce .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.announce p{font-size:13px; color:var(--text); font-weight:600;}
.announce p span{color:var(--muted); font-weight:500; margin-left:6px;}
.announce .dismiss{background:none; border:none; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; flex-shrink:0;}
.announce .dismiss:hover{color:var(--text);}
.announce.is-dismissed{display:none;}

/* ---------- HERO CAROUSEL ---------- */
.carousel{
  display:flex; gap:16px; overflow-x:auto; padding:24px 0 12px;
  scroll-snap-type:x proximity;
}
.carousel-card{
  flex-shrink:0; width:170px; scroll-snap-align:start;
  border-radius:12px; overflow:hidden; border:1px solid var(--line);
  background:var(--card); transition:transform .2s ease, border-color .2s ease;
}
.carousel-card:hover{transform:translateY(-4px); border-color:var(--blue);}
.carousel-cover{height:230px; position:relative;}
.carousel-cover .rating-badge{
  position:absolute; top:8px; left:8px;
  font-family:var(--mono); font-size:11px; font-weight:700;
  background:rgba(0,0,0,0.55); padding:3px 7px; border-radius:6px;
  display:flex; align-items:center; gap:3px;
}
.carousel-cover .rating-badge svg{width:10px; height:10px; fill:var(--amber);}
.carousel-info{padding:10px 12px;}
.carousel-info .title{font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.carousel-info .sub{font-size:11px; color:var(--muted); margin-top:3px;}
@media (max-width:640px){.carousel-card{width:130px;} .carousel-cover{height:175px;}}

/* ---------- TWO-COLUMN: TRENDING + POPULAR ---------- */
.two-col{display:grid; grid-template-columns:2.3fr 1fr; gap:32px; align-items:start;}
@media (max-width:960px){.two-col{grid-template-columns:1fr;}}

.trend-list{display:flex; flex-direction:column; gap:10px;}
.trend-row{
  display:flex; align-items:center; gap:14px;
  background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px;
  transition:border-color .15s ease;
}
.trend-row:hover{border-color:var(--blue);}
.trend-row .tr-thumb{width:56px; height:72px; border-radius:6px; flex-shrink:0; background-size:cover; background-position:center;}
.trend-row .tr-mid{flex:1; min-width:0;}
.trend-row .tr-mid h4{font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.trend-row .tr-mid .tr-genres{font-size:12px; color:var(--muted); margin-top:3px;}
.trend-row .tr-rating{font-family:var(--mono); font-size:13px; font-weight:700; color:var(--amber); flex-shrink:0; display:flex; align-items:center; gap:4px;}

.popular-panel{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px;
  position:sticky; top:90px;
}
.popular-panel h3{font-family:var(--display); font-size:16px; font-weight:700; margin-bottom:14px;}
.tabs{display:flex; gap:6px; margin-bottom:16px; background:var(--panel); border-radius:8px; padding:4px;}
.tab-btn{
  flex:1; font-size:12px; font-weight:700; padding:8px 6px; border-radius:6px;
  border:none; background:transparent; color:var(--muted); cursor:pointer;
}
.tab-btn.active{background:var(--blue); color:#fff;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.ranked-item{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line);}
.ranked-item:last-child{border-bottom:none;}
.rank-badge{
  width:24px; height:24px; border-radius:6px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12px; font-weight:700;
  background:var(--panel); color:var(--muted);
}
.ranked-item:nth-child(1) .rank-badge{background:var(--blue); color:#fff;}
.ranked-item:nth-child(2) .rank-badge{background:var(--pink); color:#fff;}
.ranked-item:nth-child(3) .rank-badge{background:var(--amber); color:#0B0B14;}
.ranked-item .rk-thumb{width:40px; height:52px; border-radius:5px; flex-shrink:0; background-size:cover; background-position:center;}
.ranked-item .rk-mid{flex:1; min-width:0;}
.ranked-item .rk-mid h5{font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ranked-item .rk-mid .rk-genres{font-size:11px; color:var(--muted); margin-top:2px;}
.empty-note{font-size:13px; color:var(--muted); padding:8px 0;}

/* ---------- LATEST UPDATES ---------- */
.lu-list{display:flex; flex-direction:column; gap:2px;}
.lu-row{
  display:flex; align-items:center; gap:16px;
  padding:14px; background:var(--card); border:1px solid var(--line);
  border-radius:10px; margin-bottom:8px; transition:border-color .15s ease;
}
.lu-row:hover{border-color:var(--blue);}
.lu-thumb{width:48px; height:64px; border-radius:6px; flex-shrink:0; background-size:cover; background-position:center;}
.lu-mid{flex:1; min-width:0;}
.lu-mid h4{font-size:14px; font-weight:700;}
.lu-chip{
  display:inline-block; margin-top:6px; font-family:var(--mono); font-size:11px;
  background:var(--panel); border:1px solid var(--line); color:var(--blue);
  padding:3px 9px; border-radius:5px;
}
.lu-time{font-size:12px; color:var(--muted); flex-shrink:0;}

/* real <img> lazy-loading inside cover/thumb containers */
.cover img, .carousel-cover img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; display:block;
}
.cover > *:not(img), .carousel-cover > *:not(img){position:relative; z-index:1;}
.tr-thumb img, .rk-thumb img, .lu-thumb img, .cr-thumb img, .single-cover img, .ep-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.cover, .carousel-cover, .tr-thumb, .rk-thumb, .lu-thumb, .cr-thumb, .ep-thumb, .single-cover{
  background-color:var(--card-hi); /* low-cost placeholder shown before the image paints */
  overflow:hidden;
}

/* focus visibility */
a:focus-visible, button:focus-visible, .chip:focus-visible, .card:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}