* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #0f0f1a;
  --card: #1a1a2e;
  --border: #2a2a4a;
  --accent: #00d4ff;
  --text: #eee;
  --muted: #888;
  --radius: 12px;
}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
a { color: inherit; text-decoration: none; }

.header { background: var(--card); border-bottom: 1px solid var(--border); padding: 12px 20px; position: sticky; top: 0; z-index: 100; }
.header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 20px; font-weight: 700; color: var(--accent); }
.nav { display: flex; gap: 20px; }
.nav a { color: var(--muted); font-size: 14px; transition: color 0.2s; }
.nav a:hover { color: var(--text); }
.burger { display: none; background: none; border: none; color: var(--text); font-size: 24px; cursor: pointer; }

.breadcrumb { font-size: 13px; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--text); }

.container { max-width: 1200px; margin: 0 auto; padding: 20px; }


.hero { text-align: center; padding: 40px 20px; }
.hero h1 { font-size: clamp(24px, 5vw, 36px); margin-bottom: 10px; }
.hero p { color: var(--muted); font-size: 16px; max-width: 600px; margin: 0 auto; }

.search-box { max-width: 500px; margin: 20px auto; position: relative; }
.search-box input { width: 100%; padding: 14px 20px 14px 44px; background: var(--card); border: 1px solid var(--border); border-radius: 30px; color: var(--text); font-size: 16px; outline: none; transition: border-color 0.2s; }
.search-box input:focus { border-color: var(--accent); }
.search-box::before { content: '\1F50D'; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 18px; }

.category { margin: 30px 0; }
.category-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.category-desc { color: var(--muted); font-size: 14px; margin: 0 0 15px; line-height: 1.4; }
.category-icon { font-size: 24px; }
.category-title { font-size: 20px; font-weight: 600; }
a.category-title { color: var(--text); transition: color 0.2s; }
a.category-title:hover { color: var(--accent); }
.category-count { color: var(--muted); font-size: 13px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: transform 0.2s, border-color 0.2s; cursor: pointer; display: flex; flex-direction: column; position: relative; }
.card:hover { transform: translateY(-3px); border-color: var(--accent); }
.card-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.card-desc { color: var(--muted); font-size: 13px; line-height: 1.4; flex-grow: 1; }
.card-badge { display: inline-block; margin-top: auto; padding: 3px 8px; background: rgba(0,212,255,0.1); color: var(--accent); border-radius: 4px; font-size: 11px; align-self: flex-start; }
.card-views { margin-top: auto; padding: 3px 8px; background: rgba(136,136,136,0.1); border: 1px solid var(--border); color: var(--muted); border-radius: 4px; font-size: 10px; align-self: flex-end; }
.card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }

.popular { margin: 30px 0; padding: 20px; background: var(--card); border-radius: var(--radius); }
.popular h2 { font-size: 18px; margin-bottom: 15px; }
.popular-list { display: flex; flex-wrap: wrap; gap: 10px; }
.popular-item { padding: 8px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; font-size: 13px; transition: border-color 0.2s; }
.popular-item:hover { border-color: var(--accent); }

.page-title { margin: 10px 0 5px; text-align: left; }
.page-title h1 { font-size: clamp(22px, 4vw, 30px); color: var(--accent); }
.page-subtitle { color: var(--muted); font-size: 14px; margin-bottom: 10px; text-align: left; }
.ad-block { background: var(--card); border: 1px dashed var(--border); border-radius: var(--radius); padding: 16px; text-align: center; margin: 10px 0; min-height: 90px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.ad-block.ad-sidebar { min-height: 250px; }
.layout-2col { display: grid; grid-template-columns: 1fr 300px; gap: 20px; max-width: 1200px; margin: 0 auto; padding: 20px; }
.layout-main { max-width: 800px; width: 100%; overflow: hidden; }
.layout-sidebar { display: flex; flex-direction: column; gap: 20px; }

.calc-area { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin: 20px 0; }
.calc-area h2 { font-size: 18px; margin-bottom: 15px; color: var(--accent); }

.form-row { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; }
.form-group { flex: 1; min-width: 200px; }
.form-group label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.form-group input, .form-group select { width: 100%; padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 15px; outline: none; transition: border-color 0.2s; }
.form-group input:focus, .form-group select:focus { border-color: var(--accent); }

.btn { padding: 14px 28px; background: var(--accent); color: #000; border: none; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 16px; width: 100%; transition: background 0.2s; }
.btn:hover { background: #00b8e6; }

.result-area { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin: 20px 0; display: none; }
.result-area.active { display: block; }
.result-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.result-row:last-child { border-bottom: none; }
.result-label { color: var(--muted); font-size: 14px; }
.result-value { font-weight: 600; font-size: 15px; }
.result-highlight { background: rgba(0,212,255,0.1); border-radius: 8px; padding: 15px; margin-bottom: 15px; text-align: center; }
.result-highlight .big { font-size: 32px; font-weight: 700; color: var(--accent); }

.tip-box { background: #1a2a1a; border: 1px solid #3a5a3a; border-radius: var(--radius); padding: 16px; margin: 15px 0; }
.tip-box p { font-size: 14px; color: #8fbc8f; }

.seo-content { margin: 30px 0; }
.seo-content h2 { font-size: 20px; margin-bottom: 10px; }
.seo-content h3 { font-size: 16px; margin: 15px 0 8px; color: var(--accent); }
.seo-content p { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.seo-content ul { color: var(--muted); font-size: 14px; padding-left: 20px; margin-bottom: 10px; }

.related { margin: 30px 0; }
.related h3 { font-size: 16px; margin-bottom: 12px; }
.related-list { display: flex; flex-wrap: wrap; gap: 10px; }
.related-item { padding: 10px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; transition: border-color 0.2s; }
.related-item:hover { border-color: var(--accent); }

.footer { background: var(--card); border-top: 1px solid var(--border); padding: 15px 20px; margin-top: 30px; text-align: center; }
.footer-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.footer-links a { color: var(--muted); font-size: 13px; }
.footer-copy { color: var(--muted); font-size: 12px; }

.steps{display:flex;justify-content:center;gap:8px;margin-bottom:20px;flex-wrap:wrap}.step-btn{padding:6px 12px;border:1px solid var(--border);background:var(--card);color:var(--muted);border-radius:16px;cursor:default;pointer-events:none;font-size:12px}.step-btn.active{border-color:var(--accent);color:var(--accent);background:#0a2a3a;opacity:1}.panel{display:none}.panel.active{display:block}canvas{background:#fff;border:1px solid var(--border);border-radius:8px;cursor:crosshair;display:block;margin:0 auto;max-width:100%}.hint{text-align:center;color:var(--muted);margin:10px 0;font-size:14px}.cbtn{padding:10px 20px;background:var(--accent);color:#000;border:none;border-radius:6px;cursor:pointer;font-weight:bold;margin:5px}.cbtn:hover{background:#00b8e6}.cbtn-d{background:#ff4757;color:#fff}.controls{text-align:center;margin:10px 0}.fg{margin:10px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.fg label{min-width:150px}.fg input,.fg select{padding:8px;background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:4px;width:100px}.walls-list{margin:15px 0}.wall-item{display:flex;align-items:center;gap:10px;padding:8px;background:var(--card);border-radius:6px;margin:5px 0;cursor:pointer}.wall-item:hover{background:#2a2a4e}.wall-item input{width:80px;padding:6px;background:#333;border:1px solid #555;color:#eee;border-radius:4px}.wall-canvas{background:#111;border:1px solid var(--border);border-radius:8px;margin:10px 0}.opening-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:10px 0}.wall-tab{display:inline-block;padding:6px 12px;margin:3px;background:#333;border-radius:4px;cursor:pointer}.wall-tab.active{background:var(--accent);color:#000}.result-detail{color:#aaa;margin:5px 0}.type-select{display:flex;gap:10px;justify-content:center;margin-bottom:15px}.type-btn{padding:8px 16px;border:1px solid var(--border);background:var(--card);color:var(--muted);border-radius:6px;cursor:pointer;font-size:14px}.type-btn.active{border-color:var(--accent);color:var(--accent);background:#0a2a3a}

@media (max-width: 768px) {
  .nav { display: none; }
  .burger { display: block; }
  .breadcrumb { display: none; }
  .hero { padding: 25px 10px; }
  .cards { grid-template-columns: 1fr; }
  .ad-block { min-height: 100px; }
  .form-row { flex-direction: column; gap: 10px; }
  .form-group { min-width: 100%; }
  .calc-area { padding: 16px; }
  .layout-2col { grid-template-columns: 1fr; padding: 10px; }
  .layout-sidebar { display: none; }
  .container { padding: 10px; }
  canvas { max-width: 100%; height: auto; background: #0f0f1a; }
  .wall-item { flex-wrap: wrap; }
  .opening-controls { flex-direction: column; align-items: stretch; }
  .opening-controls .cbtn { width: 100%; }
  .controls { display: flex; flex-wrap: wrap; justify-content: center; }
  .fg { flex-wrap: wrap; }
  .fg label { min-width: 100%; margin-bottom: 3px; }
  .fg input, .fg select { width: 100%; }
  .steps { flex-wrap: wrap; }
  .step-btn { font-size: 12px; padding: 6px 10px; }
  .seo-content { padding: 0 5px; }
  .related-list { flex-direction: column; }
  .footer-links { flex-direction: column; gap: 8px; }
  h1 { font-size: 22px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .layout-2col { grid-template-columns: 1fr; }
  .layout-sidebar { display: none; }
}

.calc-block { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin: 20px 0; }
.calc-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.calc-tab { padding: 8px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s; }
.calc-tab:hover { border-color: var(--accent); color: var(--text); }
.calc-tab.active { background: rgba(0,212,255,0.1); border-color: var(--accent); color: var(--accent); }
.calc-section { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--border); }
.calc-section:last-of-type { border-bottom: none; }
.calc-section h3 { font-size: 15px; color: var(--accent); margin-bottom: 12px; }
.range-group { display: flex; align-items: center; gap: 10px; flex: 1; }
.range-group input[type="range"] { flex: 1; accent-color: var(--accent); }
.range-group span { min-width: 40px; text-align: right; font-weight: 600; }
.field-hint { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.result-block { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-top: 20px; }
.result-block h3 { color: var(--accent); margin-bottom: 12px; }
.result-grid .result-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.result-grid .result-row:last-child { border-bottom: none; }
.result-grid .result-label { color: var(--muted); font-size: 14px; }
.result-grid .result-value { font-weight: 600; font-size: 14px; }
.result-divider { height: 1px; background: var(--accent); opacity: 0.3; margin: 10px 0; }
.result-note { font-size: 12px; color: var(--muted); margin-top: 10px; text-align: center; }
.res-grid { margin: 10px 0; }
.res-row { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
.res-row:last-child { border-bottom: none; }
.res-row span:last-child { font-weight: 600; }
.res-highlight { background: rgba(0,212,255,0.1); border-radius: 8px; border-bottom: none; }
.res-highlight span:last-child { color: var(--accent); font-size: 18px; font-weight: 700; }
.chk-label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); cursor: pointer; }
.chk-label input[type="checkbox"] { accent-color: var(--accent); }
.chk-accent { font-size: 14px; color: var(--text); font-weight: 500; }
.furn-toggle { margin: 12px 0 6px; padding: 8px 12px; background: rgba(0,212,255,0.05); border: 1px dashed var(--border); border-radius: 8px; }
.furn-hint { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.recent-calcs { margin: 25px 0; }
.recent-calcs h3 { font-size: 16px; margin-bottom: 12px; color: var(--text); }
.recent-calcs-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.recent-calc-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; transition: border-color 0.2s; }
@media (max-width: 768px) { .recent-calcs-list { grid-template-columns: 1fr; } }
.recent-calc-card:hover { border-color: var(--accent); }
.recent-calc-img { width: 120px; height: 80px; border-radius: 6px; overflow: hidden; background: var(--bg); }
.recent-calc-img img { width: 100%; height: 100%; object-fit: cover; }
.recent-calc-info { text-align: center; }
.recent-calc-title { font-size: 14px; font-weight: 600; color: var(--text); }
.recent-calc-desc { font-size: 12px; color: var(--muted); }
.plintus-type-select { margin: 15px 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; padding: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.plintus-type-select label { font-size: 14px; color: var(--muted); }
.type-btns { display: flex; gap: 8px; }
.type-btn { padding: 8px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s; }
.type-btn:hover { border-color: var(--accent); color: var(--text); }
.type-btn.active { background: rgba(0,212,255,0.1); border-color: var(--accent); color: var(--accent); }

.fixed-views { position: fixed; bottom: 0; right: 0; background: var(--card); border-top: 1px solid var(--border); border-left: 1px solid var(--border); border-radius: 8px 0 0 0; padding: 5px 12px; font-size: 12px; color: var(--muted); z-index: 90; display: flex; align-items: center; gap: 6px; }
.fixed-views svg { width: 14px; height: 14px; fill: var(--muted); }
@media (max-width: 768px) { .fixed-views { font-size: 11px; padding: 4px 10px; } }

/* Fraction calculator styles */
.fraction-input { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; padding: 20px 10px; }
.frac-card { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.frac-card-label { font-size: 11px; color: var(--muted); text-align: center; margin-top: 4px; }
.frac-whole { width: 48px; padding: 8px 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 20px; text-align: center; }
.frac-box { display: flex; flex-direction: column; align-items: center; gap: 0; }
.frac-num, .frac-den { width: 64px; padding: 6px 4px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); font-size: 18px; text-align: center; -moz-appearance: textfield; }
.frac-num::-webkit-outer-spin-button, .frac-num::-webkit-inner-spin-button, .frac-den::-webkit-outer-spin-button, .frac-den::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.frac-num:focus, .frac-den:focus, .frac-whole:focus { border-color: var(--accent); outline: none; }
.frac-line { width: 64px; height: 3px; background: var(--accent); margin: 3px 0; border-radius: 2px; }
.operator-select { display: flex; align-items: center; }
.operator-select select { font-size: 24px; padding: 10px 16px; border: 2px solid var(--border); border-radius: 10px; background: var(--card); color: var(--accent); cursor: pointer; font-weight: 700; }
.operator-select select:focus { border-color: var(--accent); outline: none; }
.frac-eq { font-size: 24px; color: var(--muted); font-weight: 700; }
.fraction-result { min-width: 70px; text-align: center; background: var(--card); border: 2px solid var(--accent); border-radius: 12px; padding: 12px 16px; }
.frac-result-big { font-size: 24px; font-weight: 700; color: var(--accent); vertical-align: middle; }
.frac-result-box { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 2px; }
.frac-r-num { font-size: 15px; font-weight: 700; color: var(--accent); line-height: 1.1; }
.frac-r-line { width: 100%; height: 2px; background: var(--accent); margin: 1px 0; min-width: 18px; border-radius: 2px; }
.frac-r-den { font-size: 15px; font-weight: 700; color: var(--accent); line-height: 1.1; }
@media (max-width: 600px) { .fraction-input { gap: 8px; } .frac-card { padding: 10px 10px; } .frac-num, .frac-den { width: 50px; font-size: 16px; } .frac-whole { width: 40px; font-size: 16px; } }
/* Tabs */
.tabs-row { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.tab-btn { padding: 8px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s; }
.tab-btn:hover { border-color: var(--accent); color: var(--text); }
.tab-btn.active { background: rgba(0,212,255,0.1); border-color: var(--accent); color: var(--accent); }
.dr-panel { display: none; }
.dr-panel.active { display: block; }
.frac-type-toggle { display: flex; gap: 2px; margin-bottom: 6px; justify-content: center; }
.frac-type-btn { padding: 4px 10px; font-size: 11px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--muted); cursor: pointer; transition: all 0.2s; }
.frac-type-btn.active { background: rgba(0,212,255,0.1); border-color: var(--accent); color: var(--accent); }
.frac-hidden { display: none !important; }

/* Length converter styles */
.dl-all-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.dl-unit-card { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; transition: border-color 0.2s; }
.dl-unit-card:hover { border-color: var(--accent); }
.dl-unit-label { color: var(--muted); font-size: 13px; }
.dl-unit-value { font-weight: 600; font-size: 14px; color: var(--text); }
.info-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.info-table th { text-align: left; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); color: var(--accent); font-weight: 600; font-size: 13px; }
.info-table td { padding: 8px 12px; border: 1px solid var(--border); color: var(--text); }
.info-table tr:hover td { background: rgba(0,212,255,0.03); }
@media (max-width: 600px) { .dl-all-units { grid-template-columns: 1fr; } .info-table { font-size: 12px; } .info-table th, .info-table td { padding: 6px 8px; } }

/* Age calculator styles */
.voz-section { margin-top: 20px; padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.voz-section h3 { font-size: 14px; color: var(--accent); margin-bottom: 10px; font-weight: 600; }
.calc-details { margin-top: 12px; }
.calc-details summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 8px 0; }
.calc-details summary:hover { color: var(--accent); }