/* Base Styles */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    background-color: var(--cuff-bg);
    color: var(--cuff-text);
    font-family: var(--cuff-font-body);
    font-size: 19px;
    line-height: 1.7;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cuff-font-ui);
    font-weight: 300;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--cuff-primary);
    line-height: 1.3;
}

h1 { font-size: 3rem; letter-spacing: -0.02em; }
h2 { font-size: 2rem; border-bottom: 1px solid var(--cuff-accent); padding-bottom: 0.5rem; }
h3 { font-size: 1.5rem; }

a { color: var(--cuff-primary); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--cuff-accent); }

p { margin-bottom: 1.5rem; }
img { max-width: 100%; height: auto; display: block; }

/* Layout */
.cuff-container { max-width: var(--cuff-container-width); margin: 0 auto; padding: 0 20px; }
.cuff-article-container { max-width: var(--cuff-article-width); margin: 0 auto; padding: 0 20px; }

/* Header */
.cuff-header {
    background-color: var(--cuff-header-bg);
    border-bottom: 1px solid var(--cuff-border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.cuff-top-bar {
    background-color: var(--cuff-surface);
    font-family: var(--cuff-font-ui);
    font-size: 0.75rem;
    padding: 5px 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cuff-muted);
}
.cuff-header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--cuff-header-height);
    padding: 0 20px;
    max-width: var(--cuff-container-width);
    margin: 0 auto;
}
.cuff-logo {
    font-family: var(--cuff-font-ui);
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    color: var(--cuff-primary);
    text-transform: uppercase;
}
.cuff-nav-menu {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0; padding: 0;
    font-family: var(--cuff-font-ui);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Progress Bar */
#cuff-progress {
    position: fixed;
    top: 0; left: 0; width: 0%; height: 3px;
    background-color: var(--cuff-accent);
    z-index: 1000;
    transition: width 0.1s;
}

/* Hero Section */
.cuff-hero { text-align: center; padding: 4rem 0 2rem; }
.cuff-hero-badge {
    display: inline-block;
    font-family: var(--cuff-font-ui);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cuff-accent);
    margin-bottom: 1rem;
}
.cuff-hero-meta {
    font-family: var(--cuff-font-ui);
    font-size: 0.85rem;
    color: var(--cuff-muted);
    margin-top: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cuff-hero-image {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    margin-bottom: 3rem;
}

/* Article Elements */
.cuff-article { padding-bottom: 4rem; }
.cuff-share {
    display: flex; gap: 15px; margin-bottom: 2rem;
    font-family: var(--cuff-font-ui);
    font-size: 0.8rem;
    color: var(--cuff-muted);
    text-transform: uppercase;
}
.cuff-share span { cursor: pointer; transition: color 0.2s; }
.cuff-share span:hover { color: var(--cuff-primary); }

.cuff-toc {
    background: var(--cuff-surface);
    padding: 2rem;
    margin: 2rem 0;
    border: 1px solid var(--cuff-border);
    font-family: var(--cuff-font-ui);
}
.cuff-toc-title { font-size: 1rem; font-weight: 500; margin-top: 0; text-transform: uppercase; letter-spacing: 0.05em;}
.cuff-toc ul { list-style: none; padding: 0; margin: 0; }
.cuff-toc li { margin-bottom: 0.5rem; }
.cuff-toc a { color: var(--cuff-muted); font-size: 0.9rem; }
.cuff-toc a:hover, .cuff-toc a.active { color: var(--cuff-primary); }

/* Table */
.cuff-table-wrapper { overflow-x: auto; margin: 2.5rem 0; }
.cuff-table {
    width: 100%; border-collapse: collapse;
    font-family: var(--cuff-font-ui); font-size: 0.9rem;
}
.cuff-table th {
    background-color: var(--cuff-accent);
    color: #fff;
    padding: 1rem;
    text-align: left;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cuff-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--cuff-border);
}

/* Pros and Cons */
.cuff-pros-cons {
    display: flex; gap: 2rem; margin: 3rem 0;
    font-family: var(--cuff-font-ui);
}
.cuff-pros, .cuff-cons {
    flex: 1;
    background: var(--cuff-surface);
    padding: 2rem;
    border: 1px solid var(--cuff-border);
}
.cuff-pros h4, .cuff-cons h4 { margin-top: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.cuff-pros ul, .cuff-cons ul { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; }
.cuff-pros li, .cuff-cons li { margin-bottom: 0.5rem; display: flex; align-items: flex-start; gap: 0.5rem; }
.cuff-pros li::before { content: "✓"; color: #2ecc71; }
.cuff-cons li::before { content: "✗"; color: #e74c3c; }

/* Author Bio */
.cuff-author-bio {
    display: flex; align-items: center; gap: 1.5rem;
    margin: 4rem 0; padding: 2rem 0;
    border-top: 1px solid var(--cuff-border);
    border-bottom: 1px solid var(--cuff-border);
}
.cuff-author-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.cuff-author-info { font-family: var(--cuff-font-ui); }
.cuff-author-name { font-weight: 500; font-size: 1.1rem; margin: 0 0 0.2rem; }
.cuff-author-desc { font-size: 0.9rem; color: var(--cuff-muted); margin: 0; }

/* Related Articles */
.cuff-related { background: var(--cuff-surface); padding: 4rem 0; }
.cuff-related-title { text-align: center; margin-bottom: 3rem; }
.cuff-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.cuff-related-card {
    background: var(--cuff-bg);
    border: 1px solid var(--cuff-primary);
    transition: all 0.2s ease;
    display: flex; flex-direction: column;
}
.cuff-related-card:hover { border-top: 4px solid var(--cuff-accent); }
.cuff-related-card img { height: 200px; object-fit: cover; border-bottom: 1px solid var(--cuff-primary); }
.cuff-related-content { padding: 1.5rem; font-family: var(--cuff-font-ui); }
.cuff-related-category { font-size: 0.7rem; color: var(--cuff-accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; display: block; }
.cuff-related-content h3 { font-size: 1.1rem; margin: 0 0 1rem; font-weight: 400; color: var(--cuff-primary); }

/* Footer */
.cuff-footer {
    border-top: 1px solid var(--cuff-border);
    padding: 4rem 0 2rem;
    font-family: var(--cuff-font-ui);
    font-size: 0.85rem;
}
.cuff-footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-bottom: 3rem; }
.cuff-footer-title { font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.5rem; font-size: 0.9rem; }
.cuff-footer ul { list-style: none; padding: 0; margin: 0; }
.cuff-footer li { margin-bottom: 0.8rem; }
.cuff-footer a { color: var(--cuff-muted); }
.cuff-footer a:hover { color: var(--cuff-primary); }
.cuff-footer-bottom {
    border-top: 1px solid var(--cuff-border);
    padding-top: 2rem;
    display: flex; justify-content: space-between; align-items: center;
    color: var(--cuff-muted);
}
.cuff-footer-links { display: flex; gap: 1.5rem; }

/* Responsive */
@media (max-width: 768px) {
    .cuff-nav-menu { display: none; }
    .cuff-related-grid { grid-template-columns: 1fr; }
    .cuff-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .cuff-footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
    .cuff-pros-cons { flex-direction: column; gap: 1rem; }
    h1 { font-size: 2.2rem; }
    .cuff-hero { padding: 2rem 0; }
}

/* UI Pages */
.cuff-page-header { text-align: center; padding: 4rem 0; }
.cuff-page-header h1 { margin-bottom: 1rem; }
.cuff-form { max-width: 600px; margin: 0 auto; font-family: var(--cuff-font-ui); }
.cuff-form-group { margin-bottom: 1.5rem; }
.cuff-form label { display: block; margin-bottom: 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.cuff-form input, .cuff-form textarea { width: 100%; padding: 0.8rem; border: 1px solid var(--cuff-border); font-family: inherit; font-size: 1rem; background: var(--cuff-surface); }
.cuff-form button { background: var(--cuff-primary); color: #fff; border: none; padding: 1rem 2rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: background 0.2s; }
.cuff-form button:hover { background: var(--cuff-accent); }

/* Cookie Banner */
.cuff-cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--cuff-primary); color: #fff;
    padding: 1rem 2rem; display: none; justify-content: space-between; align-items: center;
    font-family: var(--cuff-font-ui); font-size: 0.85rem; z-index: 9999;
}
.cuff-cookie-actions { display: flex; gap: 1rem; }
.cuff-cookie-btn { background: transparent; border: 1px solid #fff; color: #fff; padding: 0.5rem 1rem; cursor: pointer; }
.cuff-cookie-btn.accept { background: #fff; color: var(--cuff-primary); }

.cuff-back-to-top {
    position: fixed; bottom: 2rem; right: 2rem;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--cuff-primary); color: #fff;
    display: none; align-items: center; justify-content: center;
    cursor: pointer; z-index: 1000; border: none;
}