:root{ --primary:#2563eb; --primary-light:#3b82f6; --primary-dark:#1d4ed8; --secondary:#10b981; --secondary-dark:#059669; --accent:#f59e0b; --accent-dark:#f97316; --danger:#ef4444; --danger-dark:#dc2626; --warning:#f59e0b; --success:#10b981; --info:#3b82f6; --success-light:#d1fae5; --error:#ef4444; --error-light:#fee2e2; --white:#ffffff; --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937; --gray-900:#111827; --black:#000000; --text-primary:var(--gray-900); --text-secondary:var(--gray-600); --text-tertiary:var(--gray-400); --bg-primary:var(--white); --bg-secondary:var(--gray-50); --bg-tertiary:var(--gray-100); --border-color:var(--gray-200); --card-bg:var(--bg-primary); --input-bg:var(--bg-primary); --table-header-bg:var(--bg-tertiary); --shadow-sm:0 1px 2px rgba(0,0,0,0.05); --shadow:0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06); --shadow-md:0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -2px rgba(0,0,0,0.05); --shadow-lg:0 20px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04); --space-xs:0.25rem; --space-sm:0.5rem; --space-md:1rem; --space-lg:1.5rem; --space-xl:2rem; --radius-sm:0.25rem; --radius-md:0.5rem; --radius-lg:0.75rem; --radius-xl:1rem; --radius-full:9999px; --transition-fast:0.15s ease; --transition-normal:0.3s ease; --transition-slow:0.5s ease; } .dark{ --text-primary:var(--gray-100); --text-secondary:var(--gray-300); --text-tertiary:var(--gray-400); --bg-primary:var(--gray-900); --bg-secondary:var(--gray-800); --bg-tertiary:var(--gray-700); --border-color:var(--gray-600); --primary:#60a5fa; --primary-light:#93c5fd; --primary-dark:#3b82f6; --secondary:#34d399; --secondary-dark:#10b981; --accent:#fbbf24; --accent-dark:#fb923c; --danger:#f87171; --danger-dark:#ef4444; --warning:#fbbf24; --success:#34d399; --info:#60a5fa; --card-bg:#111827; --card-bg-dark:#0b1220; --input-bg:#111827; --input-bg-dark:#0b1220; --border-color-dark:#374151; --table-header-bg:#0f172a; --table-header-bg-dark:#0f172a; } *, *::before, *::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; padding:0; font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,Cantarell,sans-serif; line-height:1.5; color:var(--text-primary); background:var(--bg-primary); transition:background-color var(--transition-normal), color var(--transition-normal); } h1,h2,h3,h4,h5,h6{ margin:0; line-height:1.25; font-weight:600; color:var(--text-primary); } p{ margin:0 0 var(--space-md); color:var(--text-secondary); } a{ color:var(--primary); text-decoration:none; transition:color var(--transition-fast); } a:hover{ color:var(--primary-dark); } img{ max-width:100%; height:auto; } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } } .container{ width:100%; max-width:1200px; margin:0 auto; padding:0 var(--space-md); } .text-primary{ color:var(--text-primary) !important; } .text-secondary{ color:var(--text-secondary) !important; } .bg-primary{ background:var(--bg-primary) !important; } .bg-secondary{ background:var(--bg-secondary) !important; } .bg-tertiary{ background:var(--bg-tertiary) !important; } .shadow-sm{ box-shadow:var(--shadow-sm); } .shadow{ box-shadow:var(--shadow); } .shadow-md{ box-shadow:var(--shadow-md); } .rounded-sm{ border-radius:var(--radius-sm); } .rounded-md{ border-radius:var(--radius-md); } .rounded-lg{ border-radius:var(--radius-lg); } .rounded-xl{ border-radius:var(--radius-xl); } .rounded-full{ border-radius:var(--radius-full); } .transition{ transition:all var(--transition-normal); } .transition-fast{ transition:all var(--transition-fast); } .transition-slow{ transition:all var(--transition-slow); } .btn{ display:inline-flex; align-items:center; justify-content:center; padding:.75rem 1.5rem; border-radius:var(--radius-md); font-weight:600; font-size:.875rem; line-height:1; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; cursor:pointer; border:none; transition:all var(--transition-fast); transform:translateY(0); box-shadow:var(--shadow-sm); } .btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); } .btn:active{ transform:translateY(0); } .btn-primary{ background:var(--primary); color:var(--white); } .btn-primary:hover{ background:var(--primary-dark); } .btn-secondary{ background:var(--secondary); color:var(--white); } .btn-secondary:hover{ background:var(--secondary-dark); } .btn-accent{ background:var(--accent); color:var(--white); } .btn-accent:hover{ background:var(--accent-dark); } .btn-danger{ background:var(--danger); color:var(--white); } .btn-danger:hover{ background:var(--danger-dark); } .btn-outline{ background:transparent; border:2px solid var(--border-color); color:var(--text-primary); } .btn-outline:hover{ border-color:var(--primary); color:var(--primary); } .btn-icon{ display:inline-flex; align-items:center; } .btn-icon svg{ margin-right:var(--space-xs); width:1.25rem; height:1.25rem; } .input-field{ width:100%; padding:.75rem 1rem; font-size:1rem; line-height:1.5; color:var(--text-primary); background:var(--input-bg); border:2px solid var(--border-color); border-radius:var(--radius-md); transition:all var(--transition-fast); box-shadow:var(--shadow-sm); } .input-field:focus{ outline:0; border-color:var(--primary); box-shadow:0 0 0 3px rgba(59,130,246,0.3); } .dark .input-field:focus{ box-shadow:0 0 0 3px rgba(96,165,250,0.3); } .input-group{ margin-bottom:var(--space-md); } .input-group label{ display:block; margin-bottom:var(--space-xs); font-size:.875rem; font-weight:500; color:var(--text-secondary); } .card{ background:var(--card-bg); border:1px solid var(--border-color); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:all var(--transition-normal); } .card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); } .card-header{ padding:var(--space-md); border-bottom:1px solid var(--border-color); } .card-body{ padding:var(--space-md); } .card-footer{ padding:var(--space-md); border-top:1px solid var(--border-color); } .result-card{ padding:var(--space-md); background:var(--card-bg); border:1px solid var(--border-color); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:all var(--transition-normal); } .result-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); } .result-card-title{ font-size:.875rem; font-weight:500; color:var(--text-secondary); margin-bottom:var(--space-xs); } .result-card-value{ font-size:1.5rem; font-weight:600; color:var(--text-primary); } .tab-container{ display:flex; overflow-x:auto; background:var(--bg-secondary); padding:var(--space-xs); border-radius:var(--radius-md); } .tab{ position:relative; padding:var(--space-sm) var(--space-md); font-weight:500; color:var(--text-secondary); white-space:nowrap; transition:all var(--transition-fast); border-radius:var(--radius-sm); margin-right:var(--space-xs); } .tab:hover{ color:var(--primary); background:var(--bg-tertiary); } .tab.active{ color:var(--primary); background:var(--bg-primary); box-shadow:var(--shadow-sm); } .tab.active::after{ content:""; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--primary); border-radius:2px 2px 0 0; } .tab-content{ padding:var(--space-md); background:var(--bg-primary); border-radius:0 0 var(--radius-md) var(--radius-md); } .chart-container{ position:relative; height:300px; width:100%; margin:var(--space-lg) 0; } @keyframes fadeIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} } @keyframes fadeOut{ from{opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(10px);} } @keyframes slideUp{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} } @keyframes pop{ 0%{transform:scale(.95); opacity:0;} 100%{transform:scale(1); opacity:1;} } .animate-fade-in{ animation:fadeIn .5s ease-out forwards; } .animate-fade-out{ animation:fadeOut .3s ease-out forwards; } .animate-slide-up{ animation:slideUp .4s ease-out forwards; } .animate-pop{ animation:pop .3s ease-out; } .loading-spinner{ display:inline-block; width:1rem; height:1rem; border:2px solid rgba(255,255,255,.3); border-radius:50%; border-top-color:var(--white); animation:spin 1s ease-in-out infinite; } @keyframes spin{ to{ transform:rotate(360deg);} } .header{ display:flex; justify-content:space-between; align-items:center; padding:var(--space-md) 0; margin-bottom:var(--space-lg); } .calculator-container{ background:var(--bg-primary); border-radius:var(--radius-xl); box-shadow:var(--shadow-md); overflow:hidden; transition:all var(--transition-normal); } .footer{ text-align:center; margin-top:var(--space-xl); padding:var(--space-md) 0; color:var(--text-secondary); font-size:.875rem; } @media (max-width:768px){ .calculator-tab{ padding:var(--space-sm) var(--space-md); font-size:.875rem; } .result-card-value{ font-size:1.25rem; } .chart-container{ height:250px; } } @media (max-width:640px){ .chart-container{ height:200px !important; } .result-card{ padding:var(--space-sm); } .btn{ padding:.5rem 1rem; font-size:.75rem; } } @media print{ body *{ visibility:hidden; } #print-content, #print-content *{ visibility:visible; } #print-content{ position:absolute; left:0; top:0; width:100%; } .no-print{ display:none !important; } } .gold-card{ background:var(--card-bg); border-radius:12px; padding:24px; box-shadow:var(--shadow-sm); border:1px solid var(--border-color); transition:all .3s ease; } .gold-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); } .gold-card h2{ color:var(--text-primary); font-size:1.25rem; font-weight:600; margin-bottom:20px; display:flex; align-items:center; gap:8px; } .gold-card-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; } .gold-shop-profile{ display:flex; align-items:center; gap:16px; } .gold-api-status{ display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:20px; font-size:.875rem; font-weight:500; background:var(--bg-tertiary); color:var(--text-secondary); border:1px solid var(--border-color); } .gold-api-status.live{ background:var(--success-light); color:var(--success); border:1px solid var(--success); } .gold-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; } .gold-flex{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; } .gold-label{ display:block; color:var(--text-secondary); font-size:.875rem; font-weight:500; margin-bottom:6px; } .gold-input,.gold-select{ width:100%; padding:12px; border:1px solid var(--border-color); border-radius:8px; background:var(--input-bg); color:var(--text-primary); font-size:1rem; transition:all .2s ease; } .gold-input:focus,.gold-select:focus{ outline:0; border-color:var(--primary); box-shadow:0 0 0 3px rgba(59,130,246,.3); } .gold-input::placeholder{ color:var(--text-tertiary); } .gold-results-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; margin-bottom:24px; } .gold-result-card{ background:var(--card-bg); border:1px solid var(--border-color); border-radius:8px; padding:16px; text-align:center; transition:all .2s ease; } .gold-result-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); } .gold-result-card.accent{ background:var(--primary-light); border-color:var(--primary); } .gold-result-label{ color:var(--text-secondary); font-size:.875rem; margin-bottom:8px; } .gold-result-value{ color:var(--text-primary); font-size:1.5rem; font-weight:600; } .gold-breakdown{ margin:24px 0; } .gold-breakdown h3{ color:var(--text-primary); font-size:1.125rem; margin-bottom:16px; } .gold-table{ width:100%; border-collapse:collapse; background:var(--card-bg); border-radius:8px; overflow:hidden; box-shadow:var(--shadow-sm); } .gold-table th,.gold-table td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--border-color); } .gold-table th{ background:var(--table-header-bg); color:var(--text-primary); font-weight:600; font-size:.875rem; } .gold-table td{ color:var(--text-secondary); } .gold-total-row{ background:var(--primary-light); } .gold-total-row td{ color:var(--text-primary); font-weight:600; } .gold-history{ max-height:400px; overflow-y:auto; } .gold-history-empty{ text-align:center; color:var(--text-tertiary); padding:40px 20px; font-style:italic; } .gold-history-item{ display:flex; justify-content:space-between; align-items:center; padding:16px; border:1px solid var(--border-color); border-radius:8px; margin-bottom:8px; background:var(--card-bg); transition:all .2s ease; position:relative; } .gold-history-item:hover{ border-color:var(--primary); transform:translateX(4px); } .gold-history-main{ flex:1; } .gold-history-weight{ color:var(--text-primary); font-weight:500; margin-bottom:4px; } .gold-history-price{ color:var(--primary); font-weight:600; font-size:1.125rem; } .gold-history-details{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; margin-right:40px; } .gold-history-shop{ color:var(--text-secondary); font-size:.875rem; } .gold-history-time{ color:var(--text-tertiary); font-size:.75rem; } .gold-history-delete{ position:absolute; right:16px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-tertiary); cursor:pointer; padding:8px; border-radius:6px; transition:all .2s ease; } .gold-history-delete:hover{ color:var(--error); background:var(--error-light); } .gold-export-buttons{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; padding-top:24px; border-top:1px solid var(--border-color); } @media (max-width:768px){ .gold-row{ grid-template-columns:1fr; gap:12px; } .gold-results-grid{ grid-template-columns:1fr 1fr; } .gold-history-item{ flex-direction:column; align-items:flex-start; gap:12px; } .gold-history-details{ align-items:flex-start; margin-right:0; } .gold-history-delete{ position:absolute; right:16px; top:16px; transform:none; } .gold-flex{ flex-direction:column; } .gold-export-buttons{ flex-direction:column; } } @media (max-width:480px){ .gold-results-grid{ grid-template-columns:1fr; } .gold-card{ padding:16px; } } @media print{ .gold-card{ box-shadow:none; border:1px solid #ccc; } .gold-flex,.gold-export-buttons,.gold-history{ display:none; } } @keyframes gold-calculate-pop{ 0%{transform:scale(1);} 50%{transform:scale(1.02);} 100%{transform:scale(1);} } .gold-calculating{ animation:gold-calculate-pop .3s ease; }