:root{--primary-blue: #3b82f6;--primary-blue-light: #60a5fa;--primary-blue-lighter: #93c5fd;--primary-blue-pale: #dbeafe;--accent-emerald: #10b981;--accent-emerald-light: #34d399;--accent-emerald-pale: #d1fae5;--neutral-50: #f8fafc;--neutral-100: #f1f5f9;--neutral-200: #e2e8f0;--neutral-300: #cbd5e1;--neutral-400: #94a3b8;--neutral-500: #64748b;--neutral-600: #475569;--neutral-700: #334155;--neutral-800: #1e293b;--neutral-900: #0f172a;--white: #ffffff;--text-primary: #1e293b;--text-secondary: #64748b;--text-muted: #94a3b8;--border-light: #e2e8f0;--border-medium: #cbd5e1;--success-green: #10b981;--warning-amber: #f59e0b;--error-red: #ef4444;--info-blue: #3b82f6;--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .1);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);--gradient-emerald: linear-gradient(135deg, var(--accent-emerald) 0%, var(--accent-emerald-light) 100%);--gradient-subtle: linear-gradient(135deg, var(--white) 0%, var(--neutral-50) 100%);--gradient-card: linear-gradient(135deg, var(--white) 0%, var(--neutral-100) 100%)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:var(--text-primary);background-color:var(--white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;width:100%;overflow-x:hidden}html{width:100%;margin:0;padding:0}.app-container{min-height:100vh;display:flex;flex-direction:column;width:100vw;padding:0;background:var(--white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow-x:hidden;transform:scale(.9);transform-origin:top left;width:111.11vw}.header-bar{background:var(--white);border-bottom:2px solid var(--primary-blue-pale);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:100%}.header-content{display:flex;align-items:center;justify-content:space-between;padding:20px 40px;width:100%}.logo-section{display:flex;align-items:center;gap:16px}.logo{display:flex;align-items:center;justify-content:center;font-size:36px;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 1px 2px rgba(59,130,246,.3))}.app-title{font-size:28px;font-weight:700;color:var(--text-primary);letter-spacing:-.025em;margin:0}.header-subtitle{font-size:15px;color:var(--text-secondary);font-weight:500;margin:0}.main-content{display:grid;grid-template-columns:420px 1fr;gap:32px;padding:32px 0 32px 120px;flex:1;align-items:start;width:100vw;box-sizing:border-box}.left-panel{display:flex;flex-direction:column;gap:24px;height:fit-content;position:sticky;top:120px}.input-panel{background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);border:1px solid var(--border-light);overflow:hidden;transition:all .3s ease}.input-panel:hover{box-shadow:var(--shadow-xl),0 0 0 1px var(--primary-blue-lighter);transform:translateY(-2px)}.panel-header{padding:24px 28px 20px;background:var(--gradient-card);border-bottom:2px solid var(--primary-blue-pale);position:relative}.panel-header:after{content:"";position:absolute;bottom:0;left:28px;right:28px;height:2px;background:var(--gradient-primary);border-radius:1px}.panel-header h3{font-size:20px;font-weight:700;color:var(--text-primary);margin:0;letter-spacing:-.025em}.form-section{padding:24px 28px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.form-group{display:flex;flex-direction:column;gap:10px;min-width:0}.form-group label{font-size:14px;font-weight:600;color:var(--text-primary);text-transform:uppercase;letter-spacing:.025em;font-size:12px}input[type=number],.select-input{padding:14px 16px;border:2px solid var(--border-light);border-radius:var(--radius-lg);font-size:15px;font-weight:500;color:var(--text-primary);background:var(--white);transition:all .3s ease;box-shadow:var(--shadow-xs);width:100%;min-width:0;box-sizing:border-box}input[type=number]:focus,.select-input:focus{outline:none;border-color:var(--primary-blue);box-shadow:0 0 0 4px #3b82f61a,var(--shadow-md);transform:translateY(-1px)}input[type=number]:hover,.select-input:hover{border-color:var(--border-medium);box-shadow:var(--shadow-sm)}input[type=number]::placeholder{color:var(--text-muted);font-weight:400}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.calculator-form{padding:24px 28px 28px;border-top:1px solid var(--border-light);margin-top:20px}.calculator-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}.calculator-form .form-group{min-width:0}.results-panel{display:flex;flex-direction:column;gap:24px;min-height:0;width:100%;max-width:none;padding-right:24px}.result-card,.details-card{background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);border:1px solid var(--border-light);overflow:hidden;transition:all .3s ease;width:100%;max-width:none}.result-card:hover,.details-card:hover{box-shadow:var(--shadow-xl),0 0 0 1px var(--primary-blue-lighter);transform:translateY(-2px)}.card-header{padding:20px 24px;background:var(--gradient-primary);color:var(--white);border-bottom:3px solid var(--primary-blue-pale);position:relative}.card-header:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--gradient-emerald)}.card-header h3{font-size:18px;font-weight:700;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.1)}.card-content{padding:24px;max-height:450px;overflow-y:auto}.result-card .card-content{max-height:none;overflow-y:visible}.details-card .card-content{max-height:300px}.calculation-results{font-size:15px}.result-row{display:grid;grid-template-columns:2fr 1fr 1fr;padding:12px 0;border-bottom:1px solid var(--border-light);align-items:center;gap:16px;transition:all .2s ease}.result-row:hover{background:var(--neutral-50);margin:0 -24px;padding:12px 24px;border-radius:var(--radius-md)}.result-row:last-child{border-bottom:none}.result-row.total-amount{background:var(--gradient-emerald);color:var(--white);font-weight:700;margin:12px -24px;padding:16px 24px;border-radius:var(--radius-lg);border:none;box-shadow:var(--shadow-md)}.result-row.total-amount .name,.result-row.total-amount .rate,.result-row.total-amount .amount{color:var(--white)}.result-row.base-amount{background:var(--primary-blue-pale);color:var(--text-primary);font-weight:600;margin:12px -24px;padding:14px 24px;border-radius:var(--radius-lg);border:2px solid var(--primary-blue-lighter)}.result-row.title{background:var(--gradient-primary);font-weight:700;color:var(--white);margin:12px -24px;padding:12px 24px;border-radius:var(--radius-lg);border:none;text-transform:uppercase;letter-spacing:.025em;font-size:14px}.result-row.title .name,.result-row.title .rate,.result-row.title .amount{color:var(--white)}.result-row .name{color:var(--text-primary);font-weight:500}.result-row .rate{color:var(--text-secondary);text-align:center;font-size:14px;font-weight:500}.result-row .amount{color:var(--text-primary);text-align:right;font-family:JetBrains Mono,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-weight:600;font-size:15px}.tax-details{font-size:15px;line-height:1.7;color:var(--text-primary)}.tax-details h3{color:var(--text-primary);font-size:18px;font-weight:700;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid var(--primary-blue);letter-spacing:-.025em}.tax-details p{margin-bottom:12px;padding:8px 0;color:var(--text-primary)}.tax-details strong{color:var(--text-primary);font-weight:600}.tax-info-grid{display:grid;gap:12px;margin-top:16px}.tax-info-item{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:14px 16px;background:var(--neutral-50);border:2px solid var(--border-light);border-radius:var(--radius-lg);cursor:pointer;transition:all .3s ease}.tax-info-item:hover{background:var(--primary-blue-pale);border-color:var(--primary-blue-lighter);transform:translateY(-1px);box-shadow:var(--shadow-md)}.tax-info-label{font-weight:600;color:var(--text-primary);font-size:14px}.tax-info-value{font-weight:700;color:var(--primary-blue);font-size:15px;font-family:JetBrains Mono,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace}.tax-info-icon{font-size:16px;opacity:.6;transition:opacity .3s ease}.tax-info-item:hover .tax-info-icon{opacity:1}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .3s ease-out}.modal-content{background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-width:600px;width:90%;max-height:80vh;overflow:hidden;animation:slideUp .3s ease-out}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;background:var(--gradient-primary);color:var(--white);border-bottom:3px solid var(--primary-blue-pale)}.modal-header h3{font-size:18px;font-weight:700;margin:0;letter-spacing:-.025em}.modal-close{background:none;border:none;color:var(--white);font-size:24px;font-weight:700;cursor:pointer;padding:4px 8px;border-radius:var(--radius-md);transition:background .3s ease}.modal-close:hover{background:rgba(255,255,255,.2)}.modal-body{padding:24px;max-height:60vh;overflow-y:auto}.modal-detail-item{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border-light)}.modal-detail-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.modal-detail-row{display:flex;margin-bottom:12px;align-items:flex-start;gap:12px}.modal-detail-row:last-child{margin-bottom:0}.modal-detail-label{font-weight:600;color:var(--text-primary);min-width:80px;font-size:14px;flex-shrink:0}.modal-detail-value{font-weight:700;color:var(--primary-blue);font-size:16px;font-family:JetBrains Mono,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace}.modal-detail-text{color:var(--text-primary);line-height:1.6;flex:1}.modal-detail-link{color:var(--primary-blue);text-decoration:none;font-weight:500;transition:color .3s ease}.modal-detail-link:hover{color:var(--primary-blue-light);text-decoration:underline}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.tab-navigation{display:flex;border-bottom:3px solid var(--border-light);margin-bottom:20px;gap:4px;background:var(--neutral-100);padding:4px;border-radius:var(--radius-lg)}.tab-btn{flex:1;padding:14px 20px;border:none;background:transparent;color:var(--text-secondary);font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease;border-radius:var(--radius-md);position:relative;text-transform:uppercase;letter-spacing:.025em}.tab-btn:hover{background:var(--white);color:var(--text-primary);box-shadow:var(--shadow-sm)}.tab-btn.active{background:var(--gradient-primary);color:var(--white);box-shadow:var(--shadow-md);transform:translateY(-1px)}.tab-btn.active:after{content:"";position:absolute;bottom:-7px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--primary-blue)}.tab-content{position:relative}.tab-pane{display:none;animation:fadeIn .3s ease-in-out}.tab-pane.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.card-content::-webkit-scrollbar{width:6px}.card-content::-webkit-scrollbar-track{background:var(--light-gray);border-radius:3px}.card-content::-webkit-scrollbar-thumb{background:var(--medium-gray);border-radius:3px}.card-content::-webkit-scrollbar-thumb:hover{background:var(--secondary-gray)}@media (max-width: 1400px){.main-content{grid-template-columns:400px 1fr;gap:28px}}@media (max-width: 1200px){.main-content{grid-template-columns:380px 1fr;gap:24px}}@media (max-width: 1024px){.main-content{grid-template-columns:1fr;gap:24px}.left-panel{position:static}.header-content{padding:16px 32px}}@media (max-width: 768px){.header-content{padding:16px 24px;flex-direction:column;gap:12px;text-align:center}.app-title{font-size:24px}.header-subtitle{font-size:14px}.form-row{grid-template-columns:1fr;gap:16px}.main-content{padding:20px 16px;gap:20px}.card-content{padding:20px;max-height:350px}.details-card .card-content{max-height:300px}.form-section{padding:20px 24px}.calculator-form{padding:0 24px 24px}}@media (max-width: 480px){.result-row{grid-template-columns:1fr;gap:8px;text-align:left}.result-row .rate,.result-row .amount{text-align:left}.header-content{padding:12px 16px}.app-title{font-size:20px}.logo{font-size:28px}.main-content{padding:20px 12px}.card-content{padding:16px}.form-section{padding:16px 20px}.calculator-form{padding:0 20px 20px}}html{scroll-behavior:smooth;background-color:var(--white)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--neutral-100);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--neutral-300);border-radius:4px;transition:background .3s ease}::-webkit-scrollbar-thumb:hover{background:var(--primary-blue)}.tab-btn:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--primary-blue);outline-offset:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.result-card,.input-panel{animation:fadeInUp .6s ease-out}.form-group label{transition:color .3s ease}.form-group:focus-within label{color:var(--primary-blue)}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;color:inherit;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}
