@import "https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow:wght@300;400;600;700&display=swap";:root{--bg:#0d0f12;--surface:#13171e;--surface2:#1a1f28;--border:#252c38;--accent:#f97316;--accent2:#fb923c;--text:#e2e8f0;--muted:#64748b;--mono:"Share Tech Mono", monospace;--sans:"Barlow", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background-image:linear-gradient(#f9731608 1px,#0000 1px),linear-gradient(90deg,#f9731608 1px,#0000 1px);background-size:40px 40px;position:fixed;inset:0}.wrapper{z-index:1;max-width:1100px;margin:0 auto;padding:2rem 1.5rem 4rem;position:relative}header{border-bottom:1px solid var(--border);align-items:center;gap:1rem;margin-bottom:3rem;padding-bottom:1.5rem;display:flex}.logo-icon{background:var(--accent);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.2rem;display:flex}.header-text h1{font-family:var(--mono);color:var(--accent);letter-spacing:.05em;font-size:1.25rem}.header-text p{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;font-weight:300}.tag{font-family:var(--mono);color:var(--muted);border:1px solid var(--border);letter-spacing:.08em;margin-left:auto;padding:4px 10px;font-size:.7rem}.layout{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}@media (width<=700px){.layout{grid-template-columns:1fr}}.panel{background:var(--surface);border:1px solid var(--border);padding:1.5rem;position:relative}.panel:before{content:"";background:var(--accent);opacity:.6;width:3px;height:100%;position:absolute;top:0;left:0}.panel-title{font-family:var(--mono);color:var(--accent);letter-spacing:.15em;text-transform:uppercase;align-items:center;gap:.5rem;margin-bottom:1.25rem;font-size:.7rem;display:flex}.panel-title:after{content:"";background:var(--border);flex:1;height:1px}.field{margin-bottom:1rem}label{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;font-size:.72rem;font-weight:600;display:block}.input-group{align-items:center;display:flex}.input-group input{flex:1}input[type=number],input[type=text]{background:var(--surface2);border:1px solid var(--border);width:100%;color:var(--text);font-family:var(--mono);-moz-appearance:textfield;outline:none;padding:10px 12px;font-size:.95rem;transition:border-color .2s,box-shadow .2s}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}input[type=number]:focus,input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px #f973161a}input[type=text]::placeholder{color:var(--muted)}.unit{background:var(--border);border:1px solid var(--border);color:var(--muted);font-family:var(--mono);white-space:nowrap;border-left:none;padding:10px;font-size:.75rem}.filament-grid{grid-template-columns:repeat(3,1fr);gap:.75rem;display:grid}@media (width<=900px){.filament-grid{grid-template-columns:repeat(2,1fr)}}.filament-brand{background:var(--surface2);border:1px solid var(--border);padding:.75rem}.brand-label{font-family:var(--mono);color:var(--accent2);letter-spacing:.1em;margin-bottom:.5rem;font-size:.6rem;line-height:1.4;display:block}.btn-calc{background:var(--accent);color:#000;width:100%;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border:none;margin-top:1.5rem;padding:14px;font-size:.85rem;font-weight:700;transition:background .15s,transform .1s}.btn-calc:hover{background:var(--accent2)}.btn-calc:active{transform:scale(.99)}.result-panel{background:var(--surface);border:1px solid var(--border);padding:1.5rem;animation:.35s fadeIn;position:relative}.result-panel:before{content:"";background:linear-gradient(90deg, var(--accent), transparent);width:100%;height:3px;position:absolute;top:0;left:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.result-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.25rem;display:grid}.result-item{background:var(--surface2);border:1px solid var(--border);padding:1rem}.r-label{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.4rem;font-size:.65rem}.r-value{font-family:var(--mono);color:var(--text);font-size:1.2rem}.result-total{background:#f9731614;border:1px solid #f973164d;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.t-label{font-family:var(--mono);color:var(--accent);letter-spacing:.12em;text-transform:uppercase;font-size:.75rem}.t-value{font-family:var(--mono);color:var(--accent);font-size:2rem;font-weight:700}.filament-results{flex-wrap:wrap;gap:.75rem;margin-top:.75rem;display:flex}.fil-chip{background:var(--surface2);border:1px solid var(--border);font-family:var(--mono);color:var(--text);padding:6px 12px;font-size:.75rem}.fil-chip span{color:var(--accent2);margin-left:6px}.history-section{margin-top:2.5rem}.history-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.history-header .panel-title{flex:1;margin-bottom:0}.btn-clear{border:1px solid var(--border);color:var(--muted);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;background:0 0;padding:5px 12px;font-size:.65rem;transition:border-color .15s,color .15s}.btn-clear:hover{color:#f87171;border-color:#f87171}.history-row{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border);grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;margin-bottom:.5rem;padding:.9rem 1rem;transition:border-left-color .15s;display:grid}.history-row:hover{border-left-color:var(--accent)}.h-meta{flex-direction:column;gap:3px;min-width:160px;display:flex}.h-project{font-family:var(--mono);color:var(--text);font-size:.85rem;font-weight:600}.h-date{font-family:var(--mono);color:var(--muted);font-size:.7rem}.h-hours{font-family:var(--mono);color:var(--accent2);font-size:.75rem}.h-costs{flex-wrap:wrap;gap:.4rem 1rem;display:flex}.h-item{font-family:var(--mono);color:var(--muted);font-size:.7rem}.h-fil{font-family:var(--mono);color:var(--text);font-size:.7rem}.h-total{font-family:var(--mono);color:var(--accent);white-space:nowrap;font-size:1rem}@media (width<=700px){.history-row{grid-template-columns:1fr}.h-total{text-align:right}}
