:root{--primary-color:#002060;--secondary-color:#404040;--text-color:#333;--card-background:#f7f7f7;--measurement-bg:rgba(0,32,96,.9);--measurement-border:rgba(64,64,64,.5);--accent-color:#FF7D00}#hk-pipe-app-container{font-family:'Arial',sans-serif;line-height:1.6;color:var(--text-color);background-color:#f0f0f0;margin:0;padding:20px}#hk-pipe-app-container .main-container{max-width:1200px;margin:0 auto;background-color:#ffffff;border-radius:15px;box-shadow:0 0 20px rgba(0,0,0,.1);overflow:hidden}#hk-pipe-app-container .content-wrapper{padding:30px}#hk-pipe-app-container .controls,#hk-pipe-app-container .pipe-visualization{background-color:var(--card-background);border-radius:10px;padding:30px;margin-bottom:30px;box-shadow:0 4px 6px rgba(0,0,0,.05)}#hk-pipe-app-container .pipe-visualization{padding-bottom:120px}#hk-pipe-app-container .pipe-container{display:grid;grid-template-areas:"comparison" "measurement";grid-template-rows:minmax(400px,60vh) auto;align-items:center;justify-items:center;gap:2rem;width:100%;padding:20px}#hk-pipe-app-container .visual-comparison{position:relative;width:100%;height:60vh;min-height:400px;display:flex;justify-content:center;align-items:center;gap:40px;padding:2rem;box-sizing:border-box;grid-area:comparison}#hk-pipe-app-container .pipe-body,#hk-pipe-app-container .credit-card-ref{flex:0 0 auto;transform-origin:center;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;flex-shrink:0}#hk-pipe-app-container .pipe-body{background:var(--primary-color);border-radius:50%;box-shadow:0 8px 20px rgba(0,0,0,.2);border:4px solid #404040}#hk-pipe-app-container .credit-card-ref{background:#f0f0f0;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.1);border:1px solid #ddd}#hk-pipe-app-container .credit-card-ref::after{content:"標準信用卡";position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);font-size:.9em;color:#666}#hk-pipe-app-container .measurement-overlay{grid-area:measurement;background:var(--measurement-bg);color:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 6px 24px rgba(0,0,0,.15);border:2px solid var(--measurement-border);backdrop-filter:blur(12px);display:grid;grid-template-columns:auto auto;gap:1rem;align-items:center;width:80%;margin-top:2rem;position:relative;min-height:80px;transition:opacity .3s ease}#hk-pipe-app-container .measurement-overlay::before{content:"⏣";position:absolute;left:-28px;top:50%;transform:translateY(-50%);font-size:1.8em;opacity:.4}#hk-pipe-app-container .measurement-label{font-size:.9em;opacity:.8;letter-spacing:.5px}#hk-pipe-app-container .measurement-value{font-size:1.4em;font-weight:700;line-height:1.3;font-feature-settings:"tnum"}#hk-pipe-app-container .measurement-scale{padding-left:1rem;border-left:2px solid rgba(255,255,255,.1)}#hk-pipe-app-container .loading-indicator{display:none;position:fixed;top:20px;right:20px;background:var(--secondary-color);color:white;padding:8px 15px;border-radius:20px;font-size:14px}#hk-pipe-app-container select{padding:10px 15px;border:2px solid var(--primary-color);border-radius:8px;background:var(--card-background);margin:10px 15px 10px 5px;font-size:16px;color:var(--text-color);transition:all .3s ease}#hk-pipe-app-container select:focus{outline:none;box-shadow:0 0 0 3px rgba(0,32,96,.3)}#hk-pipe-app-container #pipeSize:not([data-initialized]){border-color:#95a5a6;opacity:.8}#hk-pipe-app-container label{font-weight:700;margin-right:15px;font-size:18px}#hk-pipe-app-container h2{color:var(--primary-color);margin-top:0;margin-bottom:25px;font-size:28px}@media (max-width:768px){#hk-pipe-app-container{padding:10px}#hk-pipe-app-container .controls,#hk-pipe-app-container .pipe-visualization{padding:20px}#hk-pipe-app-container h2{font-size:24px}#hk-pipe-app-container select{width:100%;margin:10px 0}#hk-pipe-app-container .visual-comparison{flex-direction:column;height:auto;min-height:70vh}#hk-pipe-app-container .pipe-body{order:-1;margin-bottom:40px}#hk-pipe-app-container .measurement-overlay{grid-template-columns:1fr;text-align:center;padding:1.2rem;width:90%}#hk-pipe-app-container .measurement-overlay::before{display:none}#hk-pipe-app-container .measurement-scale{border-left:none;border-top:2px solid rgba(255,255,255,.1);padding:.8rem 0 0}}