:root {
    --navy: #081f49;
    --blue: #2563eb;
    --ink: #172033;
    --muted: #667085;
    --line: #e4e8ef;
    --surface: #ffffff;
    --canvas: #f4f6f9;
    --sidebar-width: 236px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--canvas); }
body { margin: 0; min-width: 320px; background: var(--canvas); background-image:var(--portal-background-image), radial-gradient(circle at 12% 16%,rgba(255,255,255,.9) 0 6%,transparent 7%), radial-gradient(circle at 78% 12%,rgba(186,230,253,.34) 0 12%,transparent 13%), linear-gradient(145deg,#eff8ff,#f7fbff 45%,#edf6ff); background-attachment:fixed; background-size:cover; color: var(--ink); font-family: Arial, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(37, 99, 235, .28); outline-offset: 2px; }
.portal-shell { min-height: 100vh; }

.topbar { position: fixed; inset: 0 0 auto; z-index: 50; height: 58px; display: grid; grid-template-columns: 300px minmax(280px, 680px) 1fr; align-items: center; gap: 24px; padding: 0 22px; color: #fff; background: linear-gradient(110deg, var(--navy), color-mix(in srgb, var(--navy) 82%, var(--blue)) 58%, color-mix(in srgb, var(--navy) 72%, var(--blue))); box-shadow: 0 4px 18px rgba(7, 28, 67, .2); }
.brand, .top-actions, .user-summary { display: flex; align-items: center; }
.brand { gap: 10px; position: relative; }
.brand strong { font-size: 18px; white-space: nowrap; } .brand-home-link{color:#fff;text-decoration:none;padding:8px 6px;border-radius:8px}.brand-home-link:hover{background:rgba(255,255,255,.10)}
.app-launcher-button { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; color: #fff; background: color-mix(in srgb, var(--blue) 82%, white); cursor: pointer; }
.app-launcher-button:hover, .app-launcher-button[aria-expanded="true"] { background: color-mix(in srgb, var(--blue) 68%, white); }
.app-launcher-button .grid-icon { width: 15px; }
.site-logo { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 8px; color: #fff; background: rgba(255, 255, 255, .12); font-size: 10px; font-weight: 800; }
.site-logo img, .auth-mark img { width: 100%; height: 100%; display: block; object-fit: contain; background: #fff; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(145deg, #3b82f6, #60a5fa); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.grid-icon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.grid-icon i { display: block; aspect-ratio: 1; border-radius: 1px; background: currentColor; }
.brand-mark .grid-icon { width: 14px; color: #fff; }
.icon-button { border: 0; background: transparent; color: inherit; height: 38px; min-width: 38px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.menu-button { display: none; }
.hamburger, .hamburger::before, .hamburger::after { width: 18px; height: 2px; display: block; content: ""; border-radius: 99px; background: currentColor; }
.hamburger::before { transform: translateY(-6px); }
.hamburger::after { transform: translateY(4px); }
.global-search { direction: rtl; height: 36px; width: 100%; position: relative; display: flex; align-items: center; color: #667085; background: #fff; border-radius: 4px; }
.global-search input { width: 100%; border: 0; outline: 0; background: transparent; padding: 0 40px 0 42px; font-size: 13px; color: #263248; }
.global-search .search-symbol { position: absolute; right: 14px; }
.global-search kbd { direction: ltr; position: absolute; left: 11px; min-width: 20px; text-align: center; font-size: 11px; line-height: 20px; border: 1px solid #d8dee8; border-radius: 4px; background: #f7f9fc; }
.search-symbol { width: 14px; height: 14px; display: inline-block; position: relative; border: 2px solid currentColor; border-radius: 50%; }
.search-symbol::after { content: ""; position: absolute; width: 6px; height: 2px; left: -5px; bottom: -2px; transform: rotate(-45deg); background: currentColor; border-radius: 2px; }
.top-actions { justify-content: flex-end; position: relative; }
.user-summary { gap: 9px; }
.user-copy { display: flex; flex-direction: column; }
.user-copy b { font-size: 12px; }
.user-copy small { margin-top: 2px; color: #b7c6df; font-size: 10px; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #f59e0b, #fb7185); font-weight: 700; }
.user-menu-button { min-height: 44px; display: flex; align-items: center; gap: 9px; padding: 4px 7px 4px 9px; border: 0; border-radius: 8px; color: #fff; background: transparent; cursor: pointer; text-align: right; }
.user-menu-button:hover, .user-menu-button[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }
.user-menu-button .chevron { color: #b7c6df; font-size: 14px; }

.floating-panel { position: absolute; top: 48px; z-index: 90; border: 1px solid #dfe5ee; border-radius: 12px; color: var(--ink); background: #fff; box-shadow: 0 20px 55px rgba(4, 18, 44, .24); }
.app-launcher-panel { right: 0; width: min(390px, calc(100vw - 24px)); padding: 18px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 13px; border-bottom: 1px solid #edf0f4; }
.panel-heading > div { display: flex; flex-direction: column; }
.panel-heading b { color: #1c2940; font-size: 14px; }
.panel-heading small { margin-top: 3px; color: #8490a3; font-size: 10px; }
.panel-heading button { padding: 6px 10px; border: 1px solid #cbd9ef; border-radius: 6px; color: #1959b7; background: #f4f8ff; cursor: pointer; font-size: 10px; font-weight: 700; }
.launcher-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 14px; }
.launcher-item { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 5px; border-radius: 8px; color: #314056; text-decoration: none; font-size: 10px; font-weight: 700; text-align: center; }
.launcher-item:hover { color: var(--blue); background: #f2f7ff; }
.launcher-mark, .launcher-admin-mark { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--service-color) 18%, #dbe3ef); border-radius: 9px; color: var(--service-color); background: color-mix(in srgb, var(--service-color) 9%, white); direction: ltr; font-size: 10px; font-weight: 800; }
.launcher-mark img, .launcher-admin-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.launcher-empty { margin: 14px 0 0; padding: 15px; border-radius: 8px; color: #758195; background: #f7f9fc; text-align: center; font-size: 11px; line-height: 1.6; }
.user-panel { left: 0; width: min(330px, calc(100vw - 24px)); overflow: hidden; }
.profile-card-head { display: flex; align-items: center; gap: 12px; padding: 18px; background: linear-gradient(135deg, #f4f8ff, #fff); }
.profile-card-head > div { display: flex; flex-direction: column; min-width: 0; }
.profile-card-head b { color: #1f2e47; font-size: 14px; }
.profile-card-head small { margin-top: 3px; color: #748197; font-size: 10px; }
.avatar-large { width: 44px; height: 44px; font-size: 18px; }
.profile-details { margin: 0; padding: 7px 18px 12px; border-bottom: 1px solid #edf0f4; }
.profile-details > div { display: flex; justify-content: space-between; gap: 15px; padding: 7px 0; }
.profile-details dt { color: #8a95a7; font-size: 10px; }
.profile-details dd { max-width: 190px; margin: 0; overflow: hidden; color: #3b4860; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.panel-action, .panel-logout button { width: 100%; min-height: 39px; padding: 0 18px; border: 0; color: #3b4961; background: #fff; cursor: pointer; text-align: right; font-size: 11px; }
.panel-action:hover { color: var(--blue); background: #f4f7fc; }
.panel-logout { margin: 0; border-top: 1px solid #edf0f4; }
.panel-logout button { color: #b42318; }

.sidebar { position: fixed; z-index: 40; top: 58px; right: 0; bottom: 0; width: var(--sidebar-width); display: flex; flex-direction: column; justify-content: space-between; padding: 18px 12px 16px; background: #fff; border-left: 1px solid var(--line); }
.sidebar nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item { width: 100%; min-height: 43px; display: flex; align-items: center; gap: 13px; padding: 0 13px; border: 0; border-radius: 7px; color: #465268; background: transparent; text-align: right; font-size: 13px; font-weight: 600; cursor: pointer; position: relative; }
.nav-item:hover { color: #1f55bb; background: #f4f7fc; }
.nav-item.active { color: var(--blue); background: #edf4ff; }
.nav-item.active::before { content: ""; position: absolute; right: -12px; top: 8px; bottom: 8px; width: 3px; background: var(--blue); }
.nav-glyph { width: 20px; height: 20px; display: grid; place-items: center; color: #7b8799; font-size: 21px; }
.home-glyph { position: relative; width: 14px; height: 12px; margin: 4px 3px 0; border: 2px solid currentColor; border-top: 0; }
.home-glyph::before { content: ""; position: absolute; width: 10px; height: 10px; top: -6px; left: 0; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.tiles-glyph .grid-icon { width: 15px; }
.nav-divider { height: 1px; margin: 11px 8px; background: #edf0f4; }
.logout-form { margin: 0; }
.sidebar-card { display: flex; gap: 11px; align-items: flex-start; padding: 13px; border: 1px solid #dbe8ff; border-radius: 10px; background: #f4f8ff; color: #334666; }
.shield { width: 25px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; color: var(--blue); background: #dbeafe; clip-path: polygon(50% 0, 95% 17%, 84% 72%, 50% 100%, 16% 72%, 5% 17%); }
.sidebar-card div { display: flex; flex-direction: column; }
.sidebar-card b { font-size: 12px; }
.sidebar-card small { margin-top: 3px; color: #71809a; font-size: 10px; line-height: 1.6; }
.sidebar-backdrop { display: none; }

.workspace { margin-right: var(--sidebar-width); min-height: 100vh; padding: 82px 38px 54px; }
.workspace > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; color: #8a94a4; font-size: 11px; }
.breadcrumb i { color: #b2bac6; font-style: normal; font-size: 18px; }
.breadcrumb b { color: #526078; }
.welcome-panel { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 24px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #536175; font-size: 11px; font-weight: 700; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px #dcfce7; }
.welcome-panel h1 { margin: 12px 0 8px; color: #152238; font-size: clamp(31px, 4vw, 47px); line-height: 1.08; letter-spacing: -1.6px; }
.welcome-panel h1 em { color: var(--blue); font-style: normal; }
.welcome-panel p { margin: 0; color: #68758a; font-size: 14px; }
.primary-button { min-height: 43px; padding: 0 18px; border: 0; border-radius: 6px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 88%, white), color-mix(in srgb, var(--blue) 82%, black)); box-shadow: 0 7px 17px color-mix(in srgb, var(--blue) 20%, transparent); cursor: pointer; font-size: 13px; font-weight: 700; }
.primary-button:hover { transform: translateY(-1px); }

.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 34px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 16px rgba(29, 43, 66, .035); }
.stat { min-height: 92px; display: flex; align-items: center; gap: 13px; padding: 17px 22px; position: relative; }
.stat:not(:last-child)::after { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: #edf0f4; }
.stat-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; font-size: 25px; }
.stat-icon.blue { color: var(--blue); background: #eaf2ff; }
.stat-icon.violet { color: #7548e8; background: #f1eefe; }
.stat-icon.cyan { color: #0891b2; background: #e8f8fb; }
.stat-icon .grid-icon { width: 17px; }
.stat p { display: flex; flex-direction: column; margin: 0; }
.stat b { color: #22304a; font-size: 21px; line-height: 1.1; }
.stat small { margin-top: 6px; color: #8a95a7; font-size: 10px; }
.stat.last b { color: #178251; font-size: 13px; }
.sync-dot { width: 11px; height: 11px; border: 2px solid #22a065; border-radius: 50%; box-shadow: 0 0 0 5px #e7f8ef; }

.content-section { scroll-margin-top: 76px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 17px; }
.section-heading h2 { margin: 0; color: #1e2c44; font-size: 20px; }
.section-heading p { margin: 6px 0 0; color: #8a95a7; font-size: 11px; }
.view-toggle { display: flex; padding: 3px; border: 1px solid #dfe4eb; border-radius: 6px; background: #fff; }
.view-toggle button { width: 33px; height: 29px; display: grid; place-items: center; border: 0; border-radius: 4px; color: #7e899b; background: transparent; cursor: pointer; }
.view-toggle button.selected { color: var(--blue); background: #edf4ff; }
.view-toggle .grid-icon { width: 14px; }
.category-row { display: flex; gap: 7px; overflow-x: auto; padding: 1px 1px 13px; }
.category-row button { padding: 7px 14px; border: 1px solid #e0e5ec; border-radius: 999px; color: #5d6a7f; background: #fff; cursor: pointer; font-size: 11px; white-space: nowrap; }
.category-row button.active { border-color: var(--blue); color: #fff; background: var(--blue); }
.link-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.link-card { min-height: 221px; display: flex; flex-direction: column; padding: 19px; border: 1px solid #e1e6ee; border-radius: 10px; background: #fff; box-shadow: 0 4px 15px rgba(31, 44, 65, .035); transition: .18s ease; }
.link-card:hover { transform: translateY(-3px); border-color: #bdd2f6; box-shadow: 0 11px 27px rgba(31, 68, 130, .1); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.site-mark { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 10px; color: var(--mark-color); background: #f2f6fd; border: 1px solid #e2e9f5; direction: ltr; font-size: 11px; font-weight: 800; }
.card-actions { display: flex; gap: 2px; }
.card-actions button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; color: #a1aaba; background: transparent; cursor: pointer; font-size: 17px; }
.card-actions button:hover { color: var(--blue); background: #f0f5ff; }
.card-actions .favorite { font-size: 25px; }
.card-actions .favorite.active { color: #f59e0b; }
.card-copy { display: flex; flex-direction: column; flex: 1; }
.link-card h3 { direction: ltr; margin: 14px 0 7px; color: #24324a; text-align: right; font-size: 15px; }
.link-card p { flex: 1; margin: 0 0 14px; color: #7e899b; font-size: 11px; line-height: 1.65; }
.card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid #eff1f5; }
.card-footer > span { padding: 5px 9px; border-radius: 5px; color: #66758b; background: #f2f5f9; font-size: 9px; font-weight: 700; }
.footer-actions { display: flex; align-items: center; gap: 14px; }
.delete-link { border: 0; color: #a6afbd; background: transparent; cursor: pointer; font-size: 10px; }
.delete-link:hover { color: #dc2626; }
.card-footer a { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); text-decoration: none; font-size: 10px; font-weight: 700; }
.card-footer a i { direction: ltr; font-style: normal; font-size: 15px; }
.link-grid.list-view { grid-template-columns: 1fr; }
.link-grid.list-view .link-card { min-height: 92px; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 13px; }
.link-grid.list-view .card-top { display: contents; }
.link-grid.list-view .site-mark { grid-column: 1; grid-row: 1; }
.link-grid.list-view .card-actions { grid-column: 3; grid-row: 1; align-self: start; }
.link-grid.list-view .card-copy { grid-column: 2; grid-row: 1; }
.link-grid.list-view .card-copy h3 { margin: 0 0 5px; }
.link-grid.list-view .card-copy p { margin: 0; }
.link-grid.list-view .card-footer { grid-column: 3; grid-row: 1; align-self: end; gap: 18px; border: 0; padding: 0; }
.empty-state { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #cfd7e4; border-radius: 12px; color: #8994a5; background: rgba(255, 255, 255, .75); text-align: center; }
.empty-state h3 { margin: 9px 0 6px; color: #445168; font-size: 15px; }
.empty-state p { margin: 0; font-size: 11px; }
.empty-state button { margin-top: 16px; padding: 8px 14px; border: 1px solid #cbd9ef; border-radius: 6px; color: #225aaa; background: #fff; cursor: pointer; }
.error-state > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #b42318; background: #fee4e2; font-weight: 800; }
.loading-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.loading-grid i { height: 221px; border: 1px solid #e8ebf0; border-radius: 10px; background: linear-gradient(100deg, #fff 20%, #f3f5f8 38%, #fff 58%); background-size: 220% 100%; animation: shimmer 1.2s infinite linear; }
@keyframes shimmer { to { background-position-x: -220%; } }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(5, 18, 43, .57); backdrop-filter: blur(3px); }
.modal { width: min(650px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 14px; background: #fff; box-shadow: 0 28px 80px rgba(3, 15, 38, .28); }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 24px 26px 18px; border-bottom: 1px solid #e9edf2; }
.modal-header span { color: var(--blue); font-size: 10px; font-weight: 800; }
.modal-header h2 { margin: 5px 0 0; color: #1d2b43; font-size: 20px; }
.modal-header > button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 7px; color: #7d8798; background: #f4f6f9; cursor: pointer; font-size: 24px; }
.modal form { padding: 22px 26px 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.form-grid label { display: flex; flex-direction: column; gap: 7px; }
.form-grid label > span, .form-grid legend { color: #4e5b70; font-size: 11px; font-weight: 700; }
.form-grid input, .form-grid textarea { width: 100%; padding: 11px 12px; border: 1px solid #d8dee8; border-radius: 7px; outline: 0; color: #27344b; background: #fbfcfe; font-size: 12px; }
.form-grid input:focus, .form-grid textarea:focus { border-color: #4b81df; background: #fff; box-shadow: 0 0 0 3px #e7f0ff; }
.form-grid textarea { min-height: 78px; resize: vertical; }
.form-grid .full-row { grid-column: 1 / -1; }
.ltr-input { direction: ltr; text-align: left; }
.form-grid fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-grid legend { margin-bottom: 10px; }
.color-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.color-picker button { width: 27px; height: 27px; border: 3px solid #fff; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 1px #d3d9e3; }
.color-picker button.selected { box-shadow: 0 0 0 2px var(--blue); transform: scale(.92); }
.favorite-check { display: flex; align-items: center; gap: 9px; margin-top: 20px; color: #4e5b70; font-size: 11px; font-weight: 700; cursor: pointer; }
.favorite-check input { width: 16px; height: 16px; accent-color: var(--blue); }
.form-error { margin: 14px 0 0; padding: 10px 12px; border-radius: 6px; color: #b42318; background: #fff1f0; font-size: 11px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.secondary-button, .danger-button { min-height: 41px; padding: 0 18px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 700; }
.secondary-button { border: 1px solid #d8dee8; color: #536176; background: #fff; }
.danger-button { border: 0; color: #fff; background: #d92d20; }
.confirm-modal { width: min(410px, 100%); padding: 28px; border-radius: 14px; background: #fff; text-align: center; }
.danger-icon { width: 45px; height: 45px; display: grid; place-items: center; margin: 0 auto 15px; border-radius: 50%; color: #b42318; background: #fee4e2; font-size: 21px; font-weight: 800; }
.confirm-modal h2 { margin: 0 0 8px; color: #223049; }
.confirm-modal p { margin: 0; color: #758195; font-size: 12px; line-height: 1.65; }
.confirm-modal .modal-footer { justify-content: center; }
.toast { position: fixed; z-index: 120; left: 28px; bottom: 28px; display: flex; align-items: center; gap: 9px; min-width: 220px; padding: 13px 16px; border: 1px solid #ccebdc; border-radius: 9px; color: #16724a; background: #f0fff7; box-shadow: 0 12px 32px rgba(8, 44, 30, .15); font-size: 12px; }
.toast span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #21a366; }

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--navy) 65%, var(--blue)) 0, transparent 33%), linear-gradient(135deg, var(--navy), color-mix(in srgb, var(--navy) 82%, var(--blue)) 55%, color-mix(in srgb, var(--navy) 72%, var(--blue))); }
.auth-card { width: min(440px, 100%); padding: 34px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 18px; background: #fff; box-shadow: 0 30px 90px rgba(1, 11, 30, .35); }
.setup-card { width: min(560px, 100%); }
.auth-mark { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 19px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, var(--blue), color-mix(in srgb, var(--blue) 55%, white)); font-weight: 800; }
.auth-eyebrow { color: var(--blue) !important; font-size: 11px !important; font-weight: 800; }
.auth-card h1 { margin: 8px 0; color: #17233a; font-size: 25px; }
.auth-card > p { color: #748096; font-size: 13px; line-height: 1.6; }
.auth-card form { display: grid; gap: 15px; margin-top: 24px; }
.auth-card label { display: grid; gap: 7px; color: #4e5b70; font-size: 11px; font-weight: 700; }
.auth-card input { width: 100%; padding: 12px; border: 1px solid #d8dee8; border-radius: 7px; outline: 0; background: #fbfcfe; }
.auth-card input:focus { border-color: #4b81df; box-shadow: 0 0 0 3px #e7f0ff; }
.auth-submit { min-height: 44px; display: grid; place-items: center; padding: 0 18px; border: 0; border-radius: 7px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 88%, white), color-mix(in srgb, var(--blue) 82%, black)); text-decoration: none; cursor: pointer; font-size: 13px; font-weight: 700; }
.auth-error, .auth-success { padding: 11px 13px; border-radius: 7px; font-size: 12px !important; }
.auth-error { color: #b42318 !important; background: #fff1f0; }
.auth-success { color: #16724a !important; background: #f0fff7; }
.auth-security { display: block; margin-top: 19px; color: #98a2b3; text-align: center; font-size: 10px; }
.setup-url { direction: ltr; display: block; padding: 11px; border-radius: 6px; color: #1f4f94; background: #edf4ff; text-align: left; }

.admin-modal { width: min(970px, 100%); height: min(720px, calc(100vh - 40px)); display: flex; flex-direction: column; overflow: hidden; }
.admin-layout { min-height: 0; display: grid; grid-template-columns: 190px 1fr; flex: 1; }
.admin-tabs { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; border-left: 1px solid #e7ebf1; background: #f8fafd; }
.admin-tabs button { min-height: 42px; padding: 0 13px; border: 0; border-radius: 7px; color: #526078; background: transparent; cursor: pointer; text-align: right; font-size: 11px; font-weight: 700; }
.admin-tabs button:hover { background: #f0f5ff; }
.admin-tabs button.active { color: var(--blue); background: #eaf2ff; }
.admin-content { min-width: 0; overflow: auto; padding: 24px 28px 30px; }
.admin-modal form { padding: 0; }
.settings-heading { margin-bottom: 22px; }
.settings-heading h3 { margin: 0; color: #213049; font-size: 18px; }
.settings-heading p { margin: 6px 0 0; color: #8490a3; font-size: 11px; line-height: 1.6; }
.inline-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.settings-form { max-width: 690px; }
.settings-form .form-grid input, .settings-form .form-grid textarea, .narrow-form input, .launcher-editor input { background: #fff; }
.settings-form .form-grid input[type="color"], .launcher-editor input[type="color"] { min-height: 42px; padding: 5px; cursor: pointer; }
.settings-form .form-grid input[readonly] { color: #8b95a5; background: #f3f5f8; cursor: not-allowed; }
.settings-form .modal-footer { padding-top: 18px; border-top: 1px solid #edf0f4; }
.upload-field small { color: #909aac; font-size: 9px; }
.narrow-form { max-width: 430px; display: grid; gap: 16px; }
.narrow-form label { display: grid; gap: 7px; color: #4e5b70; font-size: 11px; font-weight: 700; }
.narrow-form input { width: 100%; padding: 11px 12px; border: 1px solid #d8dee8; border-radius: 7px; outline: 0; }
.compact-button { min-height: 37px; padding: 0 13px; font-size: 10px; white-space: nowrap; }
.launcher-admin-list { display: grid; gap: 9px; }
.launcher-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px; border: 1px solid #e2e7ef; border-radius: 9px; background: #fff; }
.launcher-admin-info { min-width: 0; display: flex; align-items: center; gap: 12px; }
.launcher-admin-info > div { min-width: 0; display: flex; flex-direction: column; }
.launcher-admin-info b { color: #2d3b53; font-size: 12px; }
.launcher-admin-info small { max-width: 410px; margin-top: 4px; overflow: hidden; color: #8b96a7; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-size: 9px; }
.launcher-admin-mark { width: 38px; height: 38px; flex: 0 0 auto; }
.launcher-admin-actions { display: flex; align-items: center; gap: 7px; }
.small-button { min-height: 31px; padding: 0 10px; font-size: 9px; }
.admin-empty { margin: 0; padding: 35px 18px; border: 1px dashed #ccd5e2; border-radius: 10px; color: #8490a3; background: #fbfcfe; text-align: center; font-size: 11px; }
.launcher-editor { width: min(610px, 100%); }
.launcher-editor form { padding: 22px 26px 24px; }
.auth-mark { overflow: hidden; }

@media (max-width: 1050px) {
    .topbar { grid-template-columns: 260px minmax(260px, 1fr) auto; gap: 14px; }
    .user-copy { display: none; }
    .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(2)::after { display: none; }
    .stat:nth-child(-n+2) { border-bottom: 1px solid #edf0f4; }
}

@media (max-width: 760px) {
    .topbar { grid-template-columns: auto 1fr auto; padding: 0 10px; }
    .brand strong, .site-logo { display: none; }
    .menu-button { display: grid; }
    .user-menu-button .user-copy, .user-menu-button .chevron { display: none; }
    .global-search kbd { display: none; }
    .global-search input { padding-left: 12px; }
    .sidebar { transform: translateX(110%); transition: transform .22s ease; box-shadow: -14px 0 35px rgba(6, 24, 56, .16); }
    .sidebar.is-open { transform: translateX(0); }
    .sidebar-backdrop.is-open { display: block; position: fixed; z-index: 35; inset: 58px 0 0; border: 0; background: rgba(7, 22, 48, .34); }
    .workspace { margin-right: 0; padding: 77px 18px 40px; }
    .welcome-panel { align-items: flex-start; flex-direction: column; }
    .primary-button { width: 100%; }
    .link-grid { grid-template-columns: 1fr; }
    .link-grid.list-view .link-card { display: flex; min-height: 221px; }
    .link-grid.list-view .card-top, .link-grid.list-view .card-copy, .link-grid.list-view .card-footer { display: flex; }
    .link-grid.list-view .card-top { justify-content: space-between; }
    .link-grid.list-view .card-footer { align-self: stretch; padding-top: 12px; border-top: 1px solid #eff1f5; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .full-row { grid-column: auto; }
    .modal-header, .modal form { padding-left: 18px; padding-right: 18px; }
    .admin-layout { grid-template-columns: 1fr; }
    .admin-tabs { flex-direction: row; overflow-x: auto; padding: 9px 12px; border-left: 0; border-bottom: 1px solid #e7ebf1; }
    .admin-tabs button { min-width: max-content; min-height: 35px; }
    .admin-content { padding: 20px 18px 26px; }
    .launcher-admin-row, .inline-heading { align-items: stretch; flex-direction: column; }
    .launcher-admin-actions { justify-content: flex-end; }
    .toast { left: 16px; right: 16px; bottom: 16px; min-width: 0; }
}

@media (max-width: 480px) {
    .topbar { grid-template-columns: auto 1fr auto; }
    .user-menu-button { padding: 3px; }
    .user-menu-button .avatar { width: 29px; height: 29px; }
    .app-launcher-panel { right: -6px; }
    .user-panel { left: -6px; }
    .stats-strip { grid-template-columns: 1fr 1fr; }
    .stat { min-height: 82px; padding: 12px; }
    .stat.last { display: none; }
    .stat:nth-child(3) { grid-column: 1 / -1; }
    .view-toggle { display: none; }
    .auth-card { padding: 25px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Two-factor authentication */
.auth-secondary-form { margin-top: 10px !important; }
.auth-secondary-button { min-height: 40px; border: 1px solid #d9e0ea; border-radius: 7px; color: #536176; background: #f8fafc; cursor: pointer; font-size: 12px; font-weight: 700; }
.two-factor-card { max-width: 690px; padding: 18px; border: 1px solid #e1e7ef; border-radius: 11px; background: #fbfcfe; }
.two-factor-status-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.two-factor-status-row > div { display: flex; flex-direction: column; gap: 4px; }
.two-factor-status-row b { color: #223149; font-size: 13px; }
.two-factor-status-row small { color: #7f8b9e; font-size: 10px; line-height: 1.5; }
.status-pill { min-width: 54px; padding: 6px 10px; border-radius: 999px; color: #8a4b08; background: #fff3dd; text-align: center; font-size: 10px; font-weight: 800; }
.status-pill.enabled { color: #146c43; background: #e8f8ef; }
.two-factor-password-label, .two-factor-setup label { display: grid; gap: 7px; margin: 14px 0; color: #536176; font-size: 11px; font-weight: 700; }
.two-factor-password-label input, .two-factor-setup input { width: 100%; max-width: 390px; padding: 11px 12px; border: 1px solid #d8dee8; border-radius: 7px; outline: 0; background: #fff; }
.two-factor-password-label input:focus, .two-factor-setup input:focus { border-color: #4b81df; box-shadow: 0 0 0 3px #e7f0ff; }
.two-factor-setup { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e7ebf1; }
.two-factor-setup > p { margin: 0 0 14px; color: #66758a; font-size: 11px; line-height: 1.7; }
.secret-box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px dashed #b8c8df; border-radius: 8px; background: #fff; }
.secret-box span { color: #748096; font-size: 9px; font-weight: 800; }
.secret-box code { overflow-wrap: anywhere; color: #14233b; direction: ltr; text-align: left; letter-spacing: 1.1px; font-size: 12px; font-weight: 800; }
.secret-box button { padding: 7px 9px; border: 1px solid #cbd9ef; border-radius: 6px; color: #1959b7; background: #f4f8ff; cursor: pointer; font-size: 9px; font-weight: 800; }
.uri-hint { display: block; margin: 8px 0 4px; color: #8a95a6; font-size: 9px; }
.two-factor-buttons { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
.recovery-box { margin: 18px 0; padding: 16px; border: 1px solid #f1c98e; border-radius: 9px; background: #fff9ed; }
.recovery-box b { color: #7a4306; font-size: 12px; }
.recovery-box p { margin: 6px 0 12px; color: #8c663b; font-size: 10px; line-height: 1.6; }
.recovery-box pre { margin: 0 0 12px; padding: 13px; border-radius: 7px; color: #18263c; background: #fff; direction: ltr; text-align: left; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.65; }
.security-divider { height: 1px; margin: 28px 0; background: #e8edf3; }

@media (max-width: 520px) {
    .secret-box { grid-template-columns: 1fr; }
    .secret-box button { justify-self: start; }
    .two-factor-status-row { align-items: flex-start; }
}


/* LinkSphere 2.2 - account security, QR and user administration */
.two-factor-qr-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; margin:14px 0; padding:16px; border:1px solid #dfe6ef; border-radius:12px; background:#fff; }
.two-factor-qr { display:flex; align-items:center; justify-content:center; min-width:220px; min-height:220px; padding:8px; border-radius:8px; background:#fff; }
.two-factor-qr svg { display:block; max-width:100%; height:auto; }
.two-factor-qr-wrap small { color:#68758a; text-align:center; font-size:10px; }
.users-admin-list { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.admin-user-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border:1px solid #e1e7ef; border-radius:10px; background:#fbfcfe; }
.admin-user-main { display:grid; gap:3px; min-width:0; }
.admin-user-main b { color:#1f2e47; }
.admin-user-main small,.admin-user-main span { color:#6f7c90; font-size:11px; }
.admin-user-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
@media (max-width:700px){.admin-user-row{align-items:stretch;flex-direction:column}.admin-user-actions{justify-content:flex-start}.two-factor-qr{min-width:190px;min-height:190px}}

.auth-alt-2fa{margin-top:16px;padding-top:16px;border-top:1px solid #dbe3ef}.auth-alt-2fa p{margin:0 0 10px}.auth-success{background:#ecfdf5;color:#047857;padding:10px 12px;border-radius:10px}.settings-note{margin-top:14px;color:#64748b;font-size:.9rem}

/* 2.5 visual page builder */
body[data-background-style="ocean"]{background-image:var(--portal-background-image),linear-gradient(145deg,#d9fbff,#e1efff,#f3f6ff)}
body[data-background-style="sunset"]{background-image:var(--portal-background-image),linear-gradient(145deg,#fff7ed,#fce7f3,#ede9fe)}
body[data-background-style="clean"]{background-image:var(--portal-background-image);background-color:#f5f7fb}
.welcome-panel{background:linear-gradient(135deg,rgba(255,255,255,.93),rgba(239,248,255,.93));box-shadow:0 18px 60px rgba(37,99,235,.09)}
.settings-form select,.page-builder select{width:100%;padding:11px 12px;border:1px solid #d8dee8;border-radius:7px;background:#fff;color:#334155}
.pages-list{display:grid;gap:10px}.page-admin-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px;border:1px solid #dde6f2;border-radius:12px;background:linear-gradient(135deg,#fff,#f8fbff)}.page-admin-main{display:grid;gap:4px}.page-admin-main b{font-size:14px;color:#18365f}.page-admin-main span,.page-admin-main small{font-size:10px;color:#77869b}.page-admin-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center}.page-admin-actions a{text-decoration:none;display:inline-flex;align-items:center}.page-builder{max-width:820px}.builder-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:24px 0 14px;padding:12px;border:1px solid #d9e5f4;border-radius:12px;background:#f5faff}.builder-toolbar button{border:1px solid #cbdcf2;border-radius:8px;background:#fff;color:#24579c;padding:8px 10px;cursor:pointer}.page-blocks{display:grid;gap:12px}.builder-block{border:1px solid #dfe7f1;border-radius:13px;background:#fff;box-shadow:0 6px 20px rgba(15,23,42,.04);overflow:hidden}.builder-block header{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:#f6f9fd;border-bottom:1px solid #e7edf5}.builder-block header b{font-size:10px;color:#4670a6}.builder-block header button{border:0;background:#eaf2ff;color:#24579c;border-radius:6px;padding:5px 8px;margin-inline-start:4px;cursor:pointer}.builder-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px}.builder-fields label{display:grid;gap:6px;color:#516175;font-size:10px;font-weight:700}.builder-fields input,.builder-fields textarea,.builder-fields select{width:100%;padding:10px;border:1px solid #d7e0ec;border-radius:8px;background:#fff}.builder-fields textarea{grid-column:1/-1}.builder-thumb{max-width:220px;max-height:130px;border-radius:10px;object-fit:cover}.danger-button.small-button{min-height:31px;padding:0 10px;font-size:9px}@media(max-width:760px){.page-admin-row{align-items:stretch;flex-direction:column}.builder-fields{grid-template-columns:1fr}}


/* LinkSphere 2.5.1 - Enterprise visual refresh */
:root{--topbar-height:64px;--sidebar-width:248px;--glass:rgba(255,255,255,.78);--enterprise-shadow:0 18px 50px rgba(28,57,103,.10)}
body{font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif;background-color:#f5f9ff;background-image:var(--portal-background-image),radial-gradient(circle at 8% 8%,rgba(125,211,252,.23),transparent 28%),radial-gradient(circle at 88% 16%,rgba(147,197,253,.18),transparent 30%),linear-gradient(180deg,#f8fbff 0,#f4f8fe 42%,#f8fbff 100%)}
.topbar{height:var(--topbar-height);grid-template-columns:340px minmax(300px,720px) 1fr;padding:0 24px;background:linear-gradient(102deg,#082252 0%,#0b3473 48%,#1557a8 100%);border-bottom:1px solid rgba(255,255,255,.14);box-shadow:0 8px 28px rgba(6,31,76,.18)}
.brand{gap:10px}.brand-home{min-width:0;display:flex;align-items:center;gap:11px;padding:6px 10px 6px 7px;border-radius:10px;color:#fff;text-decoration:none;transition:.18s ease}.brand-home:hover,.brand-home:focus-visible{background:rgba(255,255,255,.10);text-decoration:none}.brand-copy{min-width:0;display:flex;flex-direction:column;line-height:1.05}.brand-copy strong{max-width:215px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:650;letter-spacing:-.15px}.brand-copy small{margin-top:4px;color:rgba(225,236,252,.72);font-size:9px;font-weight:500;letter-spacing:.8px;text-transform:uppercase}.site-logo{width:36px;height:36px;border-radius:9px;background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.08));box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
.global-search{height:40px;border:1px solid rgba(255,255,255,.16);border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.sidebar{top:var(--topbar-height);width:var(--sidebar-width);padding:22px 14px 18px;border-left:1px solid #e5edf7;background:rgba(255,255,255,.94);backdrop-filter:blur(18px)}
.workspace{margin-right:var(--sidebar-width);padding:92px 42px 64px}.workspace>*{max-width:1320px}.welcome-panel{position:relative;overflow:hidden;padding:30px 32px;border:1px solid rgba(194,214,239,.8);border-radius:20px;background:linear-gradient(118deg,rgba(255,255,255,.96),rgba(239,247,255,.90));box-shadow:var(--enterprise-shadow)}.welcome-panel::after{content:"";position:absolute;left:-70px;top:-90px;width:300px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.18),transparent 68%);pointer-events:none}.welcome-panel h1{font-size:clamp(32px,3.4vw,50px);letter-spacing:-1.2px}.welcome-panel p{font-size:14px}.stats-strip{border-radius:16px;border-color:#e2eaf5;box-shadow:0 10px 32px rgba(31,67,120,.06)}.link-card{border-radius:16px;border-color:#e1e9f4;box-shadow:0 9px 30px rgba(42,73,116,.055)}.link-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(37,86,156,.12)}.primary-button,.auth-submit{border-radius:9px;background:linear-gradient(135deg,#2563eb,#1554c0);box-shadow:0 8px 20px rgba(37,99,235,.20)}

/* Microsoft 365-inspired sign-in */
.auth-page{position:relative;overflow:hidden;display:grid;place-items:center;padding:36px;background:#f6f9fd;background-image:radial-gradient(circle at 12% 16%,rgba(96,165,250,.35),transparent 26%),radial-gradient(circle at 88% 82%,rgba(14,165,233,.22),transparent 30%),linear-gradient(135deg,#f9fcff 0%,#edf5ff 52%,#f7fbff 100%)}
.auth-page::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),radial-gradient(circle at 20% 75%,rgba(255,255,255,.95) 0 7%,transparent 7.5%),radial-gradient(circle at 77% 20%,rgba(255,255,255,.9) 0 9%,transparent 9.5%)}
.auth-card{position:relative;z-index:1;width:min(460px,100%);padding:42px 42px 34px;border:1px solid rgba(206,218,235,.9);border-radius:4px;background:rgba(255,255,255,.97);box-shadow:0 24px 70px rgba(36,63,102,.18)}
.auth-mark{width:46px;height:46px;margin-bottom:22px;border-radius:6px;background:linear-gradient(145deg,#2563eb,#0f61c9);box-shadow:0 8px 20px rgba(37,99,235,.20)}.auth-card h1{font-size:27px;font-weight:650;letter-spacing:-.4px}.auth-card>p{font-size:13px}.auth-card input{min-height:44px;border:1px solid #bcc7d6;border-radius:3px;background:#fff}.auth-card input:focus{border-color:#2563eb;box-shadow:inset 0 -2px 0 #2563eb}.auth-submit{min-height:44px;border-radius:3px}.auth-security{padding-top:18px;border-top:1px solid #edf1f6}.auth-eyebrow{letter-spacing:.2px}

@media(max-width:760px){.topbar{height:58px;grid-template-columns:auto 1fr auto}.brand-home{padding:4px}.brand-copy small{display:none}.brand-copy strong{max-width:145px;font-size:14px}.site-logo{width:31px;height:31px}.workspace{padding-top:78px}.welcome-panel{padding:23px 20px;border-radius:16px}.auth-card{padding:32px 24px}.sidebar{top:58px}}