:root{--primary:#4361ee;--primary-dark:#3f37c9;--primary-light:#4895ef;--success:#4cc9f0;--danger:#f72585;--warning:#f8961e;--text:#212529;--text-light:#6c757d;--bg:#f8f9fa;--white:#ffffff;--border:#dee2e6;--shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--shadow-md:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--radius:0.375rem;--transition:all 0.3s ease;}*{margin:0;padding:0;box-sizing:border-box;}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;}.container{max-width:1200px;margin:0 auto;padding:0 20px;}.navbar{background:var(--white);border-bottom:1px solid var(--border);padding:0 20px;position:sticky;top:0;z-index:100;box-shadow:var(--shadow);}.navbar .container{display:flex;justify-content:space-between;align-items:center;height:64px;}.navbar-brand{font-size:1.5rem;font-weight:700;color:var(--primary);text-decoration:none;display:flex;align-items:center;gap:8px;transition:var(--transition);}.navbar-brand:hover{color:var(--primary-dark);}.navbar-nav{display:flex;align-items:center;gap:12px;}.nav-link{color:var(--text);text-decoration:none;padding:8px 16px;border-radius:var(--radius);transition:var(--transition);font-size:0.95rem;}.nav-link:hover{background:rgba(67,97,238,0.08);color:var(--primary);}.user-menu{display:flex;align-items:center;gap:4px;}.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border:2px solid transparent;border-radius:var(--radius);font-size:0.95rem;font-weight:500;cursor:pointer;transition:var(--transition);text-decoration:none;line-height:1.4;}.btn-primary{background:var(--primary);color:var(--white);}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow);}.btn-outline{background:transparent;border-color:var(--border);color:var(--text);}.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:rgba(67,97,238,0.04);}.btn-danger{background:transparent;border-color:var(--danger);color:var(--danger);}.btn-danger:hover{background:var(--danger);color:var(--white);}.btn-sm{padding:6px 12px;font-size:0.85rem;}.btn-lg{padding:14px 28px;font-size:1.1rem;}.btn-block{width:100%;justify-content:center;}.btn-disabled{background:var(--border);color:var(--text-light);cursor:not-allowed;border-color:var(--border);}.btn-disabled:hover{transform:none;box-shadow:none;}.badge-settings{background:var(--bg);padding:14px;border-radius:var(--radius);border:1px solid var(--border);}.form-group{margin-bottom:20px;}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:var(--text);}.form-control{width:100%;padding:10px 14px;border:2px solid var(--border);border-radius:var(--radius);font-size:0.95rem;transition:var(--transition);background:var(--white);}.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(67,97,238,0.15);}.form-hint{display:block;margin-top:6px;font-size:0.85rem;color:var(--text-light);}.optional{color:var(--text-light);font-weight:400;font-size:0.9rem;}.input-group{display:flex;align-items:stretch;}.input-group-addon{padding:10px 14px;background:var(--bg);border:2px solid var(--border);font-size:0.9rem;color:var(--text-light);white-space:nowrap;display:flex;align-items:center;line-height:1.4;box-sizing:border-box;}.input-group-addon:first-child{border-right:none;border-radius:var(--radius) 0 0 var(--radius);}.input-group-addon:last-child{border-left:none;border-radius:0 var(--radius) var(--radius) 0;}.input-group .form-control{border-radius:0;height:auto;box-sizing:border-box;}.form-row{display:grid;grid-template-columns:1fr;gap:20px;}.auth-container{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px;}.auth-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:40px;width:100%;max-width:440px;}.auth-title{font-size:1.75rem;text-align:center;margin-bottom:32px;color:var(--text);}.auth-footer{text-align:center;margin-top:24px;color:var(--text-light);}.auth-footer a{color:var(--primary);text-decoration:none;font-weight:500;transition:var(--transition);}.auth-footer a:hover{color:var(--primary-dark);}.alert{padding:12px 16px;border-radius:var(--radius);margin-bottom:20px;font-size:0.95rem;}.alert-error{background:#fff5f7;color:#c9184f;border:1px solid #ffccd5;}.alert-success{background:#f0fdfb;color:#0b7b6b;border:1px solid #b2f0e8;}.main-content{flex:1;}.hero{padding:80px 0;text-align:center;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:var(--white);}.hero h1{font-size:3rem;margin-bottom:16px;font-weight:800;}.hero p{font-size:1.2rem;opacity:0.9;margin-bottom:40px;}.hero-actions{display:flex;gap:16px;justify-content:center;}.hero .btn-outline{border-color:var(--white);color:var(--white);}.hero .btn-outline:hover{background:var(--white);color:var(--primary);border-color:var(--white);}.features{padding:80px 0;}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px;}.feature-card{text-align:center;padding:40px 24px;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);transition:var(--transition);}.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}.feature-card i{font-size:2.5rem;color:var(--primary);margin-bottom:20px;}.feature-card h3{font-size:1.2rem;margin-bottom:12px;}.feature-card p{color:var(--text-light);line-height:1.6;}.status-violation{background:#fff5f5;color:#c9184f;}.dashboard{padding:40px 0;flex:1;}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;}.dashboard-header h1{font-size:2rem;}.dashboard-actions{display:flex;align-items:center;gap:16px;}.page-count{color:var(--text-light);font-size:0.95rem;background:var(--white);padding:8px 16px;border-radius:var(--radius);border:1px solid var(--border);}.empty-state{text-align:center;padding:80px 20px;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);}.empty-state i{font-size:4rem;color:var(--border);margin-bottom:20px;}.empty-state h2{margin-bottom:12px;color:var(--text);}.empty-state p{color:var(--text-light);margin-bottom:24px;}.page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}@media (max-width:900px){.page-grid{grid-template-columns:repeat(2,1fr);};}@media (max-width:600px){.page-grid{grid-template-columns:1fr;};}.page-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:var(--transition);display:flex;flex-direction:column;}.page-card:hover{box-shadow:var(--shadow-md);}.page-card-header{display:flex;justify-content:space-between;align-items:start;padding:20px 20px 16px 20px;gap:12px;}.page-title{font-size:1rem;font-weight:600;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.page-status{padding:3px 10px;border-radius:20px;font-size:0.8rem;font-weight:500;white-space:nowrap;flex-shrink:0;}.status-published{background:#e0f7fa;color:#00695c;}.status-draft{background:#fff3e0;color:#e65100;}.page-card-body{padding:0 20px 16px 20px;flex:1;}.page-time{font-size:0.85rem;color:var(--text-light);display:flex;align-items:center;gap:6px;}.page-card-footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:8px;}.page-card-footer .btn{flex:1;justify-content:center;}.editor-container{padding:40px 0;flex:1;}.editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;}.editor-header h1{font-size:1.75rem;}.editor-actions{display:flex;gap:8px;}.editor-basics{background:var(--white);padding:24px;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:24px;}.editor-hint{background:var(--white);border-radius:var(--radius) var(--radius) 0 0;box-shadow:var(--shadow);padding:14px 20px;font-size:0.9rem;color:var(--text-light);display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);}.editor-hint i{color:var(--primary-light);}.editor-content{background:var(--white);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);}.code-editor-wrapper{border-radius:0;overflow:hidden;}.CodeMirror{min-height:500px;height:auto;font-family:'Monaco','Menlo','Ubuntu Mono','Droid Sans Mono',monospace;font-size:14px;line-height:1.6;}.CodeMirror:-webkit-full-screen,.CodeMirror:-moz-full-screen,.CodeMirror:fullscreen{height:100vh !important;}.modal-overlay{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:1000;align-items:center;justify-content:center;}.modal-box{background:var(--white);border-radius:var(--radius);padding:40px;width:90%;max-width:520px;box-shadow:0 20px 60px rgba(0,0,0,0.3);}.modal-box h2{font-size:1.5rem;margin-bottom:12px;display:flex;align-items:center;gap:10px;}.modal-box h2 i{color:var(--primary);}.modal-desc{color:var(--text-light);margin-bottom:24px;line-height:1.6;}.modal-form .form-group{margin-bottom:16px;}.modal-form .alert{margin-bottom:16px;}.modal-form .btn{margin-top:8px;}.settings-warning{color:var(--warning);font-size:0.9rem;margin-bottom:20px;display:flex;align-items:center;gap:6px;}.settings-warning i{font-size:1rem;}.footer{background:var(--white);border-top:1px solid var(--border);padding:24px 0;text-align:center;color:var(--text-light);margin-top:auto;}@media (max-width:768px){.hero h1{font-size:2rem;}.hero p{font-size:1rem;}.hero-actions{flex-direction:column;align-items:center;}.dashboard-header{flex-direction:column;align-items:stretch;gap:16px;}.dashboard-actions{flex-direction: row;flex-wrap: nowrap;gap:12px;}.dashboard-actions > *{flex:1;text-align:center;justify-content:center;}.dashboard-actions .btn{width:100%;justify-content:center;}.page-count{text-align:center;}.editor-header{flex-direction:column;align-items:stretch;gap:16px;}.editor-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;}.editor-actions .btn{justify-content:center;font-size:0.85rem;padding:8px 6px;}.page-card-footer{flex-wrap:nowrap;}.page-card-footer .btn{flex:1;justify-content:center;font-size:0.8rem;padding:8px 4px;}.navbar .container{flex-wrap:wrap;height:auto;padding:12px 0 0 0;}.navbar-brand{font-size:1.5rem;}.navbar-nav{width:100%;justify-content:space-between;margin-top:8px;gap:4px;}.nav-link{padding:8px 6px;font-size:0.8rem;text-align:center;flex:1;}.user-menu{width:100%;justify-content:space-between;}.user-menu .nav-link{flex:1;};};}