/* FarmEasy Workspace — a bright, expressive shell around real work.
   Application overrides are scoped so authentication owns its visual identity. */
body:not(.auth-body) {
  --canvas: #f7f7fc;
  --paper: #fff;
  --ink: #24304f;
  --muted: #59677e;
  --line: #e5e7f2;
  --forest: #3155e7;
  --forest-deep: #24376c;
  --green: #087d5e;
  --emerald: #068564;
  --blue: #3155e7;
  --violet: #8755d9;
  --coral: #df644d;
  --amber: #e69529;
  --sage: #d9f5e9;
  --sage-soft: #effaf5;
  --red: #b24338;
  --warning: #8a530f;
  --radius: 17px;
  --shadow: 0 3px 6px #30367603, 0 12px 32px #30367607;
  color: var(--ink);
  background: var(--canvas);
  font-size: 14px;
}
.app-shell ::selection { color: #243a83; background: #dde4ff; }
.app-shell :focus-visible { outline: 3px solid #3155e7; outline-offset: 4px; }
.app-shell input::placeholder, .app-shell textarea::placeholder { color: #63718a; }
.app-shell h1 { color: #24304f; font-weight: 750; letter-spacing: -1.3px; }
.app-shell h2, .app-shell h3 { color: #263452; }
.app-shell .heading-dot { color: #8452d8; }
.app-shell .eyebrow { color: #5944ae; font-size: 11px; font-weight: 800; letter-spacing: 1.7px; }
.app-shell .page-description { color: #59677e; font-size: 14px; line-height: 1.8; }
.app-shell .muted, .app-shell .text-muted { color: #59677e; }
.app-shell .text-warning { color: #b24338; }
.app-shell .text-link { color: #3155cc; }
.app-shell .text-link:hover { color: #243d98; }
.app-shell .back-link { color: #5d6483; font-size: 13px; min-height: 32px; }
.app-shell .back-link:hover { color: #3155cc; }
body:not(.auth-body) .skip-link { color: #25356b; box-shadow: 0 8px 28px #22295222; }

/* Bright cobalt actions, clear neutral secondary controls. */
.app-shell .button { min-height: 46px; border-radius: 11px; font-size: 14px; font-weight: 750; letter-spacing: 0; }
.app-shell .button-primary { border-color: #3155e7; background: linear-gradient(110deg,#3155e7,#5945d6); color: #fff; box-shadow: 0 5px 13px #3155e729,inset 0 1px 0 #ffffff1a; }
.app-shell .button-primary:hover { border-color: #294bc9; background: linear-gradient(110deg,#294fd6,#503ccb); box-shadow: 0 7px 20px #3155e733; }
.app-shell .button-secondary { color: #414e70; border-color: #dce1ed; background: #fff; box-shadow: 0 2px 4px #303d7004; }
.app-shell .button-secondary:hover { color: #314ac0; border-color: #bfcaf0; background: #f7f8ff; }
.app-shell .button-quiet { color: #59677e; }
.app-shell .button-quiet:hover { color: #4545ad; background: #eeeeff; }
.app-shell .button-small { min-height: 44px; font-size: 13px; }
.app-shell .icon-button { color: #626e87; }
.app-shell .icon-button:hover { color: #3155c7; background: #edf0ff; }
.app-shell .text-button { min-height: 40px; }

/* A light sidebar creates a clean frame for the more colorful content. */
.app-shell .sidebar { padding-top: 27px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d9dded transparent; color: #35405f; background: linear-gradient(180deg,#fff 70%,#fbfaff); border-right-color: #e4e5ef; box-shadow: 4px 0 24px #38326b04; }
.app-shell .sidebar .brand { flex-shrink: 0; margin-left: 5px; gap: 13px; }
.app-shell .sidebar .brand-logo { width: 61px; height: 61px; border-color: #e8e6d6; border-radius: 13px; box-shadow: 0 4px 13px #43463d0a; }
.app-shell .sidebar .brand-title { color: #28304c; font-size: 20px; font-weight: 800; letter-spacing: -.6px; }
.app-shell .sidebar .brand-descriptor { color: #657088; font-size: 11px; font-weight: 600; letter-spacing: 1.05px; margin-top: 7px; }
.app-shell .workspace-name { flex-shrink: 0; gap: 10px; padding: 13px 11px; margin: 28px 0 27px; color: #3f426b; background: #f6f4ff; border: 1px solid #e9e4fa; border-radius: 12px; box-shadow: none; font-size: 12px; }
.app-shell .workspace-name small { color: #696882; font-size: 11px; }
.app-shell .workspace-name > .icon { color: #786995; }
.app-shell .workspace-avatar { color: #fff; border: 0; background: linear-gradient(140deg,#5165d7,#8550bf); border-radius: 9px; box-shadow: 0 3px 8px #745de52a; }
.app-shell .nav-label { color: #68728b; font-size: 11px; letter-spacing: 1.2px; margin-left: 14px; margin-bottom: 11px; }
.app-shell .nav-links, .app-shell .view-shortcuts { display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; }
.app-shell .nav-link { color: #515d77; min-height: 47px; padding: 12px 14px; border-radius: 11px; font-size: 14px; font-weight: 600; }
.app-shell .nav-link .icon { color: #7d87a8; width: 19px; height: 19px; }
.app-shell .nav-link:hover { color: #3c4ac0; background: #f1f3ff; }
.app-shell .nav-link:hover .icon { color: #6665c7; }
.app-shell .nav-link.is-active { position: relative; color: #fff; background: linear-gradient(100deg,#3155e7,#4963e8); border-color: #3857dc; box-shadow: 0 5px 13px #3155e727,inset 0 1px 0 #ffffff14; font-weight: 750; }
.app-shell .nav-link.is-active::after { content: ""; width: 5px; height: 5px; margin-left: auto; background: #d1dbff; border-radius: 50%; }
.app-shell .nav-link.is-active .icon { color: #eff3ff; }
.app-shell .sidebar-views { flex-shrink: 0; margin: 26px 0 25px; }
.app-shell .view-shortcut { min-height: 44px; font-size: 13px; }
.app-shell .view-shortcut .icon { color: #9679c5; }
.app-shell .sidebar-prompt { position: relative; flex-shrink: 0; overflow: hidden; padding: 18px 16px 14px; margin: auto 1px 23px; border: 1px solid #e2dcfa; border-radius: 15px; background: radial-gradient(circle at 100% 0,#d6edff88,transparent 70%),linear-gradient(130deg,#efedff,#f8f1ff); }
.app-shell .sidebar-prompt::after { content: ""; position: absolute; top: -34px; right: -30px; width: 90px; height: 90px; border: 1px solid #aa92e527; border-radius: 50%; box-shadow: 0 0 0 19px #aa92e509; pointer-events: none; }
.app-shell .sidebar-prompt-icon { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 11px; border-radius: 10px; color: #fff; background: linear-gradient(135deg,#8b5ddd,#6264dc); box-shadow: 0 3px 10px #8755d929; }
.app-shell .sidebar-prompt-icon .icon { width: 18px; height: 18px; }
.app-shell .sidebar-prompt > strong { display: block; position: relative; color: #4b377e; font-size: 13px; font-weight: 750; }
.app-shell .sidebar-prompt > p { position: relative; color: #665a80; margin: 5px 0 13px; font-size: 12px; line-height: 1.7; }
.app-shell .sidebar-create { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 9px 11px; color: #5541aa; background: #ffffffc9; border: 1px solid #e0d8f3; border-radius: 8px; font-size: 12px; font-weight: 750; }
.app-shell .sidebar-create:hover { color: #49369c; border-color: #b8a6e5; background: #fff; }
.app-shell .current-user { flex-shrink: 0; gap: 9px; padding-top: 20px; border-top-color: #e7e8f1; }
.app-shell .user-name { color: #3c4460; font-size: 12px; }
.app-shell .user-name small { color: #68718a; font-size: 11px; }
.app-shell .current-user .avatar-light { color: #6a45a6; background: #efe6fc; border-color: #fff; }
.app-shell .logout-button { width: 36px; min-height: 44px; color: #727c94; }
.app-shell .logout-button:hover { color: #4f52bd; background: #f0efff; }

/* The utility bar provides a calm contrast to the vivid overview. */
.app-shell .topbar { color: #495572; background: #ffffffed; border-bottom-color: #e5e7f1; box-shadow: 0 2px 4px #2b326a02; }
.app-shell .topbar-identity, .app-shell .topbar-actions { display: flex; align-items: center; gap: 15px; min-width: 0; }
.app-shell .topbar-workspace-icon { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; color: #6270c9; border: 1px solid #e1e4fa; border-radius: 10px; background: #f1f2ff; }
.app-shell .topbar-workspace-icon .icon { width: 17px; height: 17px; }
.app-shell .breadcrumb { color: #606d86; font-size: 13px; }
.app-shell .breadcrumb span { color: #909bb0; }
.app-shell .breadcrumb strong { color: #394465; font-weight: 750; }
.app-shell .topbar-shortcut { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 10px; border: 1px solid #e3e6f0; border-radius: 11px; background: #fff; color: #6a76a0; }
.app-shell .topbar-shortcut:hover { color: #4f58c2; border-color: #c9d0ed; background: #f6f7ff; }
.app-shell .workspace-members { gap: 13px; }
.app-shell .workspace-presence { color: #59677e; font-size: 12px; }
.app-shell .private-badge { color: #5c657f; border-color: #e2e6f0; border-radius: 8px; background: #f7f8fc; font-size: 11px; }
.app-shell .private-badge .icon { color: #6d7895; }
.app-shell .member-initials { color: #355bbb; border-color: #fff; background: #e1eaff; font-size: 11px; }
.app-shell .member-initials:nth-child(2) { color: #854aa5; background: #f0dffc; }
.app-shell .member-initials:nth-child(3) { color: #21705b; background: #d8f2e7; }
.app-shell .avatar { color: #3861b5; background: #e3edff; border-color: #fff; font-weight: 750; }
.app-shell .avatar-unassigned { color: #5b667f; background: #edf0f7; }
.app-shell .app-footer { color: #5c6580; background: var(--canvas); border-top-color: #e5e7f2; font-size: 11px; line-height: 1.8; }

/* Non-board pages get a designed introduction instead of floating headings. */
.app-shell .page-heading { position: relative; padding: 25px 27px; margin-bottom: 27px; overflow: hidden; border: 1px solid #e3dff5; border-radius: 18px; background: radial-gradient(ellipse at 100% 0,#e3eaff80,transparent 55%),linear-gradient(110deg,#f2efff,#faf8ff 70%); }
.app-shell .page-heading::after { content: ""; position: absolute; right: -40px; top: -80px; width: 190px; height: 190px; border: 1px solid #c4b8e724; border-radius: 50%; box-shadow: 0 0 0 26px #a9b6ee06; pointer-events: none; }
.app-shell .page-heading > div, .app-shell .page-heading > a, .app-shell .page-heading > span { position: relative; z-index: 1; }
.app-shell .page-heading h1 { font-size: 33px; }
.app-shell .task-page-heading { background: linear-gradient(115deg,#edf2ff,#f7f7ff 65%); border-color: #dee4f5; }
.app-shell .task-page-heading > .button { margin-top: 20px; }
.app-shell .task-page-heading .eyebrow { color: #4d62bc; }

/* Status palettes stay consistent between board, list, detail, and calendar. */
.app-shell .status-dot, .app-shell .status-todo { background: #3975e9; }
.app-shell .status-in_progress { background: #8c66e8; }
.app-shell .status-blocked { background: #df644d; }
.app-shell .status-done { background: #068564; }
.app-shell .status-pill { color: #2c57a9; background: #eaf1ff; border-color: #dbe5fc; font-size: 12px; }
.app-shell .status-pill-in_progress { color: #7650b6; background: #f2edfc; border-color: #e6dafb; }
.app-shell .status-pill-blocked { color: #a94d3a; background: #fff0e9; border-color: #f7d9ce; }
.app-shell .status-pill-done { color: #147559; background: #e9f8ef; border-color: #d2eedd; }
.app-shell .priority { font-size: 12px; font-weight: 650; }
.app-shell .priority-low { color: #5d6b82; background: #f1f3f8; border-color: #e6eaf1; }
.app-shell .priority-medium { color: #315faf; background: #edf3ff; border-color: #dfe8fc; }
.app-shell .priority-high { color: #8a530f; background: #fff2d9; border-color: #f6e0b3; }
.app-shell .priority-urgent { color: #af433b; background: #fff0ed; border-color: #fbded7; }

/* White forms with stronger grouping, paired with an expressive violet aside. */
.app-shell .panel { border-color: #e3e6f0; border-radius: 17px; background: #fff; box-shadow: var(--shadow); }
.app-shell .panel h2 { color: #30395c; font-size: 18px; font-weight: 750; letter-spacing: -.4px; }
.app-shell .panel h3 { color: #36405f; }
.app-shell .form-panel { border-top: 4px solid #5c62df; }
.app-shell .form-field label { color: #45506e; font-size: 14px; font-weight: 700; }
.app-shell .required-indicator { color: #6953c4; }
.app-shell .optional-label { color: #626d83; font-size: 12px; }
.app-shell .form-field input:not([type="checkbox"]), .app-shell .form-field select, .app-shell .form-field textarea { min-height: 49px; padding: 12px 14px; border-color: #dfe3ef; border-radius: 10px; color: #354360; background: #fcfcff; box-shadow: 0 1px 2px #3b467004; font-size: 14px; }
.app-shell .form-field input:hover, .app-shell .form-field select:hover, .app-shell .form-field textarea:hover { border-color: #c3cbea; }
.app-shell .form-field input:focus, .app-shell .form-field select:focus, .app-shell .form-field textarea:focus { border-color: #717de0; box-shadow: 0 0 0 3px #6976e319; background: #fff; }
.app-shell .field-help { color: #626d83; font-size: 12px; }
.app-shell .field-error, .app-shell .errorlist { color: #ad473b; }
.app-shell .errorlist { border-color: #f1d2c9; background: #fff2ed; }
.app-shell .has-error input, .app-shell .has-error select, .app-shell .has-error textarea { border-color: #cf7b6d !important; }
.app-shell .form-actions { border-top-color: #e5e8f2; }
.app-shell .form-aside { position: relative; overflow: hidden; padding: 28px; border: 1px solid #7755c7; border-radius: 18px; background: radial-gradient(circle at 100% 0,#a981f314,transparent 65%),linear-gradient(145deg,#654bbd,#553aaa); box-shadow: 0 12px 27px #694bba18; }
.app-shell .form-aside::after { content: ""; position: absolute; width: 210px; height: 210px; right: -138px; bottom: -124px; border: 1px solid #ffffff2b; border-radius: 50%; box-shadow: 0 0 0 25px #ffffff07,0 0 0 50px #ffffff05; pointer-events: none; }
.app-shell .form-aside h2 { color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -.7px; }
.app-shell .form-aside p { color: #f1eaff; font-size: 14px; line-height: 1.85; }
.app-shell .form-aside p:last-child { margin-bottom: 0; }
.app-shell .aside-icon { width: 48px; height: 48px; color: #fff; background: #ffffff1b; border-color: #ffffff40; border-radius: 14px; }
.app-shell .notice { color: #35598d; background: #eff4ff; border-color: #d8e3fa; border-left: 4px solid #668deb; box-shadow: 0 3px 8px #384c8703; font-size: 14px; }
.app-shell .notice-warning { color: #805816; background: #fff6e5; border-color: #f1dfb4; border-left-color: #e8a845; }
.app-shell .notice-error, .app-shell .notice-danger { color: #a64a3a; background: #fff0ea; border-color: #f2d3c7; border-left-color: #e87e62; }
.app-shell .notice-success { color: #216b53; background: #edf9f2; border-color: #cdebdc; border-left-color: #36ab80; }
.app-shell .count-badge { min-width: 28px; padding: 3px 8px; color: #6051b3; background: #eeebff; border-radius: 7px; font-size: 12px; }
.app-shell .section-heading .subtle-label { color: #657088; font-size: 12px; }

/* Conversation and task details carry stronger, clearly separated surfaces. */
.app-shell .detail-main > .detail-panel:first-child { border-top: 4px solid #7693ea; }
.app-shell .detail-main > .detail-panel:nth-child(2) { border-top: 4px solid #b58adf; }
.app-shell .detail-main > .detail-panel:nth-child(3) { border-top: 4px solid #65ba9c; }
.app-shell .detail-aside > .panel { border-top: 4px solid #8466d4; background: linear-gradient(140deg,#fff 70%,#faf8ff); }
.app-shell .prose, .app-shell .comment-content .prose { color: #53617b; font-size: 14px; line-height: 1.85; }
.app-shell .detail-panel > .muted { color: #626d83; font-size: 14px; }
.app-shell .task-properties dt { color: #646e88; font-size: 12px; }
.app-shell .task-properties dd { color: #43516f; font-size: 14px; }
.app-shell .task-properties dd small { font-size: 12px; }
.app-shell .person-inline { color: #455575; }
.app-shell .status-change-form { border-top-color: #e6e8f2; }
.app-shell .status-change-form .form-field label { color: #596681; font-size: 13px; }
.app-shell .status-change-form .form-field select { min-height: 46px; font-size: 14px; }
.app-shell .comment { border-top-color: #e9ebf5; }
.app-shell .comment-byline strong { color: #455473; font-size: 14px; }
.app-shell .comment-byline time { color: #626d83; font-size: 12px; }
.app-shell .comment-content .prose { padding: 14px 17px; border: 1px solid #e9e9f6; border-radius: 12px; background: #faf9ff; }
.app-shell .comment-form { border-top-color: #e4e8f2; }
.app-shell .quiet-empty { color: #5c6589; }
.app-shell .quiet-empty > .icon { color: #8670ca; }
.app-shell .quiet-empty p { color: #596583; font-size: 14px; }
.app-shell .quiet-empty small { color: #626d83; font-size: 12px; }
.app-shell .archive-form .text-button { color: #626d83; font-size: 13px; }
.app-shell .archive-form .text-button:hover { color: #b24338; }
.app-shell .aside-caption { color: #626d83; font-size: 12px; }

/* Timeline events read as discrete updates with vivid, restrained markers. */
.app-shell .activity-panel { max-width: none; padding: 30px; background: #fff; }
.app-shell .activity-panel > .section-heading { margin: -30px -30px 27px; padding: 25px 30px; border-bottom: 1px solid #e8e5f5; border-radius: 17px 17px 0 0; background: linear-gradient(110deg,#f1eeff,#f8faff); }
.app-shell .activity-item { gap: 16px; padding-bottom: 22px; }
.app-shell .activity-item:last-child { padding-bottom: 0; }
.app-shell .activity-marker { width: 38px; height: 38px; color: #fff; background: #5277d5; border-color: #4569c8; box-shadow: 0 0 0 5px #f4f6fc; }
.app-shell .activity-item:nth-child(3n+2) .activity-marker { color: #fff; background: #8f67c9; border-color: #8156be; }
.app-shell .activity-item:nth-child(3n) .activity-marker { color: #fff; background: #298a71; border-color: #1d7c63; }
.app-shell .activity-item:not(:last-child)::before { top: 44px; left: 18px; background: #e2e5f3; }
.app-shell .activity-item > div { flex: 1; min-width: 0; padding: 15px 18px; border: 1px solid #e7e9f4; border-radius: 12px; background: #fafaff; }
.app-shell .activity-description { padding-top: 0; color: #586783; font-size: 14px; }
.app-shell .activity-description strong { color: #384c70; font-weight: 750; }
.app-shell .activity-detail { color: #5f6e86; font-size: 13px; }
.app-shell .activity-item time { color: #657088; font-size: 12px; }
.app-shell .activity-task-link { color: #3c58b6; font-size: 14px; font-weight: 650; }
.app-shell .activity-task-link span { color: #66718b; font-size: 12px; }
.app-shell .pagination { color: #626d83; border-top-color: #e4e8f2; font-size: 13px; }

/* People and settings: confident cards, distinct identities, clean copy. */
.app-shell .team-panel > .section-heading { padding: 26px 28px; margin-bottom: 0; border-bottom: 1px solid #e8e3f4; background: linear-gradient(110deg,#f4efff,#faf8ff); }
.app-shell .member-row { padding-top: 25px; padding-bottom: 25px; border-top-color: #e9ebf3; }
.app-shell .member-row:first-child { border-top: 0; }
.app-shell .member-row > .avatar { background: #e3ecff; color: #3a61b5; border-color: #fff; }
.app-shell .member-row:nth-child(2) > .avatar { background: #f1e2fc; color: #8a50b1; }
.app-shell .member-row:nth-child(3) > .avatar { background: #ddf4e9; color: #227b5c; }
.app-shell .member-info h3 { color: #384264; font-size: 15px; font-weight: 750; }
.app-shell .member-info > a { color: #626d83; font-size: 13px; }
.app-shell .you-label { color: #6b4cab; background: #f1eaff; font-size: 11px; }
.app-shell .role-badge { color: #625684; border-color: #e2daee; background: #f7f3fc; font-size: 12px; }
.app-shell .member-state { color: #4b6e60; font-size: 12px; }
.app-shell .member-state .status-todo { background: #8491aa; }
.app-shell .panel-footnote { color: #626d83; background: #f8f9fd; border-top-color: #e7e9f3; font-size: 12px; }
.app-shell .team-settings-grid > .panel { border-top: 4px solid #7c98e7; }
.app-shell .team-settings-grid > .panel:nth-child(2) { border-top-color: #ae84d8; }
.app-shell .section-icon { width: 44px; height: 44px; color: #fff; background: linear-gradient(145deg,#5a83df,#4268ce); border: 0; border-radius: 13px; box-shadow: 0 5px 12px #567dd526; }
.app-shell .team-settings-grid > .panel:nth-child(2) .section-icon { color: #fff; background: linear-gradient(145deg,#a775d9,#8157c0); border: 0; box-shadow: 0 5px 12px #9561c629; }
.app-shell .checkbox-label { color: #4a5875; font-size: 14px; }
.app-shell .checkbox-label input { accent-color: #5b5bd4; }
.app-shell .checkbox-label small { color: #626d83; font-size: 12px; }
.app-shell .copy-field input { min-height: 45px; color: #486681; border-color: #dce6ec; }
.app-shell th { color: #626d83; background: #f7f7fe; font-size: 12px; }
.app-shell td { color: #53627c; border-bottom-color: #e8ebf4; font-size: 13px; }
.app-shell .mail-status-counts { color: #606f85; font-size: 13px; }
.app-shell .mail-status-counts strong { color: #455dac; font-weight: 750; }
body:not(.auth-body) .toast { color: #fff; background: #343b7b; border-color: #6e74ae; box-shadow: 0 10px 35px #30367030; font-size: 14px; }

@media (min-width: 1251px) {
  .app-shell .member-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding: 23px; }
  .app-shell .member-row { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 13px; min-width: 0; padding: 21px; border: 1px solid #e1e7f5; border-radius: 14px; background: linear-gradient(180deg,#f4f7ff,#fff 85%); }
  .app-shell .member-row:first-child { border-top: 1px solid #e1e7f5; }
  .app-shell .member-row:nth-child(2) { background: linear-gradient(180deg,#faf4ff,#fff 85%); border-color: #ebe0f4; }
  .app-shell .member-row:nth-child(3) { background: linear-gradient(180deg,#f0fbf5,#fff 85%); border-color: #dceddf; }
  .app-shell .member-row > .avatar { width: 51px; height: 51px; font-size: 18px; }
  .app-shell .member-info { flex-basis: 100%; min-width: 0; }
  .app-shell .member-info h3 { min-height: 39px; line-height: 1.4; }
  .app-shell .member-info > a { font-size: 12px; }
  .app-shell .member-row .role-badge { min-width: 0; margin-left: 0; padding: 4px 8px; }
  .app-shell .member-state { min-width: 0; margin-left: auto; font-size: 11px; }
}
@media (max-width: 1250px) {
  .app-shell .sidebar .brand { gap: 11px; }
  .app-shell .sidebar .brand-logo { width: 56px; height: 56px; }
  .app-shell .sidebar .brand-title { font-size: 18px; }
  .app-shell .sidebar .brand-descriptor { font-size: 11px; letter-spacing: .4px; }
  .app-shell .workspace-name { gap: 8px; padding: 12px 9px; }
  .app-shell .topbar-identity, .app-shell .topbar-actions { gap: 11px; }
  .app-shell .workspace-presence { display: none; }
  .app-shell .page-heading { padding: 23px; }
  .app-shell .page-heading h1 { font-size: 30px; }
  .app-shell .form-aside { padding: 23px; }
  .app-shell .form-aside h2 { font-size: 23px; }
}
@media (max-width: 950px) {
  .app-shell .sidebar .brand { gap: 9px; margin-left: 2px; }
  .app-shell .sidebar .brand-logo { width: 52px; height: 52px; }
  .app-shell .sidebar .brand-title { font-size: 18px; }
  .app-shell .sidebar .brand-descriptor { font-size: 11px; letter-spacing: 0; }
  .app-shell .workspace-name { font-size: 11px; }
  .app-shell .nav-link { gap: 10px; padding-left: 12px; padding-right: 12px; font-size: 14px; }
  .app-shell .sidebar-prompt { padding: 16px 13px 12px; }
  .app-shell .sidebar-prompt > strong { font-size: 12px; }
  .app-shell .sidebar-prompt > p { font-size: 11px; }
  .app-shell .sidebar-create { font-size: 11px; }
  .app-shell .current-user { gap: 6px; }
  .app-shell .logout-button { width: 30px; }
  .app-shell .topbar-workspace-icon { display: none; }
  .app-shell .breadcrumb { font-size: 12px; }
  .app-shell .page-heading h1 { font-size: 28px; }
  .app-shell .page-heading > .button { font-size: 13px; }
  .app-shell .member-info h3 { font-size: 14px; }
  .app-shell .member-info > a { font-size: 12px; }
}
@media (max-width: 760px) {
  .app-shell .sidebar { overflow: visible; padding-top: 18px; background: #fff; box-shadow: 0 3px 16px #3b386d04; border-bottom: 1px solid #e4e6f1; }
  .app-shell .sidebar .brand { margin: 0; gap: 10px; }
  .app-shell .sidebar .brand-logo { width: 51px; height: 51px; border-radius: 11px; }
  .app-shell .sidebar .brand-title { font-size: 19px; }
  .app-shell .sidebar .brand-descriptor { font-size: 11px; letter-spacing: .45px; }
  .app-shell .sidebar .workspace-name, .app-shell .sidebar-views, .app-shell .sidebar-prompt { display: none; }
  .app-shell .nav-links { flex-direction: row; gap: 8px; margin-top: 19px; padding-bottom: 15px; }
  .app-shell .nav-link { min-height: 45px; padding: 11px 14px; font-size: 14px; gap: 8px; }
  .app-shell .nav-link.is-active::after { display: none; }
  .app-shell .current-user { padding: 0; border: 0; }
  .app-shell .current-user .logout-button { width: 39px; min-height: 44px; }
  .app-shell .topbar { gap: 11px; }
  .app-shell .topbar-actions { gap: 9px; }
  .app-shell .page-heading { padding: 24px; }
  .app-shell .page-description { font-size: 14px; }
  .app-shell .app-footer { font-size: 11px; }
  .app-shell .member-state { font-size: 12px; }
}
@media (max-width: 540px) {
  .app-shell .sidebar .brand-title { font-size: 18px; }
  .app-shell .nav-links { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 7px; margin-top: 18px; }
  .app-shell .nav-link { justify-content: center; flex-direction: column; gap: 5px; min-height: 61px; padding: 8px 5px; font-size: 13px; line-height: 1.3; }
  .app-shell .nav-link .icon { width: 19px; height: 19px; }
  .app-shell .topbar-identity, .app-shell .topbar-actions { gap: 8px; }
  .app-shell .topbar-actions .private-badge { display: none; }
  .app-shell .topbar-shortcut { min-width: 42px; width: 42px; }
  .app-shell .breadcrumb { font-size: 12px; }
  .app-shell .breadcrumb span { margin-left: 7px; margin-right: 7px; }
  .app-shell .page-heading { padding: 22px; border-radius: 15px; }
  .app-shell .page-heading h1 { font-size: 27px; }
  .app-shell .page-description { font-size: 13px; }
  .app-shell .eyebrow { font-size: 11px; letter-spacing: 1.15px; }
  .app-shell .page-heading > .button { margin-top: 0; min-height: 44px; font-size: 13px; }
  .app-shell .panel h2 { font-size: 17px; }
  .app-shell .form-field input:not([type="checkbox"]), .app-shell .form-field select, .app-shell .form-field textarea { font-size: 16px; }
  .app-shell .form-field label { font-size: 14px; }
  .app-shell .task-properties dd { font-size: 13px; }
  .app-shell .status-change-form .form-field select { font-size: 14px; }
  .app-shell .member-info h3 { font-size: 14px; }
  .app-shell .member-info > a { font-size: 12px; }
  .app-shell .member-row .role-badge { font-size: 12px; }
  .app-shell .member-state { font-size: 12px; }
  .app-shell .team-panel > .section-heading { padding: 23px; }
  .app-shell .comment-byline strong { font-size: 13px; }
  .app-shell .comment-content .prose { padding: 12px 13px; font-size: 13px; }
  .app-shell .activity-panel { padding: 22px; }
  .app-shell .activity-panel > .section-heading { margin: -22px -22px 24px; padding: 23px 22px; }
  .app-shell .activity-item { gap: 12px; }
  .app-shell .activity-marker { width: 32px; height: 32px; }
  .app-shell .activity-item:not(:last-child)::before { left: 15px; top: 38px; }
  .app-shell .activity-item > div { padding: 13px; }
  .app-shell .activity-description { font-size: 13px; }
  .app-shell .activity-task-link { font-size: 13px; }
  .app-shell .activity-detail, .app-shell .activity-item time { font-size: 12px; }
  .app-shell .panel-footnote, .app-shell .checkbox-label small { font-size: 12px; }
  .app-shell .app-footer { color: #5c6580; font-size: 11px; }
}
@media (max-width: 360px) {
  .app-shell .sidebar .brand-title { font-size: 17px; }
  .app-shell .sidebar .brand-descriptor { font-size: 11px; letter-spacing: 0; }
  .app-shell .sidebar .brand-logo { width: 48px; height: 48px; }
  .app-shell .sidebar .nav-link { font-size: 12px; padding-left: 4px; padding-right: 4px; }
  .app-shell .topbar { gap: 7px; }
  .app-shell .breadcrumb { font-size: 11px; }
  .app-shell .page-heading { padding: 20px; }
  .app-shell .page-heading h1 { font-size: 25px; }
  .app-shell .member-info h3 { font-size: 13px; }
  .app-shell .member-info > a { font-size: 12px; }
}
@media (min-width: 761px) and (max-height: 850px) {
  .app-shell .sidebar-prompt { display: none; }
  .app-shell .sidebar-views { margin: 18px 0 17px; }
  .app-shell .workspace-name { margin-top: 24px; margin-bottom: 23px; }
  .app-shell .current-user { margin-top: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell *, .app-shell *::before, .app-shell *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}