body,html{margin:0;padding:0;width:100%;height:100vh;height:100dvh;overflow:hidden;background-color:#111;color:#fff;font-family:sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#calc{display:flex;flex-direction:column;height:100%;background-image:url('mainbackground.png');background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#222}
#header-bar{background:#333;border-bottom:2px solid #777;box-shadow:none;padding:4px 8px;display:flex;align-items:center;gap:8px}
#app-logo{height:20px}
#app-title{flex:1;font-size:0.95rem;font-weight:bold;display:flex;align-items:center}
#header-bar button{min-height:32px;border-radius:16px;padding:0 12px;font-size:0.9rem;font-weight:bold;border:none;box-shadow:0 2px 0 rgba(0,0,0,0.3);color:#fff;cursor:pointer}
#lang-btn{color:#333 !important;background-color:#eee !important}
#toolbox-btn{background:transparent !important;border:none !important;box-shadow:none !important;padding:0 5px !important;}
#toolbox-btn:active img{transform:translateY(2px);}
#display{background:#050708;color:#eee;font-family:monospace;padding:6px 8px;display:flex;flex-direction:column;align-items:flex-start;position:relative;margin:10px;border-radius:8px;border:3px solid #777;box-shadow:none;height:var(--disp-h, 10vh);min-height:100px;flex-shrink:0;overflow:hidden}
#display-top{width:100%;font-size:0.85rem;display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;flex:1;overflow:hidden;gap:0;padding-bottom:4px;margin-bottom:4px;border-bottom:2px solid #555;min-height:0}
#fav-list{display:flex;flex-direction:column;align-items:flex-start;text-align:left;flex:1;overflow-y:auto;scrollbar-width:none;border-right:2px solid #555;padding-right:6px}
#mini-hist{display:flex;flex-direction:column-reverse;align-items:flex-end;text-align:right;flex:1;overflow-y:auto;scrollbar-width:none;padding-left:6px}
.mini-hist-line{color:#888;white-space:nowrap;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;line-height:1.15;flex-shrink:0}
.mini-hist-line::-webkit-scrollbar{display:none}
.fav-line{color:#f1c40f;white-space:nowrap;margin-top:2px;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;line-height:1.15;flex-shrink:0}
.fav-line::-webkit-scrollbar{display:none}
.fav-note{color:#ddd;font-weight:bold;margin-right:5px}
.fav-res{color:#2ecc71;font-weight:bold}
#main-val{font-size:2.0rem;white-space:nowrap;overflow-x:auto;overflow-y:hidden;color:#00ff00;line-height:1.2;width:100%;text-align:left;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:0}
#main-val::-webkit-scrollbar{display:none}
#mem-ind{position:absolute;bottom:4px;right:8px;color:#f39c12;font-size:1.2rem;font-weight:bold}
.grid{display:grid !important;gap:4px !important;padding:5px 10px calc(15px + env(safe-area-inset-bottom)) 10px !important}
#main-grid{flex:1 !important;grid-template-columns:repeat(5,1fr) !important;grid-template-rows:repeat(8,1fr) !important;grid-auto-rows:0px !important;overflow:hidden !important;background-color:#000000 !important;border:3px solid #777 !important;border-radius:16px !important;margin:10px !important;padding:10px 10px calc(15px + env(safe-area-inset-bottom)) 10px !important;box-shadow:none !important}
#toolbox-grid{grid-template-columns:repeat(3,1fr) !important;grid-template-rows:repeat(4,1fr) !important;flex:1;}
.grid button{width:100% !important;height:100% !important;margin:0 !important;padding:0 !important;font-size:1.1rem !important;font-weight:bold !important;display:flex !important;align-items:center !important;justify-content:center !important;white-space:nowrap !important;border-radius:12px !important;border:2px solid #111 !important;background-clip:padding-box !important;position:relative !important;overflow:hidden !important;box-shadow:inset 0 3px 6px rgba(255,255,255,0.4),inset 0 -4px 6px rgba(0,0,0,0.4),0 4px 0 #111,0 6px 10px rgba(0,0,0,0.5) !important;color:#fff !important;transition:box-shadow 0.05s ease-out,transform 0.05s ease-out !important;cursor:pointer !important;touch-action:none !important}
.num{font-size:2.5rem !important}
#b-stair,#b-formwork,#b-triangle,#b-scaffold{font-size:0.85rem !important}
.grid button::after{content:'' !important;position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;background:linear-gradient(to bottom,rgba(255,255,255,0.15),rgba(0,0,0,0.15)) !important;border-radius:inherit !important;pointer-events:none !important}
.grid button:not(.tool-placeholder):active{transform:translateY(4px) !important;box-shadow:inset 0 4px 8px rgba(0,0,0,0.6),0 0 0 #111,0 2px 4px rgba(0,0,0,0.4) !important}
.span-2{grid-column:span 2 !important}
.tool-placeholder{background:#3a4247 !important;color:#888 !important;border:2px dashed #555 !important;box-shadow:none !important;transform:none !important;cursor:default !important;opacity:0.7;}
.tool-placeholder::after{display:none !important;}
.tool-btn{background-color:#2d3436 !important;flex-direction:column !important;gap:5px !important;}
.tool-btn img{height:100px;width:auto;max-width:80%;object-fit:contain;margin-bottom:5px;}
#set-mod,#toolbox-modal{position:absolute;top:0;left:0;width:100%;height:100%;display:none;flex-direction:column;z-index:100;overflow-y:auto}
#toolbox-modal{background:#1e272e}
#set-mod{background-image:url('background.png');background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#111}
#set-head,#toolbox-head{display:flex;justify-content:flex-end;padding:10px;background:#444;position:sticky;top:0;z-index:10;gap:10px}
#set-head button,#set-menu-main button,#toolbox-head button{border-radius:10px;border:none;font-weight:bold;color:#fff;box-shadow:0 3px 0 rgba(0,0,0,0.3);cursor:pointer;position:relative;overflow:hidden}
#toolbox-head button{padding:10px 20px;min-height:50px;background:#c0392b;}
#set-mod .set-label{color:#95a5a6;font-size:0.8rem;text-align:center;padding:15px 0 5px 0;background:#1e272e;margin-top:5px;text-transform:uppercase;margin-bottom:20px}
#toolbox-modal .set-label{color:#f1c40f;font-weight:bold;font-size:1.1rem;text-align:center;padding:20px 0 10px 0;text-transform:uppercase;}
#set-act,#set-pal{background:#111;margin:10px;padding:10px;border-radius:10px;min-height:100px;position:relative}
#toolbox-grid-container{background:#111;margin:10px;padding:15px;border-radius:10px;flex:1;display:flex;flex-direction:column;}
#set-menu-layout .grid{grid-template-columns:repeat(5,1fr) !important;grid-auto-rows:45px !important;gap:8px !important;padding:5px !important}
#set-menu-layout button{font-size:0.9rem !important;min-height:45px !important}
#pal-pool{border-top:2px solid #555;padding-top:10px}
#set-menu-layout-options{display:flex;background:#2d3436;border-radius:10px;padding:15px;justify-content:space-around;gap:15px;font-weight:bold;align-items:center;margin-top:5px;width:calc(100% - 30px);margin-left:auto;margin-right:auto;box-sizing:border-box}
#set-menu-layout-options button{flex:1;font-size:1.4rem;min-height:70px;border-radius:12px;box-shadow:0 4px 0 rgba(0,0,0,0.4),0 5px 10px rgba(0,0,0,0.3)}
.slot,.slot button{touch-action:none !important}
.drag-ghost{z-index:99999 !important;opacity:0.95 !important;box-shadow:0 25px 35px rgba(0,0,0,0.6) !important;position:fixed !important;pointer-events:none !important;transform:scale(1.15) translateY(-15px) !important;transition:transform 0.1s ease-out;}
.c-num{background-color:#b2bec3 !important;color:#2c3e50 !important}
.c-num::after{background:linear-gradient(to bottom,rgba(255,255,255,0.25),rgba(0,0,0,0.1)) !important}
.c-spec{background-color:#636e72 !important}
.c-fancy{background-color:#2d3436 !important}
.c-red{background-color:#c0392b !important}
.c-blue{background-color:#3498db !important}
.c-math{background-color:#7f8c8d !important}
.c-mem{background-color:#27ae60 !important}
.c-unit{background-color:#2980b9 !important}
#set-mod input{border:1px solid #555;width:50px;height:30px;padding:0;cursor:pointer;border-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,0.5);background:transparent}
#set-colors .color-row{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-bottom:2px solid #bdc3c7;background:rgba(0,0,0,0.6)}
#set-colors label{color:#eee;font-size:1rem;font-weight:bold}
#set-mod{overflow:hidden !important}
#set-menu-layout,#set-menu-color{overflow-y:auto !important;flex:1 !important;padding-bottom:30px;padding-right:5px}
#set-menu-layout::-webkit-scrollbar,#set-menu-color::-webkit-scrollbar{width:32px !important}
#set-menu-layout::-webkit-scrollbar-track,#set-menu-color::-webkit-scrollbar-track{background:rgba(0,0,0,0.2)}
#set-menu-layout::-webkit-scrollbar-thumb,#set-menu-color::-webkit-scrollbar-thumb{background:#636e72;border-radius:10px;border:4px solid transparent}
#hist-modal{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.92) !important;display:none;flex-direction:column;z-index:100;overflow-y:auto;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#hist-header{display:flex;justify-content:space-between;padding:10px 15px;background:rgba(34,34,34,0.9);position:sticky;top:0;z-index:10;border-bottom:1px solid #444}
#hist-header button{background:#c0392b !important;color:#fff !important;font-weight:bold !important;padding:12px 20px !important;border-radius:6px !important;border:none !important;font-size:1.1rem !important;min-height:45px !important;cursor:pointer}
#hist-list{padding:15px;display:flex;flex-direction:column;gap:15px}
.hist-item{position:relative;display:flex;flex-direction:column;align-items:flex-start;background:transparent;border-bottom:1px solid #333;padding:35px 0 20px 0;width:100%;text-align:left}
.hist-actions{position:absolute;top:0;left:0;width:100%;display:flex;justify-content:space-between}
.hist-actions button{background:transparent !important;box-shadow:none !important;font-size:1.5rem !important;padding:5px !important;min-height:0 !important;width:auto !important;border:none !important;cursor:pointer}
.btn-fav{color:#888 !important}
.fav-active{color:#f1c40f !important}
.btn-del{color:#888 !important}
.hist-eq{color:#ccc;font-size:1.2rem;margin-bottom:8px;word-break:break-all;width:100%}
.hist-res{color:#00ff00;font-size:2.2rem;font-weight:bold;margin-bottom:12px;word-break:break-all;width:100%}
.hist-note-input{width:100%;background:#333 !important;border:1px solid #555 !important;color:#fff !important;padding:12px !important;border-radius:6px !important;font-size:1.1rem !important;box-sizing:border-box !important;outline:none}
.hist-note-input::placeholder{color:#888 !important}
.group-label{text-align:left;background:rgba(20,25,30,0.85) !important;padding:5px 8px !important;border-radius:6px !important;border:1px solid #3498db !important;line-height:1.2 !important;color:#ecf0f1 !important;box-shadow:0 4px 6px rgba(0,0,0,0.5) !important;font-family:sans-serif;font-size:0.75rem !important;}
.dim-label{font-size:0.75rem !important;}
#app label span{font-size:0.8rem !important;}
#set-menu-main{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1;overflow-y:auto;background:transparent}
.set-save-container{width:100%;flex:1;overflow-y:auto;display:none;flex-direction:column;gap:15px;padding:25px;background:transparent;box-sizing:border-box}
.set-save-container h2{text-align:center;color:#fff;margin:5px 0;text-shadow:0 2px 4px #000}
.set-save-container p{text-align:center;color:#aaa;font-size:1rem;margin:0 0 15px 0;line-height:1.4}
.set-save-container button{height:60px !important;font-size:1.2rem !important;border-radius:12px !important}
.pro-card{background:linear-gradient(to bottom,#555,#333);border:2px solid #777;border-radius:8px;padding:25px 20px;box-shadow:none;margin-bottom:0;flex:1;display:flex;flex-direction:column;justify-content:space-evenly}
.pro-card-title{font-size:1.6rem;font-weight:bold;color:#fff;display:flex;align-items:center;gap:8px}
.pro-btn{border:2px solid #777;border-radius:8px;font-weight:bold;color:#fff;box-shadow:none;cursor:pointer;padding:10px;text-align:center;text-transform:uppercase}
.pro-btn:active{background:#222;transform:translateY(2px)}
.pb-heavy-metal{background:#444;border:2px solid #777}
.pb-metal{background:#444;border:2px solid #777}
.pb-rainbow{background:linear-gradient(to right,#3400e8,#18c218,#d49800,#e81c1c);border:2px solid #777}
.pb-gold{background:#966a30;border:2px solid #777;color:#fff}
.pb-gray{background:#797f84;border:2px solid #777}
.pb-mix{background:#204e75;border:2px solid #777}
.pb-color{background:#c24b3c;border:2px solid #777}
.pb-etched{background:#222;border:2px solid #777;color:#aaa}
.pb-full{width:100%;margin-top:10px;padding:8px !important;font-size:0.9rem !important}
.pro-btn-row{display:flex;gap:10px}
.pro-btn-row .pro-btn{flex:1;min-height:50px}
.pro-lbl{font-size:0.7rem;font-weight:bold;color:#fff;text-align:center;margin:15px 0 8px 0;text-transform:uppercase}