*{box-sizing:border-box}
body{display:flex;align-items:stretch;justify-content:center;height:100vh;margin:0;overflow:hidden;background:linear-gradient(180deg,#e6eefb,#f7fbff);font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}
.calculator{width:100%;max-width:420px;border-radius:0px;padding:18px;background:linear-gradient(180deg,#1f2b3a,#0f1720);box-shadow:0 10px 30px rgba(2,6,23,0.6);color:white;display:flex;flex-direction:column;min-height:100vh}
.display{display:flex;flex-direction:column;justify-content:flex-end;padding:18px;border-radius:16px;background:transparent;flex:1 1 auto;min-height:56px;overflow:hidden}
.main:focus{outline:none;box-shadow:none}
.main{caret-color:rgba(255,255,255,0.9);height:100%;margin-top:10px;}
.display .secondary{font-size:30px;color:rgba(255,255,255,0.6);min-height:20px;margin-bottom:10px;text-align:right}

/* Light-theme overrides for better contrast */
body[data-theme="light"] .display .secondary{ color: rgba(0,0,0,0.6); }
body[data-theme="light"] .main{ caret-color: rgba(0,0,0,0.85); }
.display .main{font-size:48px;font-weight:500;text-align:right;line-height:1;min-height:56px;overflow:auto;word-break:break-word;white-space:pre-wrap}

/* Top separate button row (flexible left/right groups) */
.top-row{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:12px;
	margin-top:12px;
}
.top-row .group{
	display:flex;
	gap:5px;
	align-items:center;
	flex-wrap:wrap;
}
.top-row .group.left{
	justify-content:flex-start;
	padding-left:8px; /* keep inside .calculator padding */
}
.top-row .group.right{
	justify-content:flex-end;
	padding-right:8px;
}
.top-row .group.right > :nth-last-child(2){
	margin-right:12px;
}
.top-row .btn.top{
	font-size:20px;
	padding:0;
	height:42px;
	width:42px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background: none;
	box-shadow: none;
	color: inherit;
}

/* keys stay fixed-size; display area above grows */
.keys{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:12px;margin-top:14px}
.btn{background:linear-gradient(180deg,#e6e6e6,#d1d1d1);border-radius:50%;aspect-ratio: 1 / 1; border:none;font-size:24px;color:#111;cursor:pointer;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;-ms-user-select:none;touch-action:manipulation;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(2px)}
.btn[disabled]{opacity:0.5;cursor:default;box-shadow:none;filter:grayscale(30%)}
.btn.operator{background:linear-gradient(180deg,var(--operator-start,#ff9f0a),var(--operator-end,#ff7a00));color:white}

/* Multi-calc carousel/viewport */
.viewport{width:100vw;height:100vh;overflow:hidden;position:relative;touch-action:pan-y;-ms-touch-action:pan-y}
.carousel{display:flex;height:100%;width:200%;transition:transform 350ms cubic-bezier(.22,.9,.12,1);will-change:transform;touch-action:pan-y;-ms-touch-action:pan-y}
.screen{flex:0 0 100vw;height:100%;display:flex;align-items:stretch;justify-content:center}
.screen .calculator{display:flex;flex-direction:column;align-items:stretch;justify-content:center}
.btn.function{background:linear-gradient(180deg,#6b6e73,#4f5154);color:white}
/* make the ± button match number buttons */
.btn.function[data-action="plusminus"]{background:linear-gradient(180deg,#e6e6e6,#d1d1d1);color:#111}
.btn.wide{grid-column:span 2;border-radius:36px;text-align:left;padding-left:36px}
/* ensure normal 0 button looks like others when not wide */
.btn[data-action="0"]{border-radius:50%}
/* @media (max-width:420px){.calculator{max-width:100%}.btn{height:60px}} */

/* Display decorations: color operators and highlighted parens */
.display .main .display-operator{ color: var(--operator-start); }
.display .main.caret-op{ caret-color: var(--operator-start); }
.display .main .display-paren{ color: inherit; }
.display .main .display-paren.highlight{ color: var(--operator-start); font-weight:600; }
/* When the single selected paren is highlighted, override the default selection styling so our color shows through */
/* Make the selection background consistent inside the calculator display (light blue similar to macOS) */
.display .main::selection{ background: rgba(90,160,255,0.25); color: inherit; }
.display .main::-moz-selection{ background: rgba(90,160,255,0.25); color: inherit; }
/* Ensure operator/paren spans keep their special color when selected and use same selection background */
.display .main .display-paren.highlight::selection{ background: rgba(90,160,255,0.25); color: var(--operator-start); }
.display .main .display-paren.highlight::-moz-selection{ background: rgba(90,160,255,0.25); color: var(--operator-start); }
.display .main .display-operator::selection{ background: rgba(90,160,255,0.25); color: var(--operator-start); }
.display .main .display-operator::-moz-selection{ background: rgba(90,160,255,0.25); color: var(--operator-start); }
/* When the expression has just been evaluated, tint the whole input to operator color */
.display .main.evaluated{ color: var(--operator-start); }
.display .main.evaluated .display-paren{ color: inherit; }
.display .main.evaluated .display-paren.highlight{ color: var(--operator-start); }

/* Per-instance header (name) */
.instance-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.instance-header .user-name{font-size:16px;font-weight:600;color:inherit;min-width:120px;max-width:60%;outline:none;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,0.06);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.instance-header .user-name:focus{box-shadow:0 0 0 3px rgba(0,120,255,0.12)}

.instance-header .memory-display{font-size:14px;color:rgba(255,255,255,0.6);min-width:84px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-theme="light"] .instance-header .memory-display{color:rgba(0,0,0,0.6)}
body[data-theme="dark"] .instance-header .memory-display{color:rgba(255,255,255,0.75)}

/* viewport restored to full height (no global fixed header) */
.viewport{width:100vw;height:100vh;overflow:hidden;position:relative;touch-action:pan-y;-ms-touch-action:pan-y}
.screen{flex:0 0 100vw;height:100%;display:flex;align-items:stretch;justify-content:center}

/* Theme variants applied via body[data-theme] */
body[data-theme="dark"]{background:linear-gradient(180deg,#071426,#001218)}
body[data-theme="dark"] .calculator{background:linear-gradient(180deg,#0f1720,#071023);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,0.6)}
body[data-theme="light"]{background:linear-gradient(180deg,#f7fbff,#ffffff)}
body[data-theme="light"] .calculator{background:linear-gradient(180deg,#ffffff,#f3f5ff);color:#111;box-shadow:0 8px rgba(0,0,0,0.06)}

/* Ensure editable user-name looks good in dark mode */
body[data-theme="dark"] .instance-header .user-name{background:rgba(255,255,255,0.04);color:#fff}
body[data-theme="light"] .instance-header .user-name{background:rgba(0,0,0,0.04);color:inherit}