*{font-family:Poppins,sans-serif!important}:root{--font-heading:"Playfair Display",Georgia,serif;--font-body:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;--color-primary:#0f2d4a;--color-primary-light:#1d446c;--color-accent:#4f46e5;--color-accent-light:#eef2ff;--color-success:#0f766e;--color-success-bg:#f0fdfa;--color-danger:#dc2626;--color-danger-bg:#fef2f2;--bg-main:#f8fafc;--bg-card:#fff;--bg-inset:#f1f5f9;--border-color:#e2e8f0;--text-main:#1e293b;--text-muted:#64748b;--text-light:#94a3b8;--shadow-sm:0 1px 3px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.02);--shadow-md:0 4px 6px -1px rgba(0,0,0,.05),0 2px 4px -1px rgba(0,0,0,.03);--shadow-lg:0 10px 15px -3px rgba(15,45,74,.03),0 4px 6px -4px rgba(15,45,74,.03);--radius-lg:16px;--radius-md:10px;--radius-sm:6px;--transition:all 0.2s cubic-bezier(0.4,0,0.2,1)}.gst-calculator-container{display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:20px;background:var(--bg-main);font-family:var(--font-body);-webkit-font-smoothing:antialiased}.card{width:100%;max-width:860px;background:var(--bg-card);border-radius:var(--radius-lg);padding:32px;border:1px solid var(--border-color);box-shadow:var(--shadow-lg)}.header{gap:14px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border-color)}.header,.header-icon{display:flex;align-items:center}.header-icon{width:44px;height:44px;border-radius:var(--radius-md);justify-content:center;font-size:16px;flex-shrink:0;transition:var(--transition)}.gst-icon{background:var(--color-accent-light);color:var(--color-accent)}.gst-icon img{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.card h1{font-family:var(--font-heading);font-size:24px;font-weight:700;color:var(--color-primary);letter-spacing:-.5px}.subtitle{font-family:var(--font-body);font-size:13px;color:var(--text-muted);margin-top:2px;font-weight:400}.mode-toggle-group{display:flex;background:var(--bg-inset);border-radius:var(--radius-md);padding:4px;gap:4px;margin-bottom:12px}.mode-toggle-btn{flex:1 1;padding:10px;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;background:transparent;color:var(--text-muted);transition:var(--transition);font-family:var(--font-body);display:flex;align-items:center;justify-content:center;gap:6px}.mode-toggle-btn.active{background:var(--bg-card);color:var(--color-accent);box-shadow:var(--shadow-sm)}.tax-type-group{display:flex;gap:10px;margin-bottom:20px}.tax-type-btn{flex:1 1;padding:10px 14px;border:1.5px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-muted);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:var(--transition);font-family:var(--font-body)}.tax-type-btn .tax-sub{font-size:11px;font-weight:500;color:var(--text-light)}.tax-type-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}.tax-type-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm)}.tax-type-btn.active .tax-sub{color:hsla(0,0%,100%,.75)}.main-layout{display:grid;grid-template-columns:1.1fr 1fr;grid-gap:24px;gap:24px;align-items:start}.left-panel{gap:12px}.display-box,.left-panel{display:flex;flex-direction:column}.display-box{background:var(--bg-main);border:1.5px solid var(--border-color);border-radius:var(--radius-md);padding:14px 16px;min-height:80px;justify-content:space-between;cursor:text;transition:var(--transition)}.display-box:focus-within{border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(79,70,229,.1);background:var(--bg-card)}.display-label{font-size:11px;color:var(--text-muted);font-weight:600;letter-spacing:.8px;text-transform:uppercase}.display-label,.keyboard-hint{display:flex;align-items:center;gap:4px}.keyboard-hint{margin-left:auto;font-size:10px;color:var(--text-light)}.display-value{display:flex;align-items:baseline;gap:6px;margin-top:6px}.currency{font-size:20px;color:var(--text-light);font-weight:600}.amount-input{font-size:32px;font-weight:700;color:var(--text-main);line-height:1;font-family:var(--font-body);background:transparent;border:none;outline:none;width:100%;caret-color:var(--color-accent)}.amount-input::placeholder{color:var(--text-light)}.amount-input::-webkit-inner-spin-button,.amount-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.numpad{flex-direction:column}.numpad,.numpad-row{display:flex;gap:6px}.pad-btn{flex:1 1;padding:14px 0;font-size:16px;font-weight:600;border:1.5px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-main);cursor:pointer;transition:var(--transition);-webkit-user-select:none;-moz-user-select:none;user-select:none;font-family:var(--font-body)}.pad-btn:hover{background:var(--color-accent-light);border-color:var(--color-accent);color:var(--color-accent)}.pad-btn:active{transform:scale(.98)}.pad-delete{border-color:#fecaca;color:var(--color-danger)}.pad-delete:hover{background:var(--color-danger-bg);border-color:var(--color-danger);color:var(--color-danger)}.pad-dot,.pad-double{color:var(--text-muted)}.pad-double{font-size:14px}.pad-clear{border-color:#fecaca;color:var(--color-danger);font-weight:700}.pad-clear:hover{background:var(--color-danger-bg);border-color:var(--color-danger)}.calculateBtn{flex:2 1;padding:14px;border:none;border-radius:var(--radius-sm);background:var(--color-primary);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);font-family:var(--font-body);display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:var(--shadow-sm)}.calculateBtn:hover{background:var(--color-primary-light);transform:translateY(-1px)}.right-panel{display:flex;flex-direction:column;gap:16px}.section-label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;display:flex;align-items:center;gap:4px}.rate-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:6px;gap:6px}.rate-btn{padding:11px 0;border:1.5px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-muted);font-size:13px;font-weight:600;cursor:pointer;transition:var(--transition);font-family:var(--font-body)}.rate-active,.rate-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}.rate-active{background:var(--color-accent-light)}.rate-active:hover{color:var(--color-accent)}.results-section{display:flex;flex-direction:column;gap:8px;flex:1 1}.result-card{border-radius:var(--radius-md);padding:14px 18px;justify-content:space-between;border:1px solid var(--border-color);background:var(--bg-main);min-width:0;box-shadow:var(--shadow-sm);transition:var(--transition)}.result-card,.result-top{display:flex;align-items:center}.result-top{gap:10px;flex-shrink:0}.r-icon{width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:12px;background:var(--bg-inset);color:var(--text-muted);flex-shrink:0}.r-label{font-size:13px;font-weight:600}.r-label,.r-value{color:var(--text-main)}.r-value{font-size:16px;font-weight:700;text-align:right;word-break:break-all;min-width:0}.r-icon-purple{background:var(--color-accent-light)!important;border:1px solid rgba(79,70,229,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1!important;padding:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.r-icon-purple span{font-size:10px;font-weight:600;color:var(--color-accent)}.r-icon-orange{background:#fff7ed;color:#ea580c;-webkit-user-select:none;-moz-user-select:none;user-select:none}.r-icon-blue{background:#eff6ff;color:#2563eb}.result-card:has(.total-val){background:var(--color-success-bg);border-color:#ccfbf1}.result-card:has(.total-val) .r-icon{background:#ccfbf1;color:var(--color-success)}.total-val{font-size:20px!important;color:var(--color-success)!important}.resetBtn{width:100%;padding:12px;border:1.5px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-muted);font-size:13px;font-weight:600;cursor:pointer;transition:var(--transition);font-family:var(--font-body);display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto}.resetBtn:hover{border-color:var(--color-danger);color:var(--color-danger);background:var(--color-danger-bg)}.formula{margin-top:16px;text-align:center;color:var(--text-muted);font-size:12px;line-height:1.5;background:var(--bg-main);padding:12px 16px;border-radius:var(--radius-md);border:1px dashed var(--border-color)}@media (max-width:900px){.gst-calculator-container{padding:30px 16px}.card{padding:24px}.main-layout{grid-template-columns:1fr;gap:20px}.rate-grid{grid-template-columns:repeat(5,1fr)}.resetBtn{width:auto;padding:12px 24px;align-self:flex-end}}@media (max-width:600px){.gst-calculator-container{padding:16px 10px}.card{padding:20px 14px;border-radius:var(--radius-md)}.header{margin-bottom:16px;padding-bottom:14px}.card h1{font-size:20px}.amount-input{font-size:26px}.pad-btn{padding:12px 0;font-size:15px}.rate-grid{grid-template-columns:repeat(3,1fr)}.tax-type-btn{font-size:12px;padding:8px 10px}.result-card{padding:12px 14px}.r-value{font-size:15px;word-break:normal}.total-val{font-size:18px!important}}@media (max-width:380px){.card{padding:16px 10px}.amount-input{font-size:22px}.pad-btn{padding:10px 0;font-size:14px}.rate-grid{grid-template-columns:repeat(2,1fr)}}