body,html{margin:0;padding:0;width:100%;height:100vh;height:100dvh;overflow:hidden;background-color:#353b40;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%}
#header-bar{background:#444;padding:8px;display:flex;align-items:center;gap:10px}
#app-logo{height:25px}
#app-title{flex:1;font-size:1rem;font-weight:bold;display:flex;align-items:center}
#header-bar button{min-height:40px;border-radius:20px;padding:0 15px;font-weight:bold;border:none;box-shadow:0 3px 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:#1a1a1a;color:#eee;font-family:monospace;padding:15px;display:flex;flex-direction:column;align-items:flex-start;position:relative;margin:10px;border-radius:10px;border:1px solid #111;box-shadow:inset 0 0 15px rgba(0,0,0,0.8);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:10px;padding-bottom:10px;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}
#fav-list::-webkit-scrollbar{display:none}
#mini-hist{display:flex;flex-direction:column-reverse;align-items:flex-end;text-align:right;flex:1;overflow-y:auto;scrollbar-width:none}
#mini-hist::-webkit-scrollbar{display:none}
.mini-hist-line{color:#888;white-space:nowrap}
.fav-line{color:#f1c40f;white-space:nowrap;margin-top:4px}
.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:5px}
#main-val::-webkit-scrollbar{display:none}
#mem-ind{position:absolute;bottom:15px;right:15px;color:#f39c12;font-size:1.2rem;font-weight:bold}
.grid{display:grid !important;gap:8px !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:#5c6b73 !important;border-radius:20px 20px 0 0 !important;margin:5px 0 0 0 !important;padding-top:15px !important;box-shadow:0 -5px 15px rgba(0,0,0,0.2)}
#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:none !important;position:relative !important;overflow:hidden !important;box-shadow:0 4px 0 rgba(0,0,0,0.4),0 5px 10px rgba(0,0,0,0.3) !important;color:#fff !important;transition:box-shadow 0.05s ease-out,transform 0.05s ease-out !important;cursor:pointer !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(3px) !important;box-shadow:0 1px 0 rgba(0,0,0,0.4),0 2px 5px rgba(0,0,0,0.3) !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%;background:#1e272e;display:none;flex-direction:column;z-index:100;overflow-y:auto}
#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-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:none;width:50px;height:30px;padding:0;cursor:pointer;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.3);background:transparent}
#set-colors .color-row{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid #444}
#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:#1e272e}
#set-menu-layout::-webkit-scrollbar-thumb,#set-menu-color::-webkit-scrollbar-thumb{background:#636e72;border-radius:10px;border:4px solid #1e272e}
#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)}
#hist-header{display:flex;justify-content:space-between;padding:10px 15px;background:#222;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}
.set-save-container{width:100%;flex:1;overflow-y:auto;display:none;flex-direction:column;gap:10px;padding:15px;background:#a0b0b9;box-sizing:border-box}
.set-save-container h2{text-align:center;color:#000;margin:5px 0}
.set-save-container p{text-align:center;color:#444;font-size:0.9rem;margin:0 0 10px 0}
.set-save-container button{height:50px !important;font-size:1.2rem !important;border-radius:12px !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;}