:root{
	--toolbar-height: 0px;
	--close-bg: #fff;
	--close-color: #111;
	--close-border: 1px solid rgba(0,0,0,0.12);
}
*{box-sizing:border-box}
body,html{height:100%;margin:0;font-family:system-ui,Segoe UI,Roboto,Arial}
.toolbar{height:var(--toolbar-height);display:flex;gap:8px;padding:8px;background:#222;color:#fff;align-items:center}
.toolbar textarea{height:44px;min-width:320px;resize:vertical;padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,0.1);background:#fff;color:#000}
.toolbar button{height:40px;padding:0 12px;border-radius:6px;border:none;background:#0b79f7;color:#fff;cursor:pointer}
.toolbar .hint{margin-left:8px;color:#ddd;font-size:13px}

#boardContainer{position:fixed;left:0;right:0;top:var(--toolbar-height);bottom:0;background:radial-gradient(1200px 600px at 10% 10%, rgba(235,245,255,0.6), transparent 10%), linear-gradient(180deg,#fbfdff,#f3f7fb);overflow:auto}
#board{position:relative;width:3000px;height:2000px;margin:36px;border-radius:12px;background:linear-gradient(180deg,#ffffff,#fbfdff);box-shadow:0 20px 60px rgba(15,30,60,0.06);padding:28px}

.latex-item{position:absolute;background:transparent;cursor:grab;border:none;display:flex;flex-direction:column;padding:0}
.latex-item:active{cursor:grabbing}

.latex-item .itembar{height:0px}
.latex-item .latex-content{padding:0;background:transparent;border-radius:4px}
.latex-item.editing{border:none !important;box-shadow:none !important;background:transparent !important;padding:0 !important;border-radius:0 !important;min-width:0 !important;min-height:0 !important;width:auto !important;height:auto !important;cursor:default}

.latex-item .mathquill-field{display:block;padding:6px;min-height:32px;font-size:18px;width:fit-content;max-width:800px}
.latex-item .mathquill-field .mq-editable-field{border:none;background:transparent;box-shadow:none}
.latex-item .mathquill-field .mq-root-block{white-space:nowrap;overflow:visible}

.equation-editor-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.equation-controls{display:flex;gap:6px;margin-top:4px}
.eq-control-btn{padding:4px 12px;border-radius:4px;border:1px solid #0b79f7;background:#fff;color:#0b79f7;cursor:pointer;font-size:12px;transition:all 0.2s;white-space:nowrap}
.eq-control-btn:hover{background:#f0f7ff}
.eq-control-btn.active{background:#0b79f7;color:#fff}
.equation-results{background:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.1);padding:12px;min-width:300px;max-width:450px;max-height:400px;overflow:auto}
.solve-result{margin-bottom:8px;padding:8px;background:#f8f9fa;border-radius:4px;font-size:14px;line-height:1.6}
.solve-result:last-child{margin-bottom:0}
.solve-error{color:#d93025;font-size:13px;padding:8px;background:#fce8e6;border-radius:4px}
.graph-container{border:1px solid #ddd;border-radius:4px;overflow:hidden;background:#fff}

.win{position:absolute;min-width:320px;min-height:200px;border:1px solid rgba(0,0,0,0.12);background:#fff;box-shadow:0 12px 30px rgba(0,0,0,0.12);resize:both;border-radius:6px;display:flex;flex-direction:column;overflow:auto}
.win .titlebar{height:34px;background:#111827;color:#fff;display:flex;align-items:center;gap:8px;padding:0 8px;border-top-left-radius:6px;border-top-right-radius:6px;cursor:grab;flex:0 0 34px}
.win .titlebar .title{flex:1;font-size:14px}
.win .titlebar button{background:transparent;border:none;color:#fff;cursor:pointer;padding:4px 8px;border-radius:4px}
.win .content{background:#fff;flex:1;min-height:0}
.win iframe{width:100%;height:100%;border:0;display:block}

.control-btn{background:#ef4444}

.edit-area{display:flex;gap:6px}
.edit-area textarea{width:100%;height:120px}
.edit-area button{height:36px}

.no-select{user-select:none;-webkit-user-select:none}

.fab{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid rgba(11,121,247,0.18);background:rgba(11,121,247,0.06);color:#0b79f7;font-size:22px;cursor:pointer}
.fab:hover{background:rgba(11,121,247,0.12)}

.fab{
	position: fixed;
	right: 12px;
	bottom: 12px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.12);
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	cursor: pointer;
	z-index: 1000;
}

.board-controls{
	display: inline-flex;
	gap: 6px;
	align-items: center;
	margin-right: 8px;
}
.board-controls select{ padding:4px 6px; border-radius:4px; }
.board-controls button{ padding:6px 8px; border-radius:4px; border:1px solid #ccc; background:#fff; cursor:pointer; }

.board-toggle-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	position: fixed;
	right: 12px;
	bottom: 72px; 
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.12);
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
	cursor: pointer;
	z-index: 1001;
}

.board-sidebar{
	position: fixed;
	right: 12px;
	bottom: 140px; 
	width: 340px;
	z-index: 1000;
	max-height: 60vh;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 36px rgba(0,0,0,0.12);
	overflow: auto;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transform: translateY(8px) scale(0.98);
	opacity: 0;
	pointer-events: none;
	transition: transform 220ms cubic-bezier(.2,.9,.2,1), opacity 180ms ease;
}

.board-sidebar.open{
	transform: translateY(0) scale(1);
	opacity: 1;
	pointer-events: auto;
}

.board-sidebar .boards-header{display:flex;align-items:center;gap:8px}
.board-sidebar h3{margin:0;font-size:16px}
.board-sidebar .boards-controls{margin-left:auto;display:flex;gap:6px}
.board-list{display:flex;flex-direction:column;gap:8px}
.board-item{display:flex;gap:8px;align-items:flex-start;padding:8px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:#fafafa}
.board-item .meta{flex:1;min-width:0}
.board-item .meta .title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-item .meta .time{font-size:12px;color:#666}
.board-item .actions{display:flex;flex-direction:column;gap:6px}
.board-item .preview{display:flex;flex-direction:column;gap:2px;max-height:60px;overflow:hidden}
.board-item .preview .p{font-size:12px;color:#222}
.board-small-btn{padding:6px 8px;border-radius:6px;border:1px solid #ddd;background:#fff;cursor:pointer}
.board-new{display:flex;gap:8px}
.board-empty{color:#666;font-size:13px;padding:8px;text-align:center}

.board-warning{font-size:12px;color:#7a3b00;background:#fff4e5;border:1px solid #f5d6a3;padding:8px;border-radius:6px}

.settings-panel{position: fixed; right: 12px; top: 72px; width: 300px; background:#fff; border-radius:10px; box-shadow:0 12px 36px rgba(0,0,0,0.12); padding:12px; display:flex;flex-direction:column;gap:8px; transform: translateY(8px) scale(0.98); opacity:0; pointer-events:none; transition: transform 220ms, opacity 160ms}
.settings-panel.open{transform: translateY(0) scale(1); opacity:1; pointer-events:auto; z-index:1003}
.settings-panel h4{margin:0;font-size:14px}
.settings-row{display:flex;align-items:center;gap:8px}
.settings-row label{flex:1;font-size:13px}
.settings-row input[type="number"]{width:72px}

.latex-item.selected{border-color:#0b79f7;background:rgba(11,121,247,0.03)}
.selection-rect{position:absolute;border:2px dashed rgba(11,121,247,0.6);background:rgba(11,121,247,0.06);pointer-events:none;z-index:999}

.settings-btn{position:fixed;right:12px;top:12px;bottom:auto;width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,0.12);box-shadow:0 6px 18px rgba(0,0,0,0.12);display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;z-index:1004}

.grid-overlay{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;z-index:2;opacity:0.9;display:none}
.grid-overlay.visible{display:block}

.close-root{position:fixed;left:12px;bottom:12px;width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--close-bg);border:var(--close-border);color:var(--close-color);text-decoration:none;font-size:20px;z-index:1100;box-shadow:0 6px 18px rgba(0,0,0,0.08)}
.close-root:active{transform:translateY(1px)}