/* ============================================
   Astume Lab — Article Design System v2
   For improved/premium articles
   Dark theme with purple accents
   ============================================ */

/* === Reset & Base === */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Noto Sans JP','Inter',-apple-system,sans-serif;line-height:1.9;color:#1a1a2e;background:#0a0a14;overflow-x:hidden}

/* === Navigation === */
.nav{background:rgba(15,15,30,0.95);backdrop-filter:blur(12px);color:#fff;padding:14px 24px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(168,85,247,0.15)}
.nav a{color:#c4b5fd;font-weight:600;text-decoration:none;font-size:15px}
.nav a:hover{color:#a855f7}
.nav span{color:#555;font-size:13px}

/* === Container === */
.container{max-width:820px;margin:0 auto;padding:48px 24px 40px;background:#ffffff;border-radius:0 0 20px 20px;box-shadow:0 20px 60px rgba(0,0,0,0.3)}

/* === Typography === */
h1{font-size:clamp(1.6rem,4vw,2.2rem);line-height:1.35;color:#1a1a2e;font-weight:800;margin-bottom:12px}
h1::after{content:'';display:block;width:80px;height:4px;background:linear-gradient(90deg,#a855f7,#6366f1);border-radius:2px;margin-top:16px}
h2{font-size:clamp(1.2rem,3vw,1.55rem);color:#1a1a2e;margin-top:56px;margin-bottom:20px;padding:12px 16px;background:linear-gradient(90deg,#f8f4ff,#fff);border-left:4px solid #a855f7;border-radius:0 8px 8px 0;font-weight:700}
h3{font-size:clamp(1rem,2.5vw,1.25rem);color:#2d2d4e;margin-top:36px;margin-bottom:12px;font-weight:700}
p{margin:14px 0;word-break:break-word;color:#374151;font-size:15.5px}
a{color:#7c3aed;text-decoration:none;transition:color .2s}
a:hover{color:#a855f7;text-decoration:underline}
strong{color:#1a1a2e}

/* === Lists === */
ul,ol{margin:14px 0;padding-left:24px}
li{margin:6px 0;line-height:1.8;color:#374151}

/* === Tables === */
.spec-table,table{width:100%;border-collapse:separate;border-spacing:0;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.06);margin:20px 0}
.spec-table th,table th{background:linear-gradient(135deg,#7c3aed,#6366f1);color:#fff;padding:12px 16px;text-align:left;font-weight:600;font-size:14px;white-space:nowrap}
.spec-table td,table td{padding:11px 16px;border-bottom:1px solid #f0f0f5;font-size:14.5px;color:#374151}
.spec-table tr:last-child td,table tr:last-child td{border-bottom:none}
.spec-table tr:nth-child(even),table tr:nth-child(even){background:#faf8ff}
.spec-table tr:hover,table tr:hover{background:#f3f0ff}

/* === Blockquote === */
blockquote{border-left:4px solid #a855f7;margin:24px 0;padding:16px 20px;background:linear-gradient(135deg,#faf5ff,#f5f3ff);border-radius:0 12px 12px 0;font-size:15px}
blockquote p{color:#4a3a6e;margin:4px 0}

/* === Code === */
pre{background:#1a1a2e;color:#e0e0e0;padding:20px;border-radius:10px;overflow-x:auto;margin:24px 0;font-size:14px}
pre code{background:transparent;padding:0;color:inherit}
code{background:#f0f0ff;padding:2px 6px;border-radius:4px;font-family:'Fira Code',monospace;font-size:0.9em}

/* === Images === */
img{max-width:100%;height:auto;border-radius:10px;margin:16px 0}
hr{border:none;border-top:1px solid #e8e4f0;margin:32px 0}

/* === PR Badge === */
.pr-badge{display:inline-block;background:#f5f3ff;border:1px solid #e9d5ff;color:#7c3aed;font-size:12px;font-weight:600;padding:6px 14px;border-radius:20px;margin-bottom:24px}

/* === Table of Contents === */
.toc{background:#f8f7ff;border:1px solid #e8e4f8;border-radius:16px;padding:24px 28px;margin:28px 0}
.toc h2{margin:0 0 14px!important;padding:0!important;background:none!important;border:none!important;font-size:1.1rem!important;color:#5b21b6}
.toc h2::after{display:none!important}
.toc ol{padding-left:20px;margin:0}
.toc li{margin:8px 0;font-size:14.5px}
.toc a{color:#6d28d9;font-weight:500}
.toc a:hover{color:#a855f7}

/* === Tool Cards === */
.tool-card{background:#fff;border:1px solid #f0edf5;border-radius:16px;padding:28px;margin:28px 0;box-shadow:0 2px 12px rgba(0,0,0,0.04);transition:all .3s}
.tool-card:hover{box-shadow:0 6px 24px rgba(124,58,237,0.08);transform:translateY(-2px)}
.tool-card h3{margin-top:0;font-size:1.2rem;color:#1a1a2e}
.tool-badge{display:inline-block;font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;margin-bottom:12px;letter-spacing:.5px}
.badge-s{background:#a855f7;color:#fff}
.badge-a{background:#6366f1;color:#fff}
.badge-b{background:#06b6d4;color:#fff}
.tool-verdict{background:linear-gradient(135deg,#faf5ff,#f0f0ff);border-radius:10px;padding:14px 18px;margin:12px 0;font-size:14px;line-height:1.7;border-left:3px solid #a855f7}

/* === CTA Buttons === */
.cta-primary{display:inline-block;background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff!important;font-weight:700;padding:14px 32px;border-radius:10px;text-decoration:none!important;font-size:15px;box-shadow:0 4px 16px rgba(168,85,247,0.3);transition:all .3s;border:none;cursor:pointer}
.cta-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(168,85,247,0.4)}
.cta-tool{display:inline-block;background:#1a1a2e;color:#fff!important;font-weight:600;padding:10px 24px;border-radius:8px;text-decoration:none!important;font-size:14px;transition:all .2s;margin-top:8px}
.cta-tool:hover{background:#7c3aed;transform:translateY(-1px)}
.cta-box{background:linear-gradient(135deg,#a855f7,#7c3aed);border-radius:16px;padding:28px 32px;margin:32px 0;text-align:center;box-shadow:0 4px 24px rgba(168,85,247,0.25)}
.cta-box p{color:#f3e8ff;margin:0 0 10px;font-size:13px;font-weight:600}
.cta-box .cta-btn-white{display:inline-block;background:#fff;color:#7c3aed!important;font-weight:700;padding:14px 40px;border-radius:10px;text-decoration:none!important;font-size:16px;box-shadow:0 2px 12px rgba(0,0,0,0.1);transition:all .3s}
.cta-box .cta-btn-white:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.15)}
.cta-box .sub{color:#e9d5ff;font-size:12px;margin-top:8px!important}

/* === Affiliate Section (Redesigned v2) === */
.aff-section,.affiliate-box{
    background:linear-gradient(135deg,#f8f5ff,#fff5f5);
    border:1px solid #e8e4f0;
    border-radius:20px;
    padding:32px;
    margin:40px 0;
    position:relative;
    overflow:hidden
}
.aff-section::before,.affiliate-box::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:3px;
    background:linear-gradient(90deg,#a855f7,#e8739a,#6366f1);
    border-radius:20px 20px 0 0
}
.aff-section h3,.affiliate-box h3{
    text-align:center;
    margin:0 0 24px;
    color:#1a1a2e;
    font-size:1.1rem;
    font-weight:700
}
.aff-link{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
    background:#fff;
    border-radius:14px;
    border:1px solid #e8e4f0;
    text-decoration:none;
    color:#374151;
    font-size:15px;
    font-weight:600;
    text-align:center;
    justify-content:center;
    margin:10px 0;
    transition:all .3s;
    box-shadow:0 2px 8px rgba(0,0,0,0.03)
}
.aff-link:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(124,58,237,0.12);
    border-color:#a855f7;
    color:#7c3aed!important;
    text-decoration:none!important
}

/* === Author Card === */
.author-card{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px;padding:28px 32px;margin:40px 0}
.author-card .flex{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.author-card img{width:64px;height:64px;border-radius:50%;border:3px solid #a855f7;flex-shrink:0}
.author-card .label{color:#a855f7;font-size:11px;font-weight:700;margin:0 0 4px;letter-spacing:1.5px}
.author-card h4{color:#fff;font-size:20px;margin:0 0 6px;font-weight:700}
.author-card .bio{color:#aaa;font-size:13px;margin:0 0 14px;line-height:1.7}
.author-card .tags{display:flex;flex-wrap:wrap;gap:8px}
.author-card .tag{background:#2d2d4e;font-size:11px;padding:5px 12px;border-radius:20px}
.author-card .disclosure{color:#555;font-size:11px;margin:18px 0 0;padding-top:14px;border-top:1px solid #2d2d4e}

/* === Share Button === */
.share-box{background:#1a1a2e;border-radius:12px;padding:20px;margin:24px 0;text-align:center}
.share-box a{display:inline-block;background:#1d9bf0;color:#fff!important;font-weight:700;padding:10px 28px;border-radius:20px;text-decoration:none!important;font-size:14px;transition:all .2s}
.share-box a:hover{background:#0c8de4;transform:translateY(-1px)}

/* === Footer === */
.footer{background:#0a0a14;color:#888;text-align:center;padding:32px;margin-top:0}
.footer a{color:#c4b5fd}

/* === Sticky CTA === */
.sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;background:rgba(10,10,20,0.97);padding:10px 16px;text-align:center;box-shadow:0 -4px 20px rgba(0,0,0,0.5);backdrop-filter:blur(8px)}
.sticky-cta a{display:inline-block;background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff!important;font-weight:700;padding:12px 28px;border-radius:10px;text-decoration:none!important;font-size:14px;width:92%;max-width:420px;box-shadow:0 2px 12px rgba(168,85,247,0.3)}
.sticky-cta .close{position:absolute;top:6px;right:14px;background:none;border:none;color:#666;font-size:18px;cursor:pointer}

/* === Responsive === */
@media(max-width:768px){
    .container{padding:28px 16px;border-radius:0}
    h1{font-size:1.5rem}
    h2{font-size:1.2rem;padding:10px 12px}
    .tool-card{padding:20px 16px}
    .spec-table th,.spec-table td,table th,table td{padding:8px 10px;font-size:13px}
    .cta-box{padding:20px 16px}
    .author-card{padding:20px 16px}
    .author-card .flex{gap:14px}
    .toc{padding:18px 16px}
    .aff-section,.affiliate-box{padding:20px 16px}
}
@media(max-width:375px){
    body{font-size:14px}
    h1{font-size:1.35rem}
}