/* =============================================================
   Koloshare — frontend
   Black / white / grey by default; primary + accent colours, logo
   and font are workspace settings (see Koloshare_Brand).
   ============================================================= */

/* =============================================================
   THEME ISOLATION — Koloshare installs into UNKNOWN themes and plugin
   stacks, so this reset must win every fight. Two layers of defence:
     1. loaded at wp_enqueue_scripts priority 999, after the theme;
     2. !important on every property a theme commonly leaks (margins,
        list bullets, button/input chrome, link decoration, fonts).
   Components re-set what they need at component level.
   ============================================================= */

.koloshare, .koloshare *, .koloshare *::before, .koloshare *::after,
.koloshare-pv, .koloshare-pv *,
.koloshare-overlay, .koloshare-overlay * { box-sizing: border-box !important; }

/* Strip theme's headings + paragraph margins so component layouts work.
   :where() keeps this at single-class specificity (0,1,0) so component-level
   overrides (.koloshare-dash__tag etc.) can win — the bare `.koloshare p` form was
   (0,1,1) and silently beat every class-only margin/padding on p elements. */
.koloshare :where(p, h1, h2, h3, h4, h5, h6) {
	margin: 0 !important;
}
.koloshare ul, .koloshare ol { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.koloshare li { margin: 0 !important; padding: 0 !important; list-style: none !important; }

.koloshare a { color: inherit; text-decoration: none !important; box-shadow: none !important; }
.koloshare a:not(.koloshare-btn) { border-bottom: none !important; }
.koloshare a:hover, .koloshare a:focus { color: inherit; }

.koloshare img { max-width: none !important; width: auto; height: auto; border: 0 !important; box-shadow: none !important; }
/* search forms (hero / compact) carry their own padding + border — the reset
   must not strip them or the input slides under the magnifying glass */
.koloshare form, .koloshare fieldset { margin: 0 !important; }
.koloshare form:not([role="search"]), .koloshare fieldset { padding: 0 !important; border: 0 !important; }

/* Themes force their own buttons: borders / min-width / uppercase / colours.
   Kill those specifically. Each component then sets its own appearance. */
.koloshare button {
	min-width: 0 !important;
	font-family: inherit !important;
	cursor: pointer;
	-webkit-appearance: none !important;
	appearance: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
	box-shadow: none;
}
.koloshare button:focus { outline: 0; }

/* Themes force inputs: padding, border-radius, borders, 100% width.
   Strip ONLY width:100% so layout flexbox sizing works; components set padding/border. */
.koloshare input[type="text"],
.koloshare input[type="password"],
.koloshare input[type="email"],
.koloshare input[type="search"],
.koloshare input[type="url"] {
	width: auto;
	font-family: inherit !important;
	text-transform: none !important;
	box-shadow: none;
}
.koloshare input:focus, .koloshare textarea:focus, .koloshare select:focus { outline: 0; }

.koloshare input[type="search"]::-webkit-search-decoration,
.koloshare input[type="search"]::-webkit-search-cancel-button,
.koloshare input[type="search"]::-webkit-search-results-button,
.koloshare input[type="search"]::-webkit-search-results-decoration {
	-webkit-appearance: none;
}

.koloshare table { border-collapse: collapse; border-spacing: 0; }

/* =============================================================
   END THEME ISOLATION
   ============================================================= */

.koloshare,
.koloshare-pv,
.koloshare-overlay {
	/* Koloshare defaults: black / white / grey. The "navy" and "red" token names
	 * are kept for compatibility — they mean "primary" and "accent", and are
	 * overridden at runtime by the brand settings (see Koloshare_Brand). */
	--klb-navy:        #111111;
	--klb-navy-700:    #0e0e0e;
	--klb-navy-900:    #0b0b0b;
	--klb-red:         #444444;
	--klb-red-700:     #353535;
	--klb-grey:        #d6d6d6;
	--klb-grey-50:     #f5f6f8;
	--klb-grey-100:    #ecedef;
	--klb-grey-200:    #dfe2e6;
	--klb-grey-500:    #8a8f97;
	--klb-grey-400:    #5b6068;
	--klb-ink:         #11151c;
	--klb-white:       #ffffff;

	/* classic manila folder — deliberately NOT brand-tinted, so folders read
	 * as folders the way users expect from a filesystem */
	--klb-folder:      #e8c87a;
	--klb-folder-deep: #d9b35f;
	--klb-folder-ink:  #6b5418;

	--klb-radius:      14px;
	--klb-radius-sm:   8px;
	--klb-radius-lg:   22px;

	--klb-shadow-sm:   0 1px 0 rgba(22,28,37,.05), 0 1px 2px rgba(22,28,37,.04);
	--klb-shadow:      0 4px 14px -4px rgba(22,28,37,.10), 0 1px 2px rgba(22,28,37,.05);
	--klb-shadow-lg:   0 22px 50px -20px rgba(22,28,37,.22), 0 8px 20px -8px rgba(22,28,37,.10);

	--klb-font:        'Comfortaa', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--klb-mono:        'Comfortaa', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* !important: theme body/typography rules must never bleed in */
	font-family: var(--klb-font) !important;
	color: var(--klb-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
	font-size: 16px !important;
}

.koloshare button {
	font-family: inherit;
	cursor: pointer;
	border: 0;
	background: transparent;
	color: inherit;
}
.koloshare input,
.koloshare textarea,
.koloshare select { font-family: inherit; color: inherit; }
.koloshare a { color: inherit; text-decoration: none; }
/* Weight system (weights above 700 are avoided — Comfortaa and Lora top out at 700):
   - 700  ONLY the brand h1 — homepage hero + login title
   - 600  section subheads + card titles (opt-in per component)
   - 400  everything else (body, meta, file names, counts, ...)
   Small uppercase labels/buttons keep their own 500 elsewhere. */
.koloshare h1, .koloshare h2, .koloshare h3, .koloshare h4 {
	font-family: var(--klb-font) !important;
	font-weight: 400 !important;
	letter-spacing: -0.01em !important;
	color: var(--klb-navy) !important;
	margin: 0 !important;
}
.koloshare h1 { font-size: clamp(2rem, 3.6vw, 3.4rem) !important; line-height: 1.05 !important; font-weight: 700 !important; }
.koloshare h2 { font-size: clamp(1.4rem, 2vw, 1.8rem) !important; line-height: 1.15 !important; }
.koloshare h3 { font-size: 1.05rem !important; line-height: 1.3 !important; }

/* ----- shared atoms ----- */
.koloshare-rule {
	display: inline-block;
	width: 28px; height: 2px;
	background: var(--klb-navy);
	vertical-align: middle;
	margin-right: 12px;
	transform: translateY(-2px);
}
.koloshare-rule--red { background: var(--klb-red); }

.koloshare-eyebrow {
	display: inline-flex;
	align-items: center;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--klb-grey-400);
}

/* Buttons — !important on theme-leaked properties (background/border/colour/padding) */
.koloshare-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 12px 20px !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	border-radius: var(--klb-radius-sm) !important;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease !important;
	border: 1px solid transparent !important;
	line-height: 1 !important;
	min-width: 0 !important;
}
.koloshare-btn--primary { background: var(--klb-navy) !important; color: var(--klb-white) !important; border-color: var(--klb-navy) !important; }
.koloshare-btn--primary:hover { background: var(--klb-red) !important; border-color: var(--klb-red) !important; box-shadow: var(--klb-shadow); }
.koloshare-btn--ghost   { background: var(--klb-white) !important; color: var(--klb-navy) !important; border-color: var(--klb-grey) !important; }
.koloshare-btn--ghost:hover  { border-color: var(--klb-navy) !important; background: var(--klb-grey-50) !important; }
.koloshare-btn--full { width: 100% !important; justify-content: center; padding: 15px 20px !important; }

.koloshare-link {
	color: var(--klb-navy);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .03em;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: border-color .15s ease;
}
.koloshare-link:hover { border-bottom-color: var(--klb-red); }

/* universal close / icon button — visible against any background, theme-proof */
.koloshare-iconbtn {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	background: var(--klb-grey-50) !important;
	color: var(--klb-navy) !important;
	border: 1px solid var(--klb-grey-200) !important;
	padding: 0 !important;
	font-size: 0 !important;
	transition: background .15s, color .15s, border-color .15s, transform .15s !important;
	cursor: pointer;
}
.koloshare-iconbtn svg {
	color: var(--klb-navy) !important;
	stroke: var(--klb-navy) !important;
	display: block;
	width: 18px;
	height: 18px;
}
.koloshare-iconbtn:hover {
	background: var(--klb-red) !important;
	color: var(--klb-white) !important;
	border-color: var(--klb-red) !important;
	transform: scale(1.05);
}
.koloshare-iconbtn:hover svg {
	color: var(--klb-white) !important;
	stroke: var(--klb-white) !important;
}

/* =============================================================
   LOGIN
   ============================================================= */
.koloshare--login {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: min(700px, 88vh);
	background: var(--klb-white);
	border-radius: var(--klb-radius-lg);
	overflow: hidden;
	box-shadow: var(--klb-shadow-lg);
	width: 80vw;
	max-width: 1240px;
	margin: clamp(24px, 4vh, 56px) auto;
	border: 1px solid var(--klb-grey-100);
}
@media (max-width: 860px) {
	.koloshare--login {
		grid-template-columns: 1fr;
		width: 96vw;
		max-width: 480px;
		min-height: 0;
		margin: 16px auto;
		border-radius: 18px;
	}
	/* mobile: hide the navy aside entirely — form gets the full card */
	.koloshare-login__aside { display: none !important; }
	.koloshare-login__panel { padding: 36px 24px 32px; gap: 22px; }
	.koloshare-login__title { font-size: 1.7rem !important; }
	.koloshare-login__tag { font-size: 14px !important; }
}

.koloshare-login__panel {
	padding: clamp(36px, 4vw, 64px) clamp(28px, 4vw, 64px);
	display: flex; flex-direction: column;
	justify-content: space-between;
	min-height: 100%;
	gap: 32px;
}
.koloshare-login__main {
	display: flex; flex-direction: column;
	flex: 1;
	justify-content: center;
	max-width: 460px;
	width: 100%;
}
.koloshare-login__brand { margin-bottom: 36px; }
.koloshare h1.koloshare-login__title,
.koloshare-login__title {
	margin: 0 0 14px !important;
	font-size: clamp(2.4rem, 4.4vw, 3.6rem) !important;
	line-height: 1.05 !important;
	font-weight: 700 !important;
	color: var(--klb-navy) !important;
	letter-spacing: -.015em !important;
}
.koloshare-login__tag {
	color: var(--klb-grey-400) !important;
	margin: 0 !important;
	font-size: clamp(14px, 1.05vw, 16px) !important;
	line-height: 1.55 !important;
}

.koloshare-login__error {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 14px;
	background: rgba(68,68,68,.06);
	border-left: 3px solid var(--klb-red);
	color: var(--klb-red-700);
	font-size: 14px;
	margin-bottom: 20px;
	border-radius: 4px;
}

.koloshare-login__form { display: flex; flex-direction: column; gap: 16px; }
.koloshare-field { display: flex; flex-direction: column; gap: 6px; }
.koloshare-field__label { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--klb-grey-400); }
.koloshare-field__hint { margin: -4px 0 2px; font-size: 12px; color: var(--klb-grey-500); line-height: 1.4; }
/* honeypot — kept out of view + off the accessibility tree, but not display:none
   (some bots skip display:none fields) */
.koloshare-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.koloshare-field input {
	height: 48px !important;
	min-height: 48px !important;
	padding: 0 14px !important;
	border-radius: var(--klb-radius-sm) !important;
	border: 1px solid var(--klb-grey) !important;
	background: var(--klb-white) !important;
	font-size: 15px !important;
	color: var(--klb-ink) !important;
	width: 100% !important;
	font-family: var(--klb-font);
	transition: border-color .15s, box-shadow .15s;
}
.koloshare-field input:focus {
	outline: 0;
	border-color: var(--klb-navy) !important;
	box-shadow: 0 0 0 3px rgba(17,17,17,.10) !important;
}

.koloshare-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--klb-grey-400); }
.koloshare-checkbox input { accent-color: var(--klb-navy); }

.koloshare-login__foot {
	margin: 0 !important;
	padding-top: 24px;
	border-top: 1px solid var(--klb-grey-100);
	font-size: 12px;
	color: var(--klb-grey-500);
	line-height: 1.9;
	max-width: 460px;
}
.koloshare-login__foot a { color: var(--klb-navy); border-bottom: 1px solid var(--klb-grey); }
.koloshare-login__foot a:hover { border-bottom-color: var(--klb-red); }

.koloshare-login__aside {
	background: var(--klb-navy);
	color: var(--klb-white);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	padding: clamp(36px, 4vw, 64px);
	padding-top: clamp(120px, 14vw, 160px); /* room for absolute logo */
}
.koloshare-login__aside-logo {
	position: absolute;
	top: clamp(28px, 3vw, 44px);
	right: clamp(28px, 3vw, 44px);
	z-index: 2;
	height: clamp(56px, 5vw, 72px);
	width: auto;
	max-width: 260px;
	line-height: 0;
}
.koloshare-login__aside-logo img {
	display: block;
	height: 100%;
	width: auto;
	max-width: 260px;
	object-fit: contain;
}
@media (max-width: 820px) {
	.koloshare-login__aside { padding: 32px; padding-top: 84px; align-items: flex-start; }
	.koloshare-login__aside-logo { top: 20px; right: 20px; height: 40px; max-width: 160px; }
}
.koloshare-login__aside::before {
	content: '';
	position: absolute; inset: 0;
	background:
		radial-gradient(800px 400px at 80% 20%, rgba(68,68,68,.10), transparent 60%),
		linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%);
}
.koloshare-login__aside::after {
	content: '';
	position: absolute; left: 0; right: 0; top: 0;
	height: 3px;
	background: var(--klb-red);
}
.koloshare-login__aside-inner { position: relative; z-index: 1; max-width: 520px; }
.koloshare-login__kicker {
	display: inline-block;
	font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
	color: var(--klb-red);
	margin-bottom: 32px;
	font-weight: 500;
}
.koloshare-login__pull {
	font-size: clamp(20px, 1.9vw, 28px) !important;
	line-height: 1.32 !important;
	font-weight: 500 !important;
	color: var(--klb-white) !important;
	margin: 0 0 44px !important;
	letter-spacing: -.005em !important;
}
.koloshare-login__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.koloshare-login__list li { display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.4; }
.koloshare-login__list li span { width: 8px; height: 8px; background: var(--klb-red); border-radius: 50%; flex-shrink: 0; }

/* =============================================================
   APP CHROME
   ============================================================= */
.koloshare--app {
	background: var(--klb-grey-50);
	min-height: 100vh;
	margin: 0;
}

/* =============================================================
   WP ADMIN-BAR OFFSET  (admins only — never affects regular users)
   -------------------------------------------------------------
   When a logged-in user can see the WordPress toolbar, WP adds the
   `admin-bar` class to <body> and fixes the toolbar over the top of the
   viewport (32px desktop / 46px on mobile). Our sticky & fixed chrome is
   positioned against the viewport, so it slides UNDER that toolbar.

   We expose the toolbar height as --klb-wpbar, defined ONLY on body.admin-bar.
   Every top-anchored element below reads it via `var(--klb-wpbar, 0px)`, so
   logged-out / non-admin visitors (who never get the class) always resolve
   to 0px — i.e. byte-for-byte identical to before. Admins get the offset. */
body.admin-bar { --klb-wpbar: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar { --klb-wpbar: 46px; }
}
/* WP core demotes #wpadminbar to position:absolute under 600px, so it scrolls
   away while our chrome stays offset by 46px — leaving a dead gap on mobile.
   Pin it fixed so the offset above stays truthful while testing mobile view.
   Scoped to admins only (body.admin-bar) — regular users are untouched. */
@media screen and (max-width: 600px) {
	body.admin-bar #wpadminbar { position: fixed !important; }
}

/* ----- navy command bar ----- */
.koloshare-bar {
	background: var(--klb-navy);
	color: var(--klb-white);
	position: sticky;
	top: var(--klb-wpbar, 0px);
	z-index: 30;
	border-bottom: 1px solid rgba(255,255,255,.04);
}
.koloshare-bar::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, var(--klb-red) 0 28%, transparent 28%);
}
.koloshare-bar__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 28px;
	display: flex;
	align-items: center;
	gap: 32px;
	height: 64px;
}
.koloshare-bar__brand {
	display: flex !important;
	align-items: center;
	gap: 14px;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	color: var(--klb-white) !important;
	min-width: 0 !important;
	cursor: pointer;
}
.koloshare img.koloshare-bar__logo,
.koloshare-bar__logo {
	display: block !important;
	height: 32px !important;
	width: auto !important;
	max-width: 130px !important;
	max-height: 32px !important;
	object-fit: contain;
	margin: 0 !important;
	padding: 0 !important;
}
.koloshare-bar__divider { width: 1px; height: 22px; background: rgba(255,255,255,.18); }
.koloshare-bar__label { font-size: 13px; letter-spacing: .04em; color: rgba(255,255,255,.78); font-weight: 400; }
@media (max-width: 820px) {
	.koloshare img.koloshare-bar__logo,
	.koloshare-bar__logo { height: 26px !important; max-width: 110px !important; max-height: 26px !important; }
	.koloshare-bar__divider, .koloshare-bar__label { display: none; }
}

.koloshare-bar__nav { display: flex; gap: 4px; margin-left: auto; }
.koloshare-bar__nav-btn {
	padding: 8px 14px;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255,255,255,.65);
	font-weight: 500;
	border-radius: 6px;
	position: relative;
	transition: color .15s;
}
.koloshare-bar__nav-btn:hover { color: var(--klb-white); }
.koloshare-bar__nav-btn.is-active { color: var(--klb-white); }
.koloshare-bar__nav-btn.is-active::after {
	content: '';
	position: absolute; left: 14px; right: 14px; bottom: -8px;
	height: 2px;
	background: var(--klb-red);
	border-radius: 2px;
}

/* desktop: nav already pushes itself + user to the right via its own auto
   margin, so user just needs a small gap. mobile: nav is hidden, so we
   re-apply auto to the user to push it to the right edge. */
.koloshare-bar__user { position: relative; margin-left: 12px; }
.koloshare-bar__avatar {
	width: 36px !important; height: 36px !important;
	min-width: 36px !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: rgba(255,255,255,.78) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 0 !important;
	padding: 0 !important;
	transition: color .15s, background .15s !important;
}
.koloshare-bar__avatar svg { color: inherit; display: block; }
.koloshare-bar__avatar svg circle { fill: currentColor; }
.koloshare-bar__avatar:hover { color: var(--klb-white) !important; background: rgba(255,255,255,.08) !important; }
.koloshare-bar__menu {
	position: absolute; right: 0; top: calc(100% + 14px);
	width: 240px;
	background: var(--klb-white);
	border: 1px solid var(--klb-grey-100);
	border-radius: var(--klb-radius);
	box-shadow: var(--klb-shadow-lg);
	color: var(--klb-ink);
	overflow: hidden;
	animation: koloshare-pop .18s ease-out;
}
.koloshare-bar__menu-head { padding: 14px 16px; border-bottom: 1px solid var(--klb-grey-100); }
.koloshare-bar__menu-head strong { display: block; font-size: 14px; font-weight: 500; }
.koloshare-bar__menu-head span { display: block; font-size: 12px; color: var(--klb-grey-400); }
.koloshare-bar__menu-link {
	display: flex; align-items: center; gap: 10px;
	width: 100%;
	padding: 12px 16px;
	font-size: 13px;
	font-weight: 400;
	text-align: left;
	color: var(--klb-ink);
	transition: background .12s;
}
.koloshare-bar__menu-link:hover { background: var(--klb-grey-50); }

@keyframes koloshare-pop {
	from { opacity: 0; transform: translateY(-6px) scale(.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =============================================================
   DASHBOARD HERO
   ============================================================= */
.koloshare-dash {
	background: var(--klb-navy);
	background-image: linear-gradient(135deg, rgba(17,17,17,.95) 0%, rgba(17,17,17,.7) 100%);
	background-size: cover;
	color: var(--klb-white);
	position: relative;
	overflow: hidden;
}
.koloshare-dash::before {
	content: '';
	position: absolute; inset: 0;
	background:
		radial-gradient(600px 300px at 90% 10%, rgba(68,68,68,.16), transparent 65%),
		radial-gradient(800px 400px at 0% 100%, rgba(17,17,17,.45), transparent 60%);
	pointer-events: none;
}
.koloshare-dash__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: clamp(36px, 5vw, 72px) 28px clamp(48px, 6vw, 80px);
	position: relative;
}
.koloshare-dash__eyebrow {
	display: inline-flex; align-items: center;
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 500;
	color: rgba(255,255,255,.7);
	margin-bottom: 20px;
	animation: koloshare-fade-up .5s .05s both ease-out;
}
.koloshare-dash__eyebrow .koloshare-rule { background: var(--klb-red); }

/* extra specificity (.koloshare h1.koloshare-dash__title) beats the .koloshare h1 reset */
.koloshare h1.koloshare-dash__title,
.koloshare-dash__title {
	color: var(--klb-white) !important;
	font-size: clamp(2.2rem, 4vw, 3.6rem) !important;
	font-weight: 700 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.015em !important;
	max-width: 18ch;
	margin: 0 0 16px !important;
	animation: koloshare-fade-up .55s .1s both ease-out;
}
/* doubled selector (.koloshare p.koloshare-dash__tag) keeps the tagline's spacing
   ahead of any element-level p rule, mirroring the h1 title trick above */
.koloshare p.koloshare-dash__tag,
.koloshare-dash__tag {
	color: rgba(255,255,255,.78) !important;
	font-size: clamp(15px, 1.2vw, 18px) !important;
	line-height: 1.5 !important;
	max-width: 60ch;
	margin: 0 0 40px !important;
	padding: 0 !important;
	animation: koloshare-fade-up .55s .15s both ease-out;
}

/* the Koloshare wordmark stands in for the homepage title */
.koloshare .koloshare-dash__title--logo img {
	display: block;
	height: clamp(44px, 6vw, 76px);
	width: auto;
	max-width: min(440px, 86vw);
	object-fit: contain;
	object-position: left center;
}

/* ----- HERO SEARCH (dashboard centerpiece) ----- */
/* z-index kept LOW so the navy command bar (z:30+) can cover it as you scroll */
.koloshare-hero-search {
	display: flex !important;
	align-items: center;
	background: var(--klb-white) !important;
	border-radius: 12px !important;
	/* left padding clears the absolutely-positioned magnifying glass */
	padding: 7px 16px 7px 58px !important;
	box-shadow: 0 30px 60px -20px rgba(0,0,0,.45), 0 8px 20px -8px rgba(0,0,0,.20) !important;
	max-width: 760px;
	transition: transform .25s, box-shadow .25s;
	animation: koloshare-fade-up .6s .2s both ease-out;
	position: relative;
	z-index: 1;
}
.koloshare-hero-search::after {
	content: '';
	position: absolute; left: 22px; right: 8px; bottom: 4px;
	height: 1px;
	background: linear-gradient(90deg, var(--klb-red), transparent 60%);
	opacity: 0;
	transition: opacity .2s;
}
.koloshare-hero-search:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 36px 70px -20px rgba(0,0,0,.55), 0 10px 24px -8px rgba(0,0,0,.25);
}

/* z-index: 30 lifts the search + its dropdown above quicklinks. Both have z-index: 1
   in the DOM flow, but the buttons render later → they'd paint on top without this. */
.koloshare-hero-search:focus-within,
.koloshare-dash.is-searching .koloshare-hero-search { z-index: 30; }
.koloshare-hero-search:focus-within::after { opacity: 1; }

/* the magnifying glass is pinned inside the bar — absolute positioning makes
   the layout immune to theme flex/gap/button resets */
.koloshare-hero-search__icon {
	position: absolute !important;
	left: 22px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--klb-grey-500);
	pointer-events: none;
	flex-shrink: 0;
}
.koloshare-hero-search:focus-within .koloshare-hero-search__icon { color: var(--klb-ink); }
.koloshare-hero-search input {
	flex: 1 !important;
	height: 44px !important;
	min-height: 44px !important;
	border: 0 !important;
	background: transparent !important;
	font-size: 17px !important;
	padding: 0 !important;
	outline: 0 !important;
	color: var(--klb-ink) !important;
	width: 100% !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	font-family: var(--klb-font);
}
.koloshare-hero-search input::placeholder { color: var(--klb-grey-500) !important; opacity: 1; }

/* Homepage shortcut buttons. Auto-fit grid adapts to viewport width.
   Transition is snappy (easing tweaked to feel snappy, not sluggish). */
.koloshare-quicklinks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	margin-top: 44px;
	max-width: 1000px;
	position: relative;
	z-index: 1;
	transition: margin-top .25s cubic-bezier(.2,.8,.2,1);
}

/* When searching: slide quicklinks down by --klb-search-h (measured from JS).
   Fallback of 300px if JS hasn't run yet or fails. +32px gap so nothing overlaps. */
.koloshare-dash.is-searching .koloshare-quicklinks {
	margin-top: calc(var(--klb-search-h, 300px) + 32px);
}
.koloshare-quicklink {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 20px 20px 18px !important;
	background: rgba(22,28,37,.55) !important;
	border: 1px solid rgba(255,255,255,.28) !important;
	border-radius: var(--klb-radius) !important;
	color: var(--klb-white) !important;
	text-align: left !important;
	transition: background .2s, border-color .2s, box-shadow .2s !important;
	animation: koloshare-fade-up .5s calc(.25s + var(--i) * .06s) both ease-out;
	min-width: 0 !important;
	cursor: pointer;
}
.koloshare-quicklink:hover {
	background: var(--klb-white) !important;
	color: var(--klb-navy) !important;
	border-color: var(--klb-navy) !important;
	box-shadow: var(--klb-shadow);
}
.koloshare-quicklink__icon {
	width: 40px; height: 40px;
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	background: var(--klb-red);
	color: var(--klb-white);
	transition: background .2s;
	flex-shrink: 0;
}
.koloshare-quicklink:hover .koloshare-quicklink__icon { background: var(--klb-navy); }
.koloshare-quicklink__name { font-weight: 500; font-size: 15px; line-height: 1.2; }
.koloshare-quicklink__desc { font-size: 12px; opacity: .8; line-height: 1.4; }

@keyframes koloshare-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   DASHBOARD CARDS — folder grid + recent strip
   ============================================================= */
.koloshare-cards { background: var(--klb-grey-50); padding: clamp(48px, 6vw, 88px) 0; }
.koloshare-cards__inner { max-width: 1400px; margin: 0 auto; padding: 0 28px; }
.koloshare-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
.koloshare-section-head .koloshare-eyebrow { margin-bottom: 10px; }
.koloshare-section-head--spaced { margin-top: 64px; }
.koloshare-section-head h2 { margin: 0 !important; font-weight: 600 !important; }
.koloshare-folder-grid { gap: 18px; }

.koloshare-folder-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}
.koloshare-folder {
	display: flex; flex-direction: column;
	/* !important: the .koloshare button reset (background: transparent / border: 0)
	   outguns this selector — without it the cards melt into the page */
	background: var(--klb-white) !important;
	border: 1px solid var(--klb-grey-100) !important;
	border-radius: var(--klb-radius);
	box-shadow: var(--klb-shadow-sm);
	padding: 22px 22px 18px;
	text-align: left;
	transition: box-shadow .2s, border-color .2s;
	position: relative;
	overflow: hidden;
	animation: koloshare-fade-up .45s calc(.05s + var(--i) * .04s) both ease-out;
}
.koloshare-folder:hover {
	box-shadow: var(--klb-shadow);
	border-color: var(--klb-navy) !important;
}
.koloshare-folder__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.koloshare-folder__icon {
	width: 44px; height: 44px;
	border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	background: var(--klb-folder);   /* manila — folders look like folders */
	color: var(--klb-folder-ink);
	transition: background .2s;
}
.koloshare-folder:hover .koloshare-folder__icon { background: var(--klb-folder-deep); }
.koloshare-folder__count { font-size: 11px; color: var(--klb-grey-400); font-weight: 500; letter-spacing: .04em; }
.koloshare-folder__count small { font-weight: 400; text-transform: lowercase; }
.koloshare-folder__name { margin: 0 0 6px; font-weight: 600 !important; }
.koloshare-folder__desc { color: var(--klb-grey-400); font-size: 13px; line-height: 1.5; margin: 0; }
.koloshare-folder__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; font-size: 12px; color: var(--klb-grey-500); }
.koloshare-folder__arrow { font-size: 18px; transition: transform .25s; color: var(--klb-navy); font-weight: 500; }
.koloshare-folder:hover .koloshare-folder__arrow { transform: translateX(4px); color: var(--klb-red); }

/* ----- recent strip ----- */
.koloshare-strip {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

/* =============================================================
   FILE CARDS (used by recent strip + browser grid view)
   ============================================================= */
.koloshare-card {
	display: flex; flex-direction: column;
	background: var(--klb-white);
	border: 1px solid var(--klb-grey-100);
	border-radius: var(--klb-radius);
	overflow: hidden;
	text-align: left;
	transition: box-shadow .2s, border-color .2s;
}
.koloshare-card:hover { box-shadow: var(--klb-shadow); border-color: var(--klb-navy); }
.koloshare-card__media {
	aspect-ratio: 4/3;
	background: var(--klb-grey-50);
	position: relative;
	overflow: hidden;
}
.koloshare-card__thumb {
	position: absolute; inset: 0;
	background-size: cover;
	background-position: center;
}

/* PDF first-page preview (rendered client-side into a canvas) */
.koloshare-card__media.has-pdf-preview { background: var(--klb-white); }
.koloshare-card__pdfcanvas {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: top center;
	background: var(--klb-white);
}

.koloshare-card__filetype {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--klb-mono);
	font-weight: 500;
	font-size: 22px;
	letter-spacing: .04em;
	color: var(--klb-navy);
	background:
		repeating-linear-gradient(45deg, transparent 0 12px, rgba(17,17,17,.025) 12px 13px),
		var(--klb-grey-50);
}
.koloshare-card__filetype[data-ext="pdf"]  { color: #c8211f; }
.koloshare-card__filetype[data-ext="doc"], .koloshare-card__filetype[data-ext="docx"] { color: #1f5fc8; }
.koloshare-card__filetype[data-ext="xls"], .koloshare-card__filetype[data-ext="xlsx"] { color: #1f8b3a; }
.koloshare-card__filetype[data-ext="zip"] { color: #6a4b9c; }

.koloshare-card__body { padding: 14px 16px 16px; }
.koloshare-card__title { font-size: 14px; margin: 0 0 6px; font-weight: 400; color: var(--klb-navy); }
.koloshare-card__meta { font-size: 11px; color: var(--klb-grey-400); display: flex; gap: 6px; flex-wrap: wrap; }
.koloshare-card__meta span:first-child { font-weight: 500; color: var(--klb-navy); }

/* =============================================================
   FILE BROWSER (Windows-explorer style)
   ============================================================= */
.koloshare-browser { background: var(--klb-white); min-height: 70vh; }

.koloshare-browser__chrome {
	display: flex; align-items: center; gap: 16px;
	padding: 14px 28px;
	border-bottom: 1px solid var(--klb-grey-100);
	background: var(--klb-white);
	position: sticky; top: calc(64px + var(--klb-wpbar, 0px));
	z-index: 10;
	flex-wrap: wrap;
}

/* search + view toggle wrapper — transparent on desktop (children act as
   direct chrome flex items); becomes the second row on mobile */
.koloshare-explorer-tools { display: contents; }

/* compact search lives top-LEFT when browsing */
.koloshare-compact-search {
	display: flex; align-items: center; gap: 9px;
	background: var(--klb-grey-50);
	border: 1px solid var(--klb-grey-100);
	padding: 4px 12px 4px 14px;
	border-radius: 8px;
	min-width: 260px;
	transition: border-color .15s, background .15s;
	position: relative;
	z-index: 20;
}
.koloshare-compact-search:focus-within { border-color: var(--klb-navy); background: var(--klb-white); }
.koloshare-compact-search > svg {
	color: var(--klb-grey-500);
	flex-shrink: 0;
	width: 15px;
	height: 15px;
}
.koloshare-compact-search input {
	flex: 1 !important;
	min-width: 0 !important;
	height: 28px !important;
	min-height: 28px !important;
	width: auto !important;
	border: 0 !important;
	background: transparent !important;
	font-size: 13px !important;
	outline: 0 !important;
	padding: 0 !important;
	color: var(--klb-ink) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--klb-font);
}
.koloshare-compact-search input::placeholder { color: var(--klb-grey-500) !important; opacity: 1; }

.koloshare-crumbs { display: flex; align-items: center; gap: 4px; font-size: 13px; flex: 1; min-width: 0; flex-wrap: wrap; }
.koloshare-crumb {
	color: var(--klb-navy);
	padding: 5px 10px;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: var(--klb-grey-300, rgba(17,17,17,.25));
	text-underline-offset: 3px;
	transition: background .12s, color .12s, text-decoration-color .12s;
}
.koloshare-crumb:not(.is-current):hover {
	background: var(--klb-grey-50);
	color: var(--klb-red-700);
	text-decoration-color: currentColor;
}
.koloshare-crumb.is-current {
	color: var(--klb-ink);
	font-weight: 500;
	cursor: default;
	text-decoration: none;
	background: var(--klb-grey-50);
}
.koloshare-crumb-sep { color: var(--klb-grey-500); font-size: 11px; flex-shrink: 0; }

.koloshare-viewtoggle {
	display: flex; gap: 2px;
	background: var(--klb-grey-50);
	padding: 3px;
	border-radius: 8px;
	border: 1px solid var(--klb-grey-100);
}
.koloshare-viewtoggle button {
	width: 32px !important;
	height: 28px !important;
	min-width: 32px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border-radius: 5px !important;
	color: var(--klb-grey-400) !important;
	transition: background .12s, color .12s !important;
}
.koloshare-viewtoggle button svg {
	display: block;
	color: inherit;
	stroke: currentColor;
}
.koloshare-viewtoggle button:hover {
	color: var(--klb-navy) !important;
	background: rgba(17,17,17,.05) !important;
}
.koloshare-viewtoggle button.is-active {
	background: var(--klb-white) !important;
	color: var(--klb-navy) !important;
	box-shadow: var(--klb-shadow-sm);
}

/* The chrome above is sticky at top: calc(64px + wpbar). On the admin-bar
   (no-header) template the WP toolbar overlays the page instead of pushing it,
   so the chrome pins `wpbar` px lower than its in-flow placeholder — which would
   hide the top of this non-sticky content underneath it. Push the body down by
   the same amount so the first folders/files clear the chrome. Resolves to 0px
   for non-admins (no admin-bar class → --klb-wpbar unset). */
.koloshare-browser__body { display: grid; grid-template-columns: 260px 1fr; min-height: 60vh; padding-top: var(--klb-wpbar, 0px); }
@media (max-width: 820px) { .koloshare-browser__body { grid-template-columns: 1fr; } }

/* ----- sidebar ----- */
.koloshare-sidebar { border-right: 1px solid var(--klb-grey-100); padding: 20px 16px; background: var(--klb-grey-50); }
.koloshare-sidebar__head { padding: 0 10px 14px; }
.koloshare-sidebar__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.koloshare-sidebar__item {
	display: flex; align-items: center; gap: 10px;
	width: 100%;
	padding: 8px 10px;
	font-size: 13px;
	font-weight: 400;
	color: var(--klb-grey-400);
	border-radius: 6px;
	text-align: left;
	transition: background .12s, color .12s;
}
.koloshare-sidebar__item:hover { background: var(--klb-white); color: var(--klb-navy); }
.koloshare-sidebar__item.is-active { background: var(--klb-navy); color: var(--klb-white); }
.koloshare-sidebar__item.is-active em { color: rgba(255,255,255,.6); }
.koloshare-sidebar__item em { font-style: normal; margin-left: auto; font-size: 11px; color: var(--klb-grey-500); }
.koloshare-sidebar__item svg { flex-shrink: 0; }

/* ----- canvas ----- */
.koloshare-canvas { padding: 24px 28px; min-height: 60vh; position: relative; }

/* grid view */
.koloshare-results.is-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 14px;
}
.koloshare-results.is-grid .koloshare-row { display: none; }

/* list view */
.koloshare-results.is-list { display: flex; flex-direction: column; }
.koloshare-results.is-list .koloshare-card { display: none; }

.koloshare-row {
	display: grid;
	grid-template-columns: 32px 1fr 100px 100px 130px;
	align-items: center;
	gap: 16px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--klb-grey-100);
	cursor: pointer;
	font-size: 13px;
	transition: background .12s;
}
.koloshare-row:hover { background: var(--klb-grey-50); }
.koloshare-row__icon {
	width: 32px; height: 32px;
	border-radius: 6px;
	background: var(--klb-grey-50);
	display: flex; align-items: center; justify-content: center;
	color: var(--klb-navy);
}
.koloshare-row__icon[data-ext="pdf"] { background: rgba(200,33,31,.08); color: #c8211f; }
/* folder rows in list view get the manila treatment too */
.koloshare-row[data-koloshare-nav] .koloshare-row__icon { background: var(--klb-folder); color: var(--klb-folder-ink); }
.koloshare-row__icon--thumb {
	background-size: cover;
	background-position: center;
	border: 1px solid var(--klb-grey-100);
}
.koloshare-row__name { font-weight: 400; color: var(--klb-navy); }
.koloshare-row__meta { color: var(--klb-grey-400); font-size: 12px; }

/* folder tile (used in canvas grid alongside files) */
.koloshare-tile {
	display: flex; flex-direction: column; gap: 10px;
	padding: 16px;
	/* !important: rendered as <button>, so the .koloshare button reset would
	   otherwise strip the border and background */
	background: var(--klb-white) !important;
	border: 1px solid var(--klb-grey-100) !important;
	border-radius: var(--klb-radius) !important;
	cursor: pointer;
	text-align: left;
	transition: box-shadow .2s, border-color .2s !important;
}
.koloshare-tile:hover { border-color: var(--klb-navy) !important; box-shadow: var(--klb-shadow); }
.koloshare-tile__icon {
	width: 44px; height: 44px;
	border-radius: 10px;
	background: var(--klb-folder);   /* manila folder tile */
	color: var(--klb-folder-ink);
	display: flex; align-items: center; justify-content: center;
}
.koloshare-tile h4 { margin: 0; font-size: 14px; font-weight: 400; color: var(--klb-navy); }
.koloshare-tile span { font-size: 11px; color: var(--klb-grey-400); }

/* ----- empty state ----- */
.koloshare-empty {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	color: var(--klb-grey-500);
	gap: 14px;
	padding: 40px;
}
.koloshare-empty__icon { color: var(--klb-grey); }
.koloshare-empty p { margin: 0; font-size: 14px; }

/* =============================================================
   CONTEXT MENU (right-click)
   ============================================================= */
.koloshare-ctx {
	position: fixed;
	z-index: 9999;
	min-width: 220px;
	background: #ffffff;
	border: 1px solid var(--klb-grey-200);
	border-radius: 8px;
	box-shadow: 0 16px 40px -10px rgba(22,28,37,.22), 0 4px 8px -2px rgba(22,28,37,.10);
	padding: 6px;
	font-family: var(--klb-font);
	color: var(--klb-ink);
	animation: koloshare-ctx-in .14s cubic-bezier(.2,.7,.3,1);
	transform-origin: top left;
	opacity: 1;
}
@keyframes koloshare-ctx-in {
	from { opacity: 0; transform: translateY(-4px) scale(.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.koloshare-ctx__item {
	display: flex !important;
	align-items: center;
	gap: 12px;
	width: 100% !important;
	padding: 10px 14px 10px 18px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--klb-ink) !important;
	border-radius: 5px !important;
	border: 0 !important;
	background: transparent !important;
	text-align: left !important;
	min-width: 0 !important;
	line-height: 1.2 !important;
	transition: background .12s ease, color .12s ease, padding-left .12s ease !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
	position: relative;
}
.koloshare-ctx__item::before {
	content: '';
	position: absolute;
	left: 0; top: 50%;
	width: 3px;
	height: 0;
	background: var(--klb-red);
	border-radius: 0 2px 2px 0;
	transform: translateY(-50%);
	transition: height .15s ease;
}
.koloshare-ctx__item:hover,
.koloshare-ctx__item:focus-visible {
	background: var(--klb-navy) !important;
	color: var(--klb-white) !important;
	padding-left: 22px !important;
	outline: 0;
}
.koloshare-ctx__item:hover::before,
.koloshare-ctx__item:focus-visible::before { height: 60%; }
.koloshare-ctx__item span { flex: 1; }
.koloshare-ctx__sep {
	height: 1px;
	margin: 6px 8px;
	background: var(--klb-grey-100);
}
.koloshare-ctx__item svg {
	color: var(--klb-grey-500);
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	transition: color .12s ease, transform .12s ease;
}
.koloshare-ctx__item:hover svg,
.koloshare-ctx__item:focus-visible svg {
	color: var(--klb-red);
	transform: scale(1.1);
}

@keyframes koloshare-fade  { from { opacity: 0; } to { opacity: 1; } }

/* =============================================================
   FULL-SCREEN FILE PREVIEW
   Mirrors the Command Centre: images, PDFs, video, audio and text render
   inline; anything else falls back to a download card. Every way of
   opening a file lands here.
   ============================================================= */
.koloshare-pv, .koloshare-pv * { box-sizing: border-box; }
.koloshare-pv { position: fixed; inset: 0; top: var(--klb-wpbar, 0px); z-index: 150; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; }
.koloshare-pv__scrim { position: absolute; inset: 0; background: rgba(22,28,37,.62); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s ease; }
.koloshare-pv.is-open .koloshare-pv__scrim { opacity: 1; }
.koloshare-pv__box {
	position: relative;
	display: flex; flex-direction: column;
	width: min(1100px, 100%); height: min(88vh, 100%);
	background: var(--klb-white);
	border-radius: var(--klb-radius-lg);
	box-shadow: var(--klb-shadow-lg);
	overflow: hidden;
	transform: translateY(12px) scale(.98); opacity: 0;
	transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
.koloshare-pv.is-open .koloshare-pv__box { transform: none; opacity: 1; }
.koloshare-pv__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--klb-grey-100); }
.koloshare-pv__ext { font-family: var(--klb-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 4px 9px; border-radius: 6px; background: var(--klb-navy); color: var(--klb-white); }
/* font-family !important: .koloshare-pv lives outside .koloshare, so theme h3 rules
   reach the title. translateY: Comfortaa's glyphs sit high in the em box —
   nudge down so the title optically centres against the ext chip. */
.koloshare-pv__title { margin: 0 !important; flex: 1; font-family: var(--klb-font) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.4 !important; color: var(--klb-navy) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: translateY(2px); }
/* Locked square — the active theme's global `button`/`.button` rules (full-width,
   min-width, padding, line-height) would otherwise stretch it, so every box
   property is pinned with !important and the size is fixed on all four bounds. */
.koloshare-pv__close {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	flex: 0 0 auto !important;
	box-sizing: border-box !important;
	width: 36px !important; height: 36px !important;
	min-width: 36px !important; max-width: 36px !important; min-height: 36px !important; max-height: 36px !important;
	margin: 0 !important; padding: 0 !important;
	border: 0 !important; border-radius: 8px !important;
	background: var(--klb-grey-50) !important; color: var(--klb-navy) !important;
	line-height: 1 !important; font-size: 0 !important; text-indent: 0 !important;
	cursor: pointer !important; box-shadow: none !important; text-transform: none !important;
	transition: background .14s, color .14s;
}
.koloshare-pv__close:hover { background: var(--klb-red) !important; color: var(--klb-white) !important; transform: none !important; }
.koloshare-pv__close svg { width: 18px !important; height: 18px !important; display: block !important; }
.koloshare-pv__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--klb-grey-50); overflow: auto; }
.koloshare-pv__img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.koloshare-pv__frame { width: 100%; height: 100%; border: 0; background: var(--klb-white); }
.koloshare-pv__media { max-width: 100%; max-height: 100%; background: #000; }
.koloshare-pv__audiowrap { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 40px; }
.koloshare-pv__empty { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--klb-grey-500); padding: 40px; text-align: center; }

/* spreadsheet preview (SheetJS) */
.koloshare-pv__loading { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--klb-grey-500); font-size: 14px; }
.koloshare-pv__sheet { align-self: stretch; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; background: var(--klb-white); box-sizing: border-box; }
.koloshare-xls__tabs { display: flex; gap: 4px; padding: 8px 10px 0; overflow-x: auto; border-bottom: 1px solid var(--klb-grey-100); background: var(--klb-grey-50); flex: 0 0 auto; }
.koloshare-xls__tab { border: 1px solid transparent; border-bottom: 0; background: transparent; color: var(--klb-grey-500); font-size: 12.5px; font-weight: 500; padding: 7px 13px; border-radius: 7px 7px 0 0; white-space: nowrap; cursor: pointer; }
.koloshare-xls__tab:hover { color: var(--klb-navy); }
.koloshare-xls__tab.is-on { background: var(--klb-white); border-color: var(--klb-grey-100); color: var(--klb-navy); }
.koloshare-xls__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.koloshare-xls__scroll { flex: 1; min-height: 0; overflow: auto; }
.koloshare-xls__table { border-collapse: collapse; font-size: 13px; color: var(--klb-navy); }
.koloshare-xls__table th, .koloshare-xls__table td { border: 1px solid var(--klb-grey-100); padding: 6px 10px; text-align: left; white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.koloshare-xls__table thead th { position: sticky; top: 0; z-index: 1; background: var(--klb-grey-50); font-weight: 600; }
.koloshare-xls__table tbody tr:nth-child(even) { background: rgba(16, 20, 27, .022); }
.koloshare-xls__more, .koloshare-xls__none { margin: 0; padding: 10px 14px; font-size: 12.5px; color: var(--klb-grey-500); border-top: 1px solid var(--klb-grey-100); }
.koloshare-pv__bigico { font-family: var(--klb-mono); font-size: 34px; font-weight: 700; color: var(--klb-navy); letter-spacing: .04em; }
.koloshare-pv__foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--klb-grey-100); }
.koloshare-pv__details { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 12px 20px; border-top: 1px solid var(--klb-grey-100); }
.koloshare-pv__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; }
.koloshare-pv__fact { display: flex; align-items: baseline; gap: 6px; padding: 0 14px; border-left: 1px solid var(--klb-grey-200); font-size: 13px; line-height: 1.3; }
.koloshare-pv__fact:first-child { padding-left: 0; border-left: 0; }
.koloshare-pv__fact dt { color: var(--klb-grey-400); }
.koloshare-pv__fact dd { margin: 0; color: var(--klb-navy); font-weight: 500; font-variant-numeric: tabular-nums; }
/* an anchor, not a button: the theme's global button:hover paints buttons solid
   red. The theme's a:hover drops underlines, so the hover rule restates it. */
.koloshare-pv__folder { color: var(--klb-navy); background: none; text-decoration: underline; text-decoration-color: var(--klb-grey); text-underline-offset: 3px; transition: color .14s, text-decoration-color .14s; }
.koloshare-pv__folder:hover, .koloshare-pv__folder:focus { color: var(--klb-red); text-decoration: underline; text-decoration-color: var(--klb-red); background: none; }
.koloshare-pv__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.koloshare-pv__tag { font-size: 11.5px; line-height: 1.3; padding: 3px 9px; border-radius: 999px; background: var(--klb-grey-50); border: 1px solid var(--klb-grey-100); color: var(--klb-grey-400); }
.koloshare-pv__note { flex-basis: 100%; margin: 0; font-size: 13px; line-height: 1.55; color: var(--klb-grey-400); white-space: pre-line; }
.koloshare-pv__spacer { flex: 1; }
.koloshare-pv__btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--klb-radius-sm); border: 1px solid var(--klb-grey); background: var(--klb-white); color: var(--klb-navy); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; transition: border-color .14s, background .14s, box-shadow .14s; }
.koloshare-pv__btn:hover { border-color: var(--klb-navy); background: var(--klb-grey-50); }
.koloshare-pv__btn svg { width: 15px; height: 15px; }
.koloshare-pv__btn--primary { background: var(--klb-navy); color: var(--klb-white); border-color: var(--klb-navy); }
.koloshare-pv__btn--primary:hover { background: var(--klb-red); border-color: var(--klb-red); color: var(--klb-white); box-shadow: var(--klb-shadow); }
html.koloshare-pv-open, html.koloshare-pv-open body { overflow: hidden; }

/* Mobile: a near-fullscreen sheet so PDFs/images get all the room they can. */
@media (max-width: 820px) {
	/* anchor the sheet to the top and size it with dvh — height:100% of a fixed
	   inset:0 parent includes the area behind the mobile browser's collapsing
	   URL bar, which pushed the footer (Download / Open in new tab) off-screen
	   whenever the toolbar was visible. dvh tracks the *visible* viewport. */
	.koloshare-pv { padding: 0; align-items: flex-start; }
	.koloshare-pv__box {
		width: 100%;
		height: 100%; /* fallback for browsers without dvh */
		height: calc(100dvh - var(--klb-wpbar, 0px));
		border-radius: 0;
	}
	.koloshare-pv__head { padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top)); }
	.koloshare-pv__title { font-size: 15px; }
	.koloshare-pv__foot { display: grid; grid-template-columns: 1fr 1fr; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
	.koloshare-pv__btn--primary { grid-column: 1 / -1; }
	.koloshare-pv__details { gap: 8px 12px; padding: 10px 16px; }
	.koloshare-pv__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
	.koloshare-pv__fact { padding: 0; border-left: 0; }
	.koloshare-pv__tags { margin-left: 0; }
	.koloshare-pv__spacer { display: none; }
	.koloshare-pv__btn { justify-content: center; min-height: 44px; }
}

/* =============================================================
   TOAST
   ============================================================= */
.koloshare-toast {
	position: fixed;
	bottom: 28px; left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: var(--klb-navy);
	color: var(--klb-white);
	font-size: 13px;
	font-weight: 400;
	padding: 12px 20px;
	border-radius: 8px;
	box-shadow: var(--klb-shadow-lg);
	z-index: 999;
	transition: transform .3s ease, opacity .3s ease;
	opacity: 0;
	pointer-events: none;
	border-bottom: 2px solid var(--klb-red);
}
.koloshare-toast.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; }

/* =============================================================
   SEARCH RESULTS PANEL (overlay below hero / compact bar)
   ============================================================= */
.koloshare-search-panel {
	position: absolute; left: 0; right: 0; top: calc(100% + 12px);
	background: var(--klb-white);
	border-radius: var(--klb-radius);
	border: 1px solid var(--klb-grey-100);
	box-shadow: 0 30px 60px -20px rgba(0,0,0,.45), 0 8px 20px -8px rgba(0,0,0,.20);
	/* Cap at ~5 rows, scroll inside. Row is ~52px + headings. Never infinite lists. */
	max-height: 300px;
	overflow-y: auto;
	overscroll-behavior: contain;
	z-index: 100;
	animation: koloshare-pop .15s ease-out;
}
.koloshare-search-panel__section { padding: 8px 0; }
.koloshare-search-panel__head {
	padding: 10px 16px 6px;
	font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--klb-grey-500); font-weight: 500;
}
.koloshare-search-result {
	display: flex; align-items: center; gap: 12px;
	width: 100%;
	padding: 8px 16px;
	text-align: left;
	transition: background .1s;
}
.koloshare-search-result:hover { background: var(--klb-grey-50); }
.koloshare-search-result__icon {
	width: 36px; height: 36px;
	flex-shrink: 0;
	border-radius: 6px;
	background: var(--klb-grey-50);
	display: flex; align-items: center; justify-content: center;
	color: var(--klb-navy);
	font-family: var(--klb-mono);
	font-size: 10px;
	font-weight: 500;
	background-size: cover;
	background-position: center;
}
.koloshare-search-result__name { font-weight: 400; font-size: 13px; color: var(--klb-navy); display: block; }
.koloshare-search-result__path { font-size: 11px; color: var(--klb-grey-400); }

/* =============================================================
   CARD "more" button (touch-friendly access to context menu)
   ============================================================= */
.koloshare-card { position: relative; cursor: pointer; }
.koloshare-card__more {
	position: absolute;
	top: 8px !important;
	right: 8px !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	max-width: 28px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: var(--klb-white) !important;
	color: var(--klb-navy) !important;
	border: 1px solid var(--klb-grey-200) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 2px 6px -2px rgba(22,28,37,.18) !important;
	opacity: 1 !important;
	transition: background .15s, color .15s, border-color .15s, transform .15s !important;
	z-index: 3;
	cursor: pointer;
	flex-shrink: 0;
}
.koloshare-card__more svg {
	display: block;
	color: var(--klb-navy) !important;
	fill: var(--klb-navy) !important;
	width: 14px;
	height: 14px;
}
.koloshare-card__more:hover {
	background: var(--klb-navy) !important;
	color: var(--klb-white) !important;
	border-color: var(--klb-navy) !important;
	transform: scale(1.08);
}
.koloshare-card__more:hover svg {
	color: var(--klb-white) !important;
	fill: var(--klb-white) !important;
}

/* sidebar toggle — hidden on desktop, visible <= 820px */
.koloshare-sidebar-toggle {
	/* hidden on desktop (folder sidebar is always visible there); shown on
	   mobile as a labelled "Folders" button that opens the slide-in sidebar */
	display: none;
	align-items: center; justify-content: center;
	gap: 7px;
	height: 38px;
	padding: 0 14px;
	border-radius: 8px;
	background: var(--klb-grey-50);
	border: 1px solid var(--klb-grey-100);
	color: var(--klb-navy);
	font-size: 13px; font-weight: 500;
	transition: background .12s, border-color .12s;
}
.koloshare-sidebar-toggle:hover { background: var(--klb-white); border-color: var(--klb-navy); }
.koloshare-sidebar-toggle svg { flex-shrink: 0; }

/* Back button — sits to the left of the folders toggle, both views */
.koloshare-back {
	display: inline-flex;
	align-items: center; justify-content: center;
	gap: 7px;
	height: 38px;
	padding: 0 14px;
	margin-left: -6px;
	border-radius: 8px;
	background: var(--klb-grey-50);
	border: 1px solid var(--klb-grey-100);
	color: var(--klb-navy);
	font-size: 13px; font-weight: 500;
	transition: background .12s, border-color .12s, opacity .12s;
}
.koloshare-back:hover { background: var(--klb-white); border-color: var(--klb-navy); }
.koloshare-back svg { flex-shrink: 0; transition: transform .2s ease; }
.koloshare-back:hover svg { transform: translateX(-2px); }
/* animated underline grows left→right on hover for a touch of polish */
.koloshare-back span {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1.5px;
	padding-bottom: 2px;
	transition: background-size .25s ease;
}
.koloshare-back:hover span { background-size: 100% 1.5px; }
/* at the library root, Back returns to the dashboard — soften it slightly */
.koloshare-back.is-root { opacity: .65; }

/* =============================================================
   CUSTOM MODAL — replaces native confirm/alert
   ============================================================= */
.koloshare-modal {
	position: fixed; inset: 0; top: var(--klb-wpbar, 0px); z-index: 200;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
}
/* `hidden` attribute fix — display:flex above otherwise wins over user-agent rules */
.koloshare-modal[hidden],
.koloshare-toast[hidden],
[hidden] { display: none !important; }
.koloshare-modal__overlay {
	position: absolute; inset: 0;
	background: rgba(22,28,37,.55);
	backdrop-filter: blur(3px);
	animation: koloshare-fade .18s ease-out;
}
.koloshare-modal__panel {
	position: relative;
	width: min(400px, 100%);
	background: var(--klb-white);
	border-radius: var(--klb-radius);
	padding: 32px 28px 28px;
	box-shadow: var(--klb-shadow-lg);
	text-align: center;
	animation: koloshare-pop .18s ease-out;
}
/* red accent reserved for genuinely destructive confirms only */
.koloshare-modal[data-danger="1"] .koloshare-modal__panel { border-top: 3px solid var(--klb-red); }
.koloshare-modal__icon {
	width: 46px; height: 46px;
	margin: 0 auto 14px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--klb-grey-50);
	color: var(--klb-navy);
}
.koloshare-modal__icon.is-danger { background: rgba(235,51,50,.10); color: #c8211f; }  /* semantic danger red, not brand accent */
/* !important — theme heading/paragraph rules otherwise add stray margins */
/* scoped past the .koloshare h1-h4 margin reset, which outranks a bare class */
.koloshare-modal .koloshare-modal__title { margin: 0 0 14px !important; font-size: 19px; font-weight: 500; line-height: 1.3; color: var(--klb-navy); }
.koloshare-modal__body { margin: 0 auto 26px !important; max-width: 36ch; color: var(--klb-grey-400); font-size: 14px; line-height: 1.55; white-space: pre-line; }
.koloshare-modal__actions { display: flex; gap: 12px; justify-content: center; }
.koloshare-modal__actions .koloshare-btn { flex: 1; justify-content: center; }
.koloshare-modal[data-mode="alert"] .koloshare-modal__actions [data-koloshare-modal-cancel] { display: none !important; }

/* =============================================================
   MOBILE / TABLET — sales-on-the-road first
   ============================================================= */

/* tablet */
@media (max-width: 1024px) {
	.koloshare-bar__inner { gap: 16px; }
	.koloshare-bar__label { display: none; }
	.koloshare-browser__body { grid-template-columns: 220px 1fr; }
	.koloshare-folder-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* mobile breakpoint */
@media (max-width: 820px) {
	.koloshare-bar__inner { padding: 0 14px; gap: 10px; height: 56px; }
	.koloshare-bar__nav { display: none; }
	.koloshare-bar__brand { gap: 8px; }
	.koloshare-bar__avatar { width: 34px; height: 34px; font-size: 11px; margin-left: auto; }

	.koloshare-dash__inner { padding: 40px 16px 32px; }
	.koloshare-dash__title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
	.koloshare-dash__tag { margin-bottom: 22px !important; font-size: 14px !important; }

	/* hero search — slim down for mobile, keep prominence */
	.koloshare-hero-search { padding: 6px 12px 6px 46px !important; }
	.koloshare-hero-search__icon { width: 18px; height: 18px; left: 16px; }
	.koloshare-hero-search input { font-size: 15px !important; height: 46px !important; }
	.koloshare-hero-search__hint { display: none; } /* no slash key on mobile */

	.koloshare-quicklinks { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 24px; }
	.koloshare-quicklink { padding: 14px; }
	.koloshare-quicklink__name { font-size: 13px; }
	.koloshare-quicklink__desc { font-size: 11px; }
	.koloshare-quicklink__icon { width: 34px; height: 34px; }

	.koloshare-cards__inner { padding: 0 16px; }
	.koloshare-folder-grid, .koloshare-strip { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
	.koloshare-folder { padding: 16px 16px 14px; }
	.koloshare-folder__icon { width: 38px; height: 38px; }
	.koloshare-folder__name { font-size: 14px; }
	.koloshare-folder__desc { display: none; } /* tighter cards on mobile */

	/* browser becomes single-column with slide-in sidebar.
	   ALWAYS exactly two rows: row 1 = Menu · Back · Breadcrumbs (scroll),
	   row 2 = Search ........ Views. Tighter column gap on row 1. */
	.koloshare-browser__chrome {
		padding: 10px 14px;
		column-gap: 7px;
		row-gap: 10px;
		top: calc(56px + var(--klb-wpbar, 0px));
	}
	/* Folders menu: icon only on mobile (label stripped), kept prominent navy */
	.koloshare-sidebar-toggle {
		display: inline-flex;
		order: 1;
		padding: 0 11px;
		background: var(--klb-navy);
		border-color: var(--klb-navy);
		color: var(--klb-white);
	}
	.koloshare-sidebar-toggle:hover { background: var(--klb-navy); color: var(--klb-white); }
	.koloshare-sidebar-toggle span { display: none; }
	/* Back stays compact (icon-only) on mobile to leave room for the controls */
	.koloshare-back span { display: none; }
	.koloshare-back { order: 2; padding: 0 11px; margin-left: 0; }
	/* flex-basis 0 keeps the breadcrumbs on row 1 (they scroll horizontally
	   inside their box) instead of wrapping onto a third line when long */
	.koloshare-crumbs { order: 3; flex: 1 1 0; width: auto; min-width: 0; font-size: 12px; }
	/* tight on space — folder tiles show just the file count, not subfolders */
	.koloshare-tile__sub { display: none; }
	.koloshare-explorer-tools {
		display: flex;
		order: 4;
		width: 100%;
		align-items: center;
		gap: 10px;
	}
	.koloshare-compact-search { flex: 1 1 auto; min-width: 0; }
	.koloshare-compact-search kbd { display: none; }
	.koloshare-viewtoggle { flex-shrink: 0; }

	.koloshare-browser__body { grid-template-columns: 1fr; position: relative; }
	.koloshare-sidebar {
		position: fixed;
		left: 0; top: var(--klb-wpbar, 0px); bottom: 0;
		width: 280px; max-width: 84vw;
		z-index: 90;
		transform: translateX(-100%);
		transition: transform .25s cubic-bezier(.2,.8,.2,1);
		border-right: 1px solid var(--klb-grey-100);
		padding: 20px 16px;
		overflow-y: auto;
		background: var(--klb-white);
		box-shadow: 12px 0 30px -10px rgba(0,0,0,.2);
	}
	.koloshare-sidebar.is-open { transform: translateX(0); }
	.koloshare-sidebar-scrim {
		position: fixed; inset: 0;
		background: rgba(22,28,37,.5);
		z-index: 80;
		opacity: 0;
		pointer-events: none;
		transition: opacity .2s;
	}
	.koloshare-sidebar-scrim.is-open { opacity: 1; pointer-events: auto; }

	.koloshare-canvas { padding: 14px; min-height: 50vh; }
	.koloshare-results.is-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

	/* list view on mobile: drop date column, condense */
	.koloshare-row { grid-template-columns: 32px 1fr 70px; gap: 10px; padding: 12px 10px; }
	.koloshare-row > div:nth-child(4),
	.koloshare-row > div:nth-child(5) { display: none; }

	/* "more" button always visible on touch */
	.koloshare-card__more { opacity: 1; }

	/* context menu: still works via long-press, sized for touch */
	.koloshare-ctx { min-width: 240px; padding: 8px; border-radius: 14px; }
	.koloshare-ctx__item { padding: 13px 14px; font-size: 14px; }
	.koloshare-ctx__item kbd { display: none; }

	.koloshare-section-head h2 { font-size: 1.2rem; }
	.koloshare-section-head--spaced { margin-top: 36px; }

	/* login: single column, stack aside on top */
	.koloshare--login { margin: 20px 12px; border-radius: 14px; min-height: auto; }
	.koloshare-login__aside { padding: 36px 28px; order: -1; }
	.koloshare-login__panel { padding: 36px 28px; }

	/* modal — full-bleed on mobile */
	.koloshare-modal__panel { padding: 28px 22px 24px; }
}

@keyframes koloshare-sheet { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* prevent iOS body scroll when sidebar open */
.koloshare--app.is-locked { overflow: hidden; height: 100vh; }

/* hover/touch-friendly tap targets in general */
@media (hover: none) {
	.koloshare-card__more { opacity: 1; }
	.koloshare-hero-search__hint { display: none; }
	.koloshare-compact-search kbd { display: none; }
}

/* =============================================================
   MOBILE BOTTOM TAB NAV — replaces hidden top-bar section nav
   visible only ≤820px, follows iOS/Android tab-bar convention
   ============================================================= */
.koloshare-mobnav {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 50;
	background: var(--klb-white);
	border-top: 1px solid var(--klb-grey-100);
	box-shadow: 0 -8px 24px -10px rgba(22,28,37,.12);
	padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.koloshare-mobnav__btn {
	flex: 1;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 6px 4px !important;
	background: transparent !important;
	color: var(--klb-grey-500) !important;
	border: 0 !important;
	min-width: 0 !important;
	min-height: 52px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	transition: color .15s !important;
	border-radius: 8px !important;
	position: relative;
}
.koloshare-mobnav__btn svg { color: inherit; stroke: currentColor; }
.koloshare-mobnav__btn span {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .02em;
}
.koloshare-mobnav__btn::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 50%;
	width: 22px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: transparent;
	transform: translateX(-50%);
	transition: background .15s;
}
.koloshare-mobnav__btn.is-active { color: var(--klb-navy) !important; }
.koloshare-mobnav__btn.is-active::before { background: var(--klb-red); }
.koloshare-mobnav__btn:active { background: var(--klb-grey-50) !important; }

@media (max-width: 820px) {
	.koloshare-mobnav { display: flex; }
	/* leave bottom space so content isn't covered by the fixed tab bar.
	   the wrapper is the page scroll box, so its padding sits below the
	   last visible section. (selector must be .koloshare--app — double dash.) */
	.koloshare--app { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
	/* toasts must clear the tab bar */
	.koloshare-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* =============================================================
   MOBILE: refined sizing, spacing, touch targets
   ============================================================= */
@media (max-width: 820px) {
	/* top bar gets safe-area for iPhone notch + a touch more height */
	.koloshare-bar { padding-top: env(safe-area-inset-top); }
	.koloshare-bar__inner { height: 60px; }

	/* avatar bigger touch target */
	.koloshare-bar__avatar { width: 44px !important; height: 44px !important; min-width: 44px !important; }
	/* with the top nav hidden on mobile, push the user button to the right edge */
	.koloshare-bar__user { margin-left: auto !important; }

	/* hero: tighter top padding now that there's no chrome above */
	.koloshare-dash__inner { padding: 32px 18px 56px; }
	.koloshare-dash__title { max-width: none; }
	.koloshare-dash__eyebrow { font-size: 10px; margin-bottom: 14px; }

	/* hero search — generous, easy to tap */
	.koloshare-hero-search {
		padding: 8px 14px 8px 48px !important;
		border-radius: 14px !important;
	}
	.koloshare-hero-search__icon { left: 17px; }
	.koloshare-hero-search input { font-size: 16px !important; height: 48px !important; min-height: 48px !important; }
	/* Mobile: slide quicklinks down by --klb-search-h (JS measured) or fallback to
	   46vh capped at 300px. Same behavior as desktop, just sized to viewport. */
	.koloshare-dash.is-searching .koloshare-quicklinks {
		margin-top: calc(var(--klb-search-h, min(46vh, 300px)) + 28px);
	}
	.koloshare-search-panel {
		max-height: min(46vh, 300px);
		border-radius: 12px;
	}

	/* quicklinks: 2 cols on phone, 1 col on really small */
	.koloshare-quicklinks { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 28px; }
	.koloshare-quicklink { padding: 16px 14px 14px !important; min-height: 88px; }
	.koloshare-quicklink__icon { width: 36px; height: 36px; }
	.koloshare-quicklink__name { font-size: 13px; }
	.koloshare-quicklink__desc { font-size: 11px; line-height: 1.3; }
	@media (max-width: 380px) {
		.koloshare-quicklinks { grid-template-columns: 1fr; }
	}

	/* folder grid: 1 col on small phones, 2 cols on bigger */
	.koloshare-folder-grid { grid-template-columns: 1fr; gap: 12px; }
	@media (min-width: 481px) {
		.koloshare-folder-grid { grid-template-columns: repeat(2, 1fr); }
	}
	.koloshare-folder { padding: 18px !important; }

	/* file explorer chrome: stack on mobile so search has full width */
	.koloshare-browser__chrome {
		column-gap: 7px;
		row-gap: 10px;
		padding: 12px 14px;
		flex-wrap: wrap;
	}
	.koloshare-sidebar-toggle { height: 44px !important; min-height: 44px; padding: 0 14px !important; flex-shrink: 0; }
	.koloshare-sidebar-toggle svg { width: 22px !important; height: 22px !important; stroke-width: 2.2 !important; }
	.koloshare-back { height: 44px !important; min-height: 44px; flex-shrink: 0; }
	.koloshare-back svg { width: 22px !important; height: 22px !important; stroke-width: 2.2 !important; }

	/* "Library" eyebrow in the slide-in sidebar needs proper padding on mobile */
	.koloshare-sidebar__head { padding: 8px 14px 18px !important; }
	.koloshare-compact-search { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 12px 8px 14px; }
	.koloshare-compact-search input { height: 24px !important; font-size: 16px !important; }
	.koloshare-crumbs {
		order: 3;
		width: auto;
		flex: 1 1 0;
		min-width: 0;
		font-size: 12px;
		overflow-x: auto;
		flex-wrap: nowrap;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.koloshare-crumbs::-webkit-scrollbar { display: none; }
	.koloshare-crumb { flex-shrink: 0; min-height: 32px; display: inline-flex; align-items: center; }
	.koloshare-viewtoggle { flex-shrink: 0; }
	.koloshare-viewtoggle button { width: 36px !important; height: 32px !important; min-width: 36px !important; }

	/* sidebar slide-in: full-height + safe-area */
	.koloshare-sidebar {
		padding-top: calc(20px + env(safe-area-inset-top));
		padding-bottom: calc(20px + env(safe-area-inset-bottom));
	}
	.koloshare-sidebar__item { padding: 12px !important; min-height: 44px; }

	/* card grid: comfortable phone sizing */
	.koloshare-results.is-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	@media (max-width: 380px) {
		.koloshare-results.is-grid { grid-template-columns: 1fr; }
	}
	.koloshare-canvas { padding: 14px; }

	/* list rows: bigger tap area */
	.koloshare-row { padding: 14px 12px; min-height: 56px; grid-template-columns: 36px 1fr auto; gap: 12px; }
	.koloshare-row__icon { width: 36px; height: 36px; }

	/* "more" button on cards: keep small but more prominent */
	.koloshare-card__more {
		top: 8px !important; right: 8px !important;
		width: 32px !important; height: 32px !important;
		min-width: 32px !important; max-width: 32px !important;
	}

	/* context menu: bottom-sheet style on touch, full-width minus padding */
	.koloshare-ctx.is-mobile {
		position: fixed !important;
		left: 12px !important;
		right: 12px !important;
		bottom: calc(80px + env(safe-area-inset-bottom)) !important;
		top: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		padding: 8px !important;
		border-radius: 14px !important;
		box-shadow: 0 -16px 40px -8px rgba(22,28,37,.30) !important;
		animation: koloshare-sheet .22s cubic-bezier(.2,.8,.2,1) !important;
	}
	.koloshare-ctx.is-mobile .koloshare-ctx__item { padding: 14px 16px !important; font-size: 15px !important; min-height: 48px; }
	.koloshare-ctx.is-mobile .koloshare-ctx__item svg { width: 18px; height: 18px; }

	/* tighter section padding on phone */
	.koloshare-cards { padding: 36px 0; }
	.koloshare-cards__inner { padding: 0 16px; }
	.koloshare-section-head h2 { font-size: 1.15rem !important; }
	.koloshare-section-head { margin-bottom: 20px; gap: 12px; }

	/* parallax off on mobile (battery + jank) */

	/* modal: tighter on mobile */
	.koloshare-modal__panel { padding: 26px 20px 22px; }
	.koloshare-modal__title { font-size: 17px !important; }
}

/* very small phones — drop densities further */
@media (max-width: 380px) {
	.koloshare-bar__brand .koloshare-bar__logo { height: 22px !important; max-width: 90px !important; }
	.koloshare-dash__inner { padding: 28px 14px 48px; }
	.koloshare-quicklinks { gap: 8px; }
	.koloshare-canvas { padding: 12px; }
}

/* iOS viewport unit fix — env(safe-area) used throughout for notch/home-indicator */
@supports (padding: max(0px)) {
	.koloshare-bar__inner { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}

.koloshare-ctx__item.is-disabled,
.koloshare-btn.is-disabled,
.koloshare-pv__btn.is-disabled {
	opacity: .45;
	cursor: not-allowed;
}
.koloshare-btn.is-disabled:hover,
.koloshare-pv__btn.is-disabled:hover { transform: none; box-shadow: none; }

.koloshare-bar__nav-btn { position: relative; }
.koloshare-mobnav__btn { position: relative; }

.koloshare-bar__user { display: flex; align-items: center; gap: 2px; }
.koloshare-recent-btn {
	display: inline-flex;
	align-items: center; justify-content: center;
	gap: 7px;
	height: 38px;
	padding: 0 14px;
	border-radius: 8px;
	background: var(--klb-grey-50);
	border: 1px solid var(--klb-grey-100);
	color: var(--klb-navy);
	font-size: 13px; font-weight: 500;
	transition: background .12s, border-color .12s;
}
.koloshare-recent-btn:hover { background: var(--klb-white); border-color: var(--klb-navy); }
.koloshare-recent-btn svg { flex-shrink: 0; }

.koloshare-loadmore {
	grid-column: 1 / -1;
	margin: 18px auto 4px;
	padding: 0 22px;
	height: 38px;
	border-radius: 8px;
	background: var(--klb-grey-50);
	border: 1px solid var(--klb-grey-100);
	color: var(--klb-navy);
	font-size: 13px; font-weight: 500;
	cursor: pointer;
	transition: background .12s, border-color .12s;
}
.koloshare-loadmore:hover { background: var(--klb-white); border-color: var(--klb-navy); }
.koloshare-loadmore[disabled] { opacity: .55; cursor: default; }

@media (max-width: 820px) {
	.koloshare-bar__user { gap: 0; margin-left: auto !important; }
	.koloshare-recent-btn span { display: none; }
	.koloshare-recent-btn { padding: 0 11px; }
}

@media (prefers-reduced-motion: reduce) {
}

.koloshare-modal__input {
	width: 100%;
	margin-top: 14px;
	padding: 11px 13px;
	border: 1.5px solid var(--klb-grey-200, #dfe2e6);
	border-radius: var(--klb-radius-sm, 8px);
	font: inherit;
	font-size: 15px;
	background: #fff;
	color: var(--klb-ink, #11151c);
}
.koloshare-modal__input:focus {
	outline: none;
	border-color: var(--klb-red, #c8211f);
}

/* A rendered Word document should look like a document, not loose HTML. */
.koloshare-docxview { background: var(--klb-grey-100, #ecedef); padding: 18px 0 28px; overflow: auto; }
.koloshare-docxview .docx-wrapper { background: transparent; padding: 0; }
.koloshare-docxview .docx {
	margin: 0 auto 18px;
	background: #fff;
	box-shadow: 0 6px 20px -10px rgba(20,26,33,.4);
}
.koloshare-docxview .docx table { border-collapse: collapse; }
.koloshare-docxview .docx table td, .koloshare-docxview .docx table th { border: 1px solid #cfd3d8; }
.koloshare-docxview .docx img { max-width: 100%; height: auto; }

/* Full-bleed page template: drop any leftover theme spacing. */
html:has(> body.koloshare-page),
body.koloshare-page { margin: 0 !important; padding: 0 !important; background: #f5f6f8; }
body.koloshare-page { min-height: 100vh; }