:root{--color-primary: #6f2c7f;--color-primary-dark: #4f145f;--color-secondary: #8a3d6f;--color-accent: #d96c3f;--color-accent-dark: #b94f2f;--color-bg: #f7f4f8;--color-card: #ffffff;--color-soft: #fbf8fc;--color-border: #eee7f1;--color-text: #26222b;--color-muted: #766d7f;--radius-sm: 12px;--radius-md: 18px;--radius-lg: 26px;--radius-xl: 34px;--shadow-card: 0 18px 50px rgba(80, 30, 90, .08);--shadow-soft: 0 8px 24px rgba(80, 30, 90, .06);--container: 1120px}.home-hero{display:grid;gap:24px;align-items:center}.eyebrow{color:var(--color-primary);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:13px}.home-actions{display:grid;gap:12px;margin-top:24px}.hero-preview{background:linear-gradient(180deg,#fff,#fff7fb);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:22px;box-shadow:var(--shadow-soft)}.tool-list{display:grid;gap:14px}.tool-list a{display:grid;gap:6px;padding:18px;border-radius:var(--radius-md);background:#fff;border:1px solid var(--color-border)}.tool-list span{color:var(--color-muted);font-size:14px}.related-grid{display:grid;gap:12px}.related-grid a{padding:14px 16px;border-radius:var(--radius-sm);background:var(--color-soft);color:var(--color-primary);font-weight:800}.site-shell{min-height:100vh;padding:16px}.site-card{max-width:var(--container);margin:0 auto;background:var(--color-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden}.header{display:flex;align-items:center;justify-content:space-between;padding:18px;border-bottom:1px solid var(--color-border);position:relative}.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px;line-height:1}.logo-mark{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:8px;background:var(--color-primary)}.logo-mark svg{width:20px;height:20px}.nav{display:none;gap:28px;font-size:14px;font-weight:700}.nav a.active{color:var(--color-primary)}.mobile-menu-btn{display:block;background:none;border:none;font-size:24px;cursor:pointer;padding:8px;color:var(--color-primary-dark)}.nav.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;padding:16px;box-shadow:0 4px 12px #0000001a;z-index:100;gap:0}.nav.open a{padding:12px 16px;border-bottom:1px solid var(--color-border)}.nav.open a:last-child{border-bottom:none}.mobile-menu-btn{border:0;background:var(--color-soft);border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1}.page-section{padding:24px 18px}.hero-title{font-size:32px;line-height:1.1;margin:0 0 12px;font-weight:900;letter-spacing:-.04em}.hero-text{color:var(--color-muted);max-width:680px;line-height:1.7}.footer{padding:28px 18px;border-top:1px solid var(--color-border);color:var(--color-muted);font-size:14px}.footer-links{display:flex;gap:8px;align-items:center}.footer-links a{color:var(--color-primary);font-weight:700}.footer-sep{color:var(--color-border)}@media(min-width:768px){.site-shell{padding:36px}.header{padding:22px 36px}.nav{display:flex}.mobile-menu-btn{display:none}.page-section{padding:40px}.hero-title{font-size:48px}.home-hero{grid-template-columns:1.1fr .9fr}.home-actions{grid-template-columns:auto auto;justify-content:start}.related-grid{grid-template-columns:repeat(2,1fr)}}.calculator-grid{display:grid;gap:20px}.calculator-card,.results-card,.content-card{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:20px}.calculator-panel{background:var(--color-soft);border-radius:var(--radius-xl);padding:18px}.tab-links{display:flex;background:#fff;padding:6px;border-radius:var(--radius-md);margin-bottom:24px}.tab-links a{flex:1;text-align:center;padding:12px;border-radius:var(--radius-sm);font-weight:800;font-size:14px;color:var(--color-primary)}.tab-links a.active{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff}.input-row{display:grid;gap:16px;margin-bottom:16px}.input-group{flex:1}.input-group .form-input{text-align:left}.input-with-label-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.input-with-label-row.time-row-compact{grid-template-columns:2fr 1fr;gap:12px}.time-compact-input{display:flex;align-items:center;gap:4px}.time-compact-input .form-input{width:100%;text-align:center}.time-separator{font-size:18px;font-weight:700;color:var(--color-muted)}.field-group{display:flex;flex-direction:column;gap:4px}.field-group.field-group-compact .form-input{padding:12px 8px}.field-label{font-size:12px;font-weight:700;color:var(--color-muted);text-transform:uppercase;text-align:center}.field-group .form-input{text-align:center;padding:12px 8px}.error-message{color:var(--color-accent-dark);font-weight:800;font-size:14px;text-align:center;padding:12px;margin-top:12px;display:none}.error-message:not(:empty){display:block;background:#fef2f2;border-radius:var(--radius-sm);border:1px solid #fecaca}.result-grid-time .result-box:nth-child(4),.result-grid-time .result-box:nth-child(5){grid-column:span 3}@media(max-width:480px){.error-message{font-size:12px;padding:10px}.input-with-label-row{gap:6px}.field-label{font-size:10px}.field-group .form-input{padding:10px 6px;font-size:14px}}.time-format-toggle{margin-bottom:16px;padding:12px;background:var(--color-soft);border-radius:var(--radius-md)}.time-format-toggle select{width:100%}.timecard-table{background:#fff;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border)}.timecard-header{display:grid;grid-template-columns:60px repeat(5,1fr);gap:8px;padding:12px;background:var(--color-primary);color:#fff;font-size:12px;font-weight:800;text-align:center}.timecard-header span:first-child{text-align:left}.timecard-row{display:grid;grid-template-columns:60px repeat(5,1fr);gap:8px;padding:12px;border-bottom:1px solid var(--color-border);align-items:center}.timecard-row:last-child{border-bottom:none}.timecard-row .day-label{font-weight:800;font-size:12px;color:var(--color-primary)}.timecard-row input[type=time]{padding:8px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:14px;width:100%}.timecard-row .day-total{font-weight:900;font-size:16px;color:var(--color-primary-dark);text-align:center}.pay-estimation{background:var(--color-soft);border-radius:var(--radius-md);padding:16px;margin-top:12px}.pay-result{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--color-border)}.pay-result strong{font-size:24px;color:var(--color-primary-dark)}.input-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.time-actions{display:grid;gap:12px;margin-top:12px}.form-input{width:100%;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:14px 10px;text-align:center;background:#fff;outline:none}.form-input:focus{border-color:var(--color-primary)}.input-label{display:block;margin-bottom:10px;font-weight:800}.field-help{display:grid;grid-template-columns:repeat(3,1fr);margin-top:6px;font-size:11px;color:var(--color-muted);text-align:center}.btn-row{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}.btn-row .btn{flex:1;min-width:100px;text-align:center;justify-content:center}.btn-row .btn-outline{flex:1}.copy-btn-container{margin-top:16px;width:100%;display:block}.copy-btn-container .btn{width:100%!important;display:none;box-sizing:border-box}@media(min-width:768px){.copy-btn-container .btn{display:inline-block;width:auto;min-width:140px}}@media(max-width:767px){.calculator-grid{display:flex;flex-direction:column-reverse}.calculator-grid .results-card{order:-1;margin-bottom:20px}}.btn{border:0;border-radius:var(--radius-sm);padding:15px 20px;font-weight:900;cursor:pointer}.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff}.btn-accent{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dark));color:#fff}.btn-outline{background:#fff;border:1px solid var(--color-primary);color:var(--color-primary)}.results-card{background:linear-gradient(180deg,#fff,#fff7fb)}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.result-grid-date{grid-template-columns:repeat(3,1fr)}@media(max-width:480px){.result-grid{grid-template-columns:repeat(2,1fr)}}.result-box{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:16px;text-align:center;background:#fff}.result-box span{display:block;font-size:12px;color:var(--color-muted)}.result-box strong{display:block;margin-top:8px;font-size:28px;color:var(--color-primary-dark)}.reference-box{margin-top:20px;padding:16px;background:var(--color-soft);border-radius:var(--radius-md)}.reference-box h3{margin:0 0 12px;font-size:14px}.reference-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.ref-item{display:flex;justify-content:space-between;padding:8px;background:#fff;border-radius:var(--radius-sm);font-size:13px}.ref-item span:first-child{font-family:monospace;font-weight:700;color:var(--color-primary)}.interlink-card{margin-top:22px;display:grid;gap:16px;align-items:center;background:linear-gradient(135deg,#fff4ed,#fbedf7);border-radius:var(--radius-lg);border:1px solid var(--color-border);padding:20px}.seo-block{margin-top:28px;display:grid;gap:16px}.seo-item{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px}.result-box small{display:inline;font-size:11px;font-weight:400;color:var(--color-muted);margin-left:4px}.result-box span{display:inline}.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:20px}.step-item{background:#fff;border-radius:12px;padding:24px;border:1px solid var(--color-border);display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform .2s ease,box-shadow .2s ease}.step-item:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000014}.step-icon{width:56px;height:56px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;flex-shrink:0;margin-bottom:16px}.step-item h3{margin:0 0 8px;font-size:18px;color:var(--color-primary-dark)}.step-item p{margin:0;font-size:14px;color:var(--color-text);line-height:1.5}.examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:20px}.example-card{background:#fff;border-radius:12px;padding:24px;border:1px solid var(--color-border);text-align:center}.example-card h3{margin:0 0 8px;font-size:14px}.example-time{font-family:monospace;font-size:16px;font-weight:700;color:var(--color-primary);margin:0 0 4px}.example-result{margin:0;font-size:14px;color:var(--color-text)}.benefits-list,.mistakes-list{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.benefits-list li,.mistakes-list li{background:#fff;border-radius:12px;padding:20px;border:1px solid var(--color-border)}.mistakes-list li{border-left:4px solid var(--color-accent)}.benefits-list li strong,.mistakes-list li strong{display:block;margin-bottom:8px;font-size:16px;color:var(--color-primary-dark)}.benefits-list li p,.mistakes-list li p{margin:0;font-size:14px;color:var(--color-text)}.faq-list{margin-top:16px}.faq-item{border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:8px;overflow:hidden}.faq-item summary{padding:14px 16px;background:var(--color-soft);cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between;align-items:center}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";font-size:20px;font-weight:700;color:var(--color-primary)}.faq-item[open] summary:after{content:"−"}.faq-item summary:hover{background:#eef2ff}.faq-item p{padding:16px;margin:0;font-size:14px;line-height:1.6;border-top:1px solid var(--color-border)}@media(min-width:768px){.calculator-grid{grid-template-columns:1fr 340px}.calculator-panel{padding:28px}.btn-row{grid-template-columns:1fr 1fr 1fr}.interlink-card{grid-template-columns:1fr auto}.steps-grid{grid-template-columns:repeat(2,1fr)}.examples-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:1024px){.steps-grid{grid-template-columns:repeat(4,1fr)}}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:Poppins,Inter,system-ui,sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit}img{max-width:100%}