@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
/* ============================================================================
   Gitea Material Expressive  ·  for Gitea 1.22 (Fomantic UI)
   ----------------------------------------------------------------------------
   1. Light tokens     (M3 semantic color / shape / elevation)
   2. Dark scheme      (auto via prefers-color-scheme)
   3. Gitea var map    (every --color-* / fonts / radius Gitea exposes)
   4. Component layer  (nav, buttons, inputs, menus, cards, tables, chips,
                        dialogs, code, footer, states)
   Palette: warm cream surface, pine primary, lime container, tangerine accent.
   Components consume semantic roles, not raw hex.
   ========================================================================= */

/* == 1. LIGHT TOKENS ======================================================= */
:root{
  /* --- core palette (Expressive) --- */
  --md-primary:              #0F5C4D;
  --md-on-primary:           #FFFFFF;
  --md-primary-container:    #C8F169;
  --md-on-primary-container: #1B2E04;

  --md-secondary:              #8A4B2A;
  --md-on-secondary:           #FFFFFF;
  --md-secondary-container:    #FFDCC7;
  --md-on-secondary-container: #4A1D07;

  --md-tertiary:              #B63414;
  --md-on-tertiary:           #FFFFFF;
  --md-tertiary-container:    #FFDAD2;
  --md-on-tertiary-container: #3D0800;

  --md-accent:              #FF5A36;
  --md-on-accent:           #2E0A00;
  --md-accent-container:    #FFDCC7;
  --md-on-accent-container: #4A1D07;

  --md-error:              #C62828;
  --md-on-error:           #FFFFFF;
  --md-error-container:    #FCE4DE;
  --md-on-error-container: #601410;

  --md-surface:                   #FBF7F0;
  --md-surface-bright:            #FFFDF8;
  --md-on-surface:                #1B1A17;
  --md-surface-dim:               #E6DCC8;
  --md-surface-container-lowest:  #FFFDF8;
  --md-surface-container-low:     #F8F3E9;
  --md-surface-container:         #F4EEE2;
  --md-surface-container-high:    #EDE5D4;
  --md-surface-container-highest: #E6DCC8;
  --md-surface-variant:           #EDE5D4;
  --md-on-surface-variant:        #5F5A4E;

  --md-outline:         #8E8775;
  --md-outline-variant: #DCD3BE;
  --md-ink:             #1B1A17;

  --md-inverse-surface:    #1B1A17;
  --md-inverse-on-surface: #FBF7F0;
  --md-inverse-primary:    #C8F169;

  /* --- semantic feedback --- */
  --md-success:    #2E6B2B;
  --md-success-bg: #E4F4D7;
  --md-warning:    #8B5A14;
  --md-warning-bg: #FFF1CE;
  --md-info:       #15568A;
  --md-info-bg:    #DCEEFB;

  /* --- depth: hard edge (Expressive), not blur --- */
  --md-shadow-1: 0 2px 0 0 rgba(27,26,23,.10);
  --md-shadow-2: 0 3px 0 0 rgba(27,26,23,.12);
  --md-shadow-3: 4px 4px 0 0 rgba(27,26,23,.85);
  --md-ripple:   rgba(27,26,23,.10);
  --md-ring:     0 0 0 4px rgba(200,241,105,.60);
  --md-ring-error: 0 0 0 4px rgba(198,40,40,.14);
  --md-spring:   cubic-bezier(.3,1.5,.5,1);

  /* --- shape: large, fixed (no morph on hover) --- */
  --md-radius-xs:   8px;
  --md-radius-sm:   12px;
  --md-radius-md:   16px;
  --md-radius-lg:   20px;
  --md-radius-xl:   28px;
  --md-radius-full: 999px;

  /* --- type --- */
  --fonts-proportional: 'Plus Jakarta Sans','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
  --fonts-monospace: 'JetBrains Mono','SF Mono','Fira Code',Consolas,monospace;
  --fonts-regular: 'Plus Jakarta Sans','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --border-radius: var(--md-radius-sm);
  --border-radius-medium: var(--md-radius-md);
  --border-radius-full: var(--md-radius-full);
}

/* == 2. DARK SCHEME (auto) ================================================= */
@media (prefers-color-scheme: dark){
  :root{
    --md-primary:              #C8F169;
    --md-on-primary:           #14260A;
    --md-primary-container:    #2F4A12;
    --md-on-primary-container: #D9F79A;

    --md-secondary:              #FFB68F;
    --md-on-secondary:           #3B1A08;
    --md-secondary-container:    #5A2E14;
    --md-on-secondary-container: #FFDCC7;

    --md-tertiary:              #FFB4A2;
    --md-on-tertiary:           #3D0800;
    --md-tertiary-container:    #5C2413;
    --md-on-tertiary-container: #FFDAD2;

    --md-accent:              #FF7A57;
    --md-on-accent:           #2E0A00;
    --md-accent-container:    #5A2E14;
    --md-on-accent-container: #FFDCC7;

    --md-error:              #FFB4AB;
    --md-on-error:           #5C0F0A;
    --md-error-container:    #8C1D18;
    --md-on-error-container: #FCE4DE;

    --md-surface:                   #14130F;
    --md-surface-bright:            #211F19;
    --md-on-surface:                #EDE7DA;
    --md-surface-dim:               #14130F;
    --md-surface-container-lowest:  #0F0E0B;
    --md-surface-container-low:     #1A1813;
    --md-surface-container:         #211F19;
    --md-surface-container-high:    #2A271F;
    --md-surface-container-highest: #343026;
    --md-surface-variant:           #343026;
    --md-on-surface-variant:        #CAC3B2;

    --md-outline:         #9A927F;
    --md-outline-variant: #4A4639;
    --md-ink:             #EDE7DA;

    --md-inverse-surface:    #EDE7DA;
    --md-inverse-on-surface: #1B1A17;
    --md-inverse-primary:    #0F5C4D;

    --md-success:    #9BD98A;
    --md-success-bg: #20361A;
    --md-warning:    #E7C57A;
    --md-warning-bg: #3A2E12;
    --md-info:       #93C9F2;
    --md-info-bg:    #102A3E;

    --md-ripple: rgba(237,231,218,.10);
    --md-ring:   0 0 0 4px rgba(200,241,105,.35);
    --md-ring-error: 0 0 0 4px rgba(255,180,171,.20);
    --md-shadow-1: 0 2px 0 0 rgba(0,0,0,.45);
    --md-shadow-2: 0 3px 0 0 rgba(0,0,0,.55);
    --md-shadow-3: 4px 4px 0 0 rgba(0,0,0,.85);

    --color-secondary-dark-1: #4A4639;
    --color-secondary-dark-2: #57523F;
    --color-secondary-dark-3: #645E48;
    --color-secondary-dark-4: #716A51;
    --color-secondary-dark-5: #7E765A;
    --color-secondary-dark-6: #8B8363;
    --color-secondary-dark-7: #98906C;
    --color-secondary-dark-8: #A59D75;
    --color-secondary-dark-9: #B2AA7E;
    --color-secondary-alpha-20: rgba(73,69,79,.20);
    --color-secondary-alpha-30: rgba(73,69,79,.30);
    --color-secondary-alpha-40: rgba(73,69,79,.40);
    --color-secondary-alpha-50: rgba(73,69,79,.50);

    --color-text-light-3: #8E8775;

    --color-primary-dark-1: #D9F79A;
    --color-primary-dark-2: #E3FBB6;
    --color-primary-dark-3: #EDFDD2;
    --color-primary-light-1: #3E5C1C;
    --color-primary-light-5: #1C2E10;
    --color-primary-light-6: #17260D;
    --color-primary-light-7: #121E0A;
    --color-primary-alpha-30: rgba(200,241,105,.30);
    --color-primary-hover: #D9F79A;

    --color-input-toggle-background: var(--md-surface-container-highest);

    /* diff / ansi / markup on dark surfaces */
    --color-diff-added-linenum-bg: #274227;
    --color-diff-added-row-bg:     #203224;
    --color-diff-added-row-border: #314A37;
    --color-diff-added-word-bg:    #3C653C;
    --color-diff-removed-linenum-bg: #482121;
    --color-diff-removed-row-bg:     #301E1E;
    --color-diff-removed-row-border: #634343;
    --color-diff-removed-word-bg:    #6F3333;
    --color-diff-moved-row-bg:       #3A3A1E;
    --color-diff-moved-row-border:   #BCCA6F;
    --color-diff-inactive:           #22282D;
    --color-markup-table-row:     rgba(232,243,255,.06);
    --color-markup-code-block:    rgba(232,243,255,.07);
    --color-markup-code-inline:   rgba(232,243,255,.16);
    --color-highlight-bg: #352C1C;
    --color-highlight-fg: #87651E;
    --color-overlay-backdrop: rgba(0,0,0,.72);
    --color-shadow: rgba(0,0,0,.5);
  }
}

/* == 3. GITEA VAR MAPPING ================================================== */
:root{
  /* surfaces */
  --color-body: var(--md-surface);
  --color-box-body: var(--md-surface-container-lowest);
  --color-box-body-highlight: var(--md-surface-container-low);
  --color-box-header: var(--md-surface-container);
  --color-card: var(--md-surface-container-lowest);
  --color-menu: var(--md-surface-container);

  /* text */
  --color-text: var(--md-on-surface);
  --color-text-dark: var(--md-on-surface);
  --color-text-light: var(--md-on-surface-variant);
  --color-text-light-1: var(--md-on-surface-variant);
  --color-text-light-2: var(--md-outline);
  --color-text-light-3: #8E8775;

  /* secondary / borders */
  --color-secondary: var(--md-outline-variant);
  --color-secondary-dark-1: #DCD3BE;
  --color-secondary-dark-2: #CFC6B1;
  --color-secondary-dark-3: #C2B9A4;
  --color-secondary-dark-4: #B5AC97;
  --color-secondary-dark-5: #A89F8A;
  --color-secondary-dark-6: #9B927D;
  --color-secondary-dark-7: #8E8775;
  --color-secondary-dark-8: #7A735F;
  --color-secondary-dark-9: #5F5A4E;
  --color-secondary-light-1: var(--md-surface-container);
  --color-secondary-bg: var(--md-surface-container);
  --color-secondary-nav-bg: var(--md-surface-container-low);
  --color-secondary-alpha-20: rgba(202,196,208,.2);
  --color-secondary-alpha-30: rgba(202,196,208,.3);
  --color-secondary-alpha-40: rgba(202,196,208,.4);
  --color-secondary-alpha-50: rgba(202,196,208,.5);

  --color-light: var(--md-surface-container-low);
  --color-light-border: var(--md-outline-variant);

  /* primary / accent */
  --color-primary: var(--md-primary);
  --color-primary-contrast: var(--md-on-primary);
  --color-primary-dark-1: #0B4A3E;
  --color-primary-dark-2: #083B31;
  --color-primary-dark-3: #07352C;
  --color-primary-light-1: #2C7A69;
  --color-primary-light-4: var(--md-primary-container);
  --color-primary-light-5: #EEF8DA;
  --color-primary-light-6: #F4FBEA;
  --color-primary-light-7: #FAFDF3;
  --color-primary-alpha-30: rgba(15,92,77,.30);
  --color-primary-active: var(--md-primary);
  --color-primary-hover: #0B4A3E;

  --color-accent: var(--md-primary);
  --color-active: var(--md-primary-container);
  --color-hover: var(--md-surface-container-high);
  --color-hover-opaque: var(--md-surface-container-high);
  --color-caret: var(--md-primary);

  /* chrome */
  --color-button: var(--md-surface-container-lowest);
  --color-nav-bg: var(--md-surface-container-low);
  --color-nav-text: var(--md-on-surface);
  --color-nav-hover-bg: var(--md-surface-container-high);
  --color-footer: var(--md-surface-container);
  --color-footer-text: var(--md-on-surface-variant);
  --color-logo: var(--md-on-surface);

  /* inputs */
  --color-input-background: var(--md-surface-container-lowest);
  --color-input-border: var(--md-outline);
  --color-input-border-hover: var(--md-primary);
  --color-input-text: var(--md-on-surface);
  --color-placeholder-text: var(--md-on-surface-variant);
  --color-input-toggle-background: var(--md-surface-container-highest);

  /* code / console */
  --color-code-bg: var(--md-surface-container);
  --color-console-bg: var(--md-surface-container-low);
  --color-console-fg: var(--md-on-surface);
  --color-console-fg-subtle: var(--md-on-surface-variant);
  --color-console-border: var(--md-outline-variant);
  --color-console-menu-bg: var(--md-surface-container-lowest);
  --color-console-menu-border: var(--md-outline-variant);
  --color-console-hover-bg: var(--md-surface-container);
  --color-console-active-bg: var(--md-surface-container-high);

  /* markup */
  --color-markup-code-block: var(--md-surface-container);
  --color-markup-code-inline: var(--md-primary-container);
  --color-markup-table-row: rgba(103,80,164,.03);
  --color-highlight-bg: #FFF59D;
  --color-highlight-fg: #5D4037;
  --color-timeline: var(--md-outline-variant);

  /* semantic */
  --color-error-text: var(--md-error);
  --color-error-bg: var(--md-error-container);
  --color-error-border: #E57373;
  --color-error-bg-hover: rgba(179,38,30,.12);
  --color-error-bg-active: rgba(179,38,30,.20);
  --color-warning-text: var(--md-warning);
  --color-warning-bg: var(--md-warning-bg);
  --color-warning-border: #FFD54F;
  --color-info-text: var(--md-info);
  --color-info-bg: var(--md-info-bg);
  --color-info-border: #64B5F6;
  --color-success-text: var(--md-success);
  --color-success-bg: var(--md-success-bg);
  --color-success-border: #81C784;

  /* labels / chips */
  --color-label-text: var(--md-on-surface-variant);
  --color-label-bg: var(--md-surface-container-high);
  --color-label-hover-bg: var(--md-surface-container-highest);
  --color-label-active-bg: var(--md-primary-container);

  /* diff */
  --color-diff-added-linenum-bg: #D1F8D9;
  --color-diff-added-row-bg:     #E6FFED;
  --color-diff-added-row-border: #E6FFED;
  --color-diff-added-word-bg:    #ACF2BD;
  --color-diff-removed-linenum-bg: #FFCECB;
  --color-diff-removed-row-bg:     #FFEEF0;
  --color-diff-removed-row-border: #F1C0C0;
  --color-diff-removed-word-bg:    #FDB8C0;
  --color-diff-moved-row-bg:       #F1F8D1;
  --color-diff-moved-row-border:   #D0E27F;
  --color-diff-inactive:           #F0F2F4;

  /* ansi */
  --color-ansi-black:          #1E2327;
  --color-ansi-red:            #CC4848;
  --color-ansi-green:          #87AB63;
  --color-ansi-yellow:         #CC9903;
  --color-ansi-blue:           #3A8AC6;
  --color-ansi-magenta:        #D22E8B;
  --color-ansi-cyan:           #00918A;
  --color-ansi-white:          #6A737D;
  --color-ansi-bright-black:   #46494D;
  --color-ansi-bright-red:     #D15A5A;
  --color-ansi-bright-green:   #93B373;
  --color-ansi-bright-yellow:  #EAAF03;
  --color-ansi-bright-blue:    #4E96CC;
  --color-ansi-bright-magenta: #D74397;
  --color-ansi-bright-cyan:    #00B6AD;
  --color-ansi-bright-white:   #FFFFFF;

  /* tooltip / misc */
  --color-tooltip-bg: var(--md-inverse-surface);
  --color-tooltip-text: var(--md-inverse-on-surface);
  --color-small-accent: var(--md-primary-container);
  --color-shadow: var(--md-shadow-1);
  --color-expand-button: var(--md-on-surface-variant);
  --color-overlay-backdrop: rgba(0,0,0,.40);
  --color-project-board-bg: var(--md-surface-container);
  --color-reaction-active-bg: var(--md-primary-container);
  --color-reaction-hover-bg: var(--md-surface-container-high);

  /* badges */
  --color-green-badge: #1B5E20;
  --color-green-badge-bg: #E8F5E9;
  --color-green-badge-hover-bg: #C8E6C9;
  --color-red-badge: var(--md-error);
  --color-red-badge-bg: var(--md-error-container);
  --color-red-badge-hover-bg: #F8D7D0;
  --color-orange-badge: #E65100;
  --color-orange-badge-bg: #FFF3E0;
  --color-orange-badge-hover-bg: #FFE0B2;
  --color-yellow-badge: #F57F17;
  --color-yellow-badge-bg: #FFFDE7;
  --color-yellow-badge-hover-bg: #FFF9C4;

  /* named palette */
  --color-red:    #C62828;
  --color-orange: #E65100;
  --color-yellow: #F9A825;
  --color-olive:  #827717;
  --color-green:  #2E7D32;
  --color-teal:   #00796B;
  --color-blue:   #1565C0;
  --color-violet: var(--md-primary);
  --color-purple: #7B1FA2;
  --color-pink:   #C2185B;
  --color-brown:  #4E342E;
  --color-grey:   var(--md-outline);
  --color-gold:   #F9A825;
  --color-black:  var(--md-on-surface);
  --color-white:  #FFFFFF;
  --color-git:    #F05133;
  --color-grey-light: #B0AAB8;
  --color-blue-dark-1: #1565C0;
  --color-green-dark-1: #2E7D32;
  --color-green-dark-2: #1B5E20;
  --color-red-dark-1: #C62828;
  --color-red-dark-2: #8C1D18;
  --color-red-light: #E57373;
  --color-purple-dark-1: #6A1B9A;
  --color-violet-dark-1: #4527A0;
  --color-orange-dark-1: #E65100;
  --color-yellow-dark-1: #F57F17;
}

/* == 4. COMPONENT LAYER ==================================================== */

/* ---- base ---- */
body{
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: var(--fonts-regular);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
}

a{ color: var(--md-primary); text-decoration: none; }
a:hover{ color: var(--color-primary-hover); text-decoration: underline; }

::selection{ background: var(--md-primary-container); color: var(--md-on-primary-container); }

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: var(--md-outline-variant);
  border-radius: var(--md-radius-full);
  border: 2px solid var(--md-surface);
}
::-webkit-scrollbar-thumb:hover{ background: var(--md-outline); }

/* ---- headings (Expressive display type) ---- */
h1,h2,h3,h4,h5,h6,.ui.header{
  font-family: 'Bricolage Grotesque', var(--fonts-regular);
  font-weight: 700; letter-spacing: -.02em; color: var(--md-on-surface);
}
h1,.ui.header:is(h1){ font-size: 2.125rem; line-height: 1.15; letter-spacing: -.03em; }
h2{ font-size: 1.5rem;   line-height: 1.25; letter-spacing: -.02em; }
h3{ font-size: 1.25rem;  line-height: 1.4;  font-weight: 600; }
h4{ font-size: 1rem;     font-weight: 600; }
h5{ font-size: .875rem;  font-weight: 600; }

/* ---- top app bar ---- */
#navbar{
  background: var(--md-surface-container) !important;
  border-bottom: 1px solid var(--md-outline-variant) !important;
  border-radius: 0 !important;
  color: var(--md-on-surface) !important;
  height: 64px;
  padding: 0 16px;
  box-shadow: none !important;
}
#navbar a.item:not(.menu a),
#navbar .navbar-left > a,
#navbar .navbar-right > .item,
#navbar .navbar-right > a{
  color: var(--md-on-surface) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: .1px !important;
  background: transparent !important;
  font-size: .875rem;
  border-radius: var(--md-radius-full) !important;
  padding: 8px 16px !important;
  transition: background .15s;
}
#navbar a.item:not(.menu a):hover,
#navbar .navbar-left > a:hover,
#navbar .navbar-right > a:hover{
  background: var(--md-surface-container-highest) !important;
  color: var(--md-on-surface) !important;
}
#navbar #navbar-logo img{ filter: none; }

/* ---- footer ---- */
.page-footer{
  background: var(--md-surface-container) !important;
  color: var(--md-on-surface-variant) !important;
  border-top: 1px solid var(--md-outline-variant) !important;
  border-radius: 0 !important;
  font-size: .8125rem;
  padding: 16px 24px;
}
.page-footer a{ color: var(--md-on-surface-variant) !important; }
.page-footer a:hover{ color: var(--md-primary) !important; text-decoration: none; }
.page-footer strong{ color: var(--md-on-surface) !important; }

/* ---- buttons: one system ---- */
.ui.button,
.ui.labeled.button,
.ui.icon.button,
.ui.compact.button{
  border: none;
  border-radius: var(--md-radius-full) !important;
  font-family: var(--fonts-regular);
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
  box-shadow: none;
  min-height: 40px;
  padding: 10px 24px;
  font-size: .875rem;
  transition: transform .12s, box-shadow .12s, background .15s;
  position: relative;
  overflow: visible;
}
.ui.button:hover{ transform: translateY(-1px); }
/* ---- labeled button: [label][button] merged pill ---- */
.ui.labeled.button{
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--md-radius-full) !important;
  overflow: visible;
  box-shadow: none !important;
}
.ui.labeled.button > .label{
  display: inline-flex;
  align-items: center;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 16px;
  font-weight: 700;
  font-size: .8125rem;
  background: var(--md-surface-container-high) !important;
  color: var(--md-on-surface-variant) !important;
  border-right: 1px solid var(--md-outline-variant) !important;
}
.ui.labeled.button > .button{
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* ---- button groups: keep siblings merged (Fomantic owns the corners) ---- */
.ui.buttons{
  display: inline-flex;
  border-radius: var(--md-radius-full);
  overflow: visible;
}
/* outlined group: draw the shared edge on the container, not per child */
.ui.buttons .ui.basic.button{ box-shadow: none !important; }
.ui.buttons:has(.ui.basic.button){ box-shadow: 0 3px 0 0 var(--md-outline); }
.ui.buttons:has(.ui.basic.button) .ui.basic.button{ border-color: var(--md-outline) !important; }
/* keep outlined children's inner corners square so the seam is a shared border, not two lines */
.ui.buttons .ui.basic.button:not(:first-child){ border-left: none !important; }
.ui.buttons .button{
  border: none;
  border-radius: 0 !important;
  margin: 0 !important;
  font-family: var(--fonts-regular);
  font-weight: 700;
  letter-spacing: -.01em;
  min-height: 40px;
  padding: 10px 22px;
  font-size: .875rem;
  box-shadow: none !important;
  position: relative;
  transition: background .15s, filter .15s;
}
.ui.buttons .button:first-child{
  border-top-left-radius: var(--md-radius-full) !important;
  border-bottom-left-radius: var(--md-radius-full) !important;
}
.ui.buttons .button:last-child{
  border-top-right-radius: var(--md-radius-full) !important;
  border-bottom-right-radius: var(--md-radius-full) !important;
}
/* a visible seam between siblings so they read as one control */
.ui.buttons .button + .button{
  box-shadow: inset 1px 0 0 rgba(255,255,255,.22) !important;
}
.ui.buttons .button:hover{
  transform: none;
  filter: brightness(.96);
}
.ui.buttons .button:active{
  transform: none;
  filter: brightness(.90);
}
/* attached variant: no gap, shared outer shadow */
.ui.buttons.attached{
  border-radius: var(--md-radius-full);
  overflow: visible;
}

.ui.button:active{ transform: translateY(1px); }
.ui.button:focus-visible{ outline: 3px solid var(--md-ink); outline-offset: 3px; }

/* tonal (default) */
.ui.button:not(.primary):not(.green):not(.red):not(.negative):not(.teal):not(.orange):not(.purple):not(.pink):not(.olive):not(.yellow):not(.violet):not(.brown):not(.black):not(.grey):not(.basic):not(.cancel){
  background: var(--md-surface-container-high) !important;
  color: var(--md-on-surface) !important;
  box-shadow: 0 3px 0 0 var(--md-outline-variant) !important;
}
.ui.button:not(.primary):not(.green):not(.red):not(.negative):not(.teal):not(.orange):not(.purple):not(.pink):not(.olive):not(.yellow):not(.violet):not(.brown):not(.black):not(.grey):not(.basic):not(.cancel):hover{
  background: var(--md-surface-container-highest) !important;
}

/* filled */
.ui.primary.button,.ui.primary.buttons .button{
  background: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
  box-shadow: 0 4px 0 0 #07352C !important;
}
/* inside a group: one shared outer edge instead of a stack of them */
.ui.buttons .button,
.ui.buttons .ui.primary.button,
.ui.buttons .ui.green.button,
.ui.buttons .ui.red.button,
.ui.buttons .ui.negative.button{ box-shadow: none !important; }
.ui.buttons{ box-shadow: 0 4px 0 0 #07352C; }
.ui.buttons .button:active{ box-shadow: none !important; }
.ui.primary.button:hover{ background: var(--color-primary-hover) !important; }
.ui.primary.button:active{ box-shadow: 0 2px 0 0 #07352C !important; }
.ui.green.button{ background: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important; box-shadow: 0 4px 0 0 #9CC53C !important; }
.ui.green.button:active{ box-shadow: 0 2px 0 0 #9CC53C !important; }
.ui.teal.button,.ui.purple.button,.ui.violet.button{ background: var(--md-primary) !important; color: var(--md-on-primary) !important; }
.ui.red.button,.ui.negative.button{ background: var(--md-accent) !important; color: var(--md-on-accent) !important; box-shadow: 0 4px 0 0 #B63414 !important; }
.ui.red.button:active,.ui.negative.button:active{ box-shadow: 0 2px 0 0 #B63414 !important; }
.ui.yellow.button,.ui.olive.button,.ui.orange.button{ background: var(--md-tertiary-container) !important; color: var(--md-on-tertiary-container) !important; }
.ui.pink.button{ background: var(--md-tertiary) !important; color: var(--md-on-tertiary) !important; }
.ui.black.button,.ui.grey.button{ background: var(--md-inverse-surface) !important; color: var(--md-inverse-on-surface) !important; }


/* outlined */
.ui.basic.button,.ui.basic.buttons .button{
  background: transparent !important;
  border: 2px solid var(--md-outline) !important;
  color: var(--md-on-surface) !important;
  box-shadow: 0 3px 0 0 var(--md-outline) !important;
}
.ui.basic.button:hover,.ui.basic.buttons .button:hover{
  background: var(--md-primary-container) !important;
  border-color: var(--md-primary) !important;
  color: var(--md-on-primary-container) !important;
  box-shadow: 0 3px 0 0 var(--md-primary) !important;
}
.ui.basic.button:active,.ui.basic.buttons .button:active{
  box-shadow: 0 1px 0 0 var(--md-primary) !important;
}
.ui.basic.red.button{ border-color: var(--md-error) !important; color: var(--md-error) !important; }
.ui.basic.red.button:hover{ background: var(--md-error-container) !important; }

/* text */
.ui.cancel.button{
  background: transparent !important;
  color: var(--md-primary) !important;
  border: none !important;
  box-shadow: none !important;
}
.ui.cancel.button:hover{ background: var(--md-surface-container-high) !important; }

/* icon */
.ui.icon.button,.ui.button.icon{
  padding: 0 !important;
  min-width: 40px; min-height: 40px;
  border-radius: 50% !important;
  display: inline-flex; align-items: center; justify-content: center;
}
/* icon button that lives inside a group inherits the group corners */
.ui.buttons .ui.icon.button{
  padding: 0 !important;
  min-width: 40px; min-height: 40px;
  border-radius: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
}
.ui.buttons .ui.icon.button:first-child{ border-top-left-radius: var(--md-radius-full) !important; border-bottom-left-radius: var(--md-radius-full) !important; }
.ui.buttons .ui.icon.button:last-child{ border-top-right-radius: var(--md-radius-full) !important; border-bottom-right-radius: var(--md-radius-full) !important; }

/* sizes */
.ui.mini.button{ min-height: 28px; padding: 4px 12px !important; font-size: .75rem; }
.ui.tiny.button{ min-height: 32px; padding: 6px 14px !important; font-size: .8125rem; }
.ui.small.button{ min-height: 34px; padding: 6px 16px !important; font-size: .8125rem; }
.ui.large.button{ min-height: 48px; padding: 12px 28px !important; font-size: 1rem; }

/* disabled */
.ui.button.disabled,.ui.button.disabled:hover,.ui.disabled.button{
  opacity: .38 !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* ---- inputs (Expressive outlined field, same hard edge as buttons) ---- */
.ui.form input:not([type=checkbox]):not([type=radio]),
.ui.form textarea,
.ui.form select,
.ui.input input{
  border: 2px solid var(--md-outline-variant) !important;
  border-radius: var(--md-radius-md) !important;
  background: var(--md-surface-bright) !important;
  color: var(--md-on-surface) !important;
  padding: 12px 16px !important;
  box-shadow: 0 3px 0 0 rgba(27,26,23,.10) !important;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.ui.form input:not([type=checkbox]):not([type=radio]):hover,
.ui.form textarea:hover,
.ui.form select:hover,
.ui.input input:hover{
  border-color: var(--md-outline) !important;
}
.ui.form input:focus,
.ui.form textarea:focus,
.ui.form select:focus,
.ui.input input:focus{
  border: 2px solid var(--md-primary) !important;
  outline: none !important;
  box-shadow: var(--md-ring) !important;
}
.ui.input{ border-radius: var(--md-radius-md) !important; }
.ui.action.input > input{ border-radius: var(--md-radius-md) 0 0 var(--md-radius-md) !important; border-right: none !important; }
.ui.action.input > .ui.button{ border-radius: 0 var(--md-radius-md) var(--md-radius-md) 0 !important; box-shadow: none !important; margin: 0; }
.ui.icon.input > input{ border-radius: var(--md-radius-md) !important; }
.ui.icon.input > .icon{ color: var(--md-on-surface-variant) !important; opacity: 1; }
.ui.icon.search.input > input{ padding-left: 38px !important; }
.ui.icon.search.input > .icon{ opacity: .6; }
.ui.form .field>label{ color: var(--md-on-surface) !important; font-weight: 500 !important; }

/* ---- menus / dropdowns (M3 menu) ---- */
.ui.menu,
.ui.secondary.menu,
.ui.secondary.pointing.menu,
.ui.tabular.menu,
.ui.vertical.menu,
.ui.text.menu,
.ui.borderless.menu,
.ui.floating.menu,
.ui.compact.menu{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--fonts-regular);
}
.ui.menu > .item{
  border-radius: var(--md-radius-sm) !important;
  font-weight: 600 !important;
  font-size: .875rem !important;
  letter-spacing: .1px !important;
  text-transform: none !important;
  color: var(--md-on-surface-variant) !important;
  padding: 8px 16px !important;
}
.ui.menu > .item:hover{
  background: var(--md-surface-container-high) !important;
  color: var(--md-on-surface) !important;
}
.ui.menu > .active.item,
.ui.menu > .active.item:hover{
  background: var(--md-primary-container) !important;
  color: var(--md-on-primary-container) !important;
}
/* first/last item corners follow the bar, no orphan rounding */
.ui.menu > .item:first-child{ border-top-left-radius: var(--md-radius-sm) !important; border-bottom-left-radius: var(--md-radius-sm) !important; }
.ui.menu > .item:last-child{ border-top-right-radius: var(--md-radius-sm) !important; border-bottom-right-radius: var(--md-radius-sm) !important; }

/* pointing / tabular -> M3 tab indicator */
.ui.secondary.pointing.menu{
  border-bottom: 1px solid var(--md-outline-variant) !important;
  border-radius: 0 !important;
}
.ui.secondary.pointing.menu .item{
  padding: 12px 16px !important;
  color: var(--md-on-surface-variant) !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
}
.ui.secondary.pointing.menu .item:hover{ color: var(--md-on-surface) !important; background: transparent !important; }
.ui.secondary.pointing.menu .active.item{
  color: var(--md-primary) !important;
  border-bottom-color: var(--md-primary) !important;
  background: transparent !important;
  font-weight: 500 !important;
}
.ui.tabular.menu{ border-bottom: 1px solid var(--md-outline-variant) !important; }
.ui.tabular.menu .item{
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
}
.ui.tabular.menu .active.item{
  background: transparent !important;
  border-bottom-color: var(--md-primary) !important;
  color: var(--md-primary) !important;
  font-weight: 500 !important;
}

/* popup / dropdown menus */
.ui.dropdown .menu,
.ui.pointing.dropdown>.menu:not(.hidden):after{
  background: var(--md-surface-container) !important;
}
.ui.dropdown .menu{
  border: none !important;
  border-radius: var(--md-radius-md) !important;
  box-shadow: var(--md-shadow-2) !important;
  padding: 8px 0;
}
.ui.dropdown .menu > .item{
  color: var(--md-on-surface) !important;
  font-size: .875rem !important;
  padding: 10px 20px !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin: 0 6px;
}
.ui.dropdown .menu > .item:first-child{ border-top-left-radius: var(--md-radius-sm) !important; border-top-right-radius: var(--md-radius-sm) !important; }
.ui.dropdown .menu > .item:last-child{ border-bottom-left-radius: var(--md-radius-sm) !important; border-bottom-right-radius: var(--md-radius-sm) !important; }
.ui.dropdown .menu > .item:hover,
.ui.dropdown .menu > .item.active{
  background: var(--md-surface-container-highest) !important;
  color: var(--md-on-surface) !important;
}
.ui.dropdown .menu > .header{
  font-size: .75rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--md-on-surface-variant) !important;
}
.ui.dropdown .menu > .divider{ border-top: 1px solid var(--md-outline-variant) !important; }
.ui.dropdown .menu svg{ fill: currentColor !important; color: inherit !important; }

/* ---- cards / segments / tables ---- */
.ui.segment,.ui.segments,.ui.card,.ui.cards>.card{
  border: none !important;
  border-radius: var(--md-radius-md) !important;
  background: var(--md-surface-container-lowest) !important;
  box-shadow: none !important;
}
.ui.segment{ box-shadow: var(--md-shadow-1) !important; }
/* grouped segments: merge into one card-like stack */
.ui.segments{ box-shadow: var(--md-shadow-1) !important; overflow: hidden; }
.ui.segments > .segment{
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  border: none !important;
}
.ui.segments > .segment:first-child{
  border-top-left-radius: var(--md-radius-md) !important;
  border-top-right-radius: var(--md-radius-md) !important;
}
.ui.segments > .segment:last-child{
  border-bottom-left-radius: var(--md-radius-md) !important;
  border-bottom-right-radius: var(--md-radius-md) !important;
}
.ui.segments > .segment:not(:first-child){ border-top: 1px solid var(--md-outline-variant) !important; }
/* horizontal group of segments */
.ui.horizontal.segments > .segment{
  border-radius: 0 !important;
  border-top: none !important;
  border-left: 1px solid var(--md-outline-variant) !important;
}
.ui.horizontal.segments > .segment:first-child{
  border-left: none !important;
  border-top-left-radius: var(--md-radius-md) !important;
  border-bottom-left-radius: var(--md-radius-md) !important;
}
.ui.horizontal.segments > .segment:last-child{
  border-top-right-radius: var(--md-radius-md) !important;
  border-bottom-right-radius: var(--md-radius-md) !important;
}
.ui.card,.ui.cards>.card{ box-shadow: var(--md-shadow-1) !important; }

.ui.table{
  border: none !important;
  border-radius: var(--md-radius-md) !important;
  background: var(--md-surface-container-lowest) !important;
}
.ui.table th,.ui.table td{
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--md-outline-variant) !important;
  padding: 12px 16px !important;
}
.ui.table thead th{
  background: var(--md-surface-container-low) !important;
  color: var(--md-on-surface-variant) !important;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .5px;
  font-weight: 500 !important;
}
.ui.table tr:hover td{ background: var(--md-surface-container-low) !important; }

/* attached segments */
.ui.top.attached.segment,.ui.attached.segment,.ui.attached.header,.file-header{
  border: 1px solid var(--md-outline-variant) !important;
  box-shadow: none !important;
}
.ui.top.attached.segment,.ui.top.attached.header{ border-radius: var(--md-radius-md) var(--md-radius-md) 0 0 !important; border-bottom: none !important; }
.ui.bottom.attached.segment{ border-radius: 0 0 var(--md-radius-md) var(--md-radius-md) !important; border-top: none !important; }
.ui.attached.segment:not(.top):not(.bottom){ border-radius: 0 !important; border-top: none !important; border-bottom: none !important; }
.file-header{ background: var(--md-surface-container-low) !important; }

/* ---- chips / labels ---- */
.ui.label{
  border: none !important;
  border-radius: var(--md-radius-full) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  background: var(--md-surface-container-high) !important;
  color: var(--md-on-surface-variant) !important;
  font-size: .8125rem;
  padding: 4px 12px;
}
.ui.basic.label{ background: transparent !important; border: 1px solid var(--md-outline) !important; color: var(--md-on-surface-variant) !important; }
.ui.green.label{ background: var(--color-green-badge-bg) !important; color: var(--color-green-badge) !important; }
.ui.red.label{ background: var(--md-error-container) !important; color: var(--md-on-error-container) !important; }
.ui.blue.label{ background: var(--md-info-bg) !important; color: var(--md-info) !important; }
.ui.orange.label{ background: #FFF3E0 !important; color: #E65100 !important; }
.ui.yellow.label{ background: #FFFDE7 !important; color: #F57F17 !important; }
.ui.teal.label{ background: #E0F2F1 !important; color: #00796B !important; }
.ui.purple.label,.ui.violet.label{ background: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important; }
.ui.pink.label{ background: #FCE4EC !important; color: #C2185B !important; }
.ui.black.label,.ui.grey.label{ background: var(--md-inverse-surface) !important; color: var(--md-inverse-on-surface) !important; }
.ui.label a{ color: inherit !important; }
.ui.sha.label{
  background: var(--md-surface-container-high) !important;
  color: var(--md-on-surface-variant) !important;
  border-radius: var(--md-radius-xs) !important;
  font-family: var(--fonts-monospace) !important;
  font-size: .75rem !important;
  font-weight: 500 !important;
}
.ui.mini.label,.ui.tiny.label{ font-size: .6875rem !important; padding: 2px 8px !important; }
.ui.small.label{ font-size: .75rem !important; padding: 3px 10px !important; }

/* ---- modal / dialog ---- */
.ui.modal{
  border: none !important;
  border-radius: var(--md-radius-xl) !important;
  box-shadow: var(--md-shadow-3) !important;
}
.ui.modal > .header{
  padding: 24px 24px 16px !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  border-bottom: none !important;
  color: var(--md-on-surface) !important;
}
.ui.modal > .content{ padding: 0 24px 16px !important; color: var(--md-on-surface) !important; }
.ui.modal > .actions{ padding: 16px 24px 24px !important; background: transparent !important; border-top: none !important; }

/* ---- avatar ---- */
.ui.avatar.image,.ui.circular.image,.ui.avatar,img.avatar{ border-radius: 50% !important; }

/* ---- messages ---- */
.ui.message{
  border: none !important;
  border-radius: var(--md-radius-md) !important;
  background: var(--md-surface-container) !important;
  color: var(--md-on-surface) !important;
}
.ui.message > .header{ color: var(--md-on-surface) !important; }
.ui.info.message{ background: var(--md-info-bg) !important; }
.ui.success.message{ background: var(--md-success-bg) !important; }
.ui.warning.message{ background: var(--md-warning-bg) !important; }
.ui.error.message{ background: var(--md-error-container) !important; }

/* ---- checkboxes ---- */
.ui.checkbox > label{ color: var(--md-on-surface) !important; }
.ui.checkbox input + label:before{ border: 2px solid var(--md-outline) !important; background: transparent !important; border-radius: 2px !important; }
.ui.checkbox input:checked + label:before{ background: var(--md-primary) !important; border-color: var(--md-primary) !important; }
.ui.checkbox input:checked + label:after{ border-color: var(--md-on-primary) !important; }
.ui.checkbox input:hover + label:before{ border-color: var(--md-primary) !important; }

/* ---- breadcrumb ---- */
.ui.breadcrumb a,.ui.breadcrumb .divider{ color: var(--md-on-surface-variant) !important; }
.ui.breadcrumb a:hover{ color: var(--md-primary) !important; }

/* ---- code / markup ---- */
code,pre{
  background: var(--md-surface-container) !important;
  border: 1px solid var(--md-outline-variant) !important;
  border-radius: var(--md-radius-sm) !important;
  font-family: var(--fonts-monospace) !important;
  font-size: .875em;
}
.markup .code-block,.markup pre{ border-radius: var(--md-radius-md) !important; }

/* ---- list ---- */
.ui.list > .item{ padding: 12px 0 !important; border-bottom: 1px solid var(--md-outline-variant) !important; }
.ui.list > .item:last-child{ border-bottom: none !important; }

/* ---- divider / loader ---- */
.ui.divider{ border-top: 1px solid var(--md-outline-variant) !important; border-bottom: none !important; }
.ui.loader:after{ border-color: var(--md-outline-variant) transparent transparent !important; }

/* ---- tooltip ---- */
.ui.tooltip,.tooltip,[data-tooltip-content]{ color: var(--md-inverse-on-surface) !important; }

/* ---- container / misc ---- */
.ui.container{ max-width: 1200px !important; }
.octicon,.svg{ fill: currentColor; }
.truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui.hero.ui.icon.header{ color: var(--md-on-surface-variant) !important; }
.ui.hero.ui.icon.header > .icon{ color: var(--md-outline) !important; opacity: 1; }

/* ---- hide sign-up tab (private instance) ---- */
a[href="/user/sign_up"],a[href$="/user/sign_up"],.overflow-menu-items a[href*="sign_up"]{ display: none !important; }

/* == 5. RESPONSIVE ========================================================= */
/* Tablet / small laptop */
@media (max-width: 991px){
  #navbar{ padding: 0 10px !important; }
  .ui.container{ max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; }
}

/* Phone */
@media (max-width: 767px){
  html, body{ font-size: 14px; }

  /* --- top app bar --- */
  #navbar{
    height: auto !important;
    min-height: 56px;
    padding: 6px 8px !important;
    flex-wrap: wrap;
  }
  #navbar a.item:not(.menu a),
  #navbar .navbar-left > a,
  #navbar .navbar-right > .item,
  #navbar .navbar-right > a{
    padding: 6px 10px !important;
    font-size: .8125rem !important;
  }
  #navbar #navbar-logo img{ max-height: 28px; }

  /* --- container & page --- */
  .ui.container{
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .page-content{ padding-left: 0 !important; padding-right: 0 !important; }
  .full.height{ padding-bottom: 40px; }

  /* --- buttons: full-width stacks, no overflow --- */
  .ui.buttons{
    display: flex !important;
    flex-wrap: wrap;
    width: 100%;
    border-radius: var(--md-radius-md) !important;
    box-shadow: none !important;
  }
  .ui.buttons .button{
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px !important;
  }
  .ui.buttons .button:first-child{ border-top-left-radius: var(--md-radius-md) !important; border-bottom-left-radius: 0 !important; border-top-right-radius: var(--md-radius-md) !important; }
  .ui.buttons .button:last-child{ border-bottom-left-radius: var(--md-radius-md) !important; border-bottom-right-radius: var(--md-radius-md) !important; border-top-right-radius: 0 !important; }
  .ui.button{ max-width: 100%; }
  .ui.button.md-btn--block, .ui.fluid.button{ width: 100% !important; }

  /* --- forms & inputs: keep 16px text so iOS does not zoom on focus --- */
  .ui.form input:not([type=checkbox]):not([type=radio]),
  .ui.form textarea,
  .ui.form select,
  .ui.input input{
    font-size: 16px !important;
    padding: 12px 14px !important;
  }
  .ui.form .fields{ flex-direction: column; }
  .ui.form .fields > .field{ width: 100% !important; }

  /* --- tables: scroll instead of squashing --- */
  .ui.table{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .ui.table th, .ui.table td{ padding: 10px 12px !important; }

  /* --- cards / segments: no inner scroll traps --- */
  .ui.segment, .ui.card, .ui.cards > .card{ border-radius: var(--md-radius-md) !important; }
  .ui.cards{ grid-template-columns: 1fr !important; }

  /* --- dropdown menus fit the viewport --- */
  .ui.dropdown .menu{
    max-width: calc(100vw - 20px) !important;
    left: 0 !important;
    right: auto !important;
  }

  /* --- softer hard edge on small screens (less jitter when tapping) --- */
  .ui.button, .ui.primary.button, .ui.green.button, .ui.red.button,
  .ui.negative.button, .ui.basic.button{ box-shadow: 0 2px 0 0 rgba(27,26,23,.14) !important; }
  .ui.button:active, .ui.primary.button:active, .ui.green.button:active,
  .ui.red.button:active, .ui.negative.button:active, .ui.basic.button:active{
    box-shadow: 0 0 0 0 transparent !important;
    transform: translateY(1px) !important;
  }
  .ui.form input:not([type=checkbox]):not([type=radio]),
  .ui.form textarea, .ui.form select, .ui.input input{ box-shadow: 0 2px 0 0 rgba(27,26,23,.10) !important; }

  /* --- modals & dialogs --- */
  .ui.modal{
    width: 94vw !important;
    margin: 0 auto !important;
    border-radius: var(--md-radius-lg) !important;
  }
  .ui.modal > .header{ padding: 18px 18px 12px !important; }
  .ui.modal > .content{ padding: 0 18px 12px !important; }
  .ui.modal > .actions{ padding: 12px 18px 18px !important; }

  /* --- footer --- */
  .page-footer{
    flex-direction: column;
    gap: 8px;
    padding: 12px 10px !important;
    text-align: center;
  }
  .page-footer .left-links, .page-footer .right-links{ justify-content: center; }

  /* --- headings scale down --- */
  h1, .ui.header:is(h1){ font-size: 1.6rem !important; letter-spacing: -.02em !important; }
  h2{ font-size: 1.25rem !important; }
  h3{ font-size: 1.0625rem !important; }

  /* --- code blocks scroll, never blow the layout --- */
  pre, .markup pre, .markup .code-block{ max-width: 100%; overflow-x: auto; }

  /* --- touch targets --- */
  .ui.menu > .item, .ui.dropdown .menu > .item{ min-height: 44px; }
}

/* Very small phones */
@media (max-width: 479px){
  .ui.buttons .button{ flex: 1 1 100%; }
  .ui.buttons .button:first-child{ border-radius: var(--md-radius-md) var(--md-radius-md) 0 0 !important; }
  .ui.buttons .button:last-child{ border-radius: 0 0 var(--md-radius-md) var(--md-radius-md) !important; }
  h1, .ui.header:is(h1){ font-size: 1.4rem !important; }
}