/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
/* ===========================================================
   Calendar / Todo — visual styles
   Dark + light themes match the supplied mocks exactly.
   =========================================================== */

:root {
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
    system-ui, sans-serif;
  --r-window: 18px;
  --r-row: 10px;
  --tap: 44px;
  --bdf: blur(40px) saturate(1.4);
}

/* ---- Dark theme (default) ---- */
:root,
[data-theme='dark'] {
  --accent-fg: #050e07;
  --card-bg: rgba(0, 0, 0, 0.20);
  --bg-page: #2a1a13;
  --bg-window: rgba(0, 0, 0, 0.35);
  --bg-window-2: rgba(0, 0, 0, 0.35);
  --titlebar: rgba(0, 0, 0, 0);
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, 0.78);
  --text-3: rgba(255, 255, 255, 0.55);
  --text-muted: rgba(255, 255, 255, 0.35);
  --accent-now: #41dc7e;
  --accent-due: #ff6a55;
  --accent-soon: #d9986b;
  --divider: rgba(255, 255, 255, 0.10);
  --hover: rgba(255, 255, 255, 0.06);
  --pressed: rgba(255, 255, 255, 0.10);
  --surface-popover: rgba(20, 18, 16, 0.92);
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.35);
  --traffic-r: #ff5f57;
  --traffic-y: #febc2e;
  --traffic-g: #28c840;
}

/* ---- Light theme ---- */
[data-theme='light'] {
  --accent-fg: #ffffff;
  --card-bg: rgba(42, 26, 19, 0.08);
  --bg-page: #fcead9;
  --bg-window: #fdeee2;
  --bg-window-2: #fdeee2;
  --titlebar: #fdeee2;
  --text: #2a1a13;
  --text-2: #5b463a;
  --text-3: #8a7567;
  --text-muted: #a8978a;
  --accent-now: #1aaf5d;
  --accent-due: #e54c39;
  --accent-soon: #b87741;
  --divider: rgba(42, 26, 19, 0.10);
  --hover: rgba(42, 26, 19, 0.04);
  --pressed: rgba(42, 26, 19, 0.07);
  --shadow: 0 30px 80px rgba(80, 30, 0, 0.18), 0 8px 24px rgba(80, 30, 0, 0.10);
  --surface-popover: rgba(253, 238, 226, 0.96);
}

/* ---- Midnight theme ---- */
[data-theme='midnight'] {
  --accent-fg: #03080f;
  --card-bg: rgba(0, 0, 0, 0.20);
  --bg-page: #080e1a;
  --bg-window: rgba(10, 20, 48, 0.45);
  --bg-window-2: rgba(10, 20, 48, 0.45);
  --titlebar: rgba(10, 20, 48, 0);
  --text: #e8edf5;
  --text-2: rgba(232, 237, 245, 0.78);
  --text-3: rgba(232, 237, 245, 0.50);
  --text-muted: rgba(232, 237, 245, 0.30);
  --accent-now: #4fc8f5;
  --accent-due: #f56a9f;
  --accent-soon: #a78bfa;
  --divider: rgba(232, 237, 245, 0.10);
  --hover: rgba(232, 237, 245, 0.06);
  --pressed: rgba(232, 237, 245, 0.10);
  --surface-popover: rgba(8, 18, 42, 0.94);
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 8px 24px rgba(0, 0, 0, 0.40);
  --traffic-r: #ff5f57;
  --traffic-y: #febc2e;
  --traffic-g: #28c840;
}

/* ---- Forest theme ---- */
[data-theme='forest'] {
  --accent-fg: #040a05;
  --card-bg: rgba(0, 0, 0, 0.20);
  --bg-page: #071208;
  --bg-window: rgba(8, 24, 10, 0.42);
  --bg-window-2: rgba(8, 24, 10, 0.42);
  --titlebar: rgba(8, 24, 10, 0);
  --text: #cdecd2;
  --text-2: rgba(205, 236, 210, 0.76);
  --text-3: rgba(205, 236, 210, 0.50);
  --text-muted: rgba(205, 236, 210, 0.30);
  --accent-now: #5de87a;
  --accent-due: #f5a05a;
  --accent-soon: #8ed4a0;
  --divider: rgba(205, 236, 210, 0.10);
  --hover: rgba(205, 236, 210, 0.06);
  --pressed: rgba(205, 236, 210, 0.10);
  --surface-popover: rgba(7, 18, 8, 0.94);
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.60), 0 8px 24px rgba(0, 0, 0, 0.35);
  --traffic-r: #ff5f57;
  --traffic-y: #febc2e;
  --traffic-g: #28c840;
}

/* ---- Rose theme ---- */
[data-theme='rose'] {
  --accent-fg: #0f0508;
  --card-bg: rgba(0, 0, 0, 0.20);
  --bg-page: #180a0e;
  --bg-window: rgba(30, 10, 18, 0.42);
  --bg-window-2: rgba(30, 10, 18, 0.42);
  --titlebar: rgba(30, 10, 18, 0);
  --text: #f5e0e8;
  --text-2: rgba(245, 224, 232, 0.78);
  --text-3: rgba(245, 224, 232, 0.50);
  --text-muted: rgba(245, 224, 232, 0.30);
  --accent-now: #f580a8;
  --accent-due: #ff6a55;
  --accent-soon: #e8b4c4;
  --divider: rgba(245, 224, 232, 0.10);
  --hover: rgba(245, 224, 232, 0.06);
  --pressed: rgba(245, 224, 232, 0.10);
  --surface-popover: rgba(24, 10, 16, 0.94);
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.60), 0 8px 24px rgba(0, 0, 0, 0.35);
  --traffic-r: #ff5f57;
  --traffic-y: #febc2e;
  --traffic-g: #28c840;
}

/* ---- Ivory theme (cool light) ---- */
[data-theme='ivory'] {
  --accent-fg: #ffffff;
  --card-bg: rgba(26, 26, 24, 0.08);
  --bg-page: #f0f0ec;
  --bg-window: #f8f8f5;
  --bg-window-2: #f8f8f5;
  --titlebar: #f8f8f5;
  --text: #1a1a18;
  --text-2: #4a4a44;
  --text-3: #7a7a6e;
  --text-muted: #a4a498;
  --accent-now: #2a9a5e;
  --accent-due: #c44030;
  --accent-soon: #9a6030;
  --divider: rgba(26, 26, 24, 0.10);
  --hover: rgba(26, 26, 24, 0.04);
  --pressed: rgba(26, 26, 24, 0.08);
  --surface-popover: rgba(245, 245, 242, 0.97);
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.07);
  --traffic-r: #ff5f57;
  --traffic-y: #febc2e;
  --traffic-g: #28c840;
}

/* ---- Orbit theme (Lunar Pulse) ---- */
[data-theme='orbit'] {
  --accent-fg: #ffffff;
  --card-bg: rgba(244, 244, 241, 0.10);
  --font-sans: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
    system-ui, sans-serif;
  --r-window: 32px;
  --r-row: 0px;
  --bdf: none;
  --bg-page: #e8e8e4;
  --bg-window: #090909;
  --bg-window-2: #090909;
  --titlebar: #090909;
  --text: #f4f4f1;
  --text-2: rgba(244, 244, 241, 0.66);
  --text-3: rgba(244, 244, 241, 0.42);
  --text-muted: rgba(244, 244, 241, 0.26);
  --accent-now: #ff4a1c;
  --accent-due: #ff4a1c;
  --accent-soon: #a3a39f;
  --divider: rgba(244, 244, 241, 0.12);
  --hover: rgba(244, 244, 241, 0.08);
  --pressed: rgba(244, 244, 241, 0.14);
  --surface-popover: rgba(9, 9, 9, 0.96);
  --shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.035),
    0 6.7px 5.3px rgba(0, 0, 0, 0.047),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.07),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
  --traffic-r: #ff4a1c;
  --traffic-y: #a3a39f;
  --traffic-g: #f4f4f1;
}

/* ---- Mindful theme (Mindful Moments) ---- */
[data-theme='mindful'] {
  --accent-fg: #1c322d;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --r-window: 20px;
  --r-row: 8px;
  --bdf: none;
  --bg-page: #EDE8E0;
  --bg-window: #F8F3EE;
  --bg-window-2: #A2C2B3;
  --titlebar: #F8F3EE;
  --text: #1C322D;
  --text-2: rgba(28, 50, 45, 0.72);
  --text-3: rgba(28, 50, 45, 0.48);
  --text-muted: rgba(28, 50, 45, 0.32);
  --accent-now: #EBB552;
  --accent-due: #C95D3A;
  --accent-soon: #A2C2B3;
  --divider: rgba(28, 50, 45, 0.09);
  --hover: rgba(28, 50, 45, 0.05);
  --pressed: rgba(28, 50, 45, 0.09);
  --surface-popover: rgba(248, 243, 238, 0.97);
  --shadow: 0 30px 80px rgba(28, 50, 45, 0.14), 0 8px 24px rgba(28, 50, 45, 0.08);
  --traffic-r: #C95D3A;
  --traffic-y: #EBB552;
  --traffic-g: #2A6B4A;
}

[data-theme='mindful'] .bg,
[data-theme='mindful'] .bg.bg-gradient {
  background-color: #EDE8E0 !important;
  background-image: none !important;
}

/* Sidebar gets the forest green panel treatment */
[data-theme='mindful'] .sidebar {
  background: #1C322D;
  border-right-color: rgba(248, 243, 238, 0.08);
  border-radius: var(--r-window) 0 0 var(--r-window);
}

[data-theme='mindful'] .sidebar-logo {
  color: #F8F3EE;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-transform: none;
}

[data-theme='mindful'] .sidebar-item {
  color: rgba(248, 243, 238, 0.60);
}

[data-theme='mindful'] .sidebar-item svg {
  color: rgba(248, 243, 238, 0.50);
}

[data-theme='mindful'] .sidebar-item:hover {
  background: rgba(248, 243, 238, 0.10);
  color: #F8F3EE;
}

[data-theme='mindful'] .sidebar-item:hover svg {
  color: #F8F3EE;
}

[data-theme='mindful'] .sidebar-item.is-active {
  background: rgba(235, 181, 82, 0.18);
  color: #EBB552;
}

[data-theme='mindful'] .sidebar-item.is-active svg {
  color: #EBB552;
}

[data-theme='mindful'] .sidebar-foot {
  border-top-color: rgba(248, 243, 238, 0.10);
}

[data-theme='mindful'] .auth-sidebar-identifier {
  color: rgba(248, 243, 238, 0.60);
}

[data-theme='mindful'] .sidebar-item:hover .auth-sidebar-identifier {
  color: #F8F3EE;
}

[data-theme='mindful'] .titlebar-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.01em;
}

[data-theme='mindful'] .section-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  color: var(--text);
  letter-spacing: 0;
  padding-left: 18px;
  padding-right: 18px;
}

[data-theme='mindful'] .sidebar-logo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-transform: none;
}

[data-theme='mindful'] .settings-section-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

[data-theme='mindful'] .note-title-input,
[data-theme='mindful'] .detail-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.02em;
}

[data-theme='mindful'] .tiptap-editor h1,
[data-theme='mindful'] .tiptap-editor h2 {
  font-family: var(--font-display);
  font-weight: 400;
}

/* Icon wrapper treatment — rounded square surface with border */
[data-theme='mindful'] .iconbtn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(28, 50, 45, 0.22);
  color: var(--text);
}
[data-theme='mindful'] .iconbtn:hover {
  background: rgba(28, 50, 45, 0.06);
  border-color: rgba(28, 50, 45, 0.32);
}
[data-theme='mindful'] .notes-list-panel .iconbtn {
  background: transparent;
  border: 1px solid rgba(28, 50, 45, 0.25);
  color: #1C322D;
}
[data-theme='mindful'] .notes-list-panel .iconbtn:hover {
  background: rgba(28, 50, 45, 0.07);
  border-color: rgba(28, 50, 45, 0.35);
}

[data-theme='mindful'] .home-mail-row-icon {
  background: transparent;
  border: 1px solid rgba(28, 50, 45, 0.22);
  color: #1C322D;
  border-radius: 8px;
}
[data-theme='mindful'] .notes-list-panel .row-leading {
  width: 28px;
  height: 28px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(28, 50, 45, 0.22);
  border-radius: 8px;
  color: #1C322D;
}
[data-theme='mindful'] .sidebar .iconbtn {
  background: rgba(248, 243, 238, 0.12);
  border-color: rgba(248, 243, 238, 0.15);
  color: rgba(248, 243, 238, 0.65);
}
[data-theme='mindful'] .sidebar .iconbtn:hover {
  background: rgba(248, 243, 238, 0.22);
}

/* Secondary list panel — sage green surface */
[data-theme='mindful'] .notes-list-panel {
  background: #A2C2B3;
  border-right-color: rgba(28, 50, 45, 0.12);
}

[data-theme='mindful'] .notes-list-panel .scroll {
  background: #A2C2B3;
}

[data-theme='mindful'] .notes-list-panel .titlebar,
[data-theme='mindful'] .notes-list-panel .notes-panel-header {
  background: #A2C2B3;
  border-bottom-color: rgba(28, 50, 45, 0.12);
}

[data-theme='mindful'] .notes-list-panel .home-inbox-toolbar {
  border-bottom-color: rgba(28, 50, 45, 0.12);
}

[data-theme='mindful'] .notes-list-panel .row:hover,
[data-theme='mindful'] .notes-list-panel .row.is-selected {
  background: rgba(28, 50, 45, 0.10);
}

[data-theme='mindful'] .notes-list-panel .addrow:hover {
  background: rgba(28, 50, 45, 0.07);
}

/* Cards on the cream content panel */
[data-theme='mindful'] .insight-card {
  background: rgba(162, 194, 179, 0.28);
  backdrop-filter: none;
}
[data-theme='mindful'] .insight-label {
  color: var(--text-3);
}
[data-theme='mindful'] .insight-text {
  color: var(--text);
  font-weight: 500;
}
[data-theme='mindful'] .insight-refresh {
  color: var(--text-muted);
}
[data-theme='mindful'] .insight-refresh:hover {
  color: var(--text-2);
}

[data-theme='mindful'] .home-link-card {
  background: rgba(162, 194, 179, 0.28);
}
[data-theme='mindful'] .home-link-card:hover {
  background: rgba(162, 194, 179, 0.40);
  filter: none;
  transform: translateY(-2px);
}
[data-theme='mindful'] .home-link-card-thumb {
  background: rgba(162, 194, 179, 0.40);
  color: var(--text-2);
}
[data-theme='mindful'] .home-link-card-title {
  color: var(--text);
}
[data-theme='mindful'] .home-link-card-host {
  color: var(--text-3);
}

[data-theme='mindful'] .home-note-card-art {
  background: rgba(162, 194, 179, 0.28);
}
[data-theme='mindful'] .home-note-card-placeholder {
  background: rgba(162, 194, 179, 0.28);
}

/* Generous padding matching the 40px card rhythm from the design */
[data-theme='mindful'] .bg[data-width="full"] .win-content .scroll {
  padding-left: 16px;
  padding-right: 16px;
}

[data-theme='mindful'] .section-label {
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 20px;
}

[data-theme='mindful'] .row,
[data-theme='mindful'] .addrow {
  padding-left: 26px;
  padding-right: 26px;
}

[data-theme='mindful'] .note-detail-body {
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 48px;
}

[data-theme='mindful'] .tiptap-toolbar-wrap {
  margin-left: 40px !important;
  margin-right: 40px !important;
}

[data-theme='mindful'] .bg[data-width="full"] .notes-detail-panel > .scroll {
  padding-top: 36px;
}

[data-theme='mindful'] .note-panel-head {
  padding: 28px 40px 0;
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
html { background-color: #000; }

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--text);
}

/* full-bleed colored backdrop */
.bg {
  position: relative;
  min-height: 100dvh;
  background-color: #0e0907;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 56px 24px 80px;
}
.bg.bg-gradient {
  background:
    radial-gradient(1200px 800px at 20% 0%, #f1c44d, transparent 55%),
    radial-gradient(1100px 900px at 80% 30%, #ff6a3d, transparent 55%),
    radial-gradient(1200px 1000px at 60% 100%, #d4248c, transparent 55%),
    linear-gradient(135deg, #c63b22 0%, #8a1c46 70%);
}
.bg.bg-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.bg > * { position: relative; z-index: 1; }

.bg-shuffle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  z-index: 5;
  transition: background 120ms ease, transform 200ms ease;
}
.bg-shuffle:hover {
  background: rgba(0, 0, 0, 0.55);
  transform: rotate(60deg);
}
.bg-shuffle:active { transform: rotate(120deg) scale(0.95); }

/* ---- Claude Code theme ---- */
/* Colors from the official shadcn Claude dark palette (oklch) */
[data-theme='claude-code'] {
  --font-sans: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --r-window: 8px;
  --r-row: 4px;
  --bdf: none;
  --card-bg: oklch(0.31 0.00 106.60 / 0.50);
  --bg-page:    oklch(0.22 0.00 106.71);   /* --muted */
  --bg-window:  oklch(0.27 0.00 106.64);   /* --background */
  --bg-window-2: oklch(0.31 0.00 106.60);  /* --popover */
  --titlebar:   oklch(0.24 0.00 67.71);    /* --sidebar */
  --text:       oklch(0.81 0.01 93.01);    /* --foreground */
  --text-2:     oklch(0.81 0.01 93.01 / 0.78);
  --text-3:     oklch(0.77 0.02 99.07);    /* --muted-foreground */
  --text-muted: oklch(0.77 0.02 99.07 / 0.55);
  --accent-now: oklch(0.67 0.13 38.76);    /* --primary (terracotta) */
  --accent-due: oklch(0.64 0.21 25.33);    /* --destructive */
  --accent-soon: oklch(0.60 0.08 50.00);
  --divider:    oklch(0.36 0.01 106.89 / 0.80); /* --border */
  --hover:      oklch(0.81 0.01 93.01 / 0.06);
  --pressed:    oklch(0.81 0.01 93.01 / 0.11);
  --surface-popover: oklch(0.31 0.00 106.60 / 0.97);
  --shadow: 0 30px 80px oklch(0 0 0 / 0.65), 0 8px 24px oklch(0 0 0 / 0.45);
  --traffic-r: #ff5f57;
  --traffic-y: #febc2e;
  --traffic-g: #28c840;
}

[data-theme='claude-code'] .bg,
[data-theme='claude-code'] .bg.bg-gradient {
  background-color: oklch(0.22 0.00 106.71) !important;
  background-image: none !important;
}

/* Sidebar active + hover states */
[data-theme='claude-code'] .sidebar-item.is-active {
  background: oklch(0.67 0.13 38.76 / 0.15);
  color: oklch(0.67 0.13 38.76);
  font-weight: 600;
}
[data-theme='claude-code'] .sidebar-item.is-active svg {
  color: oklch(0.67 0.13 38.76);
}
[data-theme='claude-code'] .sidebar-item:hover {
  background: oklch(0.81 0.01 93.01 / 0.07);
  color: oklch(0.81 0.01 93.01);
}

/* Tab / category active states */
[data-theme='claude-code'] .link-tab.is-active,
[data-theme='claude-code'] .link-tab-group.is-active,
[data-theme='claude-code'] .links-cat-item.is-active {
  background: oklch(0.67 0.13 38.76 / 0.15);
  color: oklch(0.67 0.13 38.76);
}
[data-theme='claude-code'] .note-page-tab.is-active {
  color: oklch(0.67 0.13 38.76);
  border-bottom-color: oklch(0.67 0.13 38.76);
}

/* Theme toggle selected pill */
[data-theme='claude-code'] .theme-toggle-btn.is-selected {
  background: oklch(0.67 0.13 38.76);
  color: oklch(1.00 0 0);
}

/* Selected inbox row */
[data-theme='claude-code'] .home-mail-row.is-selected {
  background: oklch(0.67 0.13 38.76 / 0.13);
  box-shadow: inset 2px 0 0 oklch(0.67 0.13 38.76);
}
[data-theme='claude-code'] .home-mail-row.is-selected:hover {
  background: oklch(0.67 0.13 38.76 / 0.18);
}

/* Selected to-do row + selected note in list */
[data-theme='claude-code'] .row.is-selected,
[data-theme='claude-code'] .row.row-note.is-selected {
  background: oklch(0.67 0.13 38.76 / 0.13);
}
[data-theme='claude-code'] .row.is-selected .row-title,
[data-theme='claude-code'] .row.row-note.is-selected .row-title {
  color: oklch(0.67 0.13 38.76);
}
[data-theme='claude-code'] .row.is-selected .row-leading,
[data-theme='claude-code'] .row.row-note.is-selected .row-leading {
  color: oklch(0.67 0.13 38.76 / 0.80);
}

/* ---- Spotlight command search ---- */
.spotlight-trigger {
  position: static;
  width: 28px;
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.spotlight-trigger:hover {
  background: var(--hover);
  color: var(--text);
}
.spotlight-trigger:active { transform: scale(0.98); }
.spotlight-trigger span,
.spotlight-trigger kbd { display: none; }
.spotlight-trigger kbd,
.spotlight-footer kbd {
  min-width: 24px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--divider);
  border-radius: 6px;
  background: var(--hover);
  color: var(--text-2);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.spotlight-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(22px, 8vh, 72px) 18px 18px;
  background:
    radial-gradient(900px 520px at 50% 0%, color-mix(in srgb, var(--text) 7%, transparent), transparent 58%),
    color-mix(in srgb, var(--bg-page) 28%, transparent);
  backdrop-filter: blur(7px) saturate(1.12);
  -webkit-backdrop-filter: blur(7px) saturate(1.12);
  animation: spotlight-fade 150ms ease both;
}
.spotlight-panel {
  width: min(640px, 100%);
  min-height: min(620px, calc(100dvh - 44px));
  max-height: calc(100dvh - 44px);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
  border: 1px solid var(--divider);
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--text);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 color-mix(in srgb, var(--text) 9%, transparent);
  backdrop-filter: var(--bdf);
  -webkit-backdrop-filter: var(--bdf);
  transform-origin: 50% 0%;
  animation: spotlight-panel-in 210ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.spotlight-search {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 26px;
  border-bottom: 1px solid var(--divider);
  background: color-mix(in srgb, var(--surface-popover) 34%, transparent);
  color: var(--text-2);
}
.spotlight-search > svg { flex: none; }
.spotlight-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  caret-color: var(--text);
  font: inherit;
  font-size: 24px;
  line-height: 1.1;
}
.spotlight-search input::placeholder { color: var(--text-3); }
.spotlight-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  padding: 14px 26px 12px;
  border-bottom: 1px solid var(--divider);
  background: color-mix(in srgb, var(--surface-popover) 18%, transparent);
  overflow-x: auto;
}
.spotlight-chip {
  appearance: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--divider);
  border-radius: 10px;
  background: color-mix(in srgb, var(--hover) 72%, transparent);
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.spotlight-chip:hover {
  background: color-mix(in srgb, var(--pressed) 82%, transparent);
  border-color: color-mix(in srgb, var(--text) 20%, transparent);
  color: var(--text);
}
.spotlight-chip:active { transform: scale(0.98); }
.spotlight-chip.is-active {
  background: color-mix(in srgb, var(--text) 12%, transparent);
  border-color: color-mix(in srgb, var(--text) 24%, transparent);
  color: var(--text);
}
.spotlight-chip-inline {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 13px;
  font-size: 16px;
}
.spotlight-results {
  min-height: 0;
  overflow: auto;
  padding: 10px 12px;
}
.spotlight-row {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  padding: 9px 12px;
  transition: background 140ms ease, transform 140ms ease;
}
.spotlight-row:hover,
.spotlight-row[data-active="true"] {
  background: color-mix(in srgb, var(--hover) 86%, transparent);
}
.spotlight-row:active { transform: scale(0.992); }
.spotlight-row-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--divider);
  border-radius: 11px;
  background: color-mix(in srgb, var(--hover) 74%, transparent);
  color: var(--text-2);
}
.spotlight-row-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.spotlight-row-title,
.spotlight-row-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spotlight-row-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 760;
}
.spotlight-row-detail {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 560;
}
.spotlight-row-kind {
  justify-self: end;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--divider);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
}
.spotlight-empty {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--text-3);
  text-align: center;
}
.spotlight-empty strong {
  color: var(--text);
  font-size: 20px;
}
.spotlight-empty span {
  max-width: 300px;
  font-size: 14px;
}
.spotlight-footer {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 26px;
  border-top: 1px solid var(--divider);
  background: color-mix(in srgb, var(--surface-popover) 26%, transparent);
  color: var(--text-3);
  font-size: 12px;
  font-weight: 760;
}
.spotlight-footer span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.spotlight-footer span:last-child {
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes spotlight-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes spotlight-panel-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 620px) {
  .spotlight-layer {
    align-items: stretch;
    padding: 10px;
  }
  .spotlight-panel {
    min-height: min(680px, calc(100dvh - 20px));
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
  }
  .spotlight-search {
    min-height: 76px;
    gap: 12px;
    padding: 0 16px;
  }
  .spotlight-search input { font-size: 19px; }
  .spotlight-chip-inline {
    min-height: 36px;
    padding: 0 11px;
    border-radius: 11px;
    font-size: 13px;
  }
  .spotlight-filters {
    gap: 7px;
    padding: 13px 14px;
  }
  .spotlight-chip {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 12px;
  }
  .spotlight-results { padding: 8px; }
  .spotlight-row {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    min-height: 56px;
    padding: 9px 10px;
  }
  .spotlight-row-icon {
    width: 34px;
    height: 34px;
  }
  .spotlight-row-kind { display: none; }
  .spotlight-footer {
    gap: 10px;
    padding: 0 14px;
    font-size: 11px;
  }
  .spotlight-footer span:nth-child(2) { display: none; }
}

/* ---- AnimateIcons preview ---- */
.animateicons-window {
  max-width: 760px;
  min-height: auto;
  padding: 22px;
  gap: 22px;
}
.animateicons-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.animateicons-kicker {
  margin: 0 0 5px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
}
.animateicons-hero h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0;
}
.animateicons-trigger {
  appearance: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--divider);
  border-radius: 8px;
  background: var(--text);
  color: var(--bg-page);
  padding: 0 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.animateicons-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.animateicons-card {
  appearance: none;
  min-height: 142px;
  border: 1px solid var(--divider);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.animateicons-card:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  transform: translateY(-2px);
}
.animateicons-orbit {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.animateicons-note {
  border-top: 1px solid var(--divider);
  padding-top: 16px;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
}
.animateicons-note code {
  color: var(--text-2);
}

@media (max-width: 620px) {
  .animateicons-window {
    padding: 18px;
  }
  .animateicons-hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .animateicons-hero h1 {
    font-size: 28px;
  }
  .animateicons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .animateicons-card {
    min-height: 124px;
  }
}

/* ---- Window shell ---- */
.bg[data-width="wide"] .window { max-width: 760px; }
.bg[data-width="full"] {
  height: 100vh;
  overflow: hidden;
  padding: 40px;
  align-items: center;
}
.bg[data-width="full"] .window {
  max-width: 1600px;
  flex-direction: row;
  align-items: stretch;
  height: calc(100vh - 80px);
  overflow: visible;
}
.bg[data-width="full"] .win-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 0 var(--r-window) var(--r-window) 0;
}
.bg[data-width="full"] .window:not(:has(.sidebar)) .win-content {
  border-radius: var(--r-window);
}
.bg[data-width="full"] .win-content .scroll {
  flex: 1;
  min-height: 0;
}

/* ---- Notes master-detail split (full mode only) ---- */
.bg[data-width="full"] .notes-split {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.bg[data-width="full"] .notes-list-panel {
  width: 280px;
  min-width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bg[data-width="full"] .notes-list-panel .scroll {
  flex: 1;
  min-height: 0;
}
.bg[data-width="full"] .notes-detail-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bg[data-width="full"] .notes-detail-panel > .scroll {
  padding-top: 18px;
}
.bg[data-width="full"] .notes-detail-panel > .scroll:has(> .hw-chat) {
  padding: 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.bg[data-width="full"] .notes-detail-panel > .scroll > .hw-chat {
  height: 100%;
}
.note-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Narrow/wide note detail route — give the window a fixed height so the
   note panel's flex children (especially note-detail-body) can scroll */
.note-detail-window {
  height: 88vh;
}
@media (max-width: 600px) {
  .note-detail-window {
    height: 100dvh;
    max-width: 100%;
    border-radius: 0;
  }
}
.note-panel-head {
  flex-shrink: 0;
  container-type: inline-size;
  container-name: detail;
}
.note-detail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 22px 32px;
}
.note-detail-body .tiptap-host {
  margin-top: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  overflow: visible;
}
.note-detail-body .tiptap-editor {
  padding: 0;
}
/* External toolbar wrapper — rendered above the scroll container */
.tiptap-toolbar-wrap {
  flex-shrink: 0;
  margin: 0 22px 10px !important;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--divider);
}
.tiptap-toolbar-wrap.is-hidden {
  display: none;
}

/* ── Note page tabs ──────────────────────────────────────── */
.note-pages-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 22px;
  border-bottom: 1px solid var(--divider);
  overflow-x: auto;
  scrollbar-width: none;
}
.note-pages-bar::-webkit-scrollbar { display: none; }

.note-page-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 20px;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  background: transparent;
  transition: color 0.12s, border-color 0.12s;
  font-size: 13px;
  color: var(--text-secondary);
}
.note-page-tab:hover {
  color: var(--text);
}
.note-page-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--text);
}
.note-page-tab-label {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.note-page-tab-input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--text);
  width: 80px;
  padding: 0;
  font-family: inherit;
}
.note-page-tab-close {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity 0.1s;
  display: flex;
  align-items: center;
}
.note-page-tab:hover .note-page-tab-close,
.note-page-tab.is-active .note-page-tab-close {
  opacity: 0.6;
}
.note-page-tab-close:hover { opacity: 1 !important; }

.note-page-add {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 13px;
  font-family: inherit;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.note-page-add:hover {
  background: var(--hover);
  color: var(--text);
}
/* Panel headers inside the notes split should not show the titlebar background */
.notes-panel-header {
  background: transparent;
}
.home-panel-actions {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
.home-create-trigger {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-window) 88%, transparent);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 180ms ease, color 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease;
}
.home-create-trigger:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}
.home-create-trigger.is-active {
  background: color-mix(in srgb, var(--text) 14%, var(--bg-window));
}
.home-create-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 300ms cubic-bezier(.22,1,.36,1);
}
.home-create-trigger.is-active .home-create-trigger-icon {
  transform: rotate(45deg);
}
.home-create-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(10px, 10px, 0) scale(0.96);
  filter: blur(10px);
  transition:
    opacity 240ms ease,
    transform 420ms cubic-bezier(.22,1,.36,1),
    filter 240ms ease;
}
.home-create-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}
.home-create-item {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 124px;
  justify-content: flex-start;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--divider) 92%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-window) 86%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(.22,1,.36,1),
    background 140ms ease,
    border-color 140ms ease;
}
.home-create-menu.is-open .home-create-item {
  opacity: 1;
  transform: translateX(0);
}
.home-create-menu.is-open .home-create-item:nth-child(1) { transition-delay: 40ms; }
.home-create-menu.is-open .home-create-item:nth-child(2) { transition-delay: 90ms; }
.home-create-menu.is-open .home-create-item:nth-child(3) { transition-delay: 140ms; }
.home-create-item:hover {
  background: color-mix(in srgb, var(--hover) 86%, var(--bg-window));
  border-color: color-mix(in srgb, var(--text) 16%, var(--divider));
}
.home-create-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text-2);
}
.links-panel-header {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding-right: 86px;
}
.links-panel-actions {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.links-panel-action {
  appearance: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.links-panel-action:hover {
  background: var(--hover);
  color: var(--text);
}
.links-title-edit-form {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.links-title-edit-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 1px solid var(--divider);
  border-radius: 9px;
  background: var(--hover);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  padding: 7px 10px;
}
.links-title-edit-input:focus { border-color: var(--text-3); }
.links-title-save {
  appearance: none;
  border: 0;
  border-radius: 9px;
  background: var(--text);
  color: var(--bg-window);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  padding: 8px 10px;
}
[data-theme='dark'] .links-title-save { color: #000; }
.note-panel .note-panel-titlebar {
  border-bottom: 1px solid var(--divider);
}
.note-panel .scroll {
  flex: 1;
  min-height: 0;
}
/* Always show action buttons inside the note detail panel */
.note-panel-titlebar .titlebar-actions {
  display: flex !important;
}
.notes-panel-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
  font-size: 14px;
}
.row.is-selected,
.row.row-note.is-selected {
  background: var(--hover);
}
.note-row-locked {
  color: var(--text-3);
  font-style: italic;
}

.bg[data-width="full"] .titlebar-tabs { display: none; }
.bg[data-width="full"] .window:has(.sidebar) .titlebar-actions { display: none; }
.bg[data-width="full"] .spotlight-trigger { display: none; }

/* ---- Sidebar ---- */
.sidebar { display: none; }

.bg[data-width="full"] .sidebar {
  display: flex;
  flex-direction: column;
  width: 216px;
  min-width: 216px;
  flex-shrink: 0;
  border-right: 1px solid var(--divider);
  padding: 18px 10px 20px;
  border-radius: var(--r-window) 0 0 var(--r-window);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 12px 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text);
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--divider);
  padding-top: 10px;
  margin-top: 10px;
}

/* ── Nothing-Phone-style dot-matrix clock ─────────────────── */
.sidebar-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 10px;
  margin: 0 4px 6px;
  user-select: none;
}

.sidebar-clock-display {
  display: flex;
  align-items: center;
  gap: 3px;
}

.sdot-on  { fill: rgba(255,255,255,0.92); }
.sdot-off { fill: rgba(255,255,255,0.06); }

.sidebar-clock-ampm {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
  align-self: flex-end;
  padding-bottom: 1px;
  text-transform: uppercase;
  line-height: 1;
}

.sidebar-clock-date {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  line-height: 1;
}
/* ── Timer ───────────────────────────────────────────────── */
.sidebar-timer-idle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 8px);
  margin: 0 4px 4px;
  padding: 7px 10px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.38);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 140ms;
}
.sidebar-timer-idle:hover {
  color: rgba(255,255,255,0.65);
}
.sidebar-timer-idle svg { opacity: 0.7; flex-shrink: 0; }

.sidebar-timer { margin-bottom: 4px; }

.timer-display-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.timer-ctrl.timer-ctrl--adj {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  border: none;
  padding: 2px;
  opacity: 0.6;
}
.timer-ctrl.timer-ctrl--adj:hover { background: transparent; opacity: 1; }
.timer-ctrl.timer-ctrl--adj:disabled { opacity: 0.2; }
.timer-ctrl--adj:disabled {
  opacity: 0.2;
  cursor: default;
}

.timer-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.timer-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.timer-ctrl:hover { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.95); }
.timer-ctrl--start {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.85);
}
.timer-ctrl--reset { margin-left: auto; }
.timer-ctrl svg { display: block; }

.timer-done-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
}

@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.15; }
}
.timer-pulse .sdot-on { animation: timer-pulse 0.7s ease-in-out infinite; }

/* ── Clock/timer overrides for light-sidebar themes ─────────────────────── */
[data-theme='light'] .sidebar-clock,
[data-theme='ivory'] .sidebar-clock,
[data-theme='mindful'] .sidebar-clock,
[data-theme='orbit'][data-theme-variant='orbit-white'] .sidebar-clock {
  background: transparent;
}
[data-theme='light'] .sdot-on,
[data-theme='ivory'] .sdot-on,
[data-theme='mindful'] .sdot-on,
[data-theme='orbit'][data-theme-variant='orbit-white'] .sdot-on { fill: rgba(0,0,0,0.82); }
[data-theme='light'] .sdot-off,
[data-theme='ivory'] .sdot-off,
[data-theme='mindful'] .sdot-off,
[data-theme='orbit'][data-theme-variant='orbit-white'] .sdot-off { fill: rgba(0,0,0,0.07); }
[data-theme='light'] .sidebar-clock-ampm,
[data-theme='ivory'] .sidebar-clock-ampm,
[data-theme='mindful'] .sidebar-clock-ampm,
[data-theme='orbit'][data-theme-variant='orbit-white'] .sidebar-clock-ampm { color: rgba(0,0,0,0.38); }
[data-theme='light'] .sidebar-clock-date,
[data-theme='ivory'] .sidebar-clock-date,
[data-theme='mindful'] .sidebar-clock-date,
[data-theme='orbit'][data-theme-variant='orbit-white'] .sidebar-clock-date { color: rgba(0,0,0,0.28); }

[data-theme='light'] .sidebar-timer-idle,
[data-theme='ivory'] .sidebar-timer-idle,
[data-theme='mindful'] .sidebar-timer-idle,
[data-theme='orbit'][data-theme-variant='orbit-white'] .sidebar-timer-idle {
  background: transparent;
  color: rgba(0,0,0,0.32);
}
[data-theme='light'] .sidebar-timer-idle:hover,
[data-theme='ivory'] .sidebar-timer-idle:hover,
[data-theme='mindful'] .sidebar-timer-idle:hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .sidebar-timer-idle:hover {
  color: rgba(0,0,0,0.60);
}

[data-theme='light'] .timer-ctrl,
[data-theme='ivory'] .timer-ctrl,
[data-theme='mindful'] .timer-ctrl,
[data-theme='orbit'][data-theme-variant='orbit-white'] .timer-ctrl {
  border-color: rgba(0,0,0,0.14);
  background: rgba(0,0,0,0.05);
  color: rgba(0,0,0,0.50);
}
[data-theme='light'] .timer-ctrl:hover,
[data-theme='ivory'] .timer-ctrl:hover,
[data-theme='mindful'] .timer-ctrl:hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .timer-ctrl:hover {
  background: rgba(0,0,0,0.12);
  color: rgba(0,0,0,0.85);
}
[data-theme='light'] .timer-ctrl--start,
[data-theme='ivory'] .timer-ctrl--start,
[data-theme='mindful'] .timer-ctrl--start,
[data-theme='orbit'][data-theme-variant='orbit-white'] .timer-ctrl--start {
  background: rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.22);
  color: rgba(0,0,0,0.75);
}
[data-theme='light'] .timer-done-label,
[data-theme='ivory'] .timer-done-label,
[data-theme='mindful'] .timer-done-label,
[data-theme='orbit'][data-theme-variant='orbit-white'] .timer-done-label { color: rgba(0,0,0,0.65); }
/* ─────────────────────────────────────────────────────────── */

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.sidebar-item:hover { background: var(--hover); color: var(--text); }
.sidebar-item.is-active { background: var(--hover); color: var(--text); font-weight: 600; }

.sidebar-item-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.sidebar-item-quick {
  position: absolute;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms, color 120ms;
  text-decoration: none;
}

.sidebar-item-group:hover .sidebar-item-quick {
  opacity: 1;
  pointer-events: auto;
}

.sidebar-item-quick:hover {
  color: var(--text);
}

.settings-page {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.bg[data-width="narrow"] .settings-grid,
.bg[data-width="wide"] .settings-grid {
  grid-template-columns: 1fr;
}

.bg[data-width="full"] .settings-grid {
  grid-template-columns: 1fr;
  gap: 28px;
}

.bg[data-width="full"] .settings-page .settings-theme-grid {
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
}

.bg[data-width="full"] .settings-page .settings-theme-preview {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  padding: 6px;
}

.bg[data-width="full"] .settings-col-right {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 32px;
  align-items: start;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.settings-section[hidden] {
  display: none !important;
}
.settings-layout {
  display: flex;
  min-height: 100%;
}
.settings-subnav {
  width: 280px;
  min-width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--divider);
  overflow: hidden;
}
.settings-subnav-header {
  flex-shrink: 0;
}
.settings-subnav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
}
.settings-subnav-item {
  appearance: none;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  text-align: left;
  transition: background 120ms, color 120ms;
}
.settings-subnav-item:hover,
.settings-subnav-item.is-active {
  background: var(--hover);
  color: var(--text);
}
.settings-subnav-item.is-active {
  font-weight: 600;
}
.settings-main {
  flex: 1;
  min-width: 0;
  padding: 28px 32px 24px;
}

.settings-col-right {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.settings-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-3);
}

.onboarding-window {
  min-height: 88vh;
  max-height: 92dvh;
  backdrop-filter: var(--bdf);
  -webkit-backdrop-filter: var(--bdf);
}
.onboarding-window .win-content {
  display: flex !important;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.onboarding-shell {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 28%);
}
.onboarding-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), transparent 32%);
  opacity: 0.9;
}
.onboarding-orb {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform, filter;
}
.onboarding-orb-1 {
  width: 55%;
  aspect-ratio: 1;
  top: -18%;
  left: 2%;
  background: radial-gradient(circle, rgba(255, 74, 28, 0.28), transparent 70%);
  filter: blur(60px) hue-rotate(0deg);
  animation: orb-drift-1 20s ease-in-out infinite alternate, orb-hue-1 28s linear infinite;
}
.onboarding-orb-2 {
  width: 45%;
  aspect-ratio: 1;
  top: -12%;
  right: -4%;
  background: radial-gradient(circle, rgba(255, 74, 28, 0.22), transparent 70%);
  filter: blur(70px) hue-rotate(0deg);
  animation: orb-drift-2 26s ease-in-out infinite alternate, orb-hue-2 22s linear infinite reverse;
}
.onboarding-orb-3 {
  width: 30%;
  aspect-ratio: 1;
  bottom: 15%;
  left: 38%;
  background: radial-gradient(circle, rgba(255, 90, 20, 0.16), transparent 70%);
  filter: blur(50px) hue-rotate(0deg);
  animation: orb-drift-3 32s ease-in-out infinite alternate, orb-hue-1 36s linear infinite;
}
@keyframes orb-drift-1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(7%, 14%) scale(1.12); }
}
@keyframes orb-drift-2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-8%, 10%) scale(0.88); }
}
@keyframes orb-drift-3 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(5%, -8%) scale(1.08); }
}
@keyframes orb-hue-1 {
  0%   { filter: blur(60px) hue-rotate(0deg); }
  100% { filter: blur(60px) hue-rotate(50deg); }
}
@keyframes orb-hue-2 {
  0%   { filter: blur(70px) hue-rotate(0deg); }
  100% { filter: blur(70px) hue-rotate(50deg); }
}
.onboarding-frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 26px 28px 24px;
}
.onboarding-head,
.onboarding-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}
.onboarding-stepcount {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.onboarding-skip,
.onboarding-secondary,
.onboarding-primary {
  appearance: none;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.onboarding-skip,
.onboarding-secondary {
  border: 1px solid var(--divider);
  background: rgba(0, 0, 0, 0.08);
  color: var(--text-2);
  padding: 10px 14px;
}
.onboarding-primary {
  border: 1px solid transparent;
  background: var(--text);
  color: var(--bg-window);
  padding: 10px 18px;
}
.onboarding-skip:hover,
.onboarding-secondary:hover {
  background: var(--hover);
  color: var(--text);
}
.onboarding-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
[data-theme='dark'] .onboarding-primary,
[data-theme='midnight'] .onboarding-primary,
[data-theme='forest'] .onboarding-primary,
[data-theme='rose'] .onboarding-primary,
[data-theme='orbit'] .onboarding-primary {
  color: #000;
}
/* orbit-white has dark --text so button needs light text */
[data-theme='orbit'][data-theme-variant='orbit-white'] .onboarding-primary {
  color: var(--bg-window);
}
.onboarding-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.onboarding-secondary:disabled {
  opacity: 0.4;
  cursor: default;
}
.onboarding-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  padding: 24px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    black 28px,
    black calc(100% - 28px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    black 28px,
    black calc(100% - 28px),
    transparent 100%
  );
}
.onboarding-copy {
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.onboarding-mark {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: color-mix(in srgb, var(--hover) 72%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 20px 48px rgba(0,0,0,0.18);
}
.onboarding-copy h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.04em;
}
.onboarding-copy p {
  margin: 0;
  max-width: 62ch;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.6;
}
.onboarding-splash,
.onboarding-auth,
.onboarding-settings-grid,
.onboarding-tips {
  width: min(880px, 100%);
}
.onboarding-logo-wrap {
  position: relative;
  width: 126px;
  height: 126px;
  margin: 0 auto 22px;
}
.onboarding-logo-orbit {
  width: 126px;
  height: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  position: relative;
  z-index: 1;
  cursor: default;
  -webkit-mask-image: url('/brisk-notes-3d-logo.png');
  -webkit-mask-size: 126px 126px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url('/brisk-notes-3d-logo.png');
  mask-size: 126px 126px;
  mask-repeat: no-repeat;
  mask-position: center;
}
.onboarding-logo-orbit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.25) 45%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.25) 55%,
    transparent 62%
  );
  mix-blend-mode: soft-light;
  animation: logo-glare 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes logo-glare {
  0%      { transform: translate(-160%, -160%); opacity: 0; }
  6%      { opacity: 1; }
  44%     { opacity: 1; }
  50%     { transform: translate(160%, 160%); opacity: 0; }
  50.01%, 100% { transform: translate(-160%, -160%); opacity: 0; }
}


/* ─── Splash logo hover card burst ──────────────────────────────────── */
.splash-hover-zone {
  position: absolute;
  width: 700px;
  height: 480px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
/* Keep copy text above the floating cards */
.onboarding-copy {
  position: relative;
  z-index: 2;
}
.splash-hover-zone.is-logo-hovered {
  pointer-events: auto;
}

.splash-card {
  position: absolute;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.55, 0, 1, 0.45);
  will-change: transform, opacity;
}
.is-logo-hovered .splash-card {
  opacity: 1;
  pointer-events: auto;
}

.sc-top  { height: 3px; width: 100%; flex-shrink: 0; }
.sc-body { flex: 1; padding: 9px 11px 10px; display: flex; flex-direction: column; gap: 7px; }
.sc-head { display: flex; align-items: center; gap: 7px; }
.sc-icon { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.sc-hbar { height: 5px; border-radius: 3px; flex: 1; }
.sc-lines { display: flex; flex-direction: column; gap: 5px; }
.sc-line  { height: 4px; border-radius: 2px; flex-shrink: 0; }

/* ─── Card positions ─────────────────────────────────────────────────
   Zone is 700×480, logo center at (350, 240).
   cx/cy = offset from logo center. All bottom cards (cy > 0) have
   |cx| large enough to clear the subtitle column (±303px wide).
   ─────────────────────────────────────────────────────────────────── */

/* card 1 — dark/green, landscape 158×98, top-left */
.splash-card-1 {
  width: 158px; height: 98px;
  left: 13px; top: 43px;       /* cx=-258 cy=-148 */
  transform: translate(258px, 148px) scale(0.3) rotate(-14deg);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.is-logo-hovered .splash-card-1 {
  transform: translate(0, 0) scale(1) rotate(-4deg);
  transition: opacity 0.45s ease 0ms, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0ms;
}

/* card 2 — warm-light, portrait 88×112, top-left-center */
.splash-card-2 {
  width: 88px; height: 112px;
  left: 211px; top: 2px;       /* cx=-95 cy=-182 */
  transform: translate(95px, 182px) scale(0.3) rotate(12deg);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.is-logo-hovered .splash-card-2 {
  transform: translate(0, 0) scale(1) rotate(2deg);
  transition: opacity 0.45s ease 45ms, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 45ms;
}

/* card 3 — midnight/blue, landscape 152×94, top-right */
.splash-card-3 {
  width: 152px; height: 94px;
  left: 524px; top: 55px;      /* cx=250 cy=-138 */
  transform: translate(-250px, 138px) scale(0.3) rotate(15deg);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.is-logo-hovered .splash-card-3 {
  transform: translate(0, 0) scale(1) rotate(5deg);
  transition: opacity 0.45s ease 30ms, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 30ms;
}

/* card 4 — forest/lime, portrait 100×128, left */
.splash-card-4 {
  width: 100px; height: 128px;
  left: 8px; top: 178px;       /* cx=-292 cy=2 */
  transform: translate(292px, -2px) scale(0.3) rotate(-18deg);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.is-logo-hovered .splash-card-4 {
  transform: translate(0, 0) scale(1) rotate(-6deg);
  transition: opacity 0.45s ease 75ms, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 75ms;
}

/* card 5 — purple, landscape 154×94, right */
.splash-card-5 {
  width: 154px; height: 94px;
  left: 545px; top: 183px;     /* cx=272 cy=-10 */
  transform: translate(-272px, 10px) scale(0.3) rotate(13deg);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.is-logo-hovered .splash-card-5 {
  transform: translate(0, 0) scale(1) rotate(3deg);
  transition: opacity 0.45s ease 20ms, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 20ms;
}

/* card 6 — rose, landscape 118×88, lower-left (outside title/subtitle column) */
.splash-card-6 {
  width: 118px; height: 88px;
  left: 16px; top: 286px;      /* cx=-275 cy=90 — right edge at cx=-216, title left at cx=-214 ✓ */
  transform: translate(275px, -90px) scale(0.3) rotate(14deg);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.is-logo-hovered .splash-card-6 {
  transform: translate(0, 0) scale(1) rotate(4deg);
  transition: opacity 0.45s ease 95ms, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 95ms;
}

/* card 7 — ivory/light, landscape 90×80, lower-right (outside title/subtitle column) */
.splash-card-7 {
  width: 90px; height: 80px;
  left: 580px; top: 290px;     /* cx=275 cy=90 — left edge at cx=230, title right at cx=214 ✓ */
  transform: translate(-275px, -90px) scale(0.3) rotate(-13deg);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.is-logo-hovered .splash-card-7 {
  transform: translate(0, 0) scale(1) rotate(-3deg);
  transition: opacity 0.45s ease 55ms, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 55ms;
}

/* card 8 — orbit/dark, square 90×90, upper-right of center */
.splash-card-8 {
  width: 90px; height: 90px;
  left: 385px; top: 110px;     /* cx=80 cy=-85 */
  transform: translate(-80px, 85px) scale(0.3) rotate(-17deg);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.is-logo-hovered .splash-card-8 {
  transform: translate(0, 0) scale(1) rotate(-5deg);
  transition: opacity 0.45s ease 40ms, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 40ms;
}

/* hide on narrow viewports */
@media (max-width: 720px) {
  .splash-hover-zone { display: none; }
}

.onboarding-splash-note,
.onboarding-inline-note {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
}
.onboarding-auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.onboarding-auth .auth-controls {
  gap: 10px;
}
.onboarding-auth .auth-btn {
  min-height: 40px;
  padding: 0 16px;
}
.onboarding-auth-connected {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.onboarding-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  color: var(--text);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 650;
}
.onboarding-auth-connected p {
  margin: 0;
  color: var(--text-2);
  max-width: 46ch;
  line-height: 1.55;
}
.onboarding-settings-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 18px;
  align-items: start;
}
.onboarding-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--divider);
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
/* Theme panel spans both rows in right column */
.onboarding-settings-grid .onboarding-panel:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: stretch;
}
.onboarding-panel-label {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.onboarding-tips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.onboarding-tip {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--divider);
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.10);
}
.onboarding-tip-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: color-mix(in srgb, var(--hover) 78%, transparent);
}
.onboarding-tip-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.onboarding-tip-copy strong {
  font-size: 16px;
}
.onboarding-tip-copy span {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}
.onboarding-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.onboarding-progress-dot {
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}
.onboarding-progress-dot.is-active,
.onboarding-progress-dot.is-complete {
  background: var(--accent-now);
}
.onboarding-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.onboarding-reveal,
.onboarding-tip {
  opacity: 0;
  transform: translateY(18px);
  animation: onboarding-fade-up 520ms cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes onboarding-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .onboarding-frame {
    padding: 22px 20px 20px;
  }
  .onboarding-settings-grid,
  .onboarding-tips {
    grid-template-columns: 1fr;
  }
  /* Fix flex scroll trap at tablet/mid widths too */
  .onboarding-stage {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .window.onboarding-window {
    height: calc(100dvh - 64px);
    min-height: unset;
    max-height: calc(100dvh - 64px);
    border-radius: var(--r-window);
    overflow: hidden;
    margin: 0 auto;
  }
  .onboarding-legal {
    bottom: 44px;
  }
  /* Header pinned */
  .onboarding-frame {
    padding: 16px 16px 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  .onboarding-head {
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
  }
  /* Scrollable body with gradient fade masks */
  .onboarding-stage {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    justify-content: safe center;
    padding: 16px 0;
  }
  /* Footer pinned */
  .onboarding-foot {
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    padding: 16px 0 20px;
    min-height: 100px;
    justify-content: flex-end;
  }
  .onboarding-primary,
  .onboarding-secondary {
    white-space: nowrap;
  }
  .onboarding-stepcount {
    text-align: center;
  }
  .onboarding-skip {
    align-self: flex-end;
  }
  /* Pass border-radius down so Safari's composited layers clip at rounded corners */
  .onboarding-window .win-content {
    overflow: hidden;
    border-radius: inherit;
  }
  .onboarding-shell {
    overflow: hidden;
    border-radius: inherit;
  }
  .onboarding-copy {
    gap: 10px;
    margin-bottom: 16px;
  }
  .onboarding-copy h1 {
    font-size: clamp(26px, 7.5vw, 34px);
  }
  .onboarding-copy p {
    font-size: 14px;
  }
  .onboarding-mark {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }
  .onboarding-logo-orbit img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* Step 3: tighter panels, reset the theme panel's explicit column placement */
  .onboarding-settings-grid {
    gap: 10px;
  }
  /* Layout width is irrelevant on mobile */
  .onboarding-settings-grid .onboarding-panel:nth-child(3) {
    display: none;
  }
  .onboarding-panel {
    padding: 14px;
    gap: 10px;
    border-radius: 16px;
  }
  .onboarding-settings-grid .onboarding-panel:nth-child(2) {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
  }
  /* Step 4: tips go horizontal (icon left, text right) */
  .onboarding-tips {
    gap: 10px;
  }
  .onboarding-tip {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    border-radius: 16px;
  }
  .onboarding-tip-icon {
    flex-shrink: 0;
    margin-top: 1px;
  }
  .onboarding-progress {
    align-self: center;
  }
  .onboarding-actions {
    width: 100%;
    justify-content: space-between;
  }
}

.settings-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.settings-theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.settings-theme-preview {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 8px;
  border: 2px solid transparent;
  transition: border-color 150ms, transform 150ms;
}

.settings-theme-swatch:hover .settings-theme-preview {
  transform: scale(1.03);
}

.settings-theme-swatch.is-selected .settings-theme-preview {
  border-color: var(--text);
}

.settings-theme-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.settings-theme-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
}

.settings-theme-swatch.is-selected .settings-theme-label {
  color: var(--text);
  font-weight: 600;
}

/* win-content passthrough for non-full modes */
.win-content { display: contents; }
.bg[data-width="full"] .win-content { display: flex; }

.window {
  width: 100%;
  max-width: 520px;
  min-height: 75vh;
  background: var(--bg-window);
  color: var(--text);
  border-radius: var(--r-window);
  box-shadow: var(--shadow);
  overflow: clip;
  display: flex;
  flex-direction: column;
  backdrop-filter: var(--bdf);
  -webkit-backdrop-filter: var(--bdf);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
[data-theme='light'] .window,
[data-theme='ivory'] .window { border-color: rgba(0, 0, 0, 0.04); }

/* Safari: gradient-masked blur — edges blurred, center clear.
   Chrome falls back to the base .window backdrop-filter (uniform blur). */
.ua-safari .window.onboarding-window {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ua-safari .window.onboarding-window::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(60px) saturate(1.4);
  -webkit-backdrop-filter: blur(60px) saturate(1.4);
  mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, transparent 10%, rgba(0,0,0,0.5) 40%, black 65%);
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, transparent 10%, rgba(0,0,0,0.5) 40%, black 65%);
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}

@media (max-width: 620px) {
  .ua-safari .window.onboarding-window {
    backdrop-filter: blur(60px) saturate(1.4);
    -webkit-backdrop-filter: blur(60px) saturate(1.4);
  }
  .ua-safari .window.onboarding-window::before {
    display: none;
  }
}

[data-theme='orbit'] body {
  font-weight: 300;
  letter-spacing: 0.04em;
}

[data-theme='orbit'] .bg,
[data-theme='orbit'] .bg.bg-gradient,
[data-theme='orbit'] .bg.bg-image {
  background-color: #090909 !important;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.018) 0 1px,
    transparent 1px 14px
  ) !important;
}

[data-theme='orbit'] .bg[data-width="full"] {
  padding: 30px 36px;
}

[data-theme='orbit'] .window {
  position: relative;
  border: 1px solid rgba(244, 244, 241, 0.08);
  border-radius: 32px;
  background: #090909;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.24);
}

[data-theme='orbit'] .win-content,
[data-theme='orbit'] .sidebar,
[data-theme='orbit'] .titlebar,
[data-theme='orbit'] .scroll,
[data-theme='orbit'] .notes-list-panel,
[data-theme='orbit'] .notes-detail-panel {
  background: #090909;
}

[data-theme='orbit'] .sidebar {
  border-right-color: rgba(244, 244, 241, 0.13);
  border-radius: 32px 0 0 32px;
  padding: 28px 16px;
}

[data-theme='orbit'] .sidebar-logo,
[data-theme='orbit'] .titlebar-title {
  font-size: 13px;
  font-weight: 650;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

[data-theme='orbit'] .bg[data-width="full"] .sidebar-logo {
  align-items: center;
  flex-direction: row;
  gap: 10px;
  padding: 0 12px 28px;
}

[data-theme='orbit'] .titlebar {
  min-height: 88px;
  padding: 28px 32px 18px;
  border-bottom: 1px solid rgba(244, 244, 241, 0.12);
}

[data-theme='orbit'] .sidebar-item,
[data-theme='orbit'] .titlebar-tabs,
[data-theme='orbit'] .iconbtn,
[data-theme='orbit'] .row,
[data-theme='orbit'] .addrow,
[data-theme='orbit'] .section-label,
[data-theme='orbit'] .settings-section-title,
[data-theme='orbit'] .bgpicker-title,
[data-theme='orbit'] .theme-toggle-btn,
[data-theme='orbit'] .sync-status,
[data-theme='orbit'] .settings-theme-label,
[data-theme='orbit'] .theme-swatch-label {
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-theme='orbit'] .sidebar-nav,
[data-theme='orbit'] .sidebar-foot {
  gap: 10px;
}

[data-theme='orbit'] .auth-btn,
[data-theme='orbit'] .sync-btn,
[data-theme='orbit'] .theme-toggle,
[data-theme='orbit'] .theme-toggle-btn,
[data-theme='orbit'] .settings-pop,
[data-theme='orbit'] .menu,
[data-theme='orbit'] .row,
[data-theme='orbit'] .addrow,
[data-theme='orbit'] .field-input,
[data-theme='orbit'] .links-title-edit-input,
[data-theme='orbit'] .spotlight-panel,
[data-theme='orbit'] .spotlight-chip,
[data-theme='orbit'] .spotlight-row,
[data-theme='orbit'] .spotlight-row-icon,
[data-theme='orbit'] .spotlight-row-kind {
  border-radius: 0;
}

[data-theme='orbit'] .sidebar-item:hover,
[data-theme='orbit'] .sidebar-item.is-active,
[data-theme='orbit'] .row:hover,
[data-theme='orbit'] .row.is-selected,
[data-theme='orbit'] .row.row-note.is-selected,
[data-theme='orbit'] .theme-toggle-btn.is-selected {
  background: #f4f4f1;
  color: #000000;
}

[data-theme='orbit'] .sidebar-item.is-active svg,
[data-theme='orbit'] .sidebar-item:hover svg {
  color: #000000;
}

[data-theme='orbit'] .auth-btn-primary,
[data-theme='orbit'] .sync-btn,
[data-theme='orbit'] .links-title-save,
[data-theme='orbit'] .bgpicker-shuffle {
  background: #f4f4f1;
  color: #000000;
}

[data-theme='orbit'] .accent,
[data-theme='orbit'] .row.is-now-pill,
[data-theme='orbit'] .dtp-pop .rdp-today .rdp-day_button {
  background: rgba(255, 74, 28, 0.16);
  color: #f4f4f1;
}

[data-theme='orbit'] .settings-theme-preview,
[data-theme='orbit'] .theme-swatch-preview {
  border-radius: 0;
}

[data-theme='orbit'] .scroll {
  padding: 32px 32px 40px;
}

[data-theme='orbit'] .notes-list-panel .scroll {
  padding: 12px 0 32px;
}

[data-theme='orbit'] .notes-detail-panel .scroll,
[data-theme='orbit'] .note-detail-body {
  padding: 32px 40px 40px;
}

[data-theme='orbit'] .settings-main,
[data-theme='orbit'] .detail {
  padding: 32px 40px 40px;
}

[data-theme='orbit'] .settings-grid {
  gap: 40px;
}

[data-theme='orbit'] .settings-section,
[data-theme='orbit'] .settings-col-right,
[data-theme='orbit'] .detail-list,
[data-theme='orbit'] .link-edit-fields {
  gap: 12px;
}

[data-theme='orbit'] .section {
  padding: 8px 0 12px;
}

[data-theme='orbit'] .section-label,
[data-theme='orbit'] .section-label-sub,
[data-theme='orbit'] .home-day-label {
  padding: 20px 32px 8px;
}

[data-theme='orbit'] .recap,
[data-theme='orbit'] .home-empty {
  padding: 24px 32px 16px;
}

[data-theme='orbit'] .row,
[data-theme='orbit'] .addrow,
[data-theme='orbit'] .addrow-stack {
  min-height: 48px;
  padding: 12px 32px;
  gap: 12px;
}

[data-theme='orbit'] .row {
  grid-template-columns: 32px minmax(0, 1fr) auto;
}

[data-theme='orbit'] .row-title,
[data-theme='orbit'] .link-title,
[data-theme='orbit'] .field dd,
[data-theme='orbit'] .addrow-input {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

[data-theme='orbit'] .row-trailing,
[data-theme='orbit'] .time,
[data-theme='orbit'] .link-desc,
[data-theme='orbit'] .link-host,
[data-theme='orbit'] .field dt,
[data-theme='orbit'] .field-text {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.08em;
}

[data-theme='orbit'] .divider {
  margin: 24px 32px 8px;
}

[data-theme='orbit'] .weekstrip {
  padding: 12px 12px 16px;
}

[data-theme='orbit'] .month {
  padding-left: 20px;
}

[data-theme='orbit'] .day {
  padding: 8px 0 10px;
  gap: 4px;
}

[data-theme='orbit'] .day-letter,
[data-theme='orbit'] .day-num {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.1em;
}

[data-theme='orbit'] .day-selected::after {
  height: 1px;
  left: 34%;
  right: 34%;
  background: #f4f4f1;
}

[data-theme='orbit'] .auth-btn,
[data-theme='orbit'] .sync-btn,
[data-theme='orbit'] .bgpicker-shuffle,
[data-theme='orbit'] .ghost-btn,
[data-theme='orbit'] .link-dialog-btn,
[data-theme='orbit'] .addrow-submit,
[data-theme='orbit'] .link-done-btn,
[data-theme='orbit'] .link-tab-save,
[data-theme='orbit'] .dtp-trigger,
[data-theme='orbit'] .dtp-today,
[data-theme='orbit'] .dtp-done,
[data-theme='orbit'] .sort-btn,
[data-theme='orbit'] .settings-link {
  min-height: 40px;
  border: 1px solid rgba(244, 244, 241, 0.22);
  border-radius: 9999px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-theme='orbit'] .auth-btn:not(.auth-btn-primary),
[data-theme='orbit'] .sync-btn-muted,
[data-theme='orbit'] .ghost-btn,
[data-theme='orbit'] .link-dialog-btn,
[data-theme='orbit'] .dtp-trigger,
[data-theme='orbit'] .dtp-today,
[data-theme='orbit'] .sort-btn,
[data-theme='orbit'] .settings-link {
  background: transparent;
  color: var(--text-2);
}

[data-theme='orbit'] .auth-btn-primary,
[data-theme='orbit'] .sync-btn:not(.sync-btn-muted),
[data-theme='orbit'] .addrow-submit,
[data-theme='orbit'] .link-done-btn,
[data-theme='orbit'] .link-tab-save,
[data-theme='orbit'] .dtp-done {
  border-color: #f4f4f1;
  background: #f4f4f1;
  color: #000000;
}

[data-theme='orbit'] .bgpicker-shuffle {
  justify-content: center;
}

[data-theme='orbit'] .iconbtn,
[data-theme='orbit'] .link-edit-btn,
[data-theme='orbit'] .link-remove-btn,
[data-theme='orbit'] .links-panel-action,
[data-theme='orbit'] .tiptap-tb-btn,
[data-theme='orbit'] .ql-code-block-copy-btn {
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 9999px;
}

[data-theme='orbit'] .iconbtn:hover,
[data-theme='orbit'] .link-edit-btn:hover,
[data-theme='orbit'] .link-remove-btn:hover,
[data-theme='orbit'] .links-panel-action:hover,
[data-theme='orbit'] .tiptap-tb-btn:hover,
[data-theme='orbit'] .tiptap-tb-btn.is-active {
  border-color: rgba(244, 244, 241, 0.2);
  background: transparent;
  color: var(--text);
}

[data-theme='orbit'] .theme-toggle,
[data-theme='orbit'] .settings-pop,
[data-theme='orbit'] .menu,
[data-theme='orbit'] .dtp-pop,
[data-theme='orbit'] .loc-pop,
[data-theme='orbit'] .link-dialog,
[data-theme='orbit'] .tiptap-host,
[data-theme='orbit'] .notes,
[data-theme='orbit'] .field-input,
[data-theme='orbit'] .link-edit-input,
[data-theme='orbit'] .link-tab-new-input,
[data-theme='orbit'] .links-cat-new-input,
[data-theme='orbit'] .note-category-input,
[data-theme='orbit'] .note-category-inline,
[data-theme='orbit'] .addrow-time,
[data-theme='orbit'] .dtp-time-input {
  border-radius: 0;
}

[data-theme='orbit'] .theme-toggle {
  gap: 4px;
  padding: 4px;
  background: transparent;
}

[data-theme='orbit'] .theme-toggle-btn {
  min-height: 36px;
  padding: 8px 12px;
}

[data-theme='orbit'] .link-tabs-wrap {
  padding: 0 32px 12px;
}

[data-theme='orbit'] .link-tabs {
  gap: 8px;
}

[data-theme='orbit'] .link-tab,
[data-theme='orbit'] .link-tab-group,
[data-theme='orbit'] .sidebar-item,
[data-theme='orbit'] .links-cat-item {
  border-radius: 9999px;
}

[data-theme='orbit'] .link-tab {
  min-height: 36px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-theme='orbit'] .link-tab.is-active,
[data-theme='orbit'] .link-tab-group.is-active,
[data-theme='orbit'] .links-cat-item.is-active {
  background: #f4f4f1;
  color: #000000;
}

[data-theme='orbit'] .row:hover .row-title,
[data-theme='orbit'] .row:hover .row-leading,
[data-theme='orbit'] .row:hover .row-trailing,
[data-theme='orbit'] .row.is-selected .row-title,
[data-theme='orbit'] .row.is-selected .row-leading,
[data-theme='orbit'] .row.is-selected .row-trailing,
[data-theme='orbit'] .row.row-note.is-selected .row-title,
[data-theme='orbit'] .row.row-note.is-selected .row-leading,
[data-theme='orbit'] .row.row-note.is-selected .row-trailing {
  color: #000000;
}

[data-theme='orbit'] .note-pages-bar {
  gap: 8px;
  padding: 0 32px 14px;
}

[data-theme='orbit'] .note-page-tab,
[data-theme='orbit'] .note-page-add {
  min-height: 36px;
  border: 1px solid rgba(244, 244, 241, 0.18);
  border-radius: 9999px;
  padding: 7px 14px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-theme='orbit'] .note-page-tab.is-active {
  border-color: rgba(244, 244, 241, 0.42);
  border-bottom-color: rgba(244, 244, 241, 0.42);
  background: rgba(244, 244, 241, 0.04);
  color: #f4f4f1;
}

[data-theme='orbit'] .note-category,
[data-theme='orbit'] .note-category-inline,
[data-theme='orbit'] input.note-category-inline,
[data-theme='orbit'] select.note-category-inline {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(244, 244, 241, 0.18);
  border-radius: 9999px;
  background: transparent;
  color: var(--text-2);
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-theme='orbit'] .detail-head-actions {
  gap: 12px;
  align-items: center;
}

[data-theme='orbit'] .settings-theme-grid,
[data-theme='orbit'] .theme-swatch-grid,
[data-theme='orbit'] .bgpicker-grid,
[data-theme='orbit'] .note-bg-grid {
  gap: 8px;
}

[data-theme='orbit'] .settings-theme-preview,
[data-theme='orbit'] .theme-swatch-preview,
[data-theme='orbit'] .bgpicker-tile,
[data-theme='orbit'] .note-bg-tile,
[data-theme='orbit'] .note-bg-thumb {
  border-radius: 0;
}

[data-theme='orbit'] .tiptap-toolbar {
  gap: 4px;
  padding: 8px;
}

[data-theme='orbit'] .tiptap-editor {
  padding: 24px 32px;
}

[data-theme='orbit'] .tiptap-toolbar-wrap {
  margin: 0 40px 12px !important;
}

[data-theme='orbit'] .row-link {
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 20px;
  row-gap: 8px;
  min-height: 88px;
  padding: 16px 48px;
}

[data-theme='orbit'] .row-link .link-favicon {
  align-self: center;
  justify-self: center;
  width: 72px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-theme='orbit'] .row-link .link-favicon img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

[data-theme='orbit'] .row-link .link-favicon .link-og-image {
  width: 72px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
}

[data-theme='orbit'] .row-link .row-body,
[data-theme='orbit'] .row-link .link-display {
  min-width: 0;
  max-width: 100%;
}

[data-theme='orbit'] .link-display {
  gap: 4px;
}

[data-theme='orbit'] .link-title,
[data-theme='orbit'] .link-desc,
[data-theme='orbit'] .link-host {
  display: block;
  min-width: 0;
  max-width: 100%;
  line-height: 1.2;
  text-transform: none;
}

[data-theme='orbit'] .link-title {
  align-items: center;
  color: #f4f4f1;
}

[data-theme='orbit'] .link-desc,
[data-theme='orbit'] .link-host {
  color: rgba(244, 244, 241, 0.46);
}

[data-theme='orbit'] .link-addrow {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  column-gap: 20px;
  min-height: 64px;
  padding: 12px 48px 16px;
}

[data-theme='orbit'] .link-addrow .addrow-icon {
  justify-self: center;
  width: 48px;
}

[data-theme='orbit'] .link-addrow .addrow-input {
  min-width: 0;
  width: 100%;
}

[data-theme='orbit'] .sidebar-item,
[data-theme='orbit'] .row,
[data-theme='orbit'] .link-tab,
[data-theme='orbit'] .link-tab-group,
[data-theme='orbit'] .links-cat-item,
[data-theme='orbit'] .auth-btn,
[data-theme='orbit'] .sync-btn,
[data-theme='orbit'] .bgpicker-shuffle,
[data-theme='orbit'] .ghost-btn,
[data-theme='orbit'] .link-dialog-btn,
[data-theme='orbit'] .addrow-submit,
[data-theme='orbit'] .link-done-btn,
[data-theme='orbit'] .link-tab-save,
[data-theme='orbit'] .dtp-trigger,
[data-theme='orbit'] .dtp-today,
[data-theme='orbit'] .dtp-done,
[data-theme='orbit'] .sort-btn,
[data-theme='orbit'] .settings-link,
[data-theme='orbit'] .iconbtn,
[data-theme='orbit'] .link-edit-btn,
[data-theme='orbit'] .link-remove-btn,
[data-theme='orbit'] .links-panel-action,
[data-theme='orbit'] .tiptap-tb-btn {
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease,
    opacity 150ms ease,
    transform 150ms ease;
}

[data-theme='orbit'] .sidebar-item:not(.is-active):hover,
[data-theme='orbit'] .row:not(.is-selected):not(.row-note.is-selected):hover,
[data-theme='orbit'] .link-tab:not(.is-active):hover,
[data-theme='orbit'] .link-tab-group:not(.is-active):hover,
[data-theme='orbit'] .links-cat-item:not(.is-active):hover {
  background: rgba(244, 244, 241, 0.035);
  box-shadow: inset 0 0 0 1px rgba(244, 244, 241, 0.18);
  color: #f4f4f1;
  transform: translateY(-1px);
}

[data-theme='orbit'] .row:not(.is-selected):not(.row-note.is-selected):hover .row-title,
[data-theme='orbit'] .row:not(.is-selected):not(.row-note.is-selected):hover .row-leading,
[data-theme='orbit'] .row:not(.is-selected):not(.row-note.is-selected):hover .row-trailing {
  color: #f4f4f1;
}

[data-theme='orbit'] .sidebar-item:not(.is-active):hover svg {
  color: #f4f4f1;
}

[data-theme='orbit'] .auth-btn:not(:disabled):hover,
[data-theme='orbit'] .sync-btn:not(:disabled):hover,
[data-theme='orbit'] .bgpicker-shuffle:hover,
[data-theme='orbit'] .ghost-btn:hover,
[data-theme='orbit'] .link-dialog-btn:hover,
[data-theme='orbit'] .dtp-trigger:hover,
[data-theme='orbit'] .dtp-today:hover,
[data-theme='orbit'] .sort-btn:hover,
[data-theme='orbit'] .settings-link:hover {
  border-color: rgba(244, 244, 241, 0.42);
  background: rgba(244, 244, 241, 0.05);
  color: #f4f4f1;
  transform: translateY(-1px);
  filter: none;
}

[data-theme='orbit'] .auth-btn-primary:not(:disabled):hover,
[data-theme='orbit'] .sync-btn:not(.sync-btn-muted):not(:disabled):hover,
[data-theme='orbit'] .addrow-submit:hover,
[data-theme='orbit'] .link-done-btn:hover,
[data-theme='orbit'] .link-tab-save:hover,
[data-theme='orbit'] .dtp-done:hover {
  border-color: #ffffff;
  background: #ffffff;
  color: #000000;
  transform: translateY(-1px);
  filter: none;
}

[data-theme='orbit'] .sidebar-item:active,
[data-theme='orbit'] .row:active,
[data-theme='orbit'] .link-tab:active,
[data-theme='orbit'] .links-cat-item:active,
[data-theme='orbit'] .auth-btn:active,
[data-theme='orbit'] .sync-btn:active,
[data-theme='orbit'] .bgpicker-shuffle:active,
[data-theme='orbit'] .ghost-btn:active,
[data-theme='orbit'] .addrow-submit:active,
[data-theme='orbit'] .link-done-btn:active,
[data-theme='orbit'] .link-tab-save:active {
  transform: translateY(0) scale(0.99);
}

/* ---- Orbit White variant: same Orbit geometry, inverted palette ---- */
[data-theme='orbit'][data-theme-variant='orbit-white'] {
  --card-bg: rgba(9, 9, 9, 0.08);
  --bg-page: #090909;
  --bg-window: #f4f4f1;
  --bg-window-2: #f4f4f1;
  --titlebar: #f4f4f1;
  --text: #090909;
  --text-2: rgba(9, 9, 9, 0.66);
  --text-3: rgba(9, 9, 9, 0.42);
  --text-muted: rgba(9, 9, 9, 0.26);
  --divider: rgba(9, 9, 9, 0.12);
  --hover: rgba(9, 9, 9, 0.08);
  --pressed: rgba(9, 9, 9, 0.14);
  --surface-popover: rgba(244, 244, 241, 0.96);
  --traffic-y: #5d5d58;
  --traffic-g: #090909;
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .bg,
[data-theme='orbit'][data-theme-variant='orbit-white'] .bg.bg-gradient,
[data-theme='orbit'][data-theme-variant='orbit-white'] .bg.bg-image {
  background-color: #090909 !important;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.025) 0 1px,
    transparent 1px 14px
  ) !important;
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .window {
  border-color: rgba(9, 9, 9, 0.08);
  background: #f4f4f1;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.32);
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .win-content,
[data-theme='orbit'][data-theme-variant='orbit-white'] .sidebar,
[data-theme='orbit'][data-theme-variant='orbit-white'] .titlebar,
[data-theme='orbit'][data-theme-variant='orbit-white'] .scroll,
[data-theme='orbit'][data-theme-variant='orbit-white'] .notes-list-panel,
[data-theme='orbit'][data-theme-variant='orbit-white'] .notes-detail-panel {
  background: #f4f4f1;
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .sidebar {
  border-right-color: rgba(9, 9, 9, 0.13);
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .titlebar {
  border-bottom-color: rgba(9, 9, 9, 0.12);
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .sidebar-item:hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .sidebar-item.is-active,
[data-theme='orbit'][data-theme-variant='orbit-white'] .row:hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .row.is-selected,
[data-theme='orbit'][data-theme-variant='orbit-white'] .row.row-note.is-selected,
[data-theme='orbit'][data-theme-variant='orbit-white'] .theme-toggle-btn.is-selected,
[data-theme='orbit'][data-theme-variant='orbit-white'] .link-tab.is-active,
[data-theme='orbit'][data-theme-variant='orbit-white'] .link-tab-group.is-active,
[data-theme='orbit'][data-theme-variant='orbit-white'] .links-cat-item.is-active {
  background: #090909;
  color: #f4f4f1;
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .sidebar-item.is-active svg,
[data-theme='orbit'][data-theme-variant='orbit-white'] .sidebar-item:hover svg,
[data-theme='orbit'][data-theme-variant='orbit-white'] .row:hover .row-title,
[data-theme='orbit'][data-theme-variant='orbit-white'] .row:hover .row-leading,
[data-theme='orbit'][data-theme-variant='orbit-white'] .row:hover .row-trailing,
[data-theme='orbit'][data-theme-variant='orbit-white'] .row.is-selected .row-title,
[data-theme='orbit'][data-theme-variant='orbit-white'] .row.is-selected .row-leading,
[data-theme='orbit'][data-theme-variant='orbit-white'] .row.is-selected .row-trailing,
[data-theme='orbit'][data-theme-variant='orbit-white'] .row.row-note.is-selected .row-title,
[data-theme='orbit'][data-theme-variant='orbit-white'] .row.row-note.is-selected .row-leading,
[data-theme='orbit'][data-theme-variant='orbit-white'] .row.row-note.is-selected .row-trailing {
  color: #f4f4f1;
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .auth-btn-primary,
[data-theme='orbit'][data-theme-variant='orbit-white'] .sync-btn,
[data-theme='orbit'][data-theme-variant='orbit-white'] .links-title-save,
[data-theme='orbit'][data-theme-variant='orbit-white'] .bgpicker-shuffle,
[data-theme='orbit'][data-theme-variant='orbit-white'] .sync-btn:not(.sync-btn-muted),
[data-theme='orbit'][data-theme-variant='orbit-white'] .addrow-submit,
[data-theme='orbit'][data-theme-variant='orbit-white'] .link-done-btn,
[data-theme='orbit'][data-theme-variant='orbit-white'] .link-tab-save,
[data-theme='orbit'][data-theme-variant='orbit-white'] .dtp-done {
  border-color: #090909;
  background: #090909;
  color: #f4f4f1;
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .accent,
[data-theme='orbit'][data-theme-variant='orbit-white'] .row.is-now-pill,
[data-theme='orbit'][data-theme-variant='orbit-white'] .dtp-pop .rdp-today .rdp-day_button {
  color: #090909;
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .day-selected::after {
  background: #090909;
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .auth-btn,
[data-theme='orbit'][data-theme-variant='orbit-white'] .sync-btn,
[data-theme='orbit'][data-theme-variant='orbit-white'] .bgpicker-shuffle,
[data-theme='orbit'][data-theme-variant='orbit-white'] .ghost-btn,
[data-theme='orbit'][data-theme-variant='orbit-white'] .link-dialog-btn,
[data-theme='orbit'][data-theme-variant='orbit-white'] .addrow-submit,
[data-theme='orbit'][data-theme-variant='orbit-white'] .link-done-btn,
[data-theme='orbit'][data-theme-variant='orbit-white'] .link-tab-save,
[data-theme='orbit'][data-theme-variant='orbit-white'] .dtp-trigger,
[data-theme='orbit'][data-theme-variant='orbit-white'] .dtp-today,
[data-theme='orbit'][data-theme-variant='orbit-white'] .dtp-done,
[data-theme='orbit'][data-theme-variant='orbit-white'] .sort-btn,
[data-theme='orbit'][data-theme-variant='orbit-white'] .settings-link,
[data-theme='orbit'][data-theme-variant='orbit-white'] .note-page-tab,
[data-theme='orbit'][data-theme-variant='orbit-white'] .note-page-add,
[data-theme='orbit'][data-theme-variant='orbit-white'] .note-category,
[data-theme='orbit'][data-theme-variant='orbit-white'] .note-category-inline,
[data-theme='orbit'][data-theme-variant='orbit-white'] input.note-category-inline,
[data-theme='orbit'][data-theme-variant='orbit-white'] select.note-category-inline {
  border-color: rgba(9, 9, 9, 0.18);
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .iconbtn:hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .link-edit-btn:hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .link-remove-btn:hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .links-panel-action:hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .tiptap-tb-btn:hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .tiptap-tb-btn.is-active {
  border-color: rgba(9, 9, 9, 0.2);
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .note-page-tab.is-active {
  border-color: rgba(9, 9, 9, 0.42);
  border-bottom-color: rgba(9, 9, 9, 0.42);
  background: rgba(9, 9, 9, 0.04);
  color: #090909;
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .link-title {
  color: #090909;
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .link-desc,
[data-theme='orbit'][data-theme-variant='orbit-white'] .link-host {
  color: rgba(9, 9, 9, 0.46);
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .sidebar-item:not(.is-active):hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .row:not(.is-selected):not(.row-note.is-selected):hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .link-tab:not(.is-active):hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .link-tab-group:not(.is-active):hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .links-cat-item:not(.is-active):hover {
  background: rgba(9, 9, 9, 0.035);
  box-shadow: inset 0 0 0 1px rgba(9, 9, 9, 0.18);
  color: #090909;
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .row:not(.is-selected):not(.row-note.is-selected):hover .row-title,
[data-theme='orbit'][data-theme-variant='orbit-white'] .row:not(.is-selected):not(.row-note.is-selected):hover .row-leading,
[data-theme='orbit'][data-theme-variant='orbit-white'] .row:not(.is-selected):not(.row-note.is-selected):hover .row-trailing,
[data-theme='orbit'][data-theme-variant='orbit-white'] .sidebar-item:not(.is-active):hover svg {
  color: #090909;
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .auth-btn:not(:disabled):hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .sync-btn:not(:disabled):hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .bgpicker-shuffle:hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .ghost-btn:hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .link-dialog-btn:hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .dtp-trigger:hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .dtp-today:hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .sort-btn:hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .settings-link:hover {
  border-color: rgba(9, 9, 9, 0.42);
  background: rgba(9, 9, 9, 0.05);
  color: #090909;
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .auth-btn-primary:not(:disabled):hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .sync-btn:not(.sync-btn-muted):not(:disabled):hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .addrow-submit:hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .link-done-btn:hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .link-tab-save:hover,
[data-theme='orbit'][data-theme-variant='orbit-white'] .dtp-done:hover {
  border-color: #242421;
  background: #242421;
  color: #f4f4f1;
}

[data-theme='orbit'][data-theme-variant='orbit-white'] .link-dialog,
[data-theme='orbit'][data-theme-variant='orbit-white'] .settings-pop,
[data-theme='orbit'][data-theme-variant='orbit-white'] .menu,
[data-theme='orbit'][data-theme-variant='orbit-white'] .dtp-pop,
[data-theme='orbit'][data-theme-variant='orbit-white'] .loc-pop {
  background: #f4f4f1;
  color: #090909;
}

@media (max-width: 640px) {
  [data-theme='orbit'] .bg {
    padding-left: 4px;
    padding-right: 4px;
  }
  [data-theme='orbit'] .titlebar {
    min-height: 56px;
    padding: 14px 12px 10px;
  }
  [data-theme='orbit'] .scroll {
    padding: 16px 12px 28px;
  }
  [data-theme='orbit'] .notes-list-panel .scroll {
    padding: 8px 0 24px;
  }
  [data-theme='orbit'] .notes-detail-panel .scroll,
  [data-theme='orbit'] .note-detail-body {
    padding: 16px 12px 28px;
  }
  [data-theme='orbit'] .settings-main,
  [data-theme='orbit'] .detail {
    padding: 16px 12px 28px;
  }
  [data-theme='orbit'] .settings-grid {
    gap: 24px;
  }
  [data-theme='orbit'] .section {
    padding: 4px 0 8px;
  }
  [data-theme='orbit'] .section-label,
  [data-theme='orbit'] .section-label-sub,
  [data-theme='orbit'] .home-day-label {
    padding: 12px 12px 6px;
  }
  [data-theme='orbit'] .recap,
  [data-theme='orbit'] .home-empty {
    padding: 12px 12px 8px;
  }
  [data-theme='orbit'] .row,
  [data-theme='orbit'] .addrow,
  [data-theme='orbit'] .addrow-stack {
    padding: 10px 12px;
  }
  [data-theme='orbit'] .divider {
    margin: 14px 12px 6px;
  }
  /* Home content body — remove double-padding with .scroll */
  [data-theme='orbit'] .home-layout {
    padding: 0;
    gap: 8px;
  }
  [data-theme='orbit'] .insight-card {
    margin-bottom: 2px;
    padding: 16px 16px 14px;
  }
  [data-theme='orbit'] .home-inbox-toolbar {
    padding: 10px 12px 10px;
  }
  /* Match home-empty/grids to the 12px orbit mobile indent */
  [data-theme='orbit'] .home-empty {
    padding-left: 12px;
    padding-right: 12px;
  }
  [data-theme='orbit'] .home-cards-grid,
  [data-theme='orbit'] .home-link-grid {
    padding-left: 12px;
    padding-right: 12px;
  }
  [data-theme='orbit'] .home-day-label {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ---- Title bar ---- */
.titlebar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 16px 10px;
  background: var(--titlebar);
}
.titlebar-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: var(--text);
}
.titlebar-back-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-left: 8px;
  padding: 0 11px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: var(--hover);
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, color 140ms ease;
}
.titlebar-back-link:hover {
  background: var(--pressed);
  color: var(--text);
  transform: translateY(-1px);
}
.titlebar-tabs {
  display: flex;
  gap: 12px;
  justify-self: center;
  color: var(--text-2);
}
.titlebar-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 12px;
  color: var(--text-2);
  position: relative;
  grid-column: 3;
}

.auth-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.auth-controls--sidebar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--divider);
}
.auth-btn {
  appearance: none;
  border: 1px solid var(--divider);
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  min-height: 30px;
  padding: 0 10px;
  transition: background 120ms, border-color 120ms, color 120ms, transform 120ms;
}
.auth-btn:hover {
  background: var(--hover);
  color: var(--text);
}
.auth-btn:active {
  transform: scale(0.98);
}
.auth-btn-primary {
  background: var(--text);
  border-color: transparent;
  color: var(--bg-window);
}
.auth-btn-primary:hover {
  background: var(--text-2);
  color: var(--bg-window);
}
[data-theme='dark'] .auth-btn-primary { color: #000; }
[data-theme='claude-code'] .auth-btn-primary {
  background: oklch(0.67 0.13 38.76);
  color: oklch(1.00 0 0);
}
.auth-controls--sidebar .auth-btn {
  flex: 1;
  min-height: 36px;
  text-align: center;
}
.auth-controls--compact .auth-btn {
  min-height: 28px;
  font-size: 12px;
  padding: 0 9px;
}

.auth-sidebar-root {
  width: 100%;
}
.auth-sidebar-root .sidebar-item {
  width: 100%;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.auth-sidebar-identifier {
  color: var(--text-2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
}
.sidebar-item:hover .auth-sidebar-identifier {
  color: var(--text);
}

.menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--surface-popover);
  backdrop-filter: var(--bdf);
  -webkit-backdrop-filter: var(--bdf);
  border: 1px solid var(--divider);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.18);
  padding: 4px;
  z-index: 10;
}
.menu-item {
  appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.menu-item:hover { background: var(--hover); }
.menu-item-danger { color: var(--accent-due); }
.menu-divider { height: 1px; background: var(--divider); margin: 4px; }
.menu-item-danger:hover { background: rgba(255, 106, 85, 0.10); }
.menu-item-back { font-weight: 600; color: var(--text); }
.menu-bg-picker { padding: 6px 8px 8px; }
.menu-bg-picker .note-bg-grid { gap: 6px; }
.menu-bg-picker .note-bg-dim { width: 100%; margin-top: 4px; }

/* ---- Settings popover (background picker) ---- */
.settings-anchor { position: relative; display: inline-flex; }
.settings-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 300px;
  background: var(--surface-popover);
  backdrop-filter: var(--bdf);
  -webkit-backdrop-filter: var(--bdf);
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.20);
  z-index: 50;
}
.bgpicker-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.bgpicker-title + .bgpicker-grid,
.bgpicker-title + .theme-toggle { margin-top: 0; }
.bgpicker .bgpicker-title:not(:first-child) { margin-top: 14px; }
.sync-controls {
  margin-top: 14px;
  border-top: 1px solid var(--divider);
  padding-top: 14px;
}
.sync-row,
.sync-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sync-input {
  min-width: 0;
  flex: 1;
  background: var(--hover);
  border: 1px solid var(--divider);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
  padding: 7px 9px;
}
.sync-input:focus { border-color: var(--text-3); }
.sync-btn {
  border: 0;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg-window);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
}
[data-theme='dark'] .sync-btn { color: #000; }
[data-theme='claude-code'] .sync-btn:not(.sync-btn-muted),
[data-theme='claude-code'] .addrow-submit,
[data-theme='claude-code'] .link-done-btn,
[data-theme='claude-code'] .link-tab-save,
[data-theme='claude-code'] .dtp-done {
  background: oklch(0.67 0.13 38.76);
  color: oklch(1.00 0 0);
}
.sync-btn:hover:not(:disabled) { filter: brightness(1.05); }
.sync-btn:disabled { cursor: default; opacity: 0.42; }
.sync-btn-muted {
  background: var(--hover);
  color: var(--text-2);
}
.sync-btn-primary {
  flex: 1;
}
[data-theme='dark'] .sync-btn-muted { color: var(--text-2); }
.sync-status {
  color: var(--text-3);
  font-size: 12px;
  margin: 7px 0 8px;
  min-height: 16px;
}
.sync-status.is-error { color: var(--accent-due); }

@media (max-width: 760px) {
  .settings-layout {
    flex-direction: column;
    gap: 18px;
  }
  .settings-subnav {
    width: auto;
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid var(--divider);
  }
  .settings-subnav-header {
    display: none;
  }
  .settings-subnav-list {
    flex-direction: row;
    overflow-x: auto;
    padding: 10px;
    scrollbar-width: none;
  }
  .settings-subnav-list::-webkit-scrollbar {
    display: none;
  }
}

.theme-toggle.theme-toggle-3 { grid-template-columns: 1fr 1fr 1fr; }
.theme-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--hover);
  border: 1px solid var(--divider);
  border-radius: 8px;
}
.theme-toggle-btn {
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
}
.theme-toggle-btn.is-selected {
  background: var(--text);
  color: var(--bg-window);
  font-weight: 600;
}
[data-theme='dark'] .theme-toggle-btn.is-selected { color: #000; }
.theme-toggle-btn:hover:not(.is-selected) { color: var(--text-2); }

/* ---- Theme swatch picker ---- */
.theme-swatch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 4px;
}
.theme-swatch {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.theme-swatch-preview {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: outline-color 140ms ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 5px;
}
.theme-swatch.is-selected .theme-swatch-preview { outline-color: var(--text); }
.theme-swatch:hover:not(.is-selected) .theme-swatch-preview { outline-color: var(--text-3); }
.theme-swatch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.theme-swatch-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-align: center;
  letter-spacing: 0.1px;
}
.theme-swatch.is-selected .theme-swatch-label {
  color: var(--text);
  font-weight: 600;
}
.bgpicker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.bgpicker-tile {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: outline-color 120ms ease;
}
.bgpicker-tile.is-selected { outline-color: var(--text); }
.bgpicker-tile:hover { outline-color: var(--text-3); }
.bgpicker-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.bgpicker-thumb-default {
  background:
    radial-gradient(70% 60% at 25% 0%, #f1c44d, transparent 60%),
    radial-gradient(70% 60% at 80% 30%, #ff6a3d, transparent 60%),
    radial-gradient(70% 60% at 60% 100%, #d4248c, transparent 60%),
    linear-gradient(135deg, #c63b22 0%, #8a1c46 70%);
}
.bgpicker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
}
.bgpicker-row label { flex: none; color: var(--text-3); }
.bgpicker-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--divider);
  border-radius: 4px;
  outline: none;
}
.bgpicker-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text);
  cursor: pointer;
}
.bgpicker-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text);
  cursor: pointer;
  border: 0;
}
.bgpicker-dim-value {
  flex: none;
  width: 36px;
  text-align: right;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: color-mix(in srgb, var(--text) 60%, transparent);
  cursor: pointer;
}
.iconbtn:hover { background: var(--hover); }
.titlebar-actions .iconbtn { color: var(--text-2); }
.titlebar-tabs .iconbtn {
  width: auto;
  height: auto;
  padding: 5px;
  border-radius: 8px;
}
.titlebar-tabs .iconbtn.is-active { background: transparent; }
.titlebar-tabs .iconbtn.is-active:hover { background: var(--hover); }
.iconbtn.is-active {
  background: var(--hover);
  color: var(--text);
}
.iconbtn.is-active:hover { background: var(--pressed); }
.back {
  background: transparent;
  border: 0;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px 0 0;
  cursor: pointer;
}

/* ---- Week strip ---- */
.weekstrip-wrap {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--divider);
}
.weekstrip-nav {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-3);
  cursor: pointer;
  padding: 0 8px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 120ms;
}
.weekstrip-nav:hover { color: var(--text-2); }
.weekstrip {
  display: grid;
  grid-template-columns: 64px repeat(7, 1fr);
  align-items: end;
  gap: 0;
  padding: 6px 4px 14px;
  flex: 1;
  min-width: 0;
}
.month {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 0 4px 4px;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.15;
}
.month-name { font-weight: 500; color: var(--text-3); }
.month-year { font-weight: 400; color: var(--text-3); margin-top: 2px; font-size: 12px; }

.day {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-3);
  cursor: pointer;
  padding: 6px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  position: relative;
}
.day-letter {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: inherit;
}
.day-num {
  font-size: 16px;
  font-weight: 500;
  color: inherit;
}
.day-selected { color: var(--text); }
.day-selected .day-letter,
.day-selected .day-num { color: var(--text); font-weight: 600; }
.day-selected::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 28%;
  right: 28%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

/* Week 2 hidden by default; shown in multi-week or mobile scroll */
.weekstrip-w2 { display: none; }
.weekstrip--multi { grid-template-columns: 64px repeat(14, 1fr); }
.weekstrip--multi .day.weekstrip-w2 { display: flex; }

/* ---- Today split layout (full calendar + task sidebar) ---- */
.weekstrip-today-mobile { display: none; }

.today-split {
  display: flex;
  flex: 1;
  min-height: 0;
}
.today-cal-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.today-task-sidebar {
  width: 280px;
  min-width: 240px;
  flex-shrink: 0;
  border-left: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.today-task-header {
  flex-shrink: 0;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--divider);
}
.today-task-date {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.today-task-sidebar .scroll {
  flex: 1;
  min-height: 0;
}

.bg[data-width="full"] .today-split {
  overflow: hidden;
}

/* ---- Full month calendar ---- */
.full-cal {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 16px 20px 8px;
  overflow: hidden;
}
.full-cal-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.full-cal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  margin-left: 4px;
}
.full-cal-nav {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-3);
  cursor: pointer;
  padding: 5px 6px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  transition: color 120ms, background 120ms;
}
.full-cal-nav:hover { color: var(--text-2); background: var(--row-hover); }
.full-cal-today-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--divider);
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 5px;
  transition: background 120ms, color 120ms;
}
.full-cal-today-btn:hover { background: var(--row-hover); color: var(--text); }
.full-cal-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex-shrink: 0;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 0;
}
.full-cal-dow {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-align: center;
  padding: 4px 0 8px;
  letter-spacing: 0.4px;
}
.full-cal-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  flex: 1;
  min-height: 0;
}
.full-cal-cell {
  appearance: none;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--divider);
  border-right: 1px solid var(--divider);
  padding: 6px 7px 4px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background 100ms;
  min-height: 0;
}
.full-cal-cell:nth-child(7n) { border-right: 0; }
.full-cal-cell:hover { background: var(--row-hover); }
.full-cal-cell--other { opacity: 0.35; }
.full-cal-cell--sel { background: color-mix(in srgb, var(--text) 8%, transparent); }
.full-cal-cell--sel:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
.full-cal-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  line-height: 1;
}
.full-cal-cell--today .full-cal-date {
  background: var(--text);
  color: var(--bg-window);
  font-weight: 600;
}
.full-cal-chip {
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  line-height: 1.5;
}
.full-cal-chip--event {
  background: color-mix(in srgb, var(--text) 12%, transparent);
  color: var(--text-2);
  border-left: 2px solid color-mix(in srgb, var(--text) 40%, transparent);
}
.full-cal-chip--task {
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text-3);
}
.full-cal-chip--gcal {
  background: color-mix(in srgb, #4285f4 15%, transparent);
  color: color-mix(in srgb, #4285f4 90%, var(--text));
  border-left: 2px solid #4285f4;
}
.full-cal-chip--clickable {
  cursor: pointer;
}
.full-cal-chip--clickable:hover {
  background: color-mix(in srgb, #4285f4 25%, transparent);
}
.full-cal-overflow {
  font-size: 10px;
  color: var(--text-3);
  padding: 0 2px;
  flex-shrink: 0;
}

/* ---- Calendar view switcher ---- */
.cal-view-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 7px;
  padding: 3px;
  margin-left: 4px;
}
.cal-view-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-3);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 5px;
  transition: background 100ms, color 100ms;
  white-space: nowrap;
}
.cal-view-btn:hover { color: var(--text-2); }
.cal-view-btn.is-active {
  background: color-mix(in srgb, var(--text) 14%, transparent);
  color: var(--text);
}

/* ---- Time grid (week / work-week / 3-day) ---- */
.time-grid {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.time-grid-head {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--divider);
}
.time-grid-corner {
  width: 52px;
  flex-shrink: 0;
}
.time-grid-day-heads {
  flex: 1;
  display: grid;
}
.time-grid-day-head {
  appearance: none;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--divider);
  cursor: pointer;
  padding: 8px 4px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  transition: background 100ms;
}
.time-grid-day-head:hover { background: var(--row-hover); }
.time-grid-day-head.is-sel { background: color-mix(in srgb, var(--text) 6%, transparent); }
.time-grid-dow {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.time-grid-date-num {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-2);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
}
.time-grid-date-num.is-today {
  background: var(--text);
  color: var(--bg-window);
  font-weight: 600;
}
.time-grid-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
}
.time-grid-times {
  width: 52px;
  flex-shrink: 0;
  position: relative;
}
.time-grid-hour-label {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: 10px;
}
.time-grid-hour-label span {
  font-size: 10px;
  color: var(--text-3);
  position: relative;
  top: -7px;
  white-space: nowrap;
}
.time-grid-cols {
  flex: 1;
  display: grid;
  min-width: 0;
}
.time-grid-col {
  position: relative;
  border-left: 1px solid var(--divider);
}
.time-grid-col.is-today {
  background: color-mix(in srgb, var(--text) 2%, transparent);
}
.time-grid-slot {
  box-sizing: border-box;
  border-top: 1px solid var(--divider);
}
.time-grid-now {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #e84040;
  border-radius: 1px;
  z-index: 2;
  pointer-events: none;
}
.time-grid-now::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e84040;
}
.time-grid-event {
  position: absolute;
  left: 3px;
  right: 3px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--text) 45%, transparent);
  border-radius: 4px;
  padding: 3px 6px;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.time-grid-event--gcal {
  background: color-mix(in srgb, #4285f4 15%, transparent);
  border-left-color: #4285f4;
}
.time-grid-event--gcal .time-grid-event-time,
.time-grid-event--gcal .time-grid-event-title {
  color: color-mix(in srgb, #4285f4 80%, var(--text));
}
.time-grid-event-time {
  font-size: 10px;
  color: var(--text-3);
  line-height: 1.2;
}
.time-grid-event-title {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile: hide full calendar, show weekstrip, task sidebar full-width */
@media (max-width: 640px) {
  .weekstrip-today-mobile { display: flex; }
  .today-cal-main { display: none; }
  .today-task-sidebar {
    width: 100%;
    border-left: none;
  }
  .today-task-header { display: none; }
}

/* ---- Scrollable list area ---- */
.scroll {
  padding: 8px 4px 18px;
  overflow-y: auto;
}

/* ---- Add row (new event / new task) ---- */
.addrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  color: var(--text-3);
}
/* When a composer needs additional rows (e.g. location), it wraps with .addrow-stack */
.addrow-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 18px;
  color: var(--text-3);
}
.addrow-stack > .addrow { padding: 0; }
.addrow-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.addrow-extra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 32px;
}
.addrow-extra-icon {
  display: inline-flex;
  width: 14px;
  color: var(--text-3);
}
.addrow-submit {
  flex: none;
  background: var(--text);
  color: var(--bg-window);
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.addrow-submit:hover { background: var(--text-2); }
.addrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  color: var(--text-3);
}
.addrow-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  padding: 4px 0;
}
.addrow-input::placeholder { color: var(--text-3); }
.addrow-task { padding-top: 2px; }
.addrow-time {
  background: var(--hover);
  color: var(--text);
  border: 0;
  border-radius: 6px;
  padding: 4px 8px;
  font: inherit;
  font-size: 13px;
  outline: none;
  color-scheme: dark;
}
[data-theme='light'] .addrow-time,
[data-theme='ivory'] .addrow-time { color-scheme: light; }
.addrow-time:focus { background: var(--pressed); }

/* Stacked event composer (Today sidebar) */
.event-composer {
  display: flex;
  flex-direction: column;
  padding: 10px 18px;
  color: var(--text-3);
}
.event-composer-name {
  display: flex;
  align-items: center;
  gap: 12px;
}
.event-composer-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0 5px 34px;
  color: var(--text-3);
  font-size: 13px;
}
.event-composer-field svg { flex: none; color: var(--text-3); }
.event-composer-field .addrow-input { font-size: 13px; }
.event-composer-field .dtp { font-size: 13px; }
.event-composer-submit {
  align-self: flex-start;
  margin-top: 6px;
  margin-left: 34px;
  background: var(--text);
  color: var(--bg-window);
  border: 0;
  border-radius: 8px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.event-composer-submit:hover { background: var(--text-2); }

[data-theme='orbit'] .event-composer {
  padding: 12px 32px;
}
[data-theme='orbit'] .event-composer-field {
  padding-left: 44px;
}
[data-theme='orbit'] .event-composer-submit {
  margin-left: 44px;
}

.field-input {
  background: var(--hover);
  color: var(--text);
  border: 1px solid var(--divider);
  border-radius: 6px;
  padding: 4px 8px;
  font: inherit;
  font-size: 14px;
  outline: none;
  color-scheme: dark;
}
[data-theme='light'] .field-input,
[data-theme='ivory'] .field-input { color-scheme: light; }
.field-input:focus { border-color: var(--text-3); background: var(--pressed); }
.field-input-wide { width: 100%; max-width: 360px; }

/* ---- Location map ---- */
.location-map {
  position: relative;
  margin: 16px 0 4px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--divider);
  background: var(--hover);
}
.location-map-canvas {
  width: 100%;
  height: 180px;
}
.location-map-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 13px;
  pointer-events: none;
}
/* Tone Leaflet's default UI to our theme */
.leaflet-container {
  background: var(--hover);
  font-family: var(--font-sans);
}
.leaflet-control-attribution {
  background: transparent !important;
  color: var(--text-3) !important;
  font-size: 10px;
}
.leaflet-control-attribution a { color: var(--text-2); }

/* ---- Location autocomplete dropdown ---- */
.loc-pop {
  background: var(--surface-popover);
  backdrop-filter: var(--bdf);
  -webkit-backdrop-filter: var(--bdf);
  border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.20);
  /* Above Leaflet's internal panes (which go up to ~700) */
  z-index: 1000;
  max-height: 280px;
  overflow-y: auto;
}
.loc-empty {
  padding: 8px 10px;
  color: var(--text-3);
  font-size: 13px;
}
.loc-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.loc-item.is-active,
.loc-item:hover { background: var(--hover); }
.loc-item svg { color: var(--text-3); flex: none; margin-top: 2px; }
.loc-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.loc-item-primary {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loc-item-secondary {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Date/time picker (shadcn-style popover) ---- */
.dtp { position: relative; display: inline-flex; min-width: 0; flex-shrink: 1; }
.dtp-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  color: var(--text);
  border: none;
  border-radius: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
}
.dtp-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dtp-trigger:hover { background: none; opacity: 0.7; }
.dtp-trigger svg { color: var(--text-3); }

.dtp-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 280px;
  background: var(--surface-popover);
  backdrop-filter: var(--bdf);
  -webkit-backdrop-filter: var(--bdf);
  border: 1px solid var(--divider);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.20);
  padding: 12px;
  z-index: 20;
}

/* react-day-picker theme overrides */
.dtp-pop .rdp-root {
  --rdp-accent-color: var(--text);
  --rdp-accent-background-color: var(--hover);
  --rdp-day-height: 32px;
  --rdp-day-width: 32px;
  --rdp-day_button-height: 30px;
  --rdp-day_button-width: 30px;
  --rdp-day_button-border-radius: 8px;
  --rdp-selected-border: 0;
  --rdp-today-color: var(--accent-now);
  font-size: 13px;
  color: var(--text);
}
.dtp-pop .rdp-month_caption {
  color: var(--text);
  font-weight: 600;
  padding: 4px 0 8px;
}
.dtp-pop .rdp-nav button {
  background: transparent;
  border: 0;
  color: var(--text-2);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
}
.dtp-pop .rdp-nav button:hover { background: var(--hover); color: var(--text); }
.dtp-pop .rdp-weekday {
  color: var(--text-3);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dtp-pop .rdp-month_grid { width: 100%; table-layout: fixed; }
.dtp-pop .rdp-day { padding: 1px; width: auto; }
.dtp-pop .rdp-day_button {
  background: transparent;
  color: var(--text);
  border: 0;
  cursor: pointer;
  width: 100%;
}
.dtp-pop .rdp-day_button:hover { background: var(--hover); }
.dtp-pop .rdp-outside .rdp-day_button { color: var(--text-muted); }
.dtp-pop .rdp-today .rdp-day_button {
  color: var(--accent-now);
  font-weight: 600;
}
.dtp-pop .rdp-selected .rdp-day_button {
  background: var(--text);
  color: var(--bg-window);
  font-weight: 600;
}
.dtp-pop .rdp-selected .rdp-day_button:hover { background: var(--text-2); }

.dtp-time {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 6px;
  border-top: 1px solid var(--divider);
  margin-top: 8px;
  color: var(--text-3);
}
.dtp-time-input {
  width: 44px;
  background: var(--hover);
  border: 1px solid var(--divider);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 6px;
  font: inherit;
  font-size: 14px;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}
.dtp-time-input::-webkit-outer-spin-button,
.dtp-time-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dtp-time-input:focus { border-color: var(--text-3); }
.dtp-colon { color: var(--text-3); font-weight: 600; }
.dtp-clear {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--text-3);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.dtp-clear:hover { background: var(--hover); color: var(--text-2); }

.dtp-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--divider);
}
.dtp-today, .dtp-done {
  background: transparent;
  border: 1px solid var(--divider);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.dtp-today:hover { background: var(--hover); }
.dtp-done {
  background: var(--text);
  color: var(--bg-window);
  border-color: var(--text);
  font-weight: 600;
}
.dtp-done:hover { background: var(--text-2); }

/* ---- Section headings ---- */
.section { padding: 4px 0 2px; }
.section-label {
  padding: 14px 18px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.1px;
}

/* ---- Rows ---- */
.row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  text-decoration: none;
  color: var(--text);
  border-radius: 0;
  cursor: pointer;
  /* reset button defaults */
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  width: 100%;
}
.row:hover { background: var(--hover); }
.row:active { background: var(--pressed); }

.row-leading {
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--text-3);
}
.row-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-title-link {
  text-decoration: none;
  color: inherit;
  display: block;
  min-width: 0;
}
.row-trailing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: 14px;
  white-space: nowrap;
}

/* past events: muted title + icon, time also muted */
.row-event.is-past .row-title,
.row-event.is-past .row-leading,
.row-event.is-past .row-trailing { color: var(--text-3); font-weight: 500; }

.row-event.is-now .row-title { color: var(--text); font-weight: 600; }

/* highlighted "happening now" row used in Today view */
.row.is-now-pill {
  background: var(--now-pill-bg, rgba(65, 220, 126, 0.10));
  border-radius: var(--r-row);
  margin: 2px 12px;
  padding-left: 10px;
  padding-right: 12px;
}
.row.is-now-pill:hover { background: var(--now-pill-bg-hover, rgba(65, 220, 126, 0.16)); }
[data-theme='light'] .row.is-now-pill,
[data-theme='ivory'] .row.is-now-pill { background: rgba(26, 175, 93, 0.10); }
[data-theme='light'] .row.is-now-pill:hover,
[data-theme='ivory'] .row.is-now-pill:hover { background: rgba(26, 175, 93, 0.18); }

/* section label that has a trailing right-aligned label (e.g. "Linear") */
.section-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.section-label-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 500;
}
.section-label-right {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
}

/* Today view container reuses .scroll spacing rules; no extra padding needed */
.today { display: contents; }
.home-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
}
.home-main {
  min-width: 0;
}
.t-section { padding: 4px 0 6px; }

.home-list-panel {
  width: 320px !important;
}
.home-inbox-panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-width: 0;
  background: transparent;
  margin: 0 -18px;
}
.home-inbox-toolbar {
  padding: 16px 36px 14px;
  border-bottom: 1px solid var(--divider);
}
.home-inbox-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-inbox-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.home-inbox-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.home-inbox-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
}
.home-inbox-select-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-inbox-select {
  appearance: none;
  border: 1px solid var(--divider);
  border-radius: 8px;
  background: var(--hover);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
}
.home-inbox-select:focus {
  border-color: var(--text-3);
}
.home-inbox-title {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.03em;
}
.home-inbox-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--hover);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
}
/* ── Quick capture bar ─────────────────────────────── */
.home-capture-bar {
  padding: 12px 18px 0;
}
.home-capture-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--divider);
  border-radius: 12px;
  background: transparent;
  transition: border-color 140ms ease, background 140ms ease;
}
.home-capture-row:hover {
  background: rgba(127, 127, 127, 0.05);
}
.home-capture-row:focus-within {
  border-color: var(--text-3);
}
.home-capture-input {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 120px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  padding: 4px 0;
}
.home-capture-input::placeholder {
  color: var(--text-3);
}
.home-capture-trailing {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.home-capture-hint {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--hover);
}
.home-capture-send {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg-page);
  cursor: pointer;
  transition: background 140ms ease, opacity 140ms ease;
}
.home-capture-send:hover { background: var(--text-2); }
.home-capture-send:disabled { opacity: 0.3; cursor: not-allowed; }
.home-capture-flash {
  margin: 6px 2px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.01em;
}

/* ── Projects ──────────────────────────────────────── */
.home-projects-section { padding-bottom: 2px; }
.home-project-new-form {
  display: flex;
  gap: 6px;
  margin: 6px 18px 10px;
}
.home-project-new-input {
  flex: 1;
  border: 1px solid var(--divider);
  border-radius: 8px;
  background: var(--hover);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  padding: 6px 10px;
  outline: none;
}
.home-project-new-input:focus { border-color: var(--text-3); }
.home-project-new-submit {
  padding: 6px 12px;
  border-radius: 8px;
  border: 0;
  background: var(--text);
  color: var(--bg-page);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.home-project-new-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.home-project-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-bottom: 1px solid var(--divider);
  position: relative;
}
.home-project-row:last-of-type { border-bottom: 0; }
.home-project-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-2);
  flex: 0 0 auto;
  opacity: 0.7;
}
.home-project-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-project-counts {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.home-project-count-chip {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--hover);
  white-space: nowrap;
}
.home-project-count-empty { opacity: 0.5; }
.home-project-remove {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--hover);
  color: var(--text-3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-project-remove:hover { background: rgba(200,60,60,0.15); color: #e07a7a; }
.home-project-suggestions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 18px 0;
  border-top: 1px solid var(--divider);
}
.home-project-suggest-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-right: 2px;
}
.home-project-suggest-chip {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px dashed var(--divider);
  background: transparent;
  cursor: pointer;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.home-project-suggest-chip:hover {
  border-color: var(--text-3);
  border-style: solid;
  color: var(--text);
  background: var(--hover);
}
.home-project-suggest-count {
  opacity: 0.6;
  font-size: 10px;
  margin-left: 3px;
}

/* ── Connections ───────────────────────────────────── */
.home-connections-list {
  display: flex;
  flex-direction: column;
}
.home-connection-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 18px;
  border-bottom: 1px solid var(--divider);
}
.home-connection-row:last-child { border-bottom: 0; }
.home-connection-notes {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  min-width: 0;
  flex: 1;
}
.home-connection-note {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
  opacity: 0.85;
  transition: opacity 120ms;
}
.home-connection-note:hover { opacity: 1; }
.home-connection-arrow {
  color: var(--text-3);
  font-size: 10px;
  flex: 0 0 auto;
}
.home-connection-shared {
  display: flex;
  gap: 3px;
  flex: 0 0 auto;
}
.home-connection-kw {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-3);
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(127,127,127,0.1);
  text-transform: lowercase;
}

/* ── Active areas (themes) ─────────────────────────── */
.home-themes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 18px 0;
}
.home-theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--divider);
  background: var(--hover);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.home-theme-chip:hover {
  border-color: var(--text-3);
  color: var(--text);
  background: rgba(127,127,127,0.1);
}
.home-theme-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(127,127,127,0.15);
  font-size: 10px;
  font-weight: 700;
}

.home-mail-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}
.home-inbox-show-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 13px 18px;
  background: none;
  border: none;
  border-top: 1px solid var(--divider);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}
.home-inbox-show-all:hover {
  background: var(--hover);
  color: var(--text-1);
}
.home-inbox-show-all-count {
  color: var(--text-3);
  font-size: 12px;
}
.home-mail-group-label {
  padding: 12px 18px 8px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--divider);
}
.home-mail-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 36px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--divider);
  transition: background 120ms ease;
}
.home-mail-row:hover {
  background: var(--hover);
}
.home-mail-row.is-featured {
  background: color-mix(in srgb, var(--hover) 65%, transparent);
}
.home-mail-row.is-selected {
  background: color-mix(in srgb, var(--accent-now) 12%, transparent);
  box-shadow: inset 2px 0 0 var(--accent-now);
}
.home-mail-row.is-selected:hover {
  background: color-mix(in srgb, var(--accent-now) 16%, transparent);
}
:root .home-mail-row.is-selected,
[data-theme='dark'] .home-mail-row.is-selected {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.45);
}
:root .home-mail-row.is-selected:hover,
[data-theme='dark'] .home-mail-row.is-selected:hover {
  background: rgba(255, 255, 255, 0.10);
}
[data-theme='claude-code'] .home-mail-row.is-selected {
  background: oklch(0.67 0.13 38.76 / 0.13);
  box-shadow: inset 2px 0 0 oklch(0.67 0.13 38.76);
}
[data-theme='claude-code'] .home-mail-row.is-selected:hover {
  background: oklch(0.67 0.13 38.76 / 0.18);
}
.home-mail-row-button {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--divider);
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.home-mail-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--text-2);
  background: var(--hover);
}
.home-mail-row-check {
  border: 0;
  background: var(--hover);
  cursor: pointer;
  padding: 0;
}
.home-mail-row-check.is-actionable:hover {
  color: var(--text);
}
.home-mail-row-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-mail-row-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.home-mail-row-badge {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-mail-row-meta {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.home-mail-row-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-mail-row-preview {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

:is([data-theme="light"], [data-theme="ivory"]) .home-mail-row.is-featured {
  background: rgba(26, 26, 24, 0.05);
}

/* AI Insight card */
.insight-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  margin: 0 18px 4px;
  padding: 22px 22px 18px;
  background: var(--card-bg);
  border-radius: 18px;
  min-height: 140px;
}
.insight-card--loading { opacity: 0.6; }
.insight-body-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 170px;
}
.insight-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 10px;
}
.insight-text {
  flex: 1;
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
}
.insight-refresh {
  align-self: flex-start;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0;
  transition: color 0.15s;
}
.insight-refresh:hover { color: rgba(255,255,255,0.8); }

:is([data-theme="light"], [data-theme="ivory"]) .insight-card {
  background: rgba(26, 26, 24, 0.08);
  backdrop-filter: blur(8px);
}
:is([data-theme="light"], [data-theme="ivory"]) .insight-label {
  color: var(--text-3);
}
:is([data-theme="light"], [data-theme="ivory"]) .insight-text {
  color: var(--text);
}
:is([data-theme="light"], [data-theme="ivory"]) .insight-refresh {
  color: var(--text-3);
}
:is([data-theme="light"], [data-theme="ivory"]) .insight-refresh:hover {
  color: var(--text-2);
}

.insight-panda {
  position: absolute;
  bottom: -40px;
  right: 0;
  width: 170px;
  height: auto;
  pointer-events: none;
}

@media (max-width: 640px) {
  .home-layout {
    padding: 14px;
    gap: 14px;
  }
  .insight-card {
    margin: 0 0 6px;
    padding: 20px 20px 18px;
    min-height: auto;
    border-radius: 20px;
  }
  .insight-body-wrap {
    position: relative;
    z-index: 1;
    padding-right: 0;
    min-width: 0;
  }
  .insight-label {
    margin-bottom: 12px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .insight-text {
    margin-bottom: 18px;
    font-size: clamp(15px, 4.2vw, 17px);
    line-height: 1.38;
    overflow-wrap: anywhere;
  }
  .insight-refresh {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
  }
  .insight-panda {
    width: 104px;
    right: 8px;
    bottom: -18px;
    opacity: 0.34;
  }
}

[data-width="narrow"] .insight-card {
  margin: 0 0 6px;
  padding: 20px 20px 18px;
  min-height: auto;
  border-radius: 20px;
}
[data-width="narrow"] .insight-body-wrap {
  position: relative;
  z-index: 1;
  padding-right: 0;
  min-width: 0;
}
[data-width="narrow"] .insight-label {
  margin-bottom: 12px;
  font-size: 10px;
  letter-spacing: 0.1em;
}
[data-width="narrow"] .insight-text {
  margin-bottom: 18px;
  font-size: clamp(15px, 4.2vw, 17px);
  line-height: 1.38;
  overflow-wrap: anywhere;
}
[data-width="narrow"] .insight-refresh {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}
[data-width="narrow"] .insight-panda {
  width: 104px;
  right: 8px;
  bottom: -18px;
  opacity: 0.34;
}

@media (max-width: 380px) {
  .insight-card {
    margin-left: 0;
    margin-right: 0;
    padding: 18px;
  }
  .insight-panda { display: none; }
}

/* Home view */
.section-see-all {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.section-see-all:hover { color: var(--text-2); }
.home-empty {
  padding: 4px 18px 8px;
  color: var(--text-3);
  font-size: 14px;
  margin: 0;
}
/* Home card grid */
.home-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
  padding: 4px 18px 24px;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 620px) {
  .home-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 16px;
  }
  .home-mail-row-preview {
    display: none;
  }
}
.home-cat-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 240px;
  min-width: 0;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}
.home-cat-card:hover { filter: brightness(1.08); transform: translateY(-2px); }
.home-cat-folder-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.home-cat-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 16px 16px;
  height: 100%;
  min-height: 240px;
  box-sizing: border-box;
}
.home-cat-card-icon { flex: 1; display: flex; align-items: center; }
.home-cat-card-icon svg { width: 56px; height: 46px; }
.home-cat-card-info { display: flex; flex-direction: column; gap: 2px; }
.home-cat-card-name { color: #fff; font-weight: 700; font-size: 16px; line-height: 1.2; }
.home-cat-card-count { color: rgba(255,255,255,0.65); font-size: 12px; font-weight: 500; }
.capture-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
}

.capture-cta-wrap {
  margin-top: 32px;
  text-align: center;
}
.capture-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.4);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}
.capture-cta:hover {
  color: rgba(255,255,255,0.8);
}
.capture-cta span {
  transition: transform 0.2s ease;
}
.capture-cta:hover span {
  transform: translateX(3px);
}
.home-note-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  min-width: 0;
  transition: transform 0.15s ease;
}
.home-note-card:hover {
  transform: translateY(-4px);
}
.home-note-card:hover .home-note-card-art {
  filter: brightness(1.05);
}

.home-note-card-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  background: var(--card-bg);
  transition: filter 0.15s ease;
}

.home-note-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-note-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-note-card-info-v2 {
  text-align: center;
  padding: 0 4px;
}

.home-note-card-title-v2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-link-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 4px 18px 8px;
  width: 100%;
  box-sizing: border-box;
}
.home-link-card {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: var(--card-bg);
  text-decoration: none;
  transition: filter 0.15s, transform 0.15s;
}
.home-link-card:hover { filter: brightness(1.15); transform: translateY(-2px); }
.home-link-card-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  :is([data-theme="light"], [data-theme="ivory"]) & {
    background: rgba(26, 26, 24, 0.08);
  }

  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.85);
}
.home-link-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-link-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.home-link-card-title {
  color: #fff;
  :is([data-theme="light"], [data-theme="ivory"]) & {
    color: var(--text);
  }
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.home-link-card-host {
  color: rgba(255,255,255,0.6);
  :is([data-theme="light"], [data-theme="ivory"]) & {
    color: var(--text-3);
  }
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Inbox link viewer ── */
.home-link-viewer {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin-top: -18px;
}
.home-link-viewer-nav {
  padding: 16px 20px 8px;
}
.home-link-viewer-hero {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}
.home-link-viewer-hero-img {
  width: 100%;
  height: auto;
  display: block;
}
.home-link-viewer-back {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.38) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.home-link-viewer-back:hover {
  background: rgba(0, 0, 0, 0.55) !important;
}
.home-link-viewer-body {
  padding: 24px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-link-viewer-identity {
  display: flex;
  align-items: center;
  gap: 7px;
}
.home-link-viewer-fav {
  border-radius: 4px;
  flex-shrink: 0;
}
.home-link-viewer-host {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.home-link-viewer-title {
  font-size: 20px;
  font-weight: 650;
  line-height: 1.28;
  color: var(--text);
  margin: 4px 0 0;
}
.home-link-viewer-loading {
  opacity: 0.38;
  font-style: italic;
}
.home-link-viewer-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}
.home-link-viewer-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 9px 18px;
  border-radius: 9px;
  background: var(--accent-now);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start;
  transition: opacity 120ms;
}
.home-link-viewer-open:hover { opacity: 0.85; }

@media (max-width: 620px) {
  .home-cat-card,
  .home-note-card { min-height: 140px; height: 140px; }
  .home-cat-card-content,
  .home-note-card-content { min-height: 140px; padding-top: 36px; }
  .home-note-card-excerpt { display: none; }
  .home-link-grid { grid-template-columns: 1fr; }
  .home-link-grid > :nth-child(n+4) { display: none; }
}

[data-width="narrow"] .home-cat-card,
[data-width="narrow"] .home-note-card { min-height: 140px; height: 140px; }
[data-width="narrow"] .home-cat-card-content,
[data-width="narrow"] .home-note-card-content { min-height: 140px; padding-top: 36px; }
[data-width="narrow"] .home-note-card-excerpt { display: none; }
[data-width="narrow"] .home-link-grid { grid-template-columns: 1fr; }

.home-day-group { margin-bottom: 4px; }
.home-day-label {
  padding: 8px 18px 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.recap {
  padding: 14px 18px 16px;
}
.recap-greeting {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0.1px;
}
.recap-line {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-2);
}
.recap-line strong {
  color: var(--text);
  font-weight: 600;
}
.recap-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  vertical-align: -2px;
}
.recap-chip svg { color: var(--text-3); }

/* ---- Notes list ---- */
.section-label-sub {
  padding-top: 10px;
  padding-bottom: 4px;
  color: var(--text-3);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: var(--text-3);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.sort-btn:hover { background: var(--hover); color: var(--text-2); }

.row-note .row-leading { color: var(--text-3); }
.note-category {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--hover);
  color: var(--text-3);
  font-size: 12px;
  font-weight: 500;
}

.note-lock-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  opacity: 0.45;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.note-lock-icon {
  display: inline-flex;
  align-items: center;
  opacity: 0.45;
  margin-right: 4px;
}

/* Lock screen */
.note-lock-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 24px;
}

.note-lock-icon-large {
  opacity: 0.35;
  margin-bottom: 4px;
}

.note-lock-label {
  margin: 0;
  font-size: 14px;
  color: var(--text-3);
  text-align: center;
}

.note-lock-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: 280px;
  margin-top: 8px;
}

.note-lock-input {
  background: var(--hover);
  border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.note-lock-input:focus {
  border-color: var(--accent, rgba(255,255,255,0.3));
}

.note-lock-error {
  margin: 0;
  font-size: 12px;
  color: #e05252;
  text-align: center;
}

.note-lock-btn {
  background: var(--text);
  color: var(--bg);
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.note-lock-btn:hover { opacity: 0.85; }

/* Set-lock modal fields */
.note-lock-modal .confirm-desc { margin-bottom: 16px; }
.note-lock-modal-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

/* ---- Note detail page ---- */
.note-detail .detail-icon { background: transparent; }
.note-title-input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: 22px;
  font-weight: 600;
  padding: 4px 0 4px;
  margin-bottom: 4px;
}
.note-category-input {
  background: var(--hover);
  border: 0;
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  outline: none;
  width: auto;
  min-width: 80px;
}
.note-category-input:focus { background: var(--pressed); color: var(--text); }

/* ── Tiptap editor ── */
.tiptap-host {
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--hover);
  border: 1px solid var(--divider);
}
.tiptap-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 8px;
  flex-wrap: wrap;
}
.tiptap-tb-sep {
  width: 1px;
  height: 16px;
  background: var(--divider);
  margin: 0 3px;
  flex-shrink: 0;
}
.tiptap-tb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  padding: 0;
}
.tiptap-tb-btn:hover { background: var(--hover); color: var(--text); }
.tiptap-tb-btn.is-active { background: var(--hover); color: var(--text); }
.tiptap-tb-icon { width: 18px; height: 18px; display: block; }

.tiptap-editor {
  min-height: 220px;
  padding: 14px 16px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
  outline: none;
}
.tiptap-editor p { margin: 0 0 0.5em; }
.tiptap-editor p:last-child { margin-bottom: 0; }
.tiptap-editor h1 { font-size: 1.6em; font-weight: 700; margin: 0.75em 0 0.35em; }
.tiptap-editor h2 { font-size: 1.3em; font-weight: 600; margin: 0.7em 0 0.3em; }
.tiptap-editor h3 { font-size: 1.1em; font-weight: 600; margin: 0.6em 0 0.25em; }
.tiptap-editor h1:first-child,
.tiptap-editor h2:first-child,
.tiptap-editor h3:first-child { margin-top: 0; }
.tiptap-editor a { color: var(--accent-soon); text-decoration: underline; }
.tiptap-editor img { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 0.5em 0; }
.tiptap-editor mark { background: rgba(255, 212, 0, 0.25); color: inherit; border-radius: 2px; padding: 0 2px; }
.tiptap-editor sup { font-size: 0.75em; vertical-align: super; }
.tiptap-editor sub { font-size: 0.75em; vertical-align: sub; }
.tiptap-editor [style*="text-align: center"] { text-align: center; }
.tiptap-editor [style*="text-align: right"] { text-align: right; }
.tiptap-editor [style*="text-align: justify"] { text-align: justify; }
.tiptap-editor blockquote {
  border-left: 3px solid var(--divider);
  margin: 0.75em 0;
  padding: 0.25em 0 0.25em 1em;
  color: var(--text-2);
}
.tiptap-editor code {
  background: var(--surface);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.88em;
}
.tiptap-editor ul,
.tiptap-editor ol { padding-left: 1.4em; margin: 0.5em 0; }
.tiptap-editor li { margin: 3px 0; }
.tiptap-editor hr { border: none; border-top: 1px solid var(--divider); margin: 1.5em 0; }

/* Task list */
.tiptap-editor ul[data-type="taskList"] { list-style: none; padding-left: 0; }
.tiptap-editor ul[data-type="taskList"] li { display: flex; align-items: flex-start; gap: 8px; margin: 5px 0; }
.tiptap-editor ul[data-type="taskList"] li > label { flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.tiptap-editor ul[data-type="taskList"] li > label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--text-3);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
.tiptap-editor ul[data-type="taskList"] li > label input[type="checkbox"]:checked {
  background: var(--text-2);
  border-color: var(--text-2);
}
.tiptap-editor ul[data-type="taskList"] li > label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-page);
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5 6.5 10.5 4 8' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5 6.5 10.5 4 8' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tiptap-editor ul[data-type="taskList"] li > div { flex: 1; min-width: 0; }
.tiptap-editor ul[data-type="taskList"] li > div p { margin: 0; }
.tiptap-editor ul[data-type="taskList"] li[data-checked="true"] > div { opacity: 0.4; }

/* Placeholder */
.tiptap-editor p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--text-3);
  pointer-events: none;
  float: left;
  height: 0;
}

/* Code block with copy button */
.tiptap-code-block {
  position: relative;
  margin: 1em 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.45);
}
/* Suppress ProseMirror's default selected-node outline on code blocks */
.node-codeBlock.ProseMirror-selectednode {
  outline: none;
}
.tiptap-code-block::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%);
}
.tiptap-code-block pre {
  background: transparent;
  border-radius: 0;
  padding: 12px 44px 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}
.tiptap-code-block pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
}
.tiptap-code-block .ql-code-block-copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

[data-theme="light"] .tiptap-code-block,
[data-theme="ivory"] .tiptap-code-block {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .tiptap-code-block::before,
[data-theme="ivory"] .tiptap-code-block::before {
  background: linear-gradient(90deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.02) 100%);
}
[data-theme="light"] .tiptap-code-block pre,
[data-theme="ivory"] .tiptap-code-block pre {
  color: rgba(0, 0, 0, 0.8);
}

/* Read-only */
.tiptap-readonly .tiptap-editor { cursor: default; padding-left: 0; padding-right: 0; }
.tiptap-readonly { background: transparent; border-color: transparent; }

/* ── Notion-style editor ────────────────────────────────────────────────────── */
.notion-host {
  position: relative;
}
.notion-host .tiptap-editor {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  min-height: 120px;
}
.notion-host.tiptap-readonly .tiptap-editor { cursor: default; }

/* Drag handle */
.notion-drag-handle {
  position: absolute;
  left: -28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: grab;
  color: var(--text-muted, rgba(255,255,255,0.3));
  opacity: 0;
  transition: opacity 0.15s ease;
}
.notion-drag-handle:hover { opacity: 1 !important; background: var(--hover); }
.notion-drag-handle[data-dragging="true"] { cursor: grabbing; opacity: 1; }
.notion-host:hover .notion-drag-handle { opacity: 0.5; }

/* Bubble menu */
.bubble-menu {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 4px 6px;
  background: var(--surface, #1e1e1e);
  border: 1px solid var(--divider, rgba(255,255,255,0.1));
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  backdrop-filter: blur(12px);
}
.bubble-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--text-muted, rgba(255,255,255,0.6));
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.bubble-btn:hover { background: var(--hover, rgba(255,255,255,0.08)); color: var(--text, #fff); }
.bubble-btn.is-active { background: var(--hover, rgba(255,255,255,0.08)); color: var(--text, #fff); }
.bubble-icon { width: 16px; height: 16px; display: block; }
.bubble-sep {
  width: 1px;
  height: 16px;
  background: var(--divider, rgba(255,255,255,0.12));
  margin: 0 3px;
  flex-shrink: 0;
}

/* Slash command menu */
.slash-menu {
  background: var(--surface, #1e1e1e);
  border: 1px solid var(--divider, rgba(255,255,255,0.1));
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  padding: 4px;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  backdrop-filter: blur(16px);
}
.slash-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text, #fff);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.slash-menu-item:hover, .slash-menu-item.is-selected {
  background: var(--hover, rgba(255,255,255,0.08));
}
.slash-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--hover, rgba(255,255,255,0.06));
  color: var(--text, #fff);
  flex-shrink: 0;
}
.slash-menu-text { display: flex; flex-direction: column; gap: 1px; }
.slash-menu-title { font-size: 13px; font-weight: 500; line-height: 1.2; }
.slash-menu-desc { font-size: 11px; opacity: 0.45; line-height: 1.2; }

/* Light theme adjustments */
[data-theme="light"] .bubble-menu,
[data-theme="ivory"] .bubble-menu {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
[data-theme="light"] .bubble-btn,
[data-theme="ivory"] .bubble-btn { color: rgba(0,0,0,0.5); }
[data-theme="light"] .bubble-btn:hover,
[data-theme="ivory"] .bubble-btn:hover,
[data-theme="light"] .bubble-btn.is-active,
[data-theme="ivory"] .bubble-btn.is-active { background: rgba(0,0,0,0.06); color: #000; }
[data-theme="light"] .bubble-sep,
[data-theme="ivory"] .bubble-sep { background: rgba(0,0,0,0.1); }
[data-theme="light"] .slash-menu,
[data-theme="ivory"] .slash-menu {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
[data-theme="light"] .slash-menu-item,
[data-theme="ivory"] .slash-menu-item { color: #111; }
[data-theme="light"] .slash-menu-item:hover,
[data-theme="ivory"] .slash-menu-item:hover,
[data-theme="light"] .slash-menu-item.is-selected,
[data-theme="ivory"] .slash-menu-item.is-selected { background: rgba(0,0,0,0.05); }
[data-theme="light"] .slash-menu-icon,
[data-theme="ivory"] .slash-menu-icon { background: rgba(0,0,0,0.05); color: #111; }
[data-theme="light"] .notion-drag-handle,
[data-theme="ivory"] .notion-drag-handle { color: rgba(0,0,0,0.3); }

/* Link dialog */
.link-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}
.link-dialog {
  background: var(--surface, #1e1e1e);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 20px 20px 16px;
  width: 360px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.link-dialog-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2, rgba(255,255,255,0.6));
  margin: 0 0 8px;
}
.link-dialog-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--text, #fff);
  outline: none;
  margin-bottom: 16px;
}
.link-dialog-input:focus {
  border-color: rgba(255, 255, 255, 0.28);
}
.link-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.link-dialog-btn {
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #fff);
}
.link-dialog-btn:hover { background: rgba(255, 255, 255, 0.14); }
.link-dialog-btn.is-primary {
  background: rgba(255, 255, 255, 0.18);
  color: var(--text, #fff);
}
.link-dialog-btn.is-primary:hover { background: rgba(255, 255, 255, 0.26); }
[data-theme="light"] .link-dialog,
[data-theme="ivory"] .link-dialog {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .link-dialog-input,
[data-theme="ivory"] .link-dialog-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--text, #111);
}
[data-theme="light"] .link-dialog-input:focus,
[data-theme="ivory"] .link-dialog-input:focus { border-color: rgba(0, 0, 0, 0.28); }
[data-theme="light"] .link-dialog-btn,
[data-theme="ivory"] .link-dialog-btn {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text, #111);
}
[data-theme="light"] .link-dialog-btn:hover,
[data-theme="ivory"] .link-dialog-btn:hover { background: rgba(0, 0, 0, 0.1); }
[data-theme="light"] .link-dialog-btn.is-primary,
[data-theme="ivory"] .link-dialog-btn.is-primary { background: rgba(0, 0, 0, 0.12); }

/* Code block copy button */
.ql-code-block-copy-btn {
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease;
  padding: 0;
  user-select: none;
}
.ql-code-block-copy-btn * {
  cursor: pointer;
}
.ql-code-block-copy-btn:hover {
  color: rgba(255, 255, 255, 0.9);
}
.ql-code-block-copy-btn:active {
  transform: scale(0.9);
}
.ql-code-block-copy-btn.is-success {
  color: #4ade80;
}

[data-theme="light"] .ql-code-block-copy-btn,
[data-theme="ivory"] .ql-code-block-copy-btn {
  color: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .ql-code-block-copy-btn:hover,
[data-theme="ivory"] .ql-code-block-copy-btn:hover {
  color: rgba(0, 0, 0, 0.75);
}


.field-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}
.notes-read {
  white-space: pre-wrap;
  display: block;
}

.time { color: var(--text-3); font-size: 14px; font-weight: 400; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
}
.status-now { color: var(--accent-now); }
.status-soon { color: var(--accent-soon); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
}
.badge-due { color: var(--accent-due); }

/* tasks */
.row-task .row-leading { color: var(--text-3); }
.row-check {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.row-title.is-done { text-decoration: line-through; color: var(--text-3); }

.divider {
  border: 0;
  height: 1px;
  background: var(--divider);
  margin: 14px 18px 2px;
}

/* ---- Detail page ---- */
.detail { padding: 22px 22px 32px; }
.detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 18px;
}
.detail-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  order: 1;
}
.detail-head-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  order: 2;
  margin-left: auto;
}
.note-category-inline {
  font-size: 12px;
  color: var(--text-3);
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--hover);
  white-space: nowrap;
  margin-right: 4px;
}
input.note-category-inline {
  border: 1px solid var(--divider);
  outline: none;
  background: var(--hover);
  color: var(--text);
  font-family: inherit;
  width: 100px;
}
select.note-category-inline {
  border: 1px solid var(--divider);
  outline: none;
  color: var(--text);
  font-family: inherit;
  min-width: 112px;
  max-width: 160px;
  cursor: pointer;
  color-scheme: dark;
}
[data-theme='light'] select.note-category-inline,
[data-theme='ivory'] select.note-category-inline {
  color-scheme: light;
}
.detail-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  flex: none;
}
.detail-title-wrap { flex: 1 1 100%; order: 3; min-width: 0; }
@container (min-width: 450px) {
  .detail-head { flex-wrap: nowrap; }
  .detail-title-wrap { order: 2; flex: 1; }
  .detail-head-actions { order: 3; margin-left: 0; }
}
.detail-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--text);
}
.detail-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  color: var(--text-3);
}

.detail-list {
  margin: 18px 0 8px;
  padding: 0;
  display: grid;
  gap: 2px;
}
.field {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
}
.field dt {
  font-size: 13px;
  color: var(--text-3);
  font-weight: 500;
}
.field dd {
  margin: 0;
  font-size: 15px;
  color: var(--text);
}
.field-stack {
  display: block;
  padding: 14px 0 0;
  border-bottom: 0;
}
.field-stack dt {
  display: block;
  margin-bottom: 8px;
}
.field-stack dd { margin: 0; }

.notes {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  background: none;
  color: var(--text);
  border: none;
  border-radius: 0;
  padding: 0;
  font: inherit;
  outline: none;
}
.notes:focus { border-color: transparent; }

.ghost-btn {
  background: transparent;
  border: 1px solid var(--divider);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}
.ghost-btn:hover { background: var(--hover); }

/* ---- Mobile bottom nav ---- */
.bottom-nav { display: none; }
.mobile-capture-fab { display: none; }

@media (max-width: 640px) {
  /* Hide desktop tab strip, show bottom nav */
  .titlebar-tabs { display: none; }
  /* Tabs now centered → title takes center, actions go right */
  .titlebar { grid-template-columns: auto 1fr auto; }
  .titlebar-title { justify-self: start; }
  .titlebar-actions { justify-self: end; }

  /* Hide the floating shuffle button — it's now in settings */
  .bg-shuffle { display: none; }

  /* Extra scroll padding so content isn't hidden behind bottom nav */
  .scroll { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* Bottom nav */
  .mobile-capture-fab {
    display: flex;
    align-items: center;
    gap: 7px;
    position: fixed;
    bottom: calc(64px + max(20px, env(safe-area-inset-bottom, 0px)) + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-now);
    color: var(--accent-fg, #050e07);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 999px;
    text-decoration: none;
    z-index: 21;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent-now) 45%, transparent);
    white-space: nowrap;
    transition: opacity 150ms, transform 150ms;
  }
  .mobile-capture-fab:active {
    opacity: 0.85;
    transform: translateX(-50%) scale(0.96);
  }

  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface-popover);
    backdrop-filter: var(--bdf);
    -webkit-backdrop-filter: var(--bdf);
    border-top: 1px solid var(--divider);
    padding: 8px 4px max(20px, env(safe-area-inset-bottom, 0px));
    z-index: 20;
    justify-content: space-around;
  }
  .bottom-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 10px;
    color: color-mix(in srgb, var(--text) 60%, transparent);
    min-width: 44px;
    transition: color 120ms;
  }
  .bottom-nav-btn span { font-size: 10px; font-weight: 500; line-height: 1; }
  .bottom-nav-btn.is-active { color: var(--text); }
  .bottom-nav-btn:hover { color: var(--text-2); }
}

@media (max-width: 480px) {
  .bg { padding: 16px 10px 40px; }
  .bg:has(.window.onboarding-window) { padding: 16px 16px 28px; }
  .row, .addrow, .section-label, .divider { padding-left: 14px; padding-right: 14px; }
  .detail { padding: 18px 16px 28px; }
}

@media (max-width: 640px) {
  .weekstrip-wrap { border-bottom: 1px solid var(--divider); }
  .weekstrip-nav { padding: 0 6px; }
  .weekstrip {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding: 6px 0 14px;
    border-bottom: none;
  }
  .weekstrip::-webkit-scrollbar { display: none; }
  .weekstrip .month {
    flex-shrink: 0;
    padding-left: 8px;
    padding-right: 6px;
    min-width: 50px;
  }
  .weekstrip .day {
    flex-shrink: 0;
    min-width: 42px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .weekstrip .weekstrip-spacer { display: none !important; }
  .weekstrip .day.weekstrip-w2 { display: flex; }
}

/* ---- Links category tabs ---- */
.link-tabs-wrap {
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 16px 2px;
  margin-bottom: 4px;
}
.link-tabs-wrap::-webkit-scrollbar { display: none; }
.link-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: max-content;
}
.link-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 5px 12px;
  border-radius: 20px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms, color 120ms;
}
.link-tab:hover { background: var(--hover); color: var(--text-2); }
.link-tab.is-active { background: var(--text); color: var(--bg-window); font-weight: 600; }
[data-theme='dark'] .link-tab.is-active { color: #000; }
.link-tab-group {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  transition: background 120ms, color 120ms;
}
.link-tab-group .link-tab.is-active {
  background: transparent;
  color: inherit;
}
.link-tab-group:hover .link-tab,
.link-tab-group:focus-within .link-tab,
.link-tab-group.is-active .link-tab {
  padding-right: 7px;
}
.link-tab-group.is-active {
  background: var(--text);
  color: var(--bg-window);
}
[data-theme='dark'] .link-tab-group.is-active { color: #000; }
.link-tab-action {
  appearance: none;
  width: 24px;
  height: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  opacity: 0.58;
  transition: opacity 120ms, background 120ms;
}
.link-tab-group:hover .link-tab-action,
.link-tab-group:focus-within .link-tab-action,
.link-tab-group.is-active .link-tab-action {
  display: inline-flex;
}
.link-tab-action:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
  opacity: 1 !important;
}
.link-tab-add { padding: 5px 8px; display: flex; align-items: center; }
.link-tab-captured { display: flex; align-items: center; gap: 5px; }
.link-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: color-mix(in srgb, currentColor 15%, transparent);
  font-size: 10px; font-weight: 600; line-height: 1;
}
.link-captured-badge { font-size: 12px; background: none; min-width: unset; padding: 0; opacity: 0.6; }
.row-link-captured { cursor: pointer; }
.links-cat-captured { display: flex; align-items: center; justify-content: space-between; }
.links-cat-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 5px;
  border-radius: 8px;
  background: color-mix(in srgb, currentColor 15%, transparent);
  font-size: 10px; font-weight: 600; line-height: 1;
}
.link-tab-new-form,
.link-tab-edit-form {
  display: flex;
  align-items: center;
  gap: 6px;
}
.link-tab-new-input {
  background: var(--hover);
  border: 1px solid var(--divider);
  border-radius: 20px;
  padding: 4px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  outline: none;
  width: 110px;
}
.link-tab-new-input:focus { border-color: var(--text-3); }
.link-tab-save {
  appearance: none;
  border: 0;
  border-radius: 20px;
  background: var(--text);
  color: var(--bg-window);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  padding: 5px 10px;
}
[data-theme='dark'] .link-tab-save { color: #000; }

/* ---- Links category panel (full mode left panel) ---- */
.links-cat-panel {
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.links-cat-item {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 120ms, color 120ms;
}
.links-cat-item:hover { background: var(--hover); color: var(--text); }
.links-cat-item.is-active { background: var(--hover); color: var(--text); font-weight: 600; }
.links-cat-item:focus-visible {
  outline: 1px solid var(--text-3);
  outline-offset: -2px;
}
.links-cat-add {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-weight: 400;
  margin-top: 4px;
}
.links-cat-add:hover { color: var(--text-2); }
.links-cat-new-form {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 4px 12px;
}
.links-cat-new-input {
  background: var(--hover);
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  outline: none;
  width: 100%;
}
.links-cat-new-input:focus { border-color: var(--text-3); }

/* ---- Links view ---- */
.row-link {
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
}
.row-link:hover { background: var(--hover); }
.row-link:focus-visible { outline: 2px solid var(--text-3); outline-offset: -2px; }
.link-favicon {
  flex-shrink: 0;
  width: 72px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.link-favicon img {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0;
}
.link-favicon .link-og-image {
  width: 72px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
}
.row-body { flex: 1; min-width: 0; }
.link-display { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.link-title { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.link-fetching {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--text-3); border-top-color: var(--text);
  animation: link-spin 0.7s linear infinite;
}
@keyframes link-spin { to { transform: rotate(360deg); } }
.link-desc { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-host { font-size: 11px; color: var(--text-3); }
.link-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.link-edit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  border: 0; background: transparent; cursor: pointer; color: var(--text-3);
  opacity: 0; transition: opacity 100ms;
}
.row-link:hover .link-edit-btn,
.row-link:hover .link-remove-btn { opacity: 1; }
.link-edit-btn:hover { background: var(--hover); color: var(--text); }
.link-remove-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; border: 0;
  background: transparent; cursor: pointer; color: var(--text-3);
  opacity: 0; transition: opacity 100ms;
}
.link-remove-btn:hover { background: rgba(255,80,60,0.12); color: var(--accent-due); }
.link-edit-fields { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 4px 0; }
.link-edit-input {
  width: 100%; background: var(--hover); border: 1px solid var(--divider);
  border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 13px;
  color: var(--text); outline: none;
}
.link-edit-input:focus { border-color: var(--text-3); }
.link-edit-title { font-weight: 500; }
.link-edit-url, .link-edit-desc, .link-edit-image { font-size: 12px; color: var(--text-2); }
.link-edit-cat { font-size: 12px; color: var(--text-2); cursor: pointer; }
.link-done-btn {
  align-self: flex-start; background: var(--text); color: var(--bg-window);
  border: 0; border-radius: 6px; padding: 4px 10px; font: inherit;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
[data-theme='dark'] .link-done-btn { color: #000; }
.links-empty { padding: 20px 16px; font-size: 13px; color: var(--text-3); text-align: center; }

/* ---- Per-note background picker ---- */
.note-bg-pop { width: 280px; }
.note-bg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 4px;
}
.note-bg-tile {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: outline-color 140ms ease;
}
.note-bg-tile.is-selected { outline-color: var(--text); }
.note-bg-tile:hover:not(.is-selected) { outline-color: var(--text-3); }
.note-bg-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 7px;
  background-size: cover;
  background-position: center;
  background-color: var(--hover);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.note-bg-thumb-inherit {
  border: 1px dashed var(--divider);
}
.note-bg-upload { position: relative; display: block; }
.note-bg-upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.note-bg-thumb-upload {
  border: 1px dashed var(--divider);
  color: var(--text-2);
}

/* ---- Shuffle button inside settings ---- */
.bgpicker-shuffle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: var(--hover);
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  margin-top: 4px;
}
.bgpicker-shuffle:hover { color: var(--text); background: var(--hover); }

/* ---- Settings link (e.g. About) ---- */
.sidebar-logo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.settings-section--app-icon {
  grid-column: 1 / -1;
}

.app-icon-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
}

.app-icon-swatch {
  background: var(--hover);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 150ms, transform 150ms;
}

.app-icon-swatch img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.app-icon-swatch:hover {
  transform: scale(1.06);
}

.app-icon-swatch.is-selected {
  border-color: var(--text);
}

.settings-footer-links {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
  margin-top: auto;
}

.settings-footer-link {
  font-size: 12px;
  color: var(--text-3);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  opacity: 0.6;
  transition: opacity 150ms;
}
.settings-footer-link:hover { opacity: 1; }

.settings-footer-sep {
  font-size: 12px;
  color: var(--text-3);
  opacity: 0.35;
}


/* ---- About page ---- */
.about-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 24px;
}
.about-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--text);
}
.about-built-label {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-2);
}
.about-mike-svg {
  width: min(380px, 70vw);
  height: auto;
  color: var(--text);
}
.note-bg-thumb-gradient {
  background: linear-gradient(135deg, #f7b267 0%, #f25c54 60%, #6a4cff 100%);
}
.note-bg-dim {
  width: 100%;
  margin-top: 6px;
  accent-color: var(--text);
}

/* ---- PWA (Add to Home Screen, iOS + Android) ----
   Architecture: pure flex column. No position:fixed on the nav —
   it's a flex item at the bottom of .bg. This avoids iOS Safari's
   fixed-positioning containing-block quirks entirely. */
@media (display-mode: standalone) {
  /* Lock the document; only .scroll scrolls */
  html, body {
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* Vertical stack: [status bar gap] -> window -> bottom nav.
     Fixed inset:0 guarantees the background fills the full screen including
     safe-area zones (notch/home indicator), which 100dvh doesn't always cover. */
  .bg {
    position: fixed;
    inset: 0;
    height: auto;
    min-height: unset;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
  }

  /* Window pushed below status bar, fills remaining space */
  .bg > .window {
    flex: 1;
    min-height: 0;
    margin-top: max(env(safe-area-inset-top, 0px), 12px);
    border-radius: 16px 16px 0 0;
    border: none;
    box-shadow: none;
    max-width: 100%;
  }

  .titlebar { padding-top: 14px; }

  /* Scroll fills window. No nav clearance needed — nav is in flow. */
  .scroll {
    flex: 1;
    padding-bottom: 16px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Bottom nav: in flow, naturally flush to bottom of .bg */
  .bottom-nav {
    position: static;
    flex-shrink: 0;
    padding: 8px 4px max(20px, env(safe-area-inset-bottom, 0px));
  }

  /* Onboarding card: restore fully rounded corners and safe-area breathing room */
  .bg:has(.window.onboarding-window) {
    padding: max(env(safe-area-inset-top, 0px), 16px) 16px max(env(safe-area-inset-bottom, 0px), 20px);
  }
  .bg > .window.onboarding-window {
    flex: 1;
    height: auto;
    min-height: 0;
    max-height: none;
    border-radius: var(--r-window);
    margin-top: 0;
  }
}

/* ---- Confirm Modal ---- */
.confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.confirm-modal {
  background: var(--bg-window);
  border: 1px solid var(--divider);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  text-align: center;
}
.confirm-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.confirm-desc {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.4;
}
.confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.confirm-btn {
  flex: 1;
  appearance: none;
  border: 0;
  border-radius: 20px;
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 150ms;
}
.confirm-btn:active {
  opacity: 0.7;
}
.confirm-btn-no {
  background: var(--hover);
  color: var(--text);
}
.confirm-btn-yes {
  background: var(--accent-due);
  color: #fff;
}

/* ── Google Calendar ── */
.gcal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #4285F4;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.gcal-badge--sm {
  width: 16px;
  height: 16px;
  font-size: 10px;
  border-radius: 3px;
}
.gcal-row-icon {
  display: flex;
  align-items: center;
}
.row-gcal {
  opacity: 0.95;
}
.row-trailing--gcal {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gcal-delete-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 2px;
  cursor: pointer;
  color: var(--text-muted, var(--text));
  opacity: 0;
  transition: opacity 150ms;
  display: flex;
  align-items: center;
}
.row-gcal:hover .gcal-delete-btn {
  opacity: 0.5;
}
.gcal-delete-btn:hover {
  opacity: 1 !important;
}
.gcal-delete-btn:disabled {
  opacity: 0.3;
  cursor: wait;
}
.gcal-add-icon {
  color: #4285F4;
}
.gcal-status-hint {
  font-size: 11px;
  opacity: 0.5;
}
.gcal-retry {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.gcal-notice {
  font-size: 12px;
  opacity: 0.55;
  padding: 8px 0 4px;
}
.gcal-notice--error {
  color: var(--accent-due, #e05);
  opacity: 0.85;
}

/* GCal event popover card */
.row-gcal {
  cursor: pointer;
}
.gcal-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
}
.gcal-popover-card {
  position: fixed;
  z-index: 1000;
  background: var(--surface-popover);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 12px;
  padding: 12px 14px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.14);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: gcal-pop-in 140ms cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
@keyframes gcal-pop-in {
  from { opacity: 0; transform: scale(0.94) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.gcal-popover-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.gcal-popover-title {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
  line-height: 1.3;
}
.gcal-popover-close {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 11px;
  opacity: 0.4;
  cursor: pointer;
  padding: 2px 4px;
  color: var(--text);
  transition: opacity 120ms;
  flex-shrink: 0;
}
.gcal-popover-close:hover {
  opacity: 0.8;
}
.gcal-popover-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.gcal-popover-row--desc {
  align-items: flex-start;
}
.gcal-popover-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.4;
  min-width: 52px;
  flex-shrink: 0;
}
.gcal-popover-value {
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.4;
}
.gcal-popover-desc {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 72px;
  overflow-y: auto;
}
.gcal-popover-link {
  font-size: 11px;
  color: #4285F4;
  text-decoration: none;
  margin-top: 2px;
  opacity: 0.85;
  transition: opacity 100ms;
  align-self: flex-start;
}
.gcal-popover-link:hover {
  opacity: 1;
  text-decoration: underline;
}
.gcal-popover-empty {
  font-size: 12px;
  opacity: 0.4;
  font-style: italic;
}

/* Google Calendar settings toggle */
.gcal-settings-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gcal-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
}
.gcal-toggle {
  appearance: none;
  border: 0;
  padding: 0;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--hover);
  cursor: pointer;
  position: relative;
  transition: background 200ms;
  flex-shrink: 0;
}
.gcal-toggle.is-on {
  background: #4285F4;
}
.gcal-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 200ms;
  pointer-events: none;
}
.gcal-toggle.is-on .gcal-toggle-thumb {
  transform: translateX(16px);
}

/* ── Telegram Connect ── */
.tg-connect {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.thinking-empty-connect {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 4px;
}
.thinking-empty-connect .tg-connect {
  width: 100%;
  align-items: flex-start;
}
.tg-link-input {
  font-size: 11px;
  font-family: monospace;
}
/* Primary "Connect Telegram" CTA — uses theme accent */
.tg-connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: color-mix(in srgb, var(--accent-now) 14%, transparent);
  color: var(--accent-now);
  border: 1px solid color-mix(in srgb, var(--accent-now) 28%, transparent);
  border-radius: 20px;
  padding: 9px 20px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.tg-connect-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent-now) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent-now) 40%, transparent);
}
.tg-connect-btn:disabled { opacity: 0.45; cursor: default; }
/* "Open in Telegram" link — kept Telegram blue as it's a brand action */
.tg-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background: color-mix(in srgb, #229ED9 18%, transparent);
  color: #229ED9;
  border: 1px solid color-mix(in srgb, #229ED9 30%, transparent);
  cursor: pointer;
  transition: background 150ms;
  align-self: flex-start;
}
.tg-open-btn:hover { background: color-mix(in srgb, #229ED9 26%, transparent); }
.tg-connected-status {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-now);
  flex-shrink: 0;
}

/* ── Privacy Page ── */
.privacy-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.privacy-updated {
  font-size: 12px;
  opacity: 0.45;
  margin-bottom: 32px;
}
.privacy-section {
  margin-bottom: 32px;
}
.privacy-section h2 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
  margin-bottom: 10px;
}
.privacy-section h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0 6px;
}
.privacy-section p,
.privacy-section li {
  font-size: 13px;
  line-height: 1.65;
  opacity: 0.8;
}
.privacy-section ul {
  padding-left: 18px;
  margin: 8px 0;
}
.privacy-section li {
  margin-bottom: 4px;
}
.privacy-section a {
  color: var(--accent);
  text-decoration: none;
}
.privacy-section a:hover {
  text-decoration: underline;
}
.privacy-section code {
  font-family: monospace;
  font-size: 11px;
  background: var(--hover);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ── Home footer ── */
.home-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 0 8px;
}
.home-footer-link {
  font-size: 11px;
  opacity: 0.35;
  color: inherit;
  text-decoration: none;
  transition: opacity 150ms;
}
.home-footer-link:hover {
  opacity: 0.7;
}
.home-footer-sep {
  font-size: 11px;
  opacity: 0.25;
}

/* ── Onboarding legal footer ── */
.onboarding-legal {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
}
.onboarding-legal-link {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color 150ms;
}
.onboarding-legal-link:hover {
  color: rgba(255,255,255,0.75);
}
.onboarding-legal-sep {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
}

/* Thinking page */
.thinking-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 36px 80px;
  max-width: 880px;
  margin: 0 auto;
  min-width: 0;
}
.thinking-page--split {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
  /* reset .thinking-page base properties */
  gap: 0;
  padding: 0;
  max-width: none;
  margin: 0;
}
.thinking-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 24px 28px 80px;
}
.thinking-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 320px;
  min-width: 320px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 16px 16px 0;
  border-left: 1px solid var(--divider);
}

/* Manual capture composer pinned to the bottom of the sidebar.
   The .capture-composer-haze stack creates a progressive blur:
   four layers, each with progressively stronger blur and a higher
   mask cut-off, so the effective blur strength ramps up smoothly
   from top to bottom instead of cutting on/off binary. */
.capture-composer {
  position: sticky;
  bottom: 0;
  /* margin-top: auto pushes the composer to the bottom of the sidebar
     flex column when there's no capture list above (empty state). */
  margin: auto -16px 0;
  padding: 56px 16px 16px;
  z-index: 2;
  background: transparent;
}
.capture-composer-haze {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 55%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 55%);
}
.capture-composer-error,
.capture-composer-row {
  position: relative;
  z-index: 1;
}
.capture-composer-error {
  margin: 0 0 8px;
  font-size: 12px;
  color: #e07a7a;
}
.capture-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: transparent;
  transition: border-color 140ms ease, background 140ms ease;
}
.capture-composer-row:hover {
  background: rgba(127, 127, 127, 0.06);
}
.capture-composer-row:focus-within {
  border-color: var(--text-3);
}
.capture-composer-input {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 140px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  padding: 4px 0;
}
.capture-composer-input::placeholder {
  color: var(--text-3);
}
.capture-composer-send {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg-page);
  cursor: pointer;
  transition: background 140ms ease, opacity 140ms ease;
}
.capture-composer-send:hover { background: var(--text-2); }
.capture-composer-send:disabled { opacity: 0.4; cursor: not-allowed; }
.thinking-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--divider);
}
.thinking-sidebar-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
}
.thinking-sidebar-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-3) 12%, transparent);
}
.thinking-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-now) 18%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
}
.thinking-filter-clear {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  border-radius: 999px;
  opacity: 0.7;
}
.thinking-filter-clear:hover {
  opacity: 1;
}

/* Diagram */
.thinking-diagram-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 620px;
  margin: 32px auto 0;
  padding: 8px;
}
.thinking-diagram-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  user-select: none;
}
.thinking-edge {
  stroke: color-mix(in srgb, var(--text-3) 35%, transparent);
  stroke-width: 1.25;
  transition: stroke 160ms ease, opacity 160ms ease;
}
.thinking-edge.is-dim {
  opacity: 0.2;
}
.thinking-edge.is-hovered {
  stroke: var(--accent-now, var(--text-2));
  stroke-width: 2;
}
.thinking-node {
  cursor: pointer;
  transition: opacity 160ms ease, transform 160ms ease;
}
.thinking-node:focus { outline: none; }
.thinking-node.is-dim {
  opacity: 0.35;
}
.thinking-node text {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
  fill: var(--text);
}
.thinking-node-center circle {
  fill: var(--accent-now, var(--text));
  stroke: color-mix(in srgb, var(--accent-now, var(--text)) 60%, transparent);
  stroke-width: 4;
  transition: filter 160ms ease;
  transform-box: fill-box;
  transform-origin: center;
  animation: thinking-breathe 4s ease-in-out infinite;
}
.thinking-node-center:hover circle {
  filter: brightness(1.08);
}
.thinking-node-center.is-active circle {
  stroke-width: 6;
}
.thinking-node-center text {
  fill: var(--bg-page);
  font-weight: 600;
  font-size: 14px;
}
.thinking-node-center .thinking-center-count {
  font-size: 16px;
  font-weight: 700;
}
.thinking-node-center.is-empty circle {
  fill: var(--hover);
  stroke: color-mix(in srgb, var(--text-3) 40%, transparent);
  stroke-width: 2;
}
.thinking-node-center.is-empty text {
  fill: var(--text-3);
}

.thinking-node-subtopic circle {
  fill: color-mix(in srgb, var(--accent-now, var(--text)) 55%, var(--bg-page));
  stroke: color-mix(in srgb, var(--accent-now, var(--text)) 35%, transparent);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: thinking-topic-float 5s ease-in-out infinite;
}
.thinking-node-subtopic:hover circle {
  filter: brightness(1.1);
}
.thinking-node-subtopic.is-active circle {
  stroke: var(--text);
  stroke-width: 3;
}
.thinking-node-subtopic text {
  fill: #fff;
  font-size: 12px;
}
.thinking-node-subtopic .thinking-topic-count {
  font-size: 11px;
  font-weight: 400;
  fill: rgba(255, 255, 255, 0.75);
}

.thinking-node-leaf circle {
  fill: var(--bg-window);
  stroke: color-mix(in srgb, var(--accent-now, var(--text-2)) 55%, transparent);
  stroke-width: 2;
  transition: r 160ms ease, fill 160ms ease;
  transform-box: fill-box;
  transform-origin: center;
  animation: thinking-leaf-breathe 3.5s ease-in-out infinite;
}
.thinking-node-leaf:hover circle,
.thinking-node-leaf.is-hovered circle {
  fill: var(--accent-now, var(--text-2));
  r: 10;
}
.thinking-node-leaf .thinking-leaf-label {
  font-size: 11px;
  font-weight: 500;
  fill: var(--text-2);
}
.thinking-node-leaf:hover .thinking-leaf-label,
.thinking-node-leaf.is-hovered .thinking-leaf-label {
  fill: var(--text);
}

.thinking-diagram-hint {
  fill: var(--text-3);
  font-size: 13px;
}

@keyframes thinking-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@keyframes thinking-topic-float {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
@keyframes thinking-leaf-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .thinking-node-center circle,
  .thinking-node-subtopic circle,
  .thinking-node-leaf circle {
    animation: none;
  }
}

.thinking-card.is-hovered {
  border-color: color-mix(in srgb, var(--accent-now, var(--text-2)) 60%, transparent);
  background: color-mix(in srgb, var(--accent-now, var(--text-2)) 8%, var(--hover));
}
.thinking-card.is-focused {
  animation: thinking-card-flash 1.4s ease;
}
@keyframes thinking-card-flash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-now, var(--text)) 60%, transparent); }
  30% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-now, var(--text)) 35%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.thinking-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.thinking-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.thinking-title-icon {
  display: inline-flex;
  color: var(--text-2);
}
.thinking-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--text);
}
.thinking-page--signed-out {
  max-width: 1080px;
  width: 100%;
  padding-top: 42px;
}
.thinking-auth-promo {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
  gap: clamp(22px, 4vw, 52px);
  align-items: center;
  margin-top: clamp(16px, 5vh, 64px);
}
.thinking-auth-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.thinking-auth-eyebrow {
  margin: 0;
  color: color-mix(in srgb, var(--accent-now, var(--text)) 78%, var(--text));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.thinking-auth-title {
  margin: 0;
  max-width: 680px;
  color: var(--text);
  font-size: clamp(36px, 6vw, 72px);
  line-height: 0.96;
  font-weight: 720;
  letter-spacing: 0;
  text-wrap: balance;
}
.thinking-auth-body {
  margin: 0;
  max-width: 620px;
  color: var(--text-2);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.65;
  text-wrap: pretty;
}
.thinking-auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.thinking-auth-btn {
  appearance: none;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid var(--divider);
  background: color-mix(in srgb, var(--bg-window) 72%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.thinking-auth-btn:hover {
  background: var(--hover);
  border-color: color-mix(in srgb, var(--text-3) 44%, transparent);
}
.thinking-auth-btn:active {
  transform: translateY(1px) scale(0.99);
}
.thinking-auth-btn--primary {
  border-color: transparent;
  background: var(--text);
  color: var(--bg-window);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent-now, var(--text)) 18%, transparent);
}
.thinking-auth-btn--primary:hover {
  background: var(--text-2);
  color: var(--bg-window);
}
[data-theme='dark'] .thinking-auth-btn--primary {
  color: #000;
}
.thinking-auth-panel {
  position: relative;
  display: grid;
  gap: 22px;
  min-height: 500px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid color-mix(in srgb, var(--divider) 78%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(circle at 26% 18%, color-mix(in srgb, var(--accent-now, #60d394) 24%, transparent), transparent 32%),
    linear-gradient(150deg, color-mix(in srgb, var(--bg-window) 82%, transparent), color-mix(in srgb, var(--hover) 74%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 28px 80px rgba(0,0,0,0.2);
  overflow: hidden;
}
.thinking-auth-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 48% 30%, #000 0%, transparent 68%);
}
.thinking-auth-orbit {
  position: relative;
  min-height: 228px;
  border-radius: 18px;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--accent-now, var(--text)) 18%, transparent), transparent 36%),
    radial-gradient(circle at center, transparent 0 38%, color-mix(in srgb, var(--text-3) 18%, transparent) 38.5% 39%, transparent 39.5%),
    radial-gradient(circle at center, transparent 0 62%, color-mix(in srgb, var(--text-3) 12%, transparent) 62.5% 63%, transparent 63.5%);
  z-index: 1;
}
.thinking-auth-orbit-node {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--text-3) 22%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-window) 82%, transparent);
  color: var(--text);
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
}
.thinking-auth-orbit-node--brain {
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  border-radius: 18px;
  color: var(--bg-window);
  background: var(--text);
  transform: translate(-50%, -50%);
}
.thinking-auth-orbit-node--telegram { left: 18%; top: 16%; color: #7bd3ff; }
.thinking-auth-orbit-node--note { right: 17%; top: 14%; }
.thinking-auth-orbit-node--link { left: 14%; bottom: 15%; }
.thinking-auth-orbit-node--photo { right: 15%; bottom: 13%; }
.thinking-auth-steps {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.thinking-auth-steps li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--divider) 68%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-window) 64%, transparent);
}
.thinking-auth-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-now, var(--text)) 14%, transparent);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.thinking-auth-steps strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 3px;
}
.thinking-auth-steps p {
  margin: 0;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.45;
}
.thinking-count {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--hover);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
}
.thinking-refresh {
  background: transparent;
  border: 1px solid var(--divider);
  color: var(--text-2);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.thinking-refresh:hover:not(:disabled) {
  background: var(--hover);
  color: var(--text);
}
.thinking-refresh:disabled {
  opacity: 0.6;
  cursor: default;
}
.thinking-subtitle {
  color: var(--text-3);
  font-size: 14px;
  margin: -4px 0 0;
}
.thinking-error {
  color: #ff9b8a;
  font-size: 13px;
  margin: 0;
}
.thinking-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 60px 20px;
  color: var(--text-3);
}
.thinking-empty-icon {
  color: var(--text-muted);
  margin-bottom: 4px;
}
.thinking-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-2);
  margin: 0;
}
.thinking-empty-body {
  font-size: 14px;
  color: var(--text-3);
  margin: 0;
}
.thinking-stream {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.thinking-day {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.thinking-day-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin: 0;
  padding: 0 2px;
}
.thinking-day-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.thinking-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--divider);
  transition: background 120ms ease, border-color 120ms ease;
}
.thinking-card:hover {
  background: color-mix(in srgb, var(--card-bg) 130%, transparent);
  border-color: color-mix(in srgb, var(--text-3) 25%, transparent);
}
.thinking-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 12px;
}
.thinking-card-icon {
  display: inline-flex;
  color: var(--text-2);
}
.thinking-card-type {
  font-weight: 500;
  color: var(--text-2);
}
.thinking-card-time {
  margin-left: auto;
  color: var(--text-3);
}
.thinking-card-delete {
  background: transparent;
  border: none;
  padding: 4px;
  border-radius: 6px;
  color: var(--text-3);
  cursor: pointer;
  display: inline-flex;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}
.thinking-card:hover .thinking-card-delete,
.capture-card:hover .thinking-card-delete {
  opacity: 1;
}
.thinking-card-delete:hover {
  background: var(--hover);
  color: var(--text);
}
.thinking-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.thinking-card-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.thinking-card-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-now, var(--text));
  text-decoration: none;
  word-break: break-all;
}
.thinking-card-link:hover {
  text-decoration: underline;
}
.thinking-card-photo {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  margin: 4px 0 2px;
  background: var(--hover);
}
.thinking-card-photo img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}
.thinking-card-audio {
  width: 100%;
  margin: 4px 0 2px;
}
.thinking-card-summary {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  opacity: 0.88;
  font-style: italic;
}
.thinking-card-transcript {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text);
  opacity: 0.78;
}
.thinking-card-transcript summary {
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.thinking-card-transcript-body {
  margin: 6px 0 0;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.5;
}
.thinking-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.thinking-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--hover);
  color: var(--text);
  opacity: 0.85;
}
.thinking-card-tag--editable {
  padding-right: 4px;
}
.thinking-card-tag-remove {
  background: transparent;
  border: none;
  color: inherit;
  padding: 0 4px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  opacity: 0.55;
  border-radius: 999px;
}
.thinking-card-tag-remove:hover { opacity: 1; }
.thinking-card-tag--add {
  background: transparent;
  border: 1px dashed var(--border, currentColor);
  cursor: pointer;
  opacity: 0.6;
  font-size: 11px;
}
.thinking-card-tag--add:hover { opacity: 1; background: var(--hover); }
.thinking-card-tag--input {
  background: var(--hover);
  padding: 1px 6px;
}
.thinking-card-tag-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 11px;
  width: 80px;
  padding: 0;
}

.thinking-card-retag {
  background: transparent;
  border: none;
  color: var(--text);
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  font-size: 12px;
  line-height: 1;
  transition: opacity 120ms ease;
}
.thinking-card:hover .thinking-card-retag,
.capture-card:hover .thinking-card-retag { opacity: 0.7; }
.thinking-card-retag:hover { opacity: 1; background: var(--hover); }
.thinking-card-retag:disabled { cursor: not-allowed; }
@media (max-width: 720px) {
  .thinking-card-retag { opacity: 1; }
}

.ai-provider-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent-now, #41dc7e);
  margin-left: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(65, 220, 126, 0.18);
}

/* Action-ready cards */
.action-cards-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
  z-index: 1;
  margin-bottom: 6px;
}
.action-cards-eyebrow::before {
  content: '●';
  color: var(--accent-now, #41dc7e);
  font-size: 7px;
}
.action-cards-tank-link {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
  transition: color 120ms ease;
}
.action-cards-tank-link:hover { color: var(--text); }
.action-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0 0 16px;
  max-width: 340px;
}
.action-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 18px 16px 16px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  cursor: pointer;
}
.action-card-title {
  margin: 0 0 auto;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  padding-right: 20px;
  position: relative;
  z-index: 1;
}
.action-card-cta {
  margin-top: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: color 120ms ease;
  position: relative;
  z-index: 1;
  text-align: left;
}
.action-card-cta:hover { color: #fff; }
.action-card-cta:disabled { opacity: 0.4; cursor: not-allowed; }
.action-card-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  opacity: 1;
  animation: action-card-ripple 400ms cubic-bezier(0, 0, 0.2, 1) forwards;
  pointer-events: none;
}
@keyframes action-card-ripple {
  0%   { transform: scale(0); opacity: 0.3; }
  70%  { transform: scale(1); opacity: 0.2; }
  100% { transform: scale(1); opacity: 0; }
}
.action-card-emoji {
  position: absolute;
  bottom: -6px;
  right: 8px;
  font-size: 68px;
  line-height: 1;
  opacity: 0.55;
  pointer-events: none;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.35));
}

/* Morphing card stack */
.mcs-root { display: flex; flex-direction: column; gap: 12px; }
.mcs-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 3px;
  width: fit-content;
}
.mcs-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: none;
  background: none;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.mcs-toggle-btn:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.08); }
.mcs-toggle-btn--active { background: rgba(255,255,255,0.18); color: #fff; }
.mcs-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}
.mcs-dot {
  height: 6px;
  width: 6px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  padding: 0;
  transition: width 200ms ease, background 200ms ease;
}
.mcs-dot--active { width: 16px; background: rgba(255,255,255,0.7); }

/* Themes rail extras */
.themes-rail-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.themes-rail-tank-link {
  font-size: 11px;
  color: var(--text-3);
  text-decoration: none;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid var(--divider);
  transition: color 120ms ease;
}
.themes-rail-tank-link:hover { color: var(--text); }

.themes-rail-chip-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.themes-rail-chip.is-actionable {
  border-color: var(--divider);
}
.themes-rail-chip-ready {
  color: var(--accent-now, #41dc7e);
  font-size: 10px;
  line-height: 1;
  margin-left: 2px;
}
.themes-rail-chip-move {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--divider);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.themes-rail-chip-move:hover { color: var(--text); border-color: var(--text-3); }
.themes-rail-chip-move:disabled { opacity: 0.5; cursor: not-allowed; }
.themes-rail-chip-move--ghost {
  background: transparent;
  color: var(--text-3);
  border: 1px solid var(--divider);
  font-weight: 500;
  transition: color 120ms ease;
}
.themes-rail-chip-move--ghost:hover { color: var(--text); }

/* Tank page */
.tank-page-wrap {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  --tank-paper: #f6f3ec;
  --tank-paper-2: #ebe5d9;
  --tank-ink: #24211d;
  --tank-muted: #5f594f;
  --tank-line: rgba(152, 137, 116, 0.28);
  --tank-border: #ded6c8;
  --tank-card: rgba(255, 254, 250, 0.9);
  --tank-ochre: #bd8c44;
  --tank-green: #24a05a;
  --tank-gray: #aaa6a0;
  color: var(--tank-ink);
  background: transparent;
  isolation: isolate;
}
[data-theme='dark'] .tank-page-wrap,
[data-theme='midnight'] .tank-page-wrap,
[data-theme='forest'] .tank-page-wrap,
[data-theme='rose'] .tank-page-wrap,
[data-theme='orbit'] .tank-page-wrap,
[data-theme='mindful'] .tank-page-wrap {
  --tank-paper: #080808;
  --tank-paper-2: #111111;
  --tank-ink: #f4f3ef;
  --tank-muted: #aaa7a0;
  --tank-line: rgba(255, 255, 255, 0.06);
  --tank-border: rgba(255, 255, 255, 0.14);
  --tank-card: rgba(28, 28, 30, 0.92);
  --tank-ochre: #d0a45b;
  --tank-green: #45bd78;
  --tank-gray: #858585;
  background: transparent;
}
[data-theme-variant='light'] .tank-page-wrap,
[data-theme-variant='ivory'] .tank-page-wrap,
[data-theme-variant='orbit-white'] .tank-page-wrap {
  --tank-paper: #f6f3ec;
  --tank-paper-2: #ebe5d9;
  --tank-ink: #24211d;
  --tank-muted: #5f594f;
  --tank-line: rgba(120, 120, 120, 0.18);
  --tank-border: #d6d6d8;
  --tank-card: rgba(255, 255, 255, 0.92);
  --tank-ochre: #bd8c44;
  --tank-green: #24a05a;
  --tank-gray: #aaa6a0;
  background: transparent;
}
.tank-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  padding: 24px 28px 28px;
  max-width: none;
  margin: 0;
}
.tank-page--signed-out {
  max-width: 780px;
}
.tank-hero {
  display: grid;
  grid-template-columns: minmax(0, 680px) auto;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin: 0 0 18px;
}
.tank-kicker {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 14px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #d3c5b2;
  background: #eee5d8;
  color: #a36f24;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
[data-theme='dark'] .tank-kicker,
[data-theme='midnight'] .tank-kicker,
[data-theme='forest'] .tank-kicker,
[data-theme='rose'] .tank-kicker,
[data-theme='orbit'] .tank-kicker,
[data-theme='mindful'] .tank-kicker {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(208, 164, 91, 0.12);
  color: #e2ad62;
}
.tank-hero-title {
  margin: 0;
  max-width: 760px;
  color: var(--tank-ink);
  font-size: clamp(38px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: 0;
  font-weight: 850;
}
.tank-hero-copy {
  max-width: 650px;
  margin: 0;
  color: #4f493f;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 650;
}
[data-theme='dark'] .tank-hero-copy,
[data-theme='midnight'] .tank-hero-copy,
[data-theme='forest'] .tank-hero-copy,
[data-theme='rose'] .tank-hero-copy,
[data-theme='orbit'] .tank-hero-copy,
[data-theme='mindful'] .tank-hero-copy {
  color: var(--tank-muted);
}
.tank-hero-meter {
  display: grid;
  grid-template-columns: repeat(3, minmax(82px, 1fr));
  overflow: hidden;
  min-width: 310px;
  border: 1px solid var(--tank-border);
  border-radius: 18px;
  background: rgba(255, 254, 250, 0.72);
  box-shadow: 0 18px 50px rgba(79, 69, 55, 0.08);
}
[data-theme='dark'] .tank-hero-meter,
[data-theme='midnight'] .tank-hero-meter,
[data-theme='forest'] .tank-hero-meter,
[data-theme='rose'] .tank-hero-meter,
[data-theme='orbit'] .tank-hero-meter,
[data-theme='mindful'] .tank-hero-meter {
  background: rgba(14, 14, 14, 0.76);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}
.tank-hero-meter span {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  color: var(--tank-muted);
  font-size: 12px;
  font-weight: 700;
}
.tank-hero-meter span + span {
  border-left: 1px solid var(--tank-border);
}
.tank-hero-meter strong {
  color: var(--tank-ink);
  font-size: 22px;
  line-height: 1;
}
.tank-filter-row {
  display: flex;
  gap: 8px;
  margin: 16px 0 18px;
  flex-wrap: wrap;
}
.tank-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  background: #f8f4ec;
  border: 1px solid #d0c4b3;
  border-radius: 999px;
  padding: 0 15px;
  font-size: 12px;
  font-weight: 800;
  color: #5f594f;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}
[data-theme='dark'] .tank-filter,
[data-theme='midnight'] .tank-filter,
[data-theme='forest'] .tank-filter,
[data-theme='rose'] .tank-filter,
[data-theme='orbit'] .tank-filter,
[data-theme='mindful'] .tank-filter {
  background: rgba(14, 14, 14, 0.8);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--tank-muted);
}
.tank-filter:hover { transform: translateY(-1px); color: var(--tank-ink); }
.tank-filter.is-active {
  background: var(--tank-ink);
  color: var(--tank-paper);
  border-color: var(--tank-ink);
  box-shadow: 0 12px 28px rgba(36, 33, 29, 0.18);
}
[data-theme='dark'] .tank-filter.is-active,
[data-theme='midnight'] .tank-filter.is-active,
[data-theme='forest'] .tank-filter.is-active,
[data-theme='rose'] .tank-filter.is-active,
[data-theme='orbit'] .tank-filter.is-active,
[data-theme='mindful'] .tank-filter.is-active {
  background: #f5efe4;
  color: #211c17;
  border-color: #f5efe4;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.tank-filter-count {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(36, 33, 29, 0.12);
}
.tank-filter.is-active .tank-filter-count {
  background: rgba(255, 255, 255, 0.16);
}

.tank-empty {
  text-align: center;
  padding: 70px 24px;
  border: 1px solid var(--tank-border);
  border-radius: 24px;
  background:
    linear-gradient(var(--tank-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--tank-line) 1px, transparent 1px),
    var(--tank-paper);
  background-size: 32px 32px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 30px 70px rgba(79, 69, 55, 0.08);
}
.tank-empty-title {
  color: var(--tank-ink);
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px;
}
.tank-empty-body { margin: 0; color: var(--tank-muted); font-size: 14px; }
.tank-empty-body a { color: var(--tank-ochre); font-weight: 800; }

.tank-project-rail {
  display: flex;
  gap: 10px;
  margin: 0 0 16px;
  padding: 4px 0 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.tank-project-tab {
  flex: 0 0 auto;
  display: inline-grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  max-width: 330px;
  padding: 0 14px;
  border: 1px solid var(--tank-border);
  border-radius: 14px;
  background: rgba(255, 254, 250, 0.64);
  color: var(--tank-muted);
  cursor: pointer;
  text-align: left;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
[data-theme='dark'] .tank-project-tab,
[data-theme='midnight'] .tank-project-tab,
[data-theme='forest'] .tank-project-tab,
[data-theme='rose'] .tank-project-tab,
[data-theme='orbit'] .tank-project-tab,
[data-theme='mindful'] .tank-project-tab {
  background: rgba(14, 14, 14, 0.72);
}
.tank-project-tab span:nth-child(2) {
  overflow: hidden;
  color: var(--tank-ink);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tank-project-tab small {
  color: var(--tank-muted);
  font-size: 11px;
  font-weight: 700;
}
.tank-project-tab:hover {
  transform: translateY(-1px);
  background: rgba(255, 254, 250, 0.86);
}
[data-theme='dark'] .tank-project-tab:hover,
[data-theme='midnight'] .tank-project-tab:hover,
[data-theme='forest'] .tank-project-tab:hover,
[data-theme='rose'] .tank-project-tab:hover,
[data-theme='orbit'] .tank-project-tab:hover,
[data-theme='mindful'] .tank-project-tab:hover {
  background: rgba(26, 26, 25, 0.94);
}
.tank-project-tab.is-active {
  border-color: rgba(36, 33, 29, 0.28);
  background: #fffefa;
  box-shadow: 0 14px 34px rgba(79, 69, 55, 0.09);
}
[data-theme='dark'] .tank-project-tab.is-active,
[data-theme='midnight'] .tank-project-tab.is-active,
[data-theme='forest'] .tank-project-tab.is-active,
[data-theme='rose'] .tank-project-tab.is-active,
[data-theme='orbit'] .tank-project-tab.is-active,
[data-theme='mindful'] .tank-project-tab.is-active {
  border-color: rgba(245, 239, 228, 0.28);
  background: rgba(24, 24, 23, 0.98);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
.tank-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--tank-gray);
}
.tank-status-dot--green { background: var(--tank-green); }
.tank-status-dot--ochre { background: #d0900b; }
.tank-status-dot--gray { background: var(--tank-gray); }

.tank-workspace {
  display: flex;
  align-items: stretch;
  gap: 18px;
  flex: 1;
  min-height: 0;
  min-width: 0;
}
.tank-map-shell {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--tank-border);
  border-radius: 26px;
  background: transparent;
}
.tank-map-windowbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid var(--tank-border);
  background: rgba(255, 254, 250, 0.9);
  backdrop-filter: blur(16px);
}
[data-theme='dark'] .tank-map-windowbar,
[data-theme='midnight'] .tank-map-windowbar,
[data-theme='forest'] .tank-map-windowbar,
[data-theme='rose'] .tank-map-windowbar,
[data-theme='orbit'] .tank-map-windowbar,
[data-theme='mindful'] .tank-map-windowbar {
  background: rgba(10, 10, 10, 0.94);
}
.tank-map-window-left,
.tank-map-window-right {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.tank-map-window-left > span {
  color: var(--tank-muted);
  font-size: 13px;
  font-weight: 750;
}
.tank-map-window-left strong {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--tank-ink);
  font-size: 15px;
  font-weight: 900;
}
.tank-map-logo {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 5px;
  background: #2b2620;
  color: #fffefa;
  font-size: 11px;
  font-weight: 900;
}
[data-theme='dark'] .tank-map-logo,
[data-theme='midnight'] .tank-map-logo,
[data-theme='forest'] .tank-map-logo,
[data-theme='rose'] .tank-map-logo,
[data-theme='orbit'] .tank-map-logo,
[data-theme='mindful'] .tank-map-logo {
  background: #f5efe4;
  color: #211c17;
}
.tank-map-segment {
  display: inline-flex;
  min-height: 32px;
  overflow: hidden;
  border: 1px solid var(--tank-border);
  border-radius: 8px;
  background: rgba(244, 241, 235, 0.75);
}
[data-theme='dark'] .tank-map-segment,
[data-theme='midnight'] .tank-map-segment,
[data-theme='forest'] .tank-map-segment,
[data-theme='rose'] .tank-map-segment,
[data-theme='orbit'] .tank-map-segment,
[data-theme='mindful'] .tank-map-segment {
  background: rgba(0, 0, 0, 0.44);
}
.tank-map-segment button {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--tank-muted);
  padding: 0 13px;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.tank-map-segment button.is-active {
  background: #2b2620;
  color: #fffefa;
}
[data-theme='dark'] .tank-map-segment button.is-active,
[data-theme='midnight'] .tank-map-segment button.is-active,
[data-theme='forest'] .tank-map-segment button.is-active,
[data-theme='rose'] .tank-map-segment button.is-active,
[data-theme='orbit'] .tank-map-segment button.is-active,
[data-theme='mindful'] .tank-map-segment button.is-active {
  background: #f5efe4;
  color: #211c17;
}
.tank-map-window-right > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--tank-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.tank-share-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #20b970;
}
.tank-map-more {
  color: var(--tank-muted);
  font-size: 12px;
  font-weight: 900;
}
.tank-map-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tank-map-lines path {
  fill: none;
  stroke: rgba(189, 140, 68, 0.58);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tank-mindmap-stage {
  position: absolute;
  left: 50%;
  top: calc(58px + 50%);
  width: min(1120px, calc(100% - 72px));
  height: min(720px, calc(100% - 112px));
  min-height: 620px;
  transform: translate(-50%, -50%);
}
.tank-map-core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: min(320px, calc(100% - 48px));
  min-height: 82px;
  padding: 18px 22px;
  transform: translate(-50%, -50%);
  border-radius: 13px;
  background: #2b2620;
  color: #fffefa;
  box-shadow: 0 24px 50px rgba(61, 50, 38, 0.24);
}
[data-theme='dark'] .tank-map-core,
[data-theme='midnight'] .tank-map-core,
[data-theme='forest'] .tank-map-core,
[data-theme='rose'] .tank-map-core,
[data-theme='orbit'] .tank-map-core,
[data-theme='mindful'] .tank-map-core {
  background: #f5efe4;
  color: #211c17;
}
.tank-map-core strong {
  overflow: hidden;
  font-size: 22px;
  line-height: 1.05;
  text-overflow: ellipsis;
}
.tank-map-card {
  position: absolute;
  width: 300px;
  padding: 20px 22px;
  border: 1px solid var(--tank-border);
  border-radius: 16px;
  background: var(--tank-card);
  box-shadow: 0 20px 50px rgba(79, 69, 55, 0.12);
  backdrop-filter: blur(14px);
}
[data-theme='dark'] .tank-map-card,
[data-theme='midnight'] .tank-map-card,
[data-theme='forest'] .tank-map-card,
[data-theme='rose'] .tank-map-card,
[data-theme='orbit'] .tank-map-card,
[data-theme='mindful'] .tank-map-card {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.26);
}
.tank-map-card--brainstorm { left: 50%; top: 70px; transform: translateX(-50%); }
.tank-map-card--share { left: 6%; top: 242px; }
.tank-map-card--roadmap { right: 6%; top: 242px; }
.tank-map-card--portal { left: 15%; bottom: 32px; }
.tank-map-card--feedback { right: 15%; bottom: 32px; }
.tank-map-kicker {
  margin: 0 0 10px;
  color: #9f9385;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tank-map-card h3 {
  margin: 0 0 12px;
  color: var(--tank-ink);
  font-size: 17px;
  line-height: 1.2;
  font-weight: 850;
}
.tank-map-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tank-live-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 8px;
  background: rgba(36, 160, 90, 0.14);
  color: #23864e;
  font-size: 12px;
  font-weight: 850;
}
.tank-map-mini-list {
  display: grid;
  gap: 7px;
  color: var(--tank-muted);
  font-size: 13px;
  font-weight: 700;
}
.tank-map-mini-list span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tank-map-mini-list i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--tank-ochre);
}
.tank-map-input,
.tank-map-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--tank-border);
  border-radius: 9px;
  background: rgba(244, 241, 235, 0.74);
  color: var(--tank-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: transform 160ms ease, color 160ms ease, background 160ms ease;
}
[data-theme='dark'] .tank-map-input,
[data-theme='midnight'] .tank-map-input,
[data-theme='forest'] .tank-map-input,
[data-theme='rose'] .tank-map-input,
[data-theme='orbit'] .tank-map-input,
[data-theme='mindful'] .tank-map-input,
[data-theme='dark'] .tank-map-row,
[data-theme='midnight'] .tank-map-row,
[data-theme='forest'] .tank-map-row,
[data-theme='rose'] .tank-map-row,
[data-theme='orbit'] .tank-map-row,
[data-theme='mindful'] .tank-map-row {
  background: rgba(5, 5, 5, 0.56);
}
.tank-map-row {
  justify-content: space-between;
  min-height: 48px;
}
.tank-map-input:hover,
.tank-map-row:hover {
  transform: translateY(-1px);
  color: var(--tank-ink);
  background: #fffefa;
}
[data-theme='dark'] .tank-map-input:hover,
[data-theme='midnight'] .tank-map-input:hover,
[data-theme='forest'] .tank-map-input:hover,
[data-theme='rose'] .tank-map-input:hover,
[data-theme='orbit'] .tank-map-input:hover,
[data-theme='mindful'] .tank-map-input:hover,
[data-theme='dark'] .tank-map-row:hover,
[data-theme='midnight'] .tank-map-row:hover,
[data-theme='forest'] .tank-map-row:hover,
[data-theme='rose'] .tank-map-row:hover,
[data-theme='orbit'] .tank-map-row:hover,
[data-theme='mindful'] .tank-map-row:hover {
  background: rgba(28, 28, 27, 0.94);
}
.tank-avatar,
.tank-project-mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #b9945c;
  color: #fffefa;
  font-size: 12px;
  font-weight: 900;
}
.tank-map-roadmap {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--tank-muted);
  font-size: 13px;
  font-weight: 700;
}
.tank-map-roadmap li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.tank-map-roadmap strong {
  color: var(--tank-ink);
}
.tank-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}
.tank-dot--green { background: var(--tank-green); }
.tank-dot--ochre { background: #d0900b; }
.tank-dot--gray { background: var(--tank-gray); }
.tank-map-evidence {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: var(--tank-muted);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}
.tank-map-controls {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  border: 1px solid var(--tank-border);
  border-radius: 10px;
  background: rgba(255, 254, 250, 0.88);
  box-shadow: 0 12px 30px rgba(79, 69, 55, 0.12);
  backdrop-filter: blur(16px);
}
[data-theme='dark'] .tank-map-controls,
[data-theme='midnight'] .tank-map-controls,
[data-theme='forest'] .tank-map-controls,
[data-theme='rose'] .tank-map-controls,
[data-theme='orbit'] .tank-map-controls,
[data-theme='mindful'] .tank-map-controls {
  background: rgba(8, 8, 8, 0.92);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
.tank-map-controls span,
.tank-map-controls strong {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  color: var(--tank-muted);
  font-size: 12px;
  font-weight: 800;
}
.tank-map-controls strong {
  margin: 0 2px;
  border-radius: 7px;
  background: #2b2620;
  color: #fffefa;
}
[data-theme='dark'] .tank-map-controls strong,
[data-theme='midnight'] .tank-map-controls strong,
[data-theme='forest'] .tank-map-controls strong,
[data-theme='rose'] .tank-map-controls strong,
[data-theme='orbit'] .tank-map-controls strong,
[data-theme='mindful'] .tank-map-controls strong {
  background: #f5efe4;
  color: #211c17;
}

/* ===== Mind map canvas ===== */
.tank-mindmap-wrap {
  position: absolute;
  inset: 58px 0 0;
  overflow: hidden;
}
.mm-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.mm-canvas.is-panning { cursor: grabbing; }
/* Subtle dot-grid that pans/zooms with the canvas. Only shown while snap
   is enabled — the toolbar Snap toggle controls the .has-grid class. */
.mm-canvas.has-grid {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.2px);
  background-size: var(--mm-grid, 20px) var(--mm-grid, 20px);
  background-position: var(--mm-tx, 0) var(--mm-ty, 0);
}
[data-theme-variant='light'] .mm-canvas.has-grid,
[data-theme-variant='ivory'] .mm-canvas.has-grid,
[data-theme-variant='orbit-white'] .mm-canvas.has-grid {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.10) 1px, transparent 1.2px);
}
.mm-world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.mm-edges {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}
.mm-edges path {
  fill: none;
  stroke: rgba(189, 140, 68, 0.65);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-theme='dark'] .mm-edges path,
[data-theme='midnight'] .mm-edges path,
[data-theme='forest'] .mm-edges path,
[data-theme='rose'] .mm-edges path,
[data-theme='orbit'] .mm-edges path,
[data-theme='mindful'] .mm-edges path {
  stroke: rgba(208, 164, 91, 0.7);
}

/* Cards */
.mm-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: #f6f6f7;
  border: 1px solid #d8d8dc;
  box-shadow: 0 14px 32px rgba(20, 20, 24, 0.14);
  cursor: grab;
  transition: box-shadow 160ms ease, border-color 160ms ease;
  overflow: visible;
  color: #1c1c1f;
}
.mm-card:active { cursor: grabbing; }
.mm-card.is-selected {
  border-color: var(--tank-ochre);
  box-shadow: 0 0 0 2px var(--tank-ochre), 0 16px 36px rgba(20, 20, 24, 0.2);
}
.mm-card--section {
  background: #232327;
  border-color: #2c2c30;
  color: #f4f4f6;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
}
.mm-card--section.is-selected {
  border-color: var(--tank-ochre);
  box-shadow: 0 0 0 2px var(--tank-ochre), 0 18px 40px rgba(0, 0, 0, 0.5);
}
[data-theme='dark'] .mm-card,
[data-theme='midnight'] .mm-card,
[data-theme='forest'] .mm-card,
[data-theme='rose'] .mm-card,
[data-theme='orbit'] .mm-card,
[data-theme='mindful'] .mm-card {
  background: #ededee;
  border-color: rgba(255, 255, 255, 0.14);
  color: #18181a;
}
[data-theme='dark'] .mm-card--section,
[data-theme='midnight'] .mm-card--section,
[data-theme='forest'] .mm-card--section,
[data-theme='rose'] .mm-card--section,
[data-theme='orbit'] .mm-card--section,
[data-theme='mindful'] .mm-card--section {
  background: #1b1b1e;
  border-color: rgba(255, 255, 255, 0.1);
  color: #ededee;
}

.mm-card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 13px 13px 0 0;
  background: rgba(0, 0, 0, 0.18);
}
.mm-card-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}
.mm-card-cover-skeleton {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(110deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: mm-cover-shimmer 1.4s linear infinite;
}
.mm-card-cover-skeleton span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.mm-card-cover-skeleton span::before {
  content: "Generating…";
}
@keyframes mm-cover-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.mm-card-cover-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 16px;
  text-align: center;
  border: 0;
  background: rgba(80, 30, 30, 0.45);
  color: #ffd1d1;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.mm-card-cover-error:hover { background: rgba(100, 35, 35, 0.55); }
.mm-card-cover-error-title {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mm-card-cover-error-msg {
  max-width: 100%;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mm-card-cover-error-retry {
  margin-top: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Media-forward node variants (image / pdf / link). */
.mm-card--image,
.mm-card--pdf,
.mm-card--link {
  padding: 0;
  /* No overflow:hidden here so the hover delete (and other escaping affordances)
     can extend past the card edge. The .mm-media inner wrapper handles the
     content clipping with its own border-radius. */
  background: #18181a;
  color: #ededee;
  border-color: rgba(255, 255, 255, 0.1);
}
.mm-media {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  border-radius: inherit;
}
.mm-media--image { background: #0d0d0e; }
.mm-media--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}
.mm-media--pdf,
.mm-media--link {
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.mm-media-pdf-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #f5d99a;
  flex: 0 0 auto;
}
.mm-media-pdf-icon span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: rgba(245, 217, 154, 0.85);
}
.mm-media-favicon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.mm-media-favicon img { width: 28px; height: 28px; object-fit: contain; }
.mm-media-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.mm-media-title {
  font-size: 14px;
  font-weight: 800;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-media-sub {
  font-size: 11px;
  font-weight: 600;
  color: rgba(237, 237, 238, 0.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-media-open {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, background 140ms ease;
}
.mm-card:hover .mm-media-open,
.mm-card.is-selected .mm-media-open { opacity: 1; }
.mm-media-open:hover { background: rgba(0, 0, 0, 0.72); }

/* Upload error toast (sits above the toolbar). */
.mm-upload-error {
  position: absolute;
  right: 18px;
  bottom: 64px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border: 1px solid rgba(225, 90, 90, 0.4);
  border-radius: 10px;
  background: rgba(60, 18, 18, 0.92);
  color: #ffd1d1;
  font-size: 12px;
  font-weight: 700;
  max-width: 360px;
  backdrop-filter: blur(12px);
}
.mm-upload-error button {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.mm-upload-error button:hover { background: rgba(255, 255, 255, 0.18); }

.mm-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 58px;
  padding: 0 18px;
}
.mm-card-body {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-top: 1px solid rgba(80, 80, 90, 0.16);
}
.mm-card--section .mm-card-body {
  border-top-color: rgba(255, 255, 255, 0.07);
}
.mm-title {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.005em;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.mm-desc {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--tank-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.mm-card--section .mm-desc {
  color: rgba(245, 239, 228, 0.7);
}
.mm-desc.is-placeholder { opacity: 0.55; font-style: italic; font-weight: 500; }
.mm-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--tank-ochre);
  flex: 0 0 auto;
}
.mm-dot--section { background: #fffefa; opacity: 0.85; }
[data-theme='dark'] .mm-dot--section,
[data-theme='midnight'] .mm-dot--section,
[data-theme='forest'] .mm-dot--section,
[data-theme='rose'] .mm-dot--section,
[data-theme='orbit'] .mm-dot--section,
[data-theme='mindful'] .mm-dot--section {
  background: #f5efe4;
}

/* Inline edit fields */
.mm-edit {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0;
}
.mm-edit-title { font-size: 15px; font-weight: 800; letter-spacing: 0.005em; }
.mm-edit-desc { font-size: 13px; font-weight: 600; color: var(--tank-muted); }
.mm-card--section .mm-edit-desc { color: rgba(245, 239, 228, 0.85); }
.mm-edit:focus { outline: 0; }

/* Add-child button (the "+" below a card) */
.mm-add-btn {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 0;
  background: #2b2620;
  color: #fffefa;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
  transition: transform 140ms ease, background 140ms ease;
  z-index: 2;
}
.mm-add-btn:hover { transform: translateX(-50%) scale(1.08); background: #3b332a; }
[data-theme='dark'] .mm-add-btn,
[data-theme='midnight'] .mm-add-btn,
[data-theme='forest'] .mm-add-btn,
[data-theme='rose'] .mm-add-btn,
[data-theme='orbit'] .mm-add-btn,
[data-theme='mindful'] .mm-add-btn {
  background: #f5efe4;
  color: #211c17;
}

/* Delete (top-right "x") button shown on hover / selection. */
.mm-delete-btn {
  position: absolute;
  top: -9px;
  right: -9px;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 0;
  background: #c14a4a;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
  transition: transform 140ms ease, background 140ms ease;
  z-index: 3;
}
.mm-delete-btn:hover { transform: scale(1.1); background: #d6585a; }

/* Right-click context menu. */
.mm-menu {
  position: absolute;
  z-index: 6;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--tank-border);
  border-radius: 12px;
  background: #181613;
  color: var(--tank-ink);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
}
[data-theme-variant='light'] .mm-menu,
[data-theme-variant='ivory'] .mm-menu,
[data-theme-variant='orbit-white'] .mm-menu {
  background: #fffefa;
  color: #211c17;
  box-shadow: 0 18px 44px rgba(40, 30, 14, 0.22);
}
.mm-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.mm-menu-item:hover { background: rgba(189, 140, 68, 0.16); }
.mm-menu-item--danger { color: #ff7676; }
.mm-menu-item--danger:hover { background: rgba(225, 90, 90, 0.18); }
.mm-menu-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  color: var(--tank-muted);
  flex: 0 0 auto;
}
.mm-menu-item--danger .mm-menu-icon { color: inherit; }
.mm-menu-sep {
  height: 1px;
  background: var(--tank-border);
  margin: 4px 6px;
}

/* Toolbar */
.mm-toolbar {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--tank-border);
  border-radius: 12px;
  background: rgba(255, 254, 250, 0.92);
  box-shadow: 0 12px 30px rgba(79, 69, 55, 0.14);
  backdrop-filter: blur(16px);
}
[data-theme='dark'] .mm-toolbar,
[data-theme='midnight'] .mm-toolbar,
[data-theme='forest'] .mm-toolbar,
[data-theme='rose'] .mm-toolbar,
[data-theme='orbit'] .mm-toolbar,
[data-theme='mindful'] .mm-toolbar {
  background: rgba(8, 8, 8, 0.92);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}
.mm-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--tank-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  border-radius: 8px;
  transition: background 140ms ease, color 140ms ease;
}
.mm-tb-btn:hover { background: rgba(120, 100, 70, 0.12); color: var(--tank-ink); }
[data-theme='dark'] .mm-tb-btn:hover,
[data-theme='midnight'] .mm-tb-btn:hover,
[data-theme='forest'] .mm-tb-btn:hover,
[data-theme='rose'] .mm-tb-btn:hover,
[data-theme='orbit'] .mm-tb-btn:hover,
[data-theme='mindful'] .mm-tb-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}
.mm-tb-btn.mm-tb-btn--toggle.is-active {
  background: #2b2620;
  color: #fffefa;
}
[data-theme='dark'] .mm-tb-btn.mm-tb-btn--toggle.is-active,
[data-theme='midnight'] .mm-tb-btn.mm-tb-btn--toggle.is-active,
[data-theme='forest'] .mm-tb-btn.mm-tb-btn--toggle.is-active,
[data-theme='rose'] .mm-tb-btn.mm-tb-btn--toggle.is-active,
[data-theme='orbit'] .mm-tb-btn.mm-tb-btn--toggle.is-active,
[data-theme='mindful'] .mm-tb-btn.mm-tb-btn--toggle.is-active {
  background: #f5efe4;
  color: #211c17;
}
.mm-tb-icon {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: rgba(43, 38, 32, 0.85);
  color: #fffefa;
  font-size: 10px;
  font-weight: 900;
}
[data-theme='dark'] .mm-tb-icon,
[data-theme='midnight'] .mm-tb-icon,
[data-theme='forest'] .mm-tb-icon,
[data-theme='rose'] .mm-tb-icon,
[data-theme='orbit'] .mm-tb-icon,
[data-theme='mindful'] .mm-tb-icon {
  background: #f5efe4;
  color: #211c17;
}
.mm-tb-zoom {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0 1px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--tank-muted);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.mm-tb-zoom:hover { background: rgba(120, 100, 70, 0.12); color: var(--tank-ink); }
.mm-tb-zoom-val {
  min-width: 44px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--tank-muted);
  letter-spacing: 0.02em;
}

/* Lightbulb (link to capture) */
.mm-lightbulb {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0 4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(120, 100, 70, 0.7);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 140ms ease, color 140ms ease;
}
.mm-lightbulb:hover { background: rgba(189, 140, 68, 0.16); color: var(--tank-ochre); }
.mm-lightbulb.is-linked { color: var(--tank-ochre); }
.mm-card--section .mm-lightbulb { color: rgba(245, 239, 228, 0.55); }
.mm-card--section .mm-lightbulb:hover { background: rgba(245, 239, 228, 0.1); color: #f5d99a; }
.mm-card--section .mm-lightbulb.is-linked { color: #f5d99a; }

/* Picker popover */
.mm-picker {
  position: absolute;
  z-index: 5;
  width: 300px;
  max-height: 360px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--tank-border);
  border-radius: 14px;
  background: #fffefa;
  box-shadow: 0 18px 44px rgba(40, 30, 14, 0.22);
}
[data-theme='dark'] .mm-picker,
[data-theme='midnight'] .mm-picker,
[data-theme='forest'] .mm-picker,
[data-theme='rose'] .mm-picker,
[data-theme='orbit'] .mm-picker,
[data-theme='mindful'] .mm-picker {
  background: #181613;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.mm-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mm-picker-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tank-muted);
}
.mm-picker-unlink {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  color: var(--tank-ochre);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 5px;
}
.mm-picker-unlink:hover { background: rgba(189, 140, 68, 0.14); }
.mm-picker-search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--tank-border);
  border-radius: 8px;
  background: rgba(244, 241, 235, 0.7);
  color: var(--tank-ink);
  font: inherit;
  font-size: 13px;
  outline: 0;
}
.mm-picker-search:focus { border-color: var(--tank-ochre); background: #fffefa; }
[data-theme='dark'] .mm-picker-search,
[data-theme='midnight'] .mm-picker-search,
[data-theme='forest'] .mm-picker-search,
[data-theme='rose'] .mm-picker-search,
[data-theme='orbit'] .mm-picker-search,
[data-theme='mindful'] .mm-picker-search {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--tank-ink);
}
[data-theme='dark'] .mm-picker-search:focus,
[data-theme='midnight'] .mm-picker-search:focus,
[data-theme='forest'] .mm-picker-search:focus,
[data-theme='rose'] .mm-picker-search:focus,
[data-theme='orbit'] .mm-picker-search:focus,
[data-theme='mindful'] .mm-picker-search:focus {
  background: rgba(0, 0, 0, 0.6);
}
.mm-picker-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 2px;
}
.mm-picker-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  text-align: left;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--tank-ink);
  cursor: pointer;
  font: inherit;
  transition: background 120ms ease;
}
.mm-picker-item:hover { background: rgba(189, 140, 68, 0.1); }
.mm-picker-item.is-current { background: rgba(189, 140, 68, 0.18); }
.mm-picker-item-title {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.mm-picker-item-desc {
  font-size: 12px;
  font-weight: 600;
  color: var(--tank-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mm-picker-item-meta {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tank-muted);
  opacity: 0.7;
}
.mm-picker-empty {
  padding: 14px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tank-muted);
  text-align: center;
}

.tank-roadmap-view {
  position: absolute;
  inset: 58px 0 0;
  overflow: auto;
  padding: clamp(26px, 4vw, 54px);
  background:
    radial-gradient(circle at 88% 16%, rgba(226, 218, 205, 0.54), transparent 22%),
    rgba(255, 254, 250, 0.72);
}
[data-theme='dark'] .tank-roadmap-view,
[data-theme='midnight'] .tank-roadmap-view,
[data-theme='forest'] .tank-roadmap-view,
[data-theme='rose'] .tank-roadmap-view,
[data-theme='orbit'] .tank-roadmap-view,
[data-theme='mindful'] .tank-roadmap-view {
  background:
    radial-gradient(circle at 88% 16%, rgba(255, 255, 255, 0.07), transparent 22%),
    rgba(5, 5, 5, 0.34);
}
.tank-roadmap-portal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 920px;
  margin: 0 auto 28px;
}
.tank-roadmap-mark {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: #2b2620;
  color: #fffefa;
  font-size: 15px;
  font-weight: 900;
}
[data-theme='dark'] .tank-roadmap-mark,
[data-theme='midnight'] .tank-roadmap-mark,
[data-theme='forest'] .tank-roadmap-mark,
[data-theme='rose'] .tank-roadmap-mark,
[data-theme='orbit'] .tank-roadmap-mark,
[data-theme='mindful'] .tank-roadmap-mark {
  background: #f5efe4;
  color: #080808;
}
.tank-roadmap-portal-header h3 {
  margin: 0;
  color: var(--tank-ink);
  font-size: 25px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 0;
}
.tank-roadmap-portal-header p {
  margin: 4px 0 0;
  color: var(--tank-muted);
  font-size: 15px;
  font-weight: 750;
}
.tank-roadmap-tabs {
  display: flex;
  align-items: flex-end;
  gap: clamp(24px, 7vw, 78px);
  max-width: 920px;
  margin: 0 auto 20px;
  border-bottom: 1px solid var(--tank-border);
}
.tank-roadmap-tabs span {
  position: relative;
  display: inline-flex;
  padding: 0 0 18px;
  color: var(--tank-muted);
  font-size: 22px;
  line-height: 1;
  font-weight: 850;
}
.tank-roadmap-tabs span.is-active {
  color: var(--tank-ink);
}
.tank-roadmap-tabs span.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--tank-ink);
}
.tank-roadmap-list {
  max-width: 920px;
  margin: 0 auto;
  padding-bottom: 44px;
}
.tank-roadmap-quarter {
  margin-top: 18px;
}
.tank-roadmap-quarter h4 {
  margin: 0 0 7px;
  color: var(--tank-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tank-roadmap-quarter ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tank-roadmap-quarter li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--tank-border);
  border-radius: 10px;
  background: rgba(255, 254, 250, 0.78);
  box-shadow: 0 10px 30px rgba(79, 69, 55, 0.05);
}
[data-theme='dark'] .tank-roadmap-quarter li,
[data-theme='midnight'] .tank-roadmap-quarter li,
[data-theme='forest'] .tank-roadmap-quarter li,
[data-theme='rose'] .tank-roadmap-quarter li,
[data-theme='orbit'] .tank-roadmap-quarter li,
[data-theme='mindful'] .tank-roadmap-quarter li {
  background: rgba(14, 14, 14, 0.82);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.tank-roadmap-quarter strong {
  overflow: hidden;
  color: var(--tank-ink);
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tank-roadmap-quarter em {
  color: var(--tank-muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 750;
}

.tank-product-stage {
  position: absolute;
  inset: 58px 0 0;
  overflow-y: auto;
  padding: clamp(28px, 4vw, 56px);
  background:
    radial-gradient(circle at 78% 14%, rgba(226, 218, 205, 0.42), transparent 24%),
    rgba(255, 254, 250, 0.58);
}
[data-theme='dark'] .tank-product-stage,
[data-theme='midnight'] .tank-product-stage,
[data-theme='forest'] .tank-product-stage,
[data-theme='rose'] .tank-product-stage,
[data-theme='orbit'] .tank-product-stage,
[data-theme='mindful'] .tank-product-stage {
  background:
    radial-gradient(circle at 78% 14%, rgba(255, 255, 255, 0.06), transparent 24%),
    rgba(5, 5, 5, 0.28);
}
.tank-product-view {
  display: grid;
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
  color: var(--tank-ink);
}
.tank-product-view .tank-detail-top {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--tank-border);
}
.tank-product-view .tank-detail-summary {
  max-width: 720px;
  font-size: 16px;
}
.tank-product-view .tank-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tank-product-view .tank-action {
  justify-content: center;
  min-height: 48px;
  font-size: 14px;
}
.tank-product-view .tank-field {
  max-width: 360px;
}
.tank-product-view .tank-panel-section {
  padding-top: 20px;
}

.tank-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 0 0 320px;
  width: 320px;
  min-width: 320px;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  border-left: 1px solid var(--divider);
  background: transparent;
  box-shadow: none;
  scrollbar-width: thin;
}
[data-theme='dark'] .tank-detail,
[data-theme='midnight'] .tank-detail,
[data-theme='forest'] .tank-detail,
[data-theme='rose'] .tank-detail,
[data-theme='orbit'] .tank-detail,
[data-theme='mindful'] .tank-detail {
  background: transparent;
  box-shadow: none;
}
.tank-detail-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tank-project-mark {
  width: 38px;
  height: 38px;
  background: #2b2620;
}
[data-theme='dark'] .tank-project-mark,
[data-theme='midnight'] .tank-project-mark,
[data-theme='forest'] .tank-project-mark,
[data-theme='rose'] .tank-project-mark,
[data-theme='orbit'] .tank-project-mark,
[data-theme='mindful'] .tank-project-mark {
  background: #f5efe4;
  color: #211c17;
}
.tank-detail-eyebrow {
  margin: 0 0 3px;
  color: var(--tank-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tank-detail h2 {
  margin: 0;
  color: var(--tank-ink);
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0;
}
.tank-detail-summary {
  margin: 0;
  color: var(--tank-muted);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 650;
}
.tank-action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
}
.tank-action {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--tank-border);
  border-radius: 11px;
  background: #fffefa;
  color: var(--tank-ink);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}
[data-theme='dark'] .tank-action,
[data-theme='midnight'] .tank-action,
[data-theme='forest'] .tank-action,
[data-theme='rose'] .tank-action,
[data-theme='orbit'] .tank-action,
[data-theme='mindful'] .tank-action {
  background: rgba(14, 14, 14, 0.86);
}
.tank-action:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #f7f2e9;
}
[data-theme='dark'] .tank-action:hover:not(:disabled),
[data-theme='midnight'] .tank-action:hover:not(:disabled),
[data-theme='forest'] .tank-action:hover:not(:disabled),
[data-theme='rose'] .tank-action:hover:not(:disabled),
[data-theme='orbit'] .tank-action:hover:not(:disabled),
[data-theme='mindful'] .tank-action:hover:not(:disabled) {
  background: rgba(28, 28, 27, 0.96);
}
.tank-action:active:not(:disabled) {
  transform: scale(0.985);
}
.tank-action:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}
.tank-action--danger {
  color: #9f3d34;
}
.tank-field {
  display: grid;
  gap: 7px;
  margin: 0;
  color: var(--tank-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.tank-field select {
  min-height: 36px;
  border: 1px solid var(--tank-border);
  border-radius: 11px;
  background: #fffefa;
  color: var(--tank-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  padding: 0 12px;
}
[data-theme='dark'] .tank-field select,
[data-theme='midnight'] .tank-field select,
[data-theme='forest'] .tank-field select,
[data-theme='rose'] .tank-field select,
[data-theme='orbit'] .tank-field select,
[data-theme='mindful'] .tank-field select {
  background: rgba(14, 14, 14, 0.86);
}
.tank-panel-section {
  padding-top: 14px;
  margin-top: 0;
  border-top: 1px solid var(--tank-border);
}
.tank-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.tank-panel-heading h3 {
  margin: 0;
  color: var(--tank-ink);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tank-panel-heading button,
.tank-panel-heading span {
  border: 0;
  background: transparent;
  color: var(--tank-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.tank-panel-heading button:hover {
  color: var(--tank-ink);
}
.tank-project-empty {
  margin: 0;
  font-size: 13px;
  color: var(--tank-muted);
  line-height: 1.45;
}
.tank-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--tank-ink);
  color: var(--tank-paper);
  border: 1px solid var(--tank-ink);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.tank-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Linked project chip in note detail */
.note-linked-project {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--divider);
}
.note-linked-project-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--hover);
  border: 1px solid var(--divider);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.note-linked-project-chip:hover { background: var(--pressed); color: var(--text); }
.note-linked-project-unlink {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 120ms;
}
.note-linked-project-unlink:hover { color: var(--text); }
.tank-step-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tank-step {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--tank-border);
  border-radius: 10px;
  background: rgba(244, 241, 235, 0.58);
}
[data-theme='dark'] .tank-step,
[data-theme='midnight'] .tank-step,
[data-theme='forest'] .tank-step,
[data-theme='rose'] .tank-step,
[data-theme='orbit'] .tank-step,
[data-theme='mindful'] .tank-step {
  background: rgba(5, 5, 5, 0.44);
}
.tank-step.is-done .tank-step-label { opacity: 0.55; text-decoration: line-through; }
.tank-step-label {
  display: flex;
  gap: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--tank-ink);
  font-weight: 650;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.tank-step-label input[type="checkbox"] {
  margin-top: 3px;
  cursor: pointer;
}
.tank-step-remove {
  background: transparent;
  border: none;
  color: var(--tank-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}
.tank-step-remove:hover { color: var(--tank-ink); }
.tank-step-add {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.tank-step-input {
  flex: 1;
  min-width: 0;
  background: #fffefa;
  border: 1px solid var(--tank-border);
  border-radius: 10px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--tank-ink);
}
[data-theme='dark'] .tank-step-input,
[data-theme='midnight'] .tank-step-input,
[data-theme='forest'] .tank-step-input,
[data-theme='rose'] .tank-step-input,
[data-theme='orbit'] .tank-step-input,
[data-theme='mindful'] .tank-step-input {
  background: rgba(5, 5, 5, 0.6);
}
.tank-step-input:focus { outline: none; border-color: var(--tank-ochre); }

/* New status-aware step rows in the Product tab */
.tank-step {
  align-items: center;
}
.tank-step-text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--tank-ink);
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tank-step--done .tank-step-text { opacity: 0.55; text-decoration: line-through; }

/* Status chip (used in roadmap + product tab) */
.tank-status-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 8px 0 8px;
  border: 1px solid var(--tank-border);
  border-radius: 999px;
  background: rgba(244, 241, 235, 0.7);
  font-size: 12px;
  font-weight: 800;
  color: var(--tank-ink);
}
[data-theme='dark'] .tank-status-chip,
[data-theme='midnight'] .tank-status-chip,
[data-theme='forest'] .tank-status-chip,
[data-theme='rose'] .tank-status-chip,
[data-theme='orbit'] .tank-status-chip,
[data-theme='mindful'] .tank-status-chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.tank-status-chip select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 800;
  color: inherit;
  padding: 0 16px 0 0;
  margin: 0;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 4px center, right 0px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  outline: 0;
}
.tank-status-chip select:focus { outline: 0; }
.tank-status-chip.is-compact { min-height: 24px; font-size: 11px; padding: 0 7px; }
.tank-status-bullet {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: var(--tank-gray);
}
.tank-status-bullet--in_progress { background: #d0900b; }
.tank-status-bullet--planned { background: #7a8aa1; }
.tank-status-bullet--blocked { background: #c14a4a; }
.tank-status-bullet--done { background: var(--tank-green); }

/* Roadmap board (status lanes) */
.tank-roadmap-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.tank-roadmap-header h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -0.005em;
  color: var(--tank-ink);
}
.tank-roadmap-header p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--tank-muted);
  font-weight: 700;
}
.tank-roadmap-add {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.tank-roadmap-add input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--tank-border);
  border-radius: 12px;
  background: #fffefa;
  color: var(--tank-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  outline: 0;
}
.tank-roadmap-add input:focus { border-color: var(--tank-ochre); }
[data-theme='dark'] .tank-roadmap-add input,
[data-theme='midnight'] .tank-roadmap-add input,
[data-theme='forest'] .tank-roadmap-add input,
[data-theme='rose'] .tank-roadmap-add input,
[data-theme='orbit'] .tank-roadmap-add input,
[data-theme='mindful'] .tank-roadmap-add input {
  background: rgba(0, 0, 0, 0.42);
  border-color: rgba(255, 255, 255, 0.12);
}
.tank-roadmap-add button {
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--tank-ink);
  color: var(--tank-paper);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.tank-roadmap-add button:disabled { opacity: 0.5; cursor: not-allowed; }
[data-theme='dark'] .tank-roadmap-add button,
[data-theme='midnight'] .tank-roadmap-add button,
[data-theme='forest'] .tank-roadmap-add button,
[data-theme='rose'] .tank-roadmap-add button,
[data-theme='orbit'] .tank-roadmap-add button,
[data-theme='mindful'] .tank-roadmap-add button {
  background: var(--tank-paper);
  color: #1a1814;
}
.tank-roadmap-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  align-items: start;
}
.tank-roadmap-lane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--tank-border);
  border-radius: 16px;
  background: rgba(255, 254, 250, 0.78);
}
[data-theme='dark'] .tank-roadmap-lane,
[data-theme='midnight'] .tank-roadmap-lane,
[data-theme='forest'] .tank-roadmap-lane,
[data-theme='rose'] .tank-roadmap-lane,
[data-theme='orbit'] .tank-roadmap-lane,
[data-theme='mindful'] .tank-roadmap-lane {
  background: rgba(0, 0, 0, 0.32);
  border-color: rgba(255, 255, 255, 0.1);
}
.tank-roadmap-lane header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--tank-border);
}
.tank-roadmap-lane header h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tank-ink);
  flex: 1 1 auto;
}
.tank-roadmap-count {
  font-size: 11px;
  font-weight: 800;
  color: var(--tank-muted);
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(120, 100, 70, 0.12);
  letter-spacing: 0.02em;
}
.tank-roadmap-empty {
  margin: 4px 2px;
  font-size: 12px;
  color: var(--tank-muted);
  font-style: italic;
  opacity: 0.75;
}
.tank-roadmap-lane ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tank-roadmap-lane li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fffefa;
  border: 1px solid var(--tank-border);
}
[data-theme='dark'] .tank-roadmap-lane li,
[data-theme='midnight'] .tank-roadmap-lane li,
[data-theme='forest'] .tank-roadmap-lane li,
[data-theme='rose'] .tank-roadmap-lane li,
[data-theme='orbit'] .tank-roadmap-lane li,
[data-theme='mindful'] .tank-roadmap-lane li {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.08);
}
.tank-roadmap-item-text {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--tank-ink);
  padding: 0;
}
.tank-roadmap-item-remove {
  border: 0;
  background: transparent;
  color: var(--tank-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  opacity: 0.6;
}
.tank-roadmap-item-remove:hover { opacity: 1; color: var(--tank-ink); }

.tank-capture-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tank-capture {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid rgba(222, 214, 200, 0.72);
  font-size: 13px;
  line-height: 1.4;
}
.tank-capture:first-child {
  border-top: 0;
  padding-top: 0;
}
.tank-capture-date {
  font-size: 11px;
  color: var(--tank-muted);
  font-weight: 850;
  flex-shrink: 0;
}
.tank-capture-body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--tank-ink);
  font-weight: 650;
}
.tank-project-notes {
  width: 100%;
  background: #fffefa;
  border: 1px solid var(--tank-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tank-ink);
  resize: vertical;
  font-family: inherit;
}
[data-theme='dark'] .tank-project-notes,
[data-theme='midnight'] .tank-project-notes,
[data-theme='forest'] .tank-project-notes,
[data-theme='rose'] .tank-project-notes,
[data-theme='orbit'] .tank-project-notes,
[data-theme='mindful'] .tank-project-notes {
  background: rgba(5, 5, 5, 0.6);
}
.tank-project-notes:focus { outline: none; border-color: var(--tank-ochre); }

@media (max-width: 1180px) {
  .tank-workspace {
    flex-direction: column;
    overflow-y: auto;
  }
  .tank-detail {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-height: none;
    overflow: visible;
    border-left: 0;
    border-top: 1px solid var(--tank-border);
  }
}

@media (max-width: 920px) {
  .tank-page-wrap {
    overflow-y: auto;
  }
  .tank-page { padding: 22px 16px 96px; }
  .tank-hero {
    grid-template-columns: 1fr;
  }
  .tank-hero-meter {
    min-width: 0;
  }
  .tank-map-shell {
    min-height: 1080px;
  }
  .tank-mindmap-stage {
    left: 0;
    top: 112px;
    width: 100%;
    height: auto;
    min-height: 960px;
    transform: none;
  }
  .tank-map-windowbar {
    align-items: flex-start;
    flex-direction: column;
    min-height: 112px;
    padding: 14px 16px;
  }
  .tank-map-window-left,
  .tank-map-window-right {
    width: 100%;
    justify-content: space-between;
  }
  .tank-map-card,
  .tank-map-core {
    left: 50%;
    right: auto;
    width: calc(100% - 32px);
    transform: translateX(-50%);
  }
  .tank-map-card--brainstorm { top: 138px; }
  .tank-map-card--share { top: 302px; }
  .tank-map-core { top: 472px; transform: translateX(-50%); }
  .tank-map-card--roadmap { top: 586px; }
  .tank-map-card--portal { top: 752px; bottom: auto; }
  .tank-map-card--feedback { top: 912px; bottom: auto; }
  .tank-map-lines {
    display: none;
  }
  .tank-map-controls {
    display: none;
  }
  .tank-product-stage {
    position: relative;
    inset: auto;
    padding: 132px 16px 28px;
  }
  .tank-product-view .tank-action-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .tank-hero-title {
    font-size: 38px;
  }
  .tank-hero-copy {
    font-size: 15px;
  }
  .tank-hero-meter,
  .tank-action-grid {
    grid-template-columns: 1fr;
  }
  .tank-hero-meter span + span {
    border-left: 0;
    border-top: 1px solid var(--tank-border);
  }
  .tank-project-tab {
    max-width: 270px;
  }
}
.thinking-card-badge {
  margin-left: auto;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--hover);
  color: var(--text);
  opacity: 0.7;
}
.thinking-card-badge--reminder {
  background: var(--accent-now, var(--hover));
  color: #fff;
  opacity: 0.95;
}

.briefing-card {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--hover);
  border: 1px solid var(--border, transparent);
}
.briefing-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.briefing-card-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  opacity: 0.7;
}
.briefing-card-refresh {
  background: transparent;
  border: 1px solid var(--border, currentColor);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text);
  opacity: 0.85;
}
.briefing-card-refresh:hover { opacity: 1; }
.briefing-card-refresh:disabled { opacity: 0.5; cursor: not-allowed; }
.briefing-card-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--text);
}
.briefing-card-body--muted { opacity: 0.6; font-style: italic; }
.briefing-card-error {
  margin: 0 0 6px;
  font-size: 12px;
  color: #e57373;
}

.themes-rail {
  margin: 4px 0 14px;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
}
.themes-rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.themes-rail-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  opacity: 0.7;
}
.themes-rail-refresh {
  background: transparent;
  border: 1px solid var(--divider);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-3);
  transition: color 120ms ease;
}
.themes-rail-refresh:hover { color: var(--text); }
.themes-rail-refresh:disabled { opacity: 0.5; cursor: not-allowed; }
.themes-rail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.themes-rail-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border, transparent);
  background: var(--bg, transparent);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}
.themes-rail-chip:hover { background: var(--hover); transform: translateY(-1px); }
.themes-rail-chip.is-active {
  background: var(--accent-now, var(--text));
  color: #fff;
  border-color: transparent;
}
.themes-rail-chip-emoji { font-size: 14px; }
.themes-rail-chip-title { font-weight: 500; }
.themes-rail-chip-count {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.22);
  opacity: 0.85;
}
.themes-rail-chip.is-active .themes-rail-chip-count {
  background: rgba(255, 255, 255, 0.22);
}
.themes-rail-empty {
  margin: 0;
  font-size: 13px;
  opacity: 0.6;
  font-style: italic;
}
.themes-rail-active-summary {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.85;
}
.themes-rail-error {
  margin: 0 0 8px;
  font-size: 12px;
  color: #e57373;
}

.thinking-card-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.thinking-card-theme {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border, transparent);
  background: transparent;
  color: var(--text);
  opacity: 0.8;
}

/* ── Project badges on capture cards ──────────────── */
.thinking-card-projects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.thinking-card-project-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent, #60a5fa) 35%, transparent);
  background: color-mix(in srgb, var(--accent, #60a5fa) 10%, transparent);
  color: var(--accent, #60a5fa);
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.15s, background 0.15s;
}
.thinking-card-project-badge:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--accent, #60a5fa) 18%, transparent);
}
.thinking-card-project-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.thinking-card-connections {
  margin-top: 6px;
}
.thinking-card-connections-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 2px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-now, var(--text));
  cursor: pointer;
  opacity: 0.9;
}
.thinking-card-connections-toggle:hover { opacity: 1; }
.thinking-card-connections-chev { font-size: 10px; }
.thinking-card-connections-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 2px solid var(--border, currentColor);
  padding-left: 10px;
}
.thinking-card-connections-item { margin: 0; }
.thinking-card-connections-link {
  display: block;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
}
.thinking-card-connections-link:hover .thinking-card-connections-peer {
  text-decoration: underline;
}
.thinking-card-connections-peer {
  font-weight: 500;
}
.thinking-card-connections-reason {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.7;
  font-style: italic;
}

/* ---- ArticleCard (card-23) ---- */
.article-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: transparent;
  border: 1px solid var(--divider);
  cursor: default;
  will-change: transform;
}
.article-card-body {
  padding: 14px 16px 10px;
  background: var(--hover);
  border-radius: 14px 14px 0 0;
}
.article-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.article-card-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--hover);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.article-card-date {
  display: flex;
  align-items: stretch;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  overflow: hidden;
}
.article-card-date-month {
  padding: 3px 7px;
  background: var(--hover);
  color: var(--text-2);
}
.article-card-date-day {
  padding: 3px 7px;
  background: var(--text-3);
  color: var(--bg-window, #1a1a1a);
}
.article-card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.article-card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card-img-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0 0 14px 14px;
  margin-top: 4px;
}
.article-card-img-wrap:has(+ .capture-card-extras) {
  border-radius: 0;
}
.article-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-card-img-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 50%, transparent 100%);
  pointer-events: none;
}
.article-card-location {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  color: #fff;
}
.article-card-location-city {
  font-size: 12px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}
.article-card-location-country {
  font-size: 10px;
  margin: 0;
  opacity: 0.8;
  line-height: 1.2;
}
.article-card-location-inline {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 16px 10px;
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg-window-2);
  border-radius: 0 0 14px 14px;
}
.article-card-location-inline:has(+ .capture-card-extras) {
  border-radius: 0;
}

/* ---- CaptureCard (article-card variant) ---- */
.capture-card {
  cursor: default;
}
.capture-card.is-hovered {
  border-color: color-mix(in srgb, var(--text-3) 30%, transparent);
}
.capture-card.is-focused {
  animation: thinking-card-flash 1.4s ease;
}
.capture-card-tag-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  vertical-align: middle;
}
.capture-card-processing {
  margin-left: 4px;
  opacity: 0.6;
  font-style: italic;
}
.capture-card-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 120ms ease;
}
.capture-card:hover .capture-card-actions {
  opacity: 1;
}
.capture-card-extras {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 16px 12px;
  background: var(--bg-window-2);
  border-top: 1px solid var(--divider);
  border-radius: 0 0 14px 14px;
}

@media (max-width: 980px) {
  .thinking-auth-promo {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .thinking-auth-panel {
    min-height: auto;
  }
  .thinking-page--split {
    flex-direction: column;
    overflow-y: auto;
  }
  .thinking-main {
    overflow-y: visible;
    flex: none;
    padding: 20px 16px 0;
  }
  .thinking-sidebar {
    width: auto;
    min-width: auto;
    max-height: 60vh;
    border-left: none;
    border-top: 1px solid var(--divider);
    padding-bottom: 96px;
  }
  .thinking-diagram-wrap {
    max-width: 480px;
  }
}
@media (max-width: 720px) {
  .thinking-page {
    padding: 20px 16px 96px;
  }
  .thinking-page--signed-out {
    padding-top: 24px;
  }
  .thinking-auth-promo {
    margin-top: 10px;
  }
  .thinking-auth-title {
    font-size: clamp(34px, 12vw, 48px);
  }
  .thinking-auth-actions {
    width: 100%;
  }
  .thinking-auth-actions > * {
    flex: 1 1 145px;
  }
  .thinking-auth-btn {
    width: 100%;
  }
  .thinking-auth-panel {
    padding: 14px;
    border-radius: 16px;
  }
  .thinking-auth-orbit {
    min-height: 190px;
  }
  .thinking-auth-orbit-node {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
  .thinking-auth-orbit-node--brain {
    width: 62px;
    height: 62px;
  }
  .thinking-auth-steps li {
    grid-template-columns: 1fr;
  }
  .thinking-title { font-size: 24px; }
  .thinking-card-delete { opacity: 1; }
  .thinking-node-leaf .thinking-leaf-label { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   CAPTURE PAGE  — mobile-first capture hub
   ═══════════════════════════════════════════════════════════════ */

.capture-page {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #0d0d0d;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: #f0f0f0;
  font-family: var(--font-sans);
  overscroll-behavior: none;
}

.capture-page:not(.is-modal) {
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 24px);
}

.capture-page-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.capture-page.is-modal {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.capture-page.is-modal .capture-page-inner {
  background: #0d0d0d;
  border-radius: 32px;
  max-width: 460px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
  scrollbar-width: none;
}
.capture-page.is-modal .capture-header {
  padding-top: 48px;
}
.capture-page.is-modal .capture-hero {
  padding-left: 40px;
  padding-right: 40px;
}
.capture-page.is-modal .capture-main {
  padding: 0 40px 48px;
}
.capture-page.is-modal .capture-page-inner::-webkit-scrollbar { display: none; }

.capture-page.is-modal .capture-hero-title {
  font-size: 24px;
}

.capture-page.is-modal .capture-grid {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.capture-page.is-modal .capture-grid-wide {
  grid-column: auto;
  flex: 1;
}

.capture-page.is-modal .capture-grid > div {
  flex: 1;
}

.capture-page.is-modal .capture-tile {
  aspect-ratio: 1 / 1;
  padding: 10px 4px;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 16px;
}

.capture-page.is-modal .capture-tile-icon {
  position: static;
  transform: none;
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
}

.capture-page.is-modal .capture-tile-label {
  font-size: 11px;
}

.capture-page.is-modal .capture-tile-desc {
  display: none;
}

.capture-page.is-modal .capture-tile--wide {
  height: auto;
  flex-direction: column;
  gap: 0;
}

.capture-page.is-modal .capture-tile--wide .cap-audio-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.capture-page.is-modal .capture-tile--wide .cap-audio-status {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.capture-page.is-modal .capture-tile--wide .cap-audio-right,
.capture-page.is-modal .capture-tile--wide .cap-audio-indicator {
  display: none;
}

.capture-page.is-modal .capture-tile--wide .capture-tile-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
  flex: none;
}

.capture-page.is-modal .cap-audio-icon-col {
  width: 24px !important;
  height: 24px !important;
  margin-bottom: 6px;
}

.capture-page.is-modal .cap-audio-icon-col .cap-icon {
  width: 24px !important;
  height: 24px !important;
}

.capture-page.is-modal .cap-audio-hold-hint {
  display: none;
}

.capture-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) 24px 0;
}

.capture-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.capture-logo-img {
  display: block;
  flex: none;
  border-radius: 6px;
}

.capture-logo-wordmark {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f0f0f0;
}

.capture-hero {
  padding: 24px 28px 32px;
  text-align: center;
}

.capture-hero-title {
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 0 0 12px;
  color: #ffffff;
}

.capture-hero-sub {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.44);
  max-width: 300px;
  margin: 0 auto;
}

.capture-main {
  flex: 1;
  padding: 0 20px 40px;
}

/* 2-column grid */
.capture-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 440px;
  margin: 0 auto;
}

.capture-grid-wide {
  grid-column: span 2;
}

/* Dark square tile */
.capture-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 16px 18px 20px;
  background: #191919;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 22px;
  cursor: pointer;
  gap: 3px;
  text-align: left;
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  animation: capture-tile-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--tile-delay, 0ms);
  transition: transform 120ms ease, background 120ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.capture-tile:active {
  transform: scale(0.95);
  background: #222;
}

@keyframes capture-tile-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Centered icon */
.capture-tile-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 10px));
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.cap-icon {
  width: 100%;
  height: 100%;
  display: block;
}

.capture-tile-label {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.90);
  letter-spacing: -0.01em;
  line-height: 1;
}

.capture-tile-desc {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.32);
  line-height: 1.2;
}

.capture-tile--skeleton {
  pointer-events: none;
  animation: capture-tile-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             cap-pulse 1.4s ease-in-out infinite;
}

@keyframes cap-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.65; }
}

/* Full-width audio tile */
.capture-tile--wide {
  aspect-ratio: auto;
  height: 110px;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
}

.capture-tile--wide .capture-tile-icon {
  position: static;
  transform: none;
  width: 52px;
  height: 52px;
  flex: none;
}

.capture-tile--wide .capture-tile-label,
.capture-tile--wide .capture-tile-desc {
  /* reset the flex-end anchor from the square tile */
}

.capture-tile--wide .capture-tile-label { font-size: 15px; }
.capture-tile--wide .capture-tile-desc  { font-size: 12px; }

.capture-tile-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ── Modal overlay ── */
.capture-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: cap-modal-bg 200ms ease both;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@keyframes cap-modal-bg {
  from { opacity: 0; }
}

.capture-modal {
  width: 100%;
  max-width: 480px;
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 26px 26px 0 0;
  overflow: hidden;
  animation: cap-modal-up 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cap-modal-up {
  from { transform: translateY(60px); opacity: 0; }
}

@media (min-width: 600px) {
  .capture-modal-overlay { align-items: center; }
  .capture-modal { border-radius: 26px; max-width: 420px; }
}

.capture-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 0;
}

.capture-modal-label {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: -0.01em;
}

.capture-modal-close {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 120ms ease;
}

.capture-modal-close:hover { background: rgba(255,255,255,0.14); }

.capture-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px 24px;
}

.capture-modal-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  color: #f0f0f0;
  font: inherit;
  font-size: 16px;
  padding: 13px 14px;
  outline: none;
  transition: border-color 150ms ease;
}

.capture-modal-input::placeholder { color: rgba(255,255,255,0.28); }
.capture-modal-input:focus { border-color: rgba(212, 255, 120, 0.45); }

.capture-modal-submit {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #c8ff64 0%, #34c968 100%);
  border: none;
  border-radius: 14px;
  color: #0d1a05;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: opacity 150ms ease, transform 100ms ease;
}

.capture-modal-submit:disabled { opacity: 0.38; cursor: not-allowed; }
.capture-modal-submit:active:not(:disabled) { transform: scale(0.98); }
.capture-modal-submit.is-saved { background: rgba(52, 201, 104, 0.18); color: #34c968; }
.capture-modal-submit--ghost {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.65);
}

/* ── Audio recorder ── */
.capture-audio-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 28px;
  gap: 20px;
  min-height: 180px;
}

.capture-audio-btn {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 255, 120, 0.07);
  border: 1.5px solid rgba(212, 255, 120, 0.20);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 100ms ease;
}

.capture-audio-btn:active { transform: scale(0.95); }
.capture-audio-btn .cap-icon { width: 34px; height: 34px; }

.capture-audio-ring {
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1.5px solid rgba(212, 255, 120, 0.15);
  animation: cap-ring-pulse 2.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cap-ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.12); opacity: 0.10; }
}

.capture-audio-timer {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.capture-audio-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
}

.cap-wave-bar {
  display: block;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #c8ff64 0%, #34c968 100%);
  animation: cap-wave 0.9s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * 80ms);
}

@keyframes cap-wave {
  from { height: 6px; opacity: 0.4; }
  to   { height: 28px; opacity: 1; }
}

.capture-audio-stop {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 80, 80, 0.11);
  border: 1.5px solid rgba(255, 80, 80, 0.26);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 100ms ease;
}

.capture-audio-stop:active { transform: scale(0.95); }

.capture-audio-stop-sq {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #ff5050;
}

.capture-audio-transcript {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  color: #f0f0f0;
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  resize: none;
  outline: none;
  line-height: 1.5;
}

.capture-audio-transcript::placeholder { color: rgba(255,255,255,0.28); }
.capture-audio-transcript:focus { border-color: rgba(212,255,120,0.35); }

.capture-audio-done-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.capture-audio-done-row .capture-modal-submit { flex: 1; }

/* ── Image picker ── */
.capture-img-drop {
  width: 100%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1.5px dashed rgba(255,255,255,0.14);
  border-radius: 14px;
  cursor: pointer;
  color: rgba(255,255,255,0.38);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  transition: background 150ms ease, border-color 150ms ease;
}

.capture-img-drop .cap-icon { width: 36px; height: 36px; opacity: 0.6; }
.capture-img-drop:active { background: rgba(255,255,255,0.07); border-color: rgba(212,255,120,0.28); }

.capture-img-wrap { position: relative; width: 100%; border-radius: 14px; overflow: hidden; }

.capture-img-preview {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}

.capture-img-clear {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.58);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}

/* ── Auth gate ── */
.capture-auth-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px 0;
  gap: 12px;
  animation: capture-tile-in 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.capture-auth-lock {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 255, 120, 0.06);
  border: 1px solid rgba(212, 255, 120, 0.14);
  border-radius: 20px;
  margin-bottom: 4px;
}

.capture-auth-lock .cap-icon { width: 40px; height: 40px; }

.capture-auth-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0;
}

.capture-auth-sub {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.40);
  max-width: 280px;
  margin: 0;
}

.capture-auth-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 280px;
  margin-top: 8px;
}

.capture-auth-btn {
  height: 50px;
  padding: 0 32px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  color: rgba(255,255,255,0.75);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 150ms ease, transform 100ms ease, background 150ms ease;
}

.capture-auth-btn--primary {
  background: linear-gradient(135deg, #c8ff64 0%, #34c968 100%);
  border: none;
  color: #0d1a05;
  font-weight: 700;
}

.capture-auth-btn:active { transform: scale(0.97); opacity: 0.88; }

/* ═══════════════════════════════════════════════════════════════
   FLOW PANEL  — replaces the grid when a capture type is open
   ═══════════════════════════════════════════════════════════════ */

.cap-flow-wrap {
  animation: capture-tile-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cap-flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 440px;
  margin: 0 auto;
}

/* Top bar: back button + title + step dots */
.cap-flow-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
}

.cap-flow-back {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.07);
  border: none;
  border-radius: 10px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  flex: none;
  transition: background 120ms ease;
}
.cap-flow-back:active { background: rgba(255,255,255,0.12); }

.cap-flow-title {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  letter-spacing: -0.01em;
}

.cap-flow-steps {
  display: flex;
  gap: 5px;
  align-items: center;
}

.cap-flow-step-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: background 200ms ease, width 200ms ease;
}
.cap-flow-step-dot.is-done  { background: #34c968; }
.cap-flow-step-dot.is-active { background: #d4ff78; width: 16px; border-radius: 3px; }

/* Flow body */
.cap-flow-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Inputs */
.cap-flow-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  color: #f0f0f0;
  font: inherit;
  font-size: 16px;
  padding: 13px 14px;
  outline: none;
  transition: border-color 150ms ease;
}
.cap-flow-input::placeholder { color: rgba(255,255,255,0.28); }
.cap-flow-input:focus { border-color: rgba(212,255,120,0.45); }
.cap-flow-input--title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }

.cap-flow-textarea {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  color: #f0f0f0;
  font: inherit;
  font-size: 16px;
  line-height: 1.55;
  padding: 13px 14px;
  resize: none;
  outline: none;
  transition: border-color 150ms ease;
}
.cap-flow-textarea::placeholder { color: rgba(255,255,255,0.28); }
.cap-flow-textarea:focus { border-color: rgba(212,255,120,0.45); }
.cap-flow-textarea--sm { font-size: 15px; }

/* Submit button */
.cap-flow-submit {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #c8ff64 0%, #34c968 100%);
  border: none;
  border-radius: 14px;
  color: #0d1a05;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: opacity 140ms ease, transform 100ms ease;
  margin-top: 4px;
}
.cap-flow-submit:disabled { opacity: 0.35; cursor: not-allowed; }
.cap-flow-submit:active:not(:disabled) { transform: scale(0.98); }

/* Error */
.cap-flow-error {
  font-size: 13px;
  color: #ff6b6b;
  margin: 0;
  text-align: center;
}

/* Uploading spinner state */
.cap-flow-uploading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 48px 0;
  color: rgba(255,255,255,0.55);
  font-size: 14px;
}

/* Spinner */
.cap-spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid rgba(212,255,120,0.15);
  border-top-color: #c8ff64;
  border-radius: 50%;
  animation: cap-spin 0.7s linear infinite;
}
.cap-spinner--sm { width: 22px; height: 22px; border-width: 2px; }
@keyframes cap-spin { to { transform: rotate(360deg); } }

/* Image picker inside flow */
.cap-flow-img-drop {
  width: 100%;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1.5px dashed rgba(255,255,255,0.14);
  border-radius: 16px;
  cursor: pointer;
  color: rgba(255,255,255,0.38);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  transition: background 150ms ease;
}
.cap-flow-img-drop .cap-icon { width: 40px; height: 40px; opacity: 0.6; }
.cap-flow-img-drop:active { background: rgba(255,255,255,0.07); }

.cap-flow-img-wrap {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
}
.cap-flow-img-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cap-flow-img-clear {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   CONFIRMATION SCREEN
   ═══════════════════════════════════════════════════════════════ */

.cap-flow-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 56px 0 24px;
  text-align: center;
  animation: capture-tile-in 350ms cubic-bezier(0.16, 1, 0.3, 1) both;
  max-width: 440px;
  margin: 0 auto;
}

.cap-confirm-ring {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(52,201,104,0.10);
  border-radius: 50%;
  border: 1.5px solid rgba(52,201,104,0.25);
  margin-bottom: 4px;
}

.cap-confirm-text {
  font-size: 18px;
  font-weight: 800;
  color: #34c968;
  margin: 0;
  letter-spacing: -0.025em;
}

.cap-confirm-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.40);
  margin: 0;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   AUDIO TILE INLINE  — press & hold, audio meter
   ═══════════════════════════════════════════════════════════════ */

.capture-tile--audio {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 120ms ease, background 120ms ease, border-color 200ms ease;
}

.capture-tile--audio.is-recording {
  background: #121c11;
  border-color: rgba(52, 201, 104, 0.35);
  cursor: grabbing;
}

.capture-tile--audio.is-done {
  background: #0f1f12;
  border-color: rgba(52, 201, 104, 0.4);
}

.capture-tile--audio:active {
  transform: scale(0.985);
}

/* Icon column in audio tile */
.cap-audio-icon-col {
  position: static !important;
  transform: none !important;
  width: 42px !important;
  height: 42px !important;
  flex: none;
}

.cap-audio-icon-col .cap-icon { width: 42px; height: 42px; }

/* Recording timer */
.cap-audio-timer {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #34c968;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Center column */
.cap-audio-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Audio level meter */
.cap-audio-meter {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 48px;
  width: 100%;
  overflow: hidden;
}

.cap-meter-bar {
  display: block;
  flex: 1;
  border-radius: 2px;
  background: linear-gradient(180deg, #c8ff64 0%, #34c968 100%);
  height: calc(var(--h, 0.06) * 48px);
  min-height: 3px;
  transition: height 60ms ease;
}

/* Status text block inside audio tile */
.cap-audio-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Right-side hold hint */
.cap-audio-hold-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
}

.cap-hold-circle {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.cap-hold-circle--active {
  background: #34c968;
  border-color: #34c968;
  transform: scale(1.3);
  animation: cap-hold-pulse 1s ease-in-out infinite;
}

@keyframes cap-hold-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,201,104,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(52,201,104,0); }
}

/* ── Audio preview state ── */
.capture-tile--preview {
  cursor: default;
  gap: 10px;
  padding: 0 16px;
  border-color: rgba(52,201,104,0.18);
}

.cap-audio-play-btn {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(52,201,104,0.35);
  background: rgba(52,201,104,0.1);
  color: #34c968;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.cap-audio-play-btn:active { background: rgba(52,201,104,0.2); }

.cap-audio-preview-center {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  min-width: 0;
}

.cap-audio-preview-bar {
  width: 100%; height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}

.cap-audio-preview-fill {
  height: 100%;
  background: #34c968;
  border-radius: 2px;
  transition: width 100ms linear;
}

.cap-audio-preview-times {
  display: flex; justify-content: space-between;
  font-size: 11px; color: rgba(255,255,255,0.4);
  font-variant-numeric: tabular-nums;
}

.cap-audio-preview-actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}

.cap-audio-discard-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: transparent;
  color: rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 150ms, color 150ms;
}
.cap-audio-discard-btn:active { color: #ff6b6b; border-color: rgba(255,107,107,0.4); }

.cap-audio-send-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: #34c968;
  color: #000;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity 150ms;
}
.cap-audio-send-btn:active { opacity: 0.8; }

/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */
.cap-toast {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  left: 50%;
  transform: translateX(-50%);
  background: #1c1c1c;
  border: 1px solid rgba(52,201,104,0.28);
  border-radius: 24px;
  color: #34c968;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 20px;
  white-space: nowrap;
  z-index: 300;
  animation: cap-toast-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both,
             cap-toast-out 300ms ease 2.2s both;
  pointer-events: none;
}


@keyframes cap-toast-in  { from { opacity: 0; transform: translateX(-50%) translateY(12px); } }
@keyframes cap-toast-out { to   { opacity: 0; transform: translateX(-50%) translateY(8px); } }

/* ═══════════════════════════════════════════════════════════════
   CAPTURE PAGE — RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════ */

/* ── 430px: wider phones (iPhone Plus / Pro Max, Pixel 8 Pro) ── */
@media (min-width: 430px) {
  .capture-hero { padding: 28px 32px 36px; }
  .capture-hero-title { font-size: clamp(26px, 6vw, 36px); }
  .capture-main { padding: 0 24px 48px; }
  .capture-grid { gap: 16px; }
  .capture-tile { border-radius: 24px; }
  .capture-tile--wide { height: 118px; }
  .cap-audio-meter { height: 52px; }
  .cap-meter-bar { height: calc(var(--h, 0.06) * 52px); }
}

/* ── 600px: large phones / small tablets ── */
@media (min-width: 600px) {
  .capture-page { padding-bottom: 40px; }
  .capture-header { padding-top: 32px; }
  .capture-logo-wordmark { font-size: 18px; }
  .capture-hero { padding: 36px 0 40px; }
  .capture-hero-title { font-size: clamp(28px, 5vw, 42px); }
  .capture-hero-sub { font-size: 15px; max-width: 360px; }
  .capture-main { padding: 0 0 56px; }
  .capture-grid { gap: 18px; max-width: 520px; }
  .capture-tile { border-radius: 26px; }
  .capture-tile--wide { height: 128px; padding: 0 28px; }
  .capture-tile-label { font-size: 15px; }
  .capture-tile-desc  { font-size: 12.5px; }
  .capture-tile-icon  { width: 60px; height: 60px; }
  .capture-tile--wide .capture-tile-icon {
    width: 48px !important;
    height: 48px !important;
  }
  /* Flow panels: centred card */
  .cap-flow { max-width: 520px; }
  .cap-flow-confirm { max-width: 520px; }
  .cap-flow-textarea { font-size: 16px; }
  .cap-flow-submit { height: 54px; font-size: 16px; }
  /* Audio meter */
  .cap-audio-meter { height: 56px; }
  .cap-meter-bar { height: calc(var(--h, 0.06) * 56px); }
  .cap-audio-timer { font-size: 22px; }
  .cap-audio-icon-col {
    width: 48px !important;
    height: 48px !important;
  }
}

/* ── 768px: tablets (iPad mini, Galaxy Tab S) ── */
@media (min-width: 768px) {
  .capture-page { align-items: center; }
  .capture-header { width: 100%; max-width: 680px; padding-top: 36px; justify-content: flex-start; }
  .capture-hero { width: 100%; max-width: 680px; text-align: left; padding: 44px 0 44px; }
  .capture-hero-title { font-size: clamp(32px, 4.5vw, 48px); }
  .capture-hero-sub { margin: 0; max-width: 420px; font-size: 15px; }
  .capture-main { width: 100%; max-width: 680px; padding: 0 0 64px; }

  /* 3-column grid: square tiles fill 2×2, audio spans all 3 */
  .capture-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    max-width: 680px;
  }

  /* First 3 square tiles → 1 col each */
  /* 4th square tile → col 1 of row 2, cols 2-3 empty → audio fills row 3 */
  /* Use CSS to override the span on doc tile to keep it single */
  .capture-grid > [role="listitem"]:not(:last-child) {
    grid-column: span 1;
  }

  /* Audio tile: spans all 3 columns */
  .capture-grid > [role="listitem"]:last-child {
    grid-column: span 3;
  }

  .capture-tile { border-radius: 28px; }
  .capture-tile--wide { height: 136px; padding: 0 32px; gap: 24px; }
  .capture-tile--wide .capture-tile-label { font-size: 16px; }
  .capture-tile--wide .capture-tile-desc  { font-size: 13px; }

  /* Flow panels on tablet: floating card */
  .cap-flow-wrap {
    width: 100%;
    max-width: 560px;
    background: #161616;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 28px 28px 32px;
    margin: 0 auto;
  }
  .cap-flow { max-width: none; gap: 16px; }
  .cap-flow-body { gap: 14px; }
  .cap-flow-confirm { max-width: none; }

  /* Auth gate */
  .capture-auth-gate { align-items: flex-start; text-align: left; }

  /* Audio meter */
  .cap-audio-meter { height: 60px; }
  .cap-meter-bar { height: calc(var(--h, 0.06) * 60px); }
}

/* ── 1024px: iPad / large tablets ── */
@media (min-width: 1024px) {
  .capture-header { max-width: 760px; padding-top: 40px; }
  .capture-hero { max-width: 760px; padding: 52px 0 52px; }
  .capture-hero-title { font-size: clamp(36px, 4vw, 56px); }
  .capture-main { max-width: 760px; }

  .capture-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    max-width: 760px;
  }

  .capture-tile--wide { height: 148px; padding: 0 36px; gap: 28px; }
  .capture-tile--wide .capture-tile-icon {
    width: 56px !important;
    height: 56px !important;
  }
  .capture-tile-icon { width: 68px; height: 68px; transform: translate(-50%, calc(-50% - 12px)); }

  /* Wider flow card */
  .cap-flow-wrap { max-width: 640px; padding: 32px 36px 36px; }

  /* Meter */
  .cap-audio-meter { height: 66px; }
  .cap-meter-bar { height: calc(var(--h, 0.06) * 66px); }
  .cap-audio-timer { font-size: 26px; }
}

/* ── Home Widget Grid ───────────────────────────────────────── */

.hw-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 40px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* Prompt chips */
.hw-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hw-chips::-webkit-scrollbar { display: none; }

.hw-chip {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--bg-window);
  border: 1px solid var(--divider);
  color: var(--text-2);
  font-size: 13px;
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.hw-chip:hover { background: var(--hover); color: var(--text); }
.hw-chip:first-child { font-weight: 600; color: var(--text); }

/* Grid rows */
.hw-row-top {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 12px;
  align-items: stretch;
}
.hw-row-mid,
.hw-row-bot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

/* Hourly forecast widget — full-width row, no inner padding (widget has its own) */
.hw-widget--hourly {
  display: block;
  width: calc((100% - 12px) / 2) !important;
  max-width: none !important;
  box-sizing: border-box;
  background: var(--bg-window) !important;
  border-radius: var(--r-window) !important;
  overflow: hidden;
  border: 1px solid var(--divider) !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  padding: 18px 20px !important;
}
.hw-widget--hourly .aw-widget {
  width: 100% !important;
  max-width: none !important;
  border-radius: inherit;
}
.hw-widget--hourly *,
.hw-widget--hourly svg {
  color: inherit;
  font-family: inherit !important;
}
.hw-widget--hourly .aw-widget__chl-loc,
.hw-widget--hourly .aw-widget__chl-now-meta,
.hw-widget--hourly .aw-widget__chl-now-realfeel,
.hw-widget--hourly .aw-widget__chl-now-wind,
.hw-widget--hourly .aw-widget__chl-now-wind-label,
.hw-widget--hourly .aw-widget__chl-hour-time,
.hw-widget--hourly .aw-widget__chl-hour-realfeel,
.hw-widget--hourly .aw-widget__chl-hour-precip {
  color: var(--text-3) !important;
}
.hw-widget--hourly .aw-widget__chl-now-temp,
.hw-widget--hourly .aw-widget__chl-hour-temp {
  color: var(--text) !important;
}
.hw-widget--hourly .aw-widget__chl-corner-shape {
  background: var(--divider) !important;
}

/* Base widget card */
.hw-widget {
  background: var(--bg-window);
  border-radius: var(--r-window);
  padding: 18px 20px;
  border: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Widget section label */
.hw-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
  flex-shrink: 0;
}
.hw-label--between { justify-content: space-between; }
.hw-label-inner {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hw-label-see-all {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
  letter-spacing: 0;
  text-transform: none;
  padding: 1px 4px;
  border-radius: 4px;
  transition: color 0.15s;
}
.hw-label-see-all:hover { color: var(--text); }

/* Widget empty state */
.hw-widget-empty {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── Date widget ── */
.hw-widget--date { justify-content: center; }
.hw-date-day {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-due);
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.hw-date-num {
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  letter-spacing: -3px;
}

/* ── Weather widget ── */
.hw-weather-temp {
  font-size: 38px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: auto;
  padding: 4px 0 12px;
}
.hw-weather-loading {
  font-size: 13px;
  color: var(--text-muted);
  padding-top: 4px;
}
.hw-weather-divider {
  height: 1px;
  background: var(--divider);
  margin-bottom: 10px;
}
.hw-weather-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 5px;
}
.hw-weather-row:last-child { margin-bottom: 0; }
.hw-weather-row span:last-child { font-weight: 500; color: var(--text-2); }

/* ── Today widget ── */
.hw-widget--today { justify-content: flex-start; }
.hw-today-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
}
.hw-today-text.hw-today-loading { color: var(--text-muted); font-style: italic; }
.hw-today-text.hw-today-empty { color: var(--text-muted); }

/* ── Meeting prep widget ── */
.hw-meeting-nav { display: flex; gap: 3px; }
.hw-meeting-nav-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--divider);
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.hw-meeting-nav-btn:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.hw-meeting-nav-btn:disabled { opacity: 0.3; cursor: default; }

.hw-meeting-event {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.hw-event-bar {
  width: 3px;
  min-height: 36px;
  border-radius: 99px;
  flex-shrink: 0;
  margin-top: 2px;
}
.hw-event-bar--today { background: var(--accent-now); }
.hw-event-bar--tomorrow { background: var(--accent-soon); }

.hw-event-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 3px;
}
.hw-event-time-label { font-size: 12.5px; color: var(--text-3); }
.hw-meeting-prep-text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
}
.hw-meeting-prep-text.hw-prep-empty { color: var(--text-muted); font-style: italic; }

/* ── Up next widget ── */
.hw-upnext-group { margin-bottom: 14px; }
.hw-upnext-group:last-child { margin-bottom: 0; }
.hw-upnext-group-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.hw-upnext-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.hw-upnext-row:last-child { margin-bottom: 0; }
.hw-upnext-bar {
  width: 3px;
  min-height: 32px;
  border-radius: 99px;
  flex-shrink: 0;
  margin-top: 2px;
}
.hw-upnext-bar--today { background: var(--accent-now); }
.hw-upnext-bar--tomorrow { background: var(--accent-soon); }
.hw-upnext-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 2px;
}
.hw-upnext-time { font-size: 12px; color: var(--text-3); }

/* ── Notes widget ── */
.hw-notes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  flex: 1;
}
.hw-note-card {
  display: flex;
  flex-direction: column;
  background: none;
  border: 1px solid var(--divider);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  transition: border-color 0.15s, background 0.15s;
  padding: 0;
}
.hw-note-card:hover {
  background: var(--hover);
  border-color: var(--text-muted);
}
.hw-note-card-art {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--card-bg);
  flex-shrink: 0;
}
.hw-note-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hw-note-card-placeholder {
  width: 100%;
  height: 100%;
  background: var(--card-bg);
}
.hw-note-card-body {
  padding: 8px 10px 10px;
  flex: 1;
}
.hw-note-card-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.hw-note-card-preview {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── To-do widget ── */
.hw-todo-list { display: flex; flex-direction: column; }
.hw-todo-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--text-2);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 1px solid var(--divider);
  text-align: left;
  width: 100%;
  transition: color 0.12s;
}
.hw-todo-item:first-child { padding-top: 0; }
.hw-todo-item:last-child { border-bottom: none; padding-bottom: 0; }
.hw-todo-item:hover { color: var(--text); }
.hw-todo-item.is-done .hw-todo-text { text-decoration: line-through; color: var(--text-muted); }
.hw-todo-check { flex-shrink: 0; margin-top: 1px; color: var(--text-3); }
.hw-todo-item.is-done .hw-todo-check { color: var(--accent-now); }
.hw-todo-text { flex: 1; line-height: 1.4; }
.hw-todo-more {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  text-align: center;
  transition: color 0.12s;
}
.hw-todo-more:hover { color: var(--text-2); }

/* ── Responsive ── */
@media (max-width: 660px) {
  .hw-row-top {
    grid-template-columns: 1fr 1fr;
  }
  .hw-row-mid,
  .hw-row-bot {
    grid-template-columns: 1fr;
  }
  .hw-widget--hourly {
    width: 100% !important;
  }
}
@media (max-width: 380px) {
  .hw-row-top { grid-template-columns: 1fr; }
}

/* ── AI Chat view ─────────────────────────────────────────── */
.hw-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 500px;
  background: var(--bg-window);
  position: relative;
}
.hw-chat::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 150px;
  background: color-mix(in srgb, var(--accent-now) 50%, transparent);
  border-radius: 40% 60% 55% 45% / 50% 45% 65% 40%;
  filter: blur(55px);
  pointer-events: none;
  z-index: 0;
}
.hw-chat-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.hw-chat-back {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.hw-chat-back:hover { background: var(--hover); color: var(--text); }
.hw-chat-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-left: auto;
  padding-right: 4px;
}
.hw-chat-save-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid var(--divider);
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hw-chat-save-btn:hover {
  background: var(--accent-now);
  color: var(--accent-fg);
  border-color: transparent;
}
.hw-chat-save-btn--saved {
  color: var(--accent-now);
  border-color: var(--accent-now);
  opacity: 0.7;
  cursor: default;
}
.hw-chat-save-btn--saved:hover {
  background: transparent;
  color: var(--accent-now);
  border-color: var(--accent-now);
}
.hw-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
  max-width: 900px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.hw-chat-body:has(.hw-chat-empty)::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 20%;
  width: 60%;
  height: 220px;
  background: color-mix(in srgb, var(--accent-now) 22%, transparent);
  border-radius: 55% 45% 40% 60% / 45% 60% 40% 55%;
  filter: blur(65px);
  pointer-events: none;
  z-index: 0;
}
.hw-chat-empty { position: relative; z-index: 1; }

/* Light / pale-background themes — soften the glow */
[data-theme='light'] .hw-chat::after,
[data-theme='ivory'] .hw-chat::after {
  opacity: 0.35;
  filter: blur(60px);
}
[data-theme='light'] .hw-chat-body:has(.hw-chat-empty)::before,
[data-theme='ivory'] .hw-chat-body:has(.hw-chat-empty)::before {
  opacity: 0.25;
}
[data-theme='mindful'] .hw-chat::after {
  opacity: 0.30;
  filter: blur(65px);
}
[data-theme='mindful'] .hw-chat-body:has(.hw-chat-empty)::before {
  opacity: 0.20;
}
/* Orbit: light page bg but dark window bg — reduce and warm slightly */
[data-theme='orbit'] .hw-chat::after {
  opacity: 0.28;
  filter: blur(65px);
}
[data-theme='orbit'] .hw-chat-body:has(.hw-chat-empty)::before {
  opacity: 0.18;
}
.hw-chat-body::-webkit-scrollbar { width: 4px; }
.hw-chat-body::-webkit-scrollbar-thumb { background: var(--divider); border-radius: 2px; }

.hw-chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 20px;
  text-align: center;
}
.hw-chat-empty-icon {
  color: var(--text-muted);
  opacity: 0.5;
  width: 100%;
}
.hw-chat-breeze-wrap {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%);
}
.hw-chat-breeze-video {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  mix-blend-mode: screen;
}
.hw-chat-empty-text {
  font-size: 14px;
  color: var(--text-3);
  max-width: 240px;
  line-height: 1.5;
}
.hw-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  max-width: 360px;
}
.hw-chat-suggest-chip {
  font-size: 12.5px;
  color: var(--text-3);
  background: var(--bg-window);
  border: 1px solid var(--divider);
  border-radius: 20px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.hw-chat-suggest-chip:hover { background: var(--hover); color: var(--text); }

.hw-chat-msg { display: flex; }
.hw-chat-msg--user { justify-content: flex-end; }
.hw-chat-msg--assistant { justify-content: flex-start; }

.hw-chat-bubble {
  max-width: 72%;
  background: var(--accent-now);
  color: var(--accent-fg);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}
.hw-chat-response {
  max-width: 90%;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.hw-chat-p {
  margin: 0 0 8px;
}
.hw-chat-p:last-child { margin-bottom: 0; }
.hw-chat-heading { font-weight: 600; color: var(--text); margin-top: 10px; }
.hw-chat-heading:first-child { margin-top: 0; }
.hw-chat-hr { border: none; border-top: 1px solid var(--divider); margin: 10px 0; }
.hw-chat-list {
  margin: 4px 0 8px 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hw-chat-list li { line-height: 1.5; }

.hw-chat-thinking {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.hw-chat-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hw-chat-step--visible { opacity: 1; }
.hw-chat-step svg { flex-shrink: 0; color: var(--text-3); }

.hw-chat-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 16px 14px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--bg-window) 40%);
}
.hw-chat-input {
  flex: 1;
  resize: none;
  background: var(--bg-window);
  border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--text);
  line-height: 1.4;
  max-height: 120px;
  overflow-y: auto;
  outline: none;
  transition: border-color 0.15s;
}
.hw-chat-input:focus { border-color: var(--accent-now); }
.hw-chat-input::placeholder { color: var(--text-muted); }
.hw-chat-send {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-now);
  color: var(--accent-fg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, transform 0.1s;
}
.hw-chat-send:disabled { opacity: 0.35; cursor: default; }
.hw-chat-send:not(:disabled):hover { opacity: 0.85; }
.hw-chat-send:not(:disabled):active { transform: scale(0.93); }