.app{width:100%}.container{background:var(--card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:calc(var(--radius) * 3);padding:32px;box-shadow:var(--shadow-xl);border:1px solid var(--border);width:100%}h1{color:var(--foreground);margin-bottom:32px;text-align:center;font-size:2rem}h2{color:var(--foreground);margin:24px 0 16px;font-size:1.5rem}h3{color:var(--foreground);margin-bottom:8px;font-size:1.2rem}.input-section{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap}.input-group{flex:1;min-width:200px;width:100%}.input-group label{display:block;margin-bottom:8px;color:var(--muted-foreground);font-weight:500}.input-group input{width:100%;padding:12px 16px;border:2px solid var(--input);border-radius:var(--radius);font-size:1rem;transition:all .3s;background:var(--card);color:var(--foreground);font-family:var(--font-sans);min-height:44px;-moz-appearance:none;appearance:none;-webkit-appearance:none}.input-group input::placeholder{color:var(--muted-foreground)}.input-group input:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px var(--ring) 33}.input-group input:disabled{background-color:var(--muted);cursor:not-allowed;opacity:.6}.btn{padding:12px 24px;border:none;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s;align-self:flex-end;height:fit-content;background:var(--primary);color:var(--primary-foreground);box-shadow:var(--shadow-md);font-family:var(--font-sans);min-height:44px;-webkit-tap-highlight-color:transparent}.btn:disabled{opacity:.6;cursor:not-allowed}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg);opacity:.9}.btn-primary{background:var(--primary);color:var(--primary-foreground)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg);opacity:.9}.btn-success{background:var(--primary);color:var(--primary-foreground);width:100%;margin-top:16px}.btn-success:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg);opacity:.9}.error-message{background-color:var(--destructive);color:var(--destructive-foreground);padding:12px 16px;border-radius:var(--radius);margin-bottom:24px;border-left:4px solid var(--destructive);border:1px solid var(--destructive);opacity:.9}.packages-section{margin-top:32px}.packages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px}.package-card{border:2px solid var(--border);border-radius:calc(var(--radius) * 2);padding:20px;cursor:pointer;transition:all .3s;background:var(--card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.package-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.package-card.selected{border-color:var(--ring);background:var(--card);box-shadow:var(--shadow-xl);border-color:var(--primary)}.package-card h3{margin-bottom:8px;color:var(--card-foreground)}.client-info{background:var(--muted);padding:12px 16px;border-radius:calc(var(--radius) * 1.5);margin-bottom:16px;border:1px solid var(--border)}.client-info p{margin:0;color:var(--muted-foreground)}.package-speed{color:var(--muted-foreground);font-size:.9rem;margin:12px 0;line-height:1.6}.speed-label{font-weight:600;color:var(--foreground)}.package-duration{color:var(--muted-foreground);font-size:.85rem;margin-bottom:8px;font-style:italic}.package-description{color:var(--muted-foreground);font-size:.9rem;margin-bottom:12px}.package-price{font-size:1.5rem;font-weight:700;color:var(--primary);margin-top:12px;padding-top:12px;border-top:2px solid var(--border)}.recharge-section{margin-top:24px;padding:20px;background:var(--muted);border-radius:calc(var(--radius) * 2);border:1px solid var(--border)}.selected-package-info{margin-bottom:16px}.selected-package-info p{color:var(--foreground);font-size:1.1rem}.recharge-result{margin-top:32px;padding:24px;background:var(--card);border-radius:calc(var(--radius) * 2);border:2px solid var(--primary);box-shadow:var(--shadow-xl)}.recharge-result h3{margin-bottom:24px;color:var(--foreground);text-align:center;font-size:1.5rem}.qr-code-section,.readable-code-section,.app-links-section{margin-top:24px;padding:20px;background:var(--card);border-radius:calc(var(--radius) * 2);box-shadow:var(--shadow-md);border:1px solid var(--border)}.qr-code-section h4,.readable-code-section h4,.app-links-section h4{margin-bottom:16px;color:var(--foreground);font-size:1.2rem;border-bottom:2px solid var(--border);padding-bottom:8px}.qr-code-container{display:flex;justify-content:center;align-items:center;padding:20px;background:transparent;border-radius:var(--radius);margin-bottom:12px}.qr-code-image{max-width:300px;width:100%;height:auto;border-radius:var(--radius);border:none;box-shadow:var(--shadow-lg)}.qr-code-hint{text-align:center;color:var(--muted-foreground);font-size:.9rem;margin:0;font-style:italic}.code-container{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.readable-code{flex:1;min-width:0;display:block;padding:16px;background:var(--card);border-radius:var(--radius);font-family:var(--font-mono),"Courier New",monospace;font-size:1rem;word-break:break-all;color:var(--foreground);border:2px solid var(--border);font-weight:600;width:100%}.btn-copy{padding:12px 24px;background:var(--primary);color:var(--primary-foreground);border:none;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s;white-space:nowrap;box-shadow:var(--shadow-md);font-family:var(--font-sans);min-height:44px;-webkit-tap-highlight-color:transparent}.btn-copy:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);opacity:.9}.app-links-container{display:flex;flex-direction:column;gap:12px}.app-link-btn{display:block;padding:16px 24px;background:var(--primary);color:var(--primary-foreground);text-decoration:none;border-radius:var(--radius);font-weight:600;text-align:center;transition:all .3s;font-size:1rem;box-shadow:var(--shadow-md);font-family:var(--font-sans);border:none;cursor:pointer;min-height:44px;-webkit-tap-highlight-color:transparent}.app-link-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);opacity:.9}.app-link-btn:active{transform:translateY(0)}.valid-until-section{margin-top:16px;padding:12px 16px;background:var(--muted);border-radius:calc(var(--radius) * 1.5);border-left:4px solid var(--accent);border:1px solid var(--border)}.valid-until-section p{margin:0;color:var(--muted-foreground);font-size:.95rem}@media (max-width: 768px){.container{padding:16px;border-radius:var(--radius-lg)}h1{font-size:1.5rem;margin-bottom:24px}h2{font-size:1.25rem;margin:20px 0 12px}h3{font-size:1.1rem}.input-section{flex-direction:column;gap:16px}.input-group{min-width:100%}.btn{width:100%;align-self:stretch}.packages-grid{grid-template-columns:1fr;gap:12px}.package-card,.recharge-section{padding:16px}.recharge-result{padding:20px;margin-top:24px}.qr-code-section,.readable-code-section,.app-links-section{padding:16px;margin-top:16px}.qr-code-container{padding:16px}.qr-code-image{max-width:100%}.code-container{flex-direction:column;gap:12px}.readable-code{width:100%;font-size:.9rem}.btn-copy{width:100%}.app-links-container{gap:10px}.app-link-btn{padding:14px 20px;font-size:.95rem}}@media (max-width: 480px){body{padding:8px}.container{padding:12px}h1{font-size:1.25rem;margin-bottom:20px}h2{font-size:1.1rem}.package-price{font-size:1.25rem}.readable-code{font-size:.85rem;padding:12px}}*{margin:0;padding:0;box-sizing:border-box}:root{--background: #f9f9fa;--foreground: #333333;--card: #ffffff;--card-foreground: #333333;--popover: #ffffff;--popover-foreground: #333333;--primary: #34a85a;--primary-foreground: #ffffff;--secondary: #6495ed;--secondary-foreground: #ffffff;--muted: #ddd9c4;--muted-foreground: #6e6e6e;--accent: #66d9ef;--accent-foreground: #333333;--destructive: #ef4444;--destructive-foreground: #ffffff;--border: #d4d4d4;--input: #d4d4d4;--ring: #34a85a;--chart-1: #34a85a;--chart-2: #6495ed;--chart-3: #66d9ef;--chart-4: #4682b4;--chart-5: #1a9641;--sidebar: #f9f9fa;--sidebar-foreground: #333333;--sidebar-primary: #34a85a;--sidebar-primary-foreground: #ffffff;--sidebar-accent: #66d9ef;--sidebar-accent-foreground: #333333;--sidebar-border: #d4d4d4;--sidebar-ring: #34a85a;--font-sans: Plus Jakarta Sans, sans-serif;--font-serif: Source Serif 4, serif;--font-mono: JetBrains Mono, monospace;--radius: .5rem;--shadow-x: 0;--shadow-y: 1px;--shadow-blur: 3px;--shadow-spread: 0px;--shadow-opacity: .1;--shadow-color: oklch(0 0 0);--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / .05);--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / .05);--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / .1), 0 1px 2px -1px hsl(0 0% 0% / .1);--shadow: 0 1px 3px 0px hsl(0 0% 0% / .1), 0 1px 2px -1px hsl(0 0% 0% / .1);--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / .1), 0 2px 4px -1px hsl(0 0% 0% / .1);--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / .1), 0 4px 6px -1px hsl(0 0% 0% / .1);--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / .1), 0 8px 10px -1px hsl(0 0% 0% / .1);--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / .25);--tracking-normal: 0em;--spacing: .25rem}.dark{--background: #1a1d23;--foreground: #e5e5e5;--card: #2f3436;--card-foreground: #e5e5e5;--popover: #2f3436;--popover-foreground: #e5e5e5;--primary: #34a85a;--primary-foreground: #ffffff;--secondary: #4682b4;--secondary-foreground: #e5e5e5;--muted: #444444;--muted-foreground: #a3a3a3;--accent: #6495ed;--accent-foreground: #e5e5e5;--destructive: #ef4444;--destructive-foreground: #ffffff;--border: #444444;--input: #444444;--ring: #34a85a;--chart-1: #34a85a;--chart-2: #4682b4;--chart-3: #6495ed;--chart-4: #66d9ef;--chart-5: #1a9641;--sidebar: #1a1d23;--sidebar-foreground: #e5e5e5;--sidebar-primary: #34a85a;--sidebar-primary-foreground: #ffffff;--sidebar-accent: #6495ed;--sidebar-accent-foreground: #e5e5e5;--sidebar-border: #444444;--sidebar-ring: #34a85a;--font-sans: Plus Jakarta Sans, sans-serif;--font-serif: Source Serif 4, serif;--font-mono: JetBrains Mono, monospace;--radius: .5rem;--shadow-x: 0;--shadow-y: 1px;--shadow-blur: 3px;--shadow-spread: 0px;--shadow-opacity: .1;--shadow-color: oklch(0 0 0);--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / .05);--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / .05);--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / .1), 0 1px 2px -1px hsl(0 0% 0% / .1);--shadow: 0 1px 3px 0px hsl(0 0% 0% / .1), 0 1px 2px -1px hsl(0 0% 0% / .1);--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / .1), 0 2px 4px -1px hsl(0 0% 0% / .1);--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / .1), 0 4px 6px -1px hsl(0 0% 0% / .1);--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / .1), 0 8px 10px -1px hsl(0 0% 0% / .1);--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / .25);--tracking-normal: 0em;--spacing: .25rem}@theme inline{ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --font-sans: var(--font-sans); --font-mono: var(--font-mono); --font-serif: var(--font-serif); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --shadow-2xs: var(--shadow-2xs); --shadow-xs: var(--shadow-xs); --shadow-sm: var(--shadow-sm); --shadow: var(--shadow); --shadow-md: var(--shadow-md); --shadow-lg: var(--shadow-lg); --shadow-xl: var(--shadow-xl); --shadow-2xl: var(--shadow-2xl); }body{font-family:var(--font-sans),-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--background);min-height:100vh;padding:10px}#root{max-width:800px;margin:0 auto;width:100%}@media (max-width: 768px){body{padding:10px}}