.service-banner{position:fixed;top:0;left:0;right:0;z-index:10000;background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;padding:15px 20px;box-shadow:0 2px 10px #0003;border-bottom:3px solid #c44569}.service-banner.maintenance{background:linear-gradient(135deg,#f39c12,#e67e22);border-bottom-color:#d35400}.banner-content{max-width:1200px;margin:0 auto;text-align:center}.service-banner h3{margin:0 0 8px;font-size:1.2em;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.3)}.service-banner p{margin:0;font-size:.95em;opacity:.95;line-height:1.4}.service-banner #service-return-time{margin-top:8px;font-size:.9em;font-weight:500}body:has(.service-banner[style*=block]) .container{margin-top:80px}body{margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.container{display:flex;flex-direction:column;height:100vh}header{background-color:#1d4e89;color:#fff;padding:10px 20px;box-shadow:0 2px 5px #0000001a;z-index:10}h1{margin:0;font-size:1.8rem}.main-content{display:flex;flex:1;overflow:hidden}#map{flex:1;position:relative}.sidebar{padding:0 4px;width:320px;background-color:#f5f5f5;box-shadow:-2px 0 5px #0000001a;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.sidebar h2{margin:8px 0 0;font-size:1.4rem;color:#333;font-weight:600}.sidebar-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}.sidebar-title h2{margin:0;line-height:1.2}.help-button{background:none;border:none;color:#6200ea;cursor:pointer;font-size:.95rem;font-weight:700;padding:0;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;line-height:1;text-align:center;border-radius:50%}.help-button:hover{background-color:#6200ea1a}#topodisc-screenshot-img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 3px 10px #0003;margin:10px 0;transition:transform .2s}#topodisc-screenshot-img:hover{transform:scale(1.02)}#topodisc-link{display:inline-block;margin-top:15px;padding:8px 16px;background-color:#ff9e43;color:#fff;text-decoration:none;border-radius:4px;font-weight:500;transition:background-color .2s}#topodisc-link:hover{background-color:#f08a29;text-decoration:none}#new-disc{display:inline-block;margin-top:15px;padding:8px 16px;background-color:#1d4e89;color:#fff;text-decoration:none;border-radius:4px;font-weight:500;transition:background-color .2s}#new-disc:hover{background-color:#16396a;text-decoration:none}#instructions{color:#555;font-size:.9rem;padding:10px;background-color:#fff;border-radius:4px;border:1px solid #ddd}.instructions-container{background-color:#f8f9fa;border-radius:8px;padding:12px;box-shadow:0 2px 4px #0000000d}@keyframes attention-bounce{0%{transform:translateY(0)}20%{transform:translateY(-6px)}40%{transform:translateY(0)}60%{transform:translateY(-3px)}to{transform:translateY(0)}}@keyframes attention-highlight{0%{background-color:#f8f9fa}50%{background-color:#efe7ff}to{background-color:#f8f9fa}}.instructions-container.attention{animation:attention-bounce .5s ease,attention-highlight 1.2s ease}.instructions-container h3{margin-top:0;margin-bottom:0;color:#333;font-size:1rem}.instructions-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.instructions-header h3{cursor:pointer}.instructions-header h3:hover{color:#6200ea}.toggle-instructions-btn{background:none;border:none;color:#6200ea;cursor:pointer;font-size:1.2rem;font-weight:700;padding:0 5px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;transition:background-color .2s}.toggle-instructions-btn:hover{background-color:#6200ea1a}.instructions-container.collapsed #instructions-content{display:none}.instructions-container.collapsed .toggle-icon{transform:rotate(45deg)}.toggle-icon{transition:transform .3s}.instructions-list{list-style-type:none;padding-left:0;margin:0}.instructions-list li{display:flex;align-items:flex-start;margin-bottom:8px;line-height:1.3}.instruction-icon{display:inline-block;width:24px;margin-right:8px;font-style:normal}.highlight-link{color:#6200ea;text-decoration:none;font-weight:500;transition:color .2s}.highlight-link:hover{color:#3700b3;text-decoration:underline}.button-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.left-buttons{display:flex;gap:10px}.right-buttons{display:none}.copy-button-container{margin-top:10px;margin-bottom:10px;display:flex;justify-content:flex-end}button{padding:10px 15px;background-color:#1d4e89;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s}#topodisc-message-container{padding:20px;background-color:#f5f5f5;color:#333;border-radius:8px;text-align:center;box-shadow:0 2px 10px #0000001a;margin-bottom:20px;border:1px solid #e0e0e0}#topodisc-message-container.processing{background-color:#fff3cd;border-color:#ffeeba}#topodisc-message-container.available{background-color:#e8f4f8;border-color:#c5e4f3}#topodisc-available-text{font-size:1rem;margin-bottom:8px;color:#333}#topodisc-screenshot{margin-top:15px;padding-top:15px;border-top:1px solid #e0e0e0}#create-topodisc-button{padding:12px 20px;font-size:1.1rem;font-weight:600;background-color:#ff9e43;box-shadow:0 3px 6px #0000001a;transition:all .2s ease}#create-topodisc-button:hover{background-color:#f08a29;transform:translateY(-2px);box-shadow:0 4px 8px #00000026}#create-topodisc-button:disabled{background-color:#95a5a6;color:#ecf0f1;cursor:not-allowed;opacity:.9;transform:none;box-shadow:none}#create-topodisc-button:disabled:hover{background-color:#95a5a6;transform:none;box-shadow:none}#clear-button{background-color:#95a5a6}#clear-button:disabled{background-color:#999;color:#ecf0f1;cursor:not-allowed;opacity:.9}#clear-button:disabled:hover{background-color:#95a5a6}#clear-button:hover{background-color:#7f8c8d}#copy-button{background-color:#1d4e89}#copy-button:hover{background-color:#16396a}#share-button{background-color:#5a7d9a}#share-button:hover{background-color:#4a6a85}#output{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;background-color:#fff;font-family:monospace;min-height:40px;resize:none;overflow-wrap:break-word;box-sizing:border-box}.status{margin-top:10px;color:#7f8c8d;font-size:.8rem}.notification{position:fixed;top:20px;right:20px;background-color:#1d4e89;color:#fff;padding:10px 20px;border-radius:4px;box-shadow:0 2px 10px #0000001a;transform:translateY(-100px);opacity:0;transition:all .3s ease;z-index:1000}.notification.show{transform:translateY(0);opacity:1}.scale-widget{padding:8px 8px 0;background-color:#fff;border-radius:4px;border:1px solid #ddd}.scale-widget h3{margin-top:0;margin-bottom:10px;font-size:1rem;color:#333;font-weight:600}.scale-control{display:flex;flex-direction:column;margin-bottom:10px}.scale-control-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.scale-control label{margin-right:0;font-size:.9rem;font-weight:500;color:#333}.scale-control input[type=range]{width:100%;margin:0}.scale-value,.tile-size-value{font-weight:600;text-align:right;font-size:.9rem;color:#333}.scale-value #circle-diameter{font-weight:400;color:#666;display:inline;visibility:visible}.size-control{display:flex;flex-direction:column;margin-bottom:10px}.size-control-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.size-control label{margin-right:0;font-size:.9rem;font-weight:500;color:#333}.size-value{font-weight:600;text-align:right;font-size:.9rem;color:#333}.print-dimensions{background-color:#f5f5f5;padding:15px;border-radius:6px;margin-top:15px;font-size:.95rem;border:1px solid #e0e0e0}.print-dimensions p{margin:5px 0;display:flex;justify-content:space-between}.print-dimensions .dimension-label{color:#333;font-size:.9rem;font-weight:500}.print-dimensions .dimension-value{font-weight:600;color:#333;font-size:.9rem}#scale-disabled-message{color:#e74c3c;font-size:.85rem;margin-top:5px;font-style:italic}.project-name-control{margin-bottom:15px;display:flex;flex-direction:column}.project-name-control label{margin-bottom:5px;font-size:.9rem}#project-name-input{padding:8px;border:1px solid #ddd;border-radius:4px;font-size:.9rem}.input-wrapper{display:flex;align-items:center}.disc-label-input{padding:8px 10px;border:1px solid #ccc;border-radius:4px;font-size:.9rem;width:140px;box-sizing:border-box;transition:all .3s ease;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;height:34px;box-shadow:inset 0 1px 3px #0000000d}.disc-label-input:focus{border-color:#1d4e89;outline:none;box-shadow:0 0 5px #1d4e8933,inset 0 1px 3px #0000000d}.disc-label-input::placeholder{color:#aaa}.mapbox-gl-draw_circle{background-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="7.5" fill="none" stroke="black" stroke-width="2"/></svg>');background-position:center;background-repeat:no-repeat;background-size:70%}.mapbox-gl-draw_ctrl-draw-btn.active,.maplibregl-ctrl-group button.active{background-color:#ddd;border-bottom:2px solid #3bb2d0}.mobile-warning{display:none;background-color:#fff3cd;color:#856404;text-align:center;padding:10px;font-weight:500;border-bottom:1px solid #ffeeba}@media (max-width: 768px){.mobile-warning{display:block}.main-content{flex-direction:column}.sidebar{width:100%;height:50%;padding:0 8px;box-sizing:border-box}#map{height:50%}.sidebar *{max-width:100%;box-sizing:border-box}.sidebar input,.sidebar select,.sidebar textarea{max-width:100%}.container{margin:0;padding:0}.service-banner{padding:12px 15px}.service-banner h3{font-size:1.1em}.service-banner p{font-size:.9em}body:has(.service-banner[style*=block]) .container{margin-top:70px}}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#00000080}.modal-content{background-color:#fff;margin:10% auto;padding:20px;border-radius:5px;width:90%;max-width:800px;box-shadow:0 4px 8px #0003}.close-button{color:#aaa;float:right;font-size:28px;font-weight:700;cursor:pointer}.close-button:hover,.close-button:focus{color:#000;text-decoration:none;cursor:pointer}#geojson-input{width:calc(100% - 20px);height:200px;margin:10px 0;padding:10px;font-family:monospace;resize:vertical;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.modal-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}#apply-geojson{background-color:#1d4e89}#apply-geojson:hover{background-color:#16396a}#cancel-geojson{background-color:#95a5a6}#cancel-geojson:hover{background-color:#7f8c8d}.pro-icon-label{display:inline-flex;align-items:center;gap:.4em}.pro-icon{background:#ff9e43;color:#fff;font-weight:700;font-size:.8em;padding:2px 7px;border-radius:6px;font-family:Arial,sans-serif;letter-spacing:1px;vertical-align:middle}.only-info{color:#999}.shape-control{display:flex;flex-direction:column;margin-bottom:10px}.shape-control-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.shape-control-header div{display:flex;align-items:center;justify-content:center}.shape-control-header div>label{font-size:.9rem;font-weight:500;color:#333;margin:0}.shape-selector{display:flex;gap:12px;align-items:center}.shape-option-wrapper{display:flex;align-items:center;gap:6px}.shape-option{border:2px solid #ddd;background:#fff;cursor:pointer;transition:all .2s ease;padding:0}.shape-option:hover{border-color:#1d4e89;background-color:#f8f9fa}.shape-option.active{border-color:#1d4e89;background-color:#e8f4f8;color:#1d4e89}.shape-circle{border-radius:50%;width:40px;height:40px}.shape-roundrect{border-radius:4px;width:35px;height:35px}.shape-label{font-size:.8rem;font-weight:500;color:#333;text-align:center;line-height:1}.maplibregl-ctrl-attrib.maplibregl-ctrl-attrib--compact{display:block}.small-text-button{background:none;border:none;color:#6200ea;cursor:pointer;padding:0;margin:0}.small-text-button:hover{color:#4a00e0;text-decoration:none}#size-select{align-self:flex-end;width:auto;min-width:80px;padding:5px 10px;border:1px solid #ddd;border-radius:4px;background-color:#fff;font-size:.9rem}body,.container{font-family:Ubuntu,sans-serif}body{min-height:100vh;min-height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.container{min-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))}body{overscroll-behavior:none;-webkit-overflow-scrolling:touch}@supports (-webkit-touch-callout: none){body{height:100vh;height:100dvh}}