/* ============================================================
 * 7BLOGLY — vivid app-like learning-platform skin.
 * The whole personality is mixed from the site's own accent, so
 * the dashboard color picker recolors the entire template.
 * ============================================================ */

/* Tokens: accent-tinted canvas, friendly geometry */
:root[data-skin="7blogly"]{
  --bg:color-mix(in srgb, var(--accent) 4%, #fbfbfc);
  --surface:#ffffff;
  --ink:#17171a; --muted:#56565e; --faint:#8b8b93;
  --line:color-mix(in srgb, var(--accent) 9%, #e9e9ee);
  --line2:color-mix(in srgb, var(--accent) 14%, #d9d9e0);
  --radius:22px;
}
[data-theme="dark"][data-skin="7blogly"]{
  --bg:color-mix(in srgb, var(--accent) 7%, #121214);
  --surface:#1a1a1d;
  --ink:#f3f3f1; --muted:#bcbcc2; --faint:#8d8d94;
  --line:color-mix(in srgb, var(--accent) 14%, #28282c);
  --line2:color-mix(in srgb, var(--accent) 20%, #36363b);
}

/* Header: app bar — surface card floating on the tinted canvas */
[data-skin="7blogly"] .site-header{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--line);box-shadow:0 8px 28px -22px color-mix(in srgb, var(--accent) 55%, transparent)}
[data-skin="7blogly"] .main-nav > ul > li > a{font-weight:700;border-radius:30px;padding:8px 14px}
[data-skin="7blogly"] .main-nav > ul > li > a:hover{background:color-mix(in srgb, var(--accent) 10%, transparent)}
[data-skin="7blogly"] .icon-btn{border-radius:50%;background:color-mix(in srgb, var(--accent) 8%, var(--surface))}

/* Cards: rounded, lifted on accent-tinted shadows, image-led */
[data-skin="7blogly"] .card{border:1px solid var(--line);border-top-width:1px;border-radius:var(--radius);box-shadow:0 14px 34px -24px color-mix(in srgb, var(--accent) 45%, rgba(0,0,0,.35));transition:transform .18s ease, box-shadow .18s ease}
[data-skin="7blogly"] .card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px color-mix(in srgb, var(--accent) 60%, rgba(0,0,0,.35))}
[data-skin="7blogly"] .card .cat{background:var(--cc,var(--accent));color:#fff;border-radius:30px;font-weight:700}
[data-skin="7blogly"] .chip{background:color-mix(in srgb, var(--cc,var(--accent)) 12%, transparent);color:var(--cc,var(--accent));border:none;border-radius:30px;font-weight:700}
[data-skin="7blogly"] .chip:hover{background:var(--cc,var(--accent));color:#fff;transform:translateY(-2px)}

/* Section heads: platform-style with accent dash */
[data-skin="7blogly"] .shead h2{font-size:clamp(1.8rem,1.25rem + 1.8vw,2.3rem);font-weight:800;letter-spacing:-.025em}
[data-skin="7blogly"] .shead h2::before{content:"";width:26px;height:9px;border-radius:6px;background:var(--accent);display:inline-block}

/* Lesson page: title clean; H2s as tinted lesson bands */
[data-skin="7blogly"] .single .entry-title,
[data-skin="7blogly"] .page-article .entry-title{border-left:none;padding-left:0;letter-spacing:-.032em}
[data-skin="7blogly"] .entry-content h2{background:color-mix(in srgb, var(--accent) 9%, transparent);border-radius:14px;padding:.5em .7em;padding-bottom:.5em}
[data-skin="7blogly"] .entry-content h2::after{display:none}
[data-skin="7blogly"] .entry-content{font-size:1.05rem;line-height:1.78}
[data-skin="7blogly"] .entry-content blockquote{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:16px}

/* Tables: bold chart language */
[data-skin="7blogly"] .entry-content table{border:1px solid var(--line);border-radius:16px;overflow:hidden}
[data-skin="7blogly"] .entry-content th{background:color-mix(in srgb, var(--accent) 13%, transparent);color:var(--ink);font-weight:800}
[data-skin="7blogly"] .entry-content tbody tr:nth-child(even){background:color-mix(in srgb, var(--accent) 4%, transparent)}

/* Pills & tools: filled, friendly */
[data-skin="7blogly"] .blg-save{border:none;background:color-mix(in srgb, var(--accent) 10%, transparent);color:var(--accent-ink,var(--accent))}
[data-skin="7blogly"] .blg-save.is-on{background:var(--accent);color:#fff}
[data-skin="7blogly"] .blg-crumbbar a{border-radius:30px;background:var(--surface);border:1px solid var(--line)}
[data-skin="7blogly"] .blg-fab{box-shadow:0 16px 36px -18px color-mix(in srgb, var(--accent) 65%, rgba(0,0,0,.4))}

/* ============================================================
 * 7BLOGLY · COMPREHENSIVE LAYER — every surface, one language.
 * ============================================================ */

/* Hero: tinted stage for the brand */
[data-skin="7blogly"] .hero{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 12%,transparent),color-mix(in srgb,var(--accent) 3%,transparent) 60%);border-radius:0 0 32px 32px}
[data-skin="7blogly"] .hero h1{letter-spacing:-.035em}

/* Mobile drawer: app sheet */
@media(max-width:860px){
  [data-skin="7blogly"] .nav-panel{border-radius:0 26px 26px 0;background:var(--bg);box-shadow:30px 0 70px -30px color-mix(in srgb,var(--accent) 50%,rgba(0,0,0,.5))}
  [data-skin="7blogly"] .nav-panel .main-nav a{border-radius:14px;font-weight:700}
  [data-skin="7blogly"] .nav-panel .main-nav a:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
}
[data-skin="7blogly"] .panel-tools{background:var(--surface);border-radius:18px;margin:10px 14px;border-top:none;border:1px solid var(--line)}
[data-skin="7blogly"] .panel-saved{border-top:none;background:var(--surface);border:1px solid var(--line);border-radius:18px;margin:10px 14px;padding:14px 16px 8px}
[data-skin="7blogly"] .panel-saved li a{border-radius:10px;padding-left:8px}
[data-skin="7blogly"] .panel-saved li a:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}

/* Footer: floating app dock */
[data-skin="7blogly"] .footer-cols{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:42px 36px 30px;margin-top:46px;box-shadow:0 22px 50px -32px color-mix(in srgb,var(--accent) 45%,rgba(0,0,0,.35))}
[data-skin="7blogly"] .footer-cols a{border-radius:10px;padding:5px 8px;margin-left:-8px;transition:background .15s ease,color .15s ease}
[data-skin="7blogly"] .footer-cols a:hover{background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent-ink,var(--accent))}
[data-skin="7blogly"] .footer-bar{border-top:none;padding:18px 8px 8px}
@media(max-width:560px){[data-skin="7blogly"] .footer-cols{padding:28px 22px 18px;border-radius:22px}}

/* Contents card + sheet: course-module feel */
[data-skin="7blogly"] .blg-toc-card{background:color-mix(in srgb,var(--accent) 4%,var(--surface));border-radius:20px}
[data-skin="7blogly"] .blg-toc-card__num{background:var(--tc-accent,var(--accent));color:var(--tc-on,#fff)}
[data-skin="7blogly"] .blg-toc-sheet .panel{border-radius:28px 28px 0 0}

/* Author box: tutor card */
[data-skin="7blogly"] .author-box{border:none;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 11%,var(--surface)),var(--surface) 55%);border-radius:24px;box-shadow:0 16px 40px -28px color-mix(in srgb,var(--accent) 50%,rgba(0,0,0,.3))}
[data-skin="7blogly"] .author-box .avatar{border-radius:50%;outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px}
[data-skin="7blogly"] .ab-social a{border-radius:30px;background:color-mix(in srgb,var(--accent) 9%,transparent)}
[data-skin="7blogly"] .ab-social a:hover{background:var(--accent);color:#fff}

/* Search: pill field + app dropdown */
[data-skin="7blogly"] .search-form{border-radius:999px;border:1.5px solid var(--line2);background:var(--surface)}
[data-skin="7blogly"] .search-form:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
[data-skin="7blogly"] .blg-live{border-radius:20px;box-shadow:0 26px 60px -28px color-mix(in srgb,var(--accent) 45%,rgba(0,0,0,.4))}
[data-skin="7blogly"] .blg-live a:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}

/* Category tiles: tappable topic chips */
[data-skin="7blogly"] .blg-cats a{border-radius:18px;border:1px solid var(--line);background:var(--surface);transition:transform .16s ease,background .16s ease,color .16s ease}
[data-skin="7blogly"] .blg-cats a:hover{background:var(--accent);color:#fff;transform:translateY(-3px)}

/* Post navigation + pagination: card steps */
[data-skin="7blogly"] .post-nav a{border-radius:20px;border:1px solid var(--line);background:var(--surface);transition:transform .16s ease,box-shadow .16s ease}
[data-skin="7blogly"] .post-nav a:hover{transform:translateY(-3px);box-shadow:0 16px 36px -24px color-mix(in srgb,var(--accent) 55%,rgba(0,0,0,.35))}
[data-skin="7blogly"] .page-numbers{border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:700}
[data-skin="7blogly"] .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#fff}

/* Comments: friendly form */
[data-skin="7blogly"] .comments-area input:not([type=checkbox]):not([type=submit]),[data-skin="7blogly"] .comments-area textarea{border-radius:14px;border:1.5px solid var(--line2);background:var(--surface);padding:12px 16px}
[data-skin="7blogly"] .comments-area input:focus,[data-skin="7blogly"] .comments-area textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent)}
[data-skin="7blogly"] .comments-area input[type=submit]{border-radius:999px;background:var(--accent);color:#fff;border:none;font-weight:800;padding:13px 26px}
[data-skin="7blogly"] .comment-body{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px}

/* Empty states & 404: soft stage */
[data-skin="7blogly"] .empty-state{background:color-mix(in srgb,var(--accent) 5%,var(--surface));border-radius:26px;border:1px solid var(--line)}

/* Lightbox + close pills */
[data-skin="7blogly"] .blg-lb-close{border-radius:50%;background:var(--accent);color:#fff;border:none}

/* Share rail: floating dock */
[data-skin="7blogly"] .blg-rail{box-shadow:0 22px 48px -26px color-mix(in srgb,var(--accent) 55%,rgba(0,0,0,.4))}

/* In-lesson tools: filled-soft idle, accent active */
[data-skin="7blogly"] .tts-btn{border:none;background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent-ink,var(--accent))}
[data-skin="7blogly"] .blg-fab button{border:none;background:var(--accent);color:#fff}

/* Sidebar widgets: cards with accent dash titles */
[data-skin="7blogly"] .sidebar .widget{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px}
[data-skin="7blogly"] .sidebar .widget .widget-title{display:flex;align-items:center;gap:10px}
[data-skin="7blogly"] .sidebar .widget .widget-title::before{content:"";width:20px;height:8px;border-radius:5px;background:var(--accent)}

/* Feedback + reader pop + small chrome */
[data-skin="7blogly"] .blg-feedback{border:none;background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface) 65%);border-radius:24px}
[data-skin="7blogly"] .blg-feedback button{border-radius:999px}
[data-skin="7blogly"] .reader-pop{border-radius:22px}
[data-skin="7blogly"] .pt-btn{border-radius:14px;border:none;background:color-mix(in srgb,var(--accent) 8%,transparent)}
[data-skin="7blogly"] .archive-header h1{display:flex;align-items:center;gap:14px}
[data-skin="7blogly"] .archive-header h1::before{content:"";width:26px;height:10px;border-radius:6px;background:var(--accent);flex:0 0 auto}
[data-skin="7blogly"] .entry-content hr{border:none;height:8px;width:64px;border-radius:6px;background:color-mix(in srgb,var(--accent) 30%,transparent);margin:2.4em auto}
[data-skin="7blogly"] .entry-content figcaption{background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:10px;padding:6px 12px;display:inline-block}
[data-skin="7blogly"] ::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}

/* thumb bar in platform language */
[data-skin="7blogly"] .blg-tbar{box-shadow:0 -14px 36px -26px color-mix(in srgb,var(--accent) 50%,rgba(0,0,0,.4));border-top:none}
[data-skin="7blogly"] .blg-tbar__btn.is-on{background:color-mix(in srgb,var(--accent) 10%,transparent)}