.sm-01,
        .sm-01 *,
        .sm-01 *::before,
        .sm-01 *::after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }

        .sm-01 ::selection {
          background: #7c3aed;
          color: #fff;
        }

        .sm-01 {
          --bg: #0f172a;
          --surface: #1e293b;
          --surface-hover: #334155;
          --menu-bg: #1a1033;
          --accent: #7c3aed;
          --accent2: #a78bfa;
          --text: #e2e8f0;
          --muted: #94a3b8;
          --border: rgba(124,58,237,0.2);
          --font: 'Plus Jakarta Sans', system-ui, sans-serif;
          --menu-w: 280px;
          --duration: 0.4s;
          font-family: var(--font);
          background-image: url("../img/wallpaper.jpg"); 
          background-repeat: no-repeat; 
          background-attachment: fixed; 
          background-position: center; 
          background-size: cover; 
          height: 100vh; 
          margin: 0;
          color: var(--text);
          min-height: 100vh;
          position: relative;
          overflow: hidden;
          border-radius: 12px;
          display: flex;
          flex-direction: column;
        }

        /* Hidden checkbox toggle */
        .sm-01__toggle {
          position: absolute;
          opacity: 0;
          width: 0;
          height: 0;
          pointer-events: none;
        }

        /* Burger label */
        .sm-01__burger {
          position: absolute;
          top: 20px;
          left: 20px;
          z-index: 50;
          width: 42px;
          height: 42px;
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: 10px;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 5px;
          transition: background 0.2s, border-color 0.2s;
        }

        .sm-01__burger:hover {
          background: var(--accent);
          border-color: var(--accent);
        }

        .sm-01__burger span {
          display: block;
          width: 20px;
          height: 2px;
          background: var(--text);
          border-radius: 2px;
          transition: transform var(--duration), opacity var(--duration);
          transform-origin: center;
        }

        /* Burger → X animation */
        .sm-01__toggle:checked ~ .sm-01__burger span:nth-child(1) {
          transform: translateY(7px) rotate(45deg);
        }

        .sm-01__toggle:checked ~ .sm-01__burger span:nth-child(2) {
          opacity: 0;
          transform: scaleX(0);
        }

        .sm-01__toggle:checked ~ .sm-01__burger span:nth-child(3) {
          transform: translateY(-7px) rotate(-45deg);
        }

        /* Slide-in panel - Liquid Glass */
        .sm-01__nav {
          position: absolute;
          top: 0;
          left: 0;
          width: var(--menu-w);
          height: 100%;
          z-index: 40;
          display: flex;
          flex-direction: column;
          padding: 80px 0 24px;
          
          transform: translateX(-100%);
          transition: transform var(--duration) cubic-bezier(0.4, 0, 0.2, 1);

          /* Liquid Glass Background & Filter */
          background: hsl(0 0% 0% / var(--glass-frost, 0.15));
          -webkit-backdrop-filter: var(--filter-id, blur(16px)) saturate(var(--glass-saturation, 1.4));
          backdrop-filter: var(--filter-id, blur(16px)) saturate(var(--glass-saturation, 1.4));
          
          border-right: 1px solid rgba(255, 255, 255, 0.18);
          box-shadow: 
            inset 0 0 2px 1px rgba(255, 255, 255, 0.25),
            inset -4px 0 16px rgba(17, 17, 26, 0.15),
            4px 0 32px rgba(0, 0, 0, 0.37);
        }

        .sm-01__toggle:checked ~ .sm-01__nav {
          transform: translateX(0);
        }

        /* Brand */
        .sm-01__brand {
          padding: 0 24px 24px;
          border-bottom: 1px solid var(--border);
          margin-bottom: 16px;
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .sm-01__logo {
          width: 36px;
          height: 36px;
          background: linear-gradient(135deg, var(--accent), var(--accent2));
          border-radius: 9px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          font-size: 16px;
        }

        .sm-01__brand-name {
          font-weight: 700;
          font-size: 16px;
        }

        .sm-01__brand-sub {
          font-size: 11px;
          color: var(--muted);
        }

        /* Nav links */
        .sm-01__links {
          flex: 1;
          padding: 0 12px;
        }

        .sm-01__link {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 13px 16px;
          border-radius: 10px;
          color: var(--muted);
          text-decoration: none;
          font-size: 14px;
          font-weight: 500;
          transition: all 0.2s;
          margin-bottom: 4px;
          cursor: pointer;
        }

        .sm-01__link:hover {
          color: var(--text);
          background: rgba(124,58,237,0.15);
        }

        .sm-01__link--active {
          color: var(--text);
          background: rgba(124,58,237,0.2);
        }

        .sm-01__link-icon {
          width: 36px;
          height: 36px;
          background: rgba(255,255,255,0.05);
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          flex-shrink: 0;
          transition: background 0.2s;
        }

        .sm-01__link:hover .sm-01__link-icon,
        .sm-01__link--active .sm-01__link-icon {
          background: var(--accent);
        }

        /* Footer */
        .sm-01__nav-footer {
          padding: 16px 24px 0;
          border-top: 1px solid var(--border);
        }

        .sm-01__avatar {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .sm-01__avatar-img {
          width: 36px;
          height: 36px;
          background: linear-gradient(135deg, #f59e0b, #ef4444);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          font-size: 13px;
        }

        .sm-01__avatar-name {
          font-size: 13px;
          font-weight: 600;
        }

        .sm-01__avatar-role {
          font-size: 11px;
          color: var(--muted);
        }

        /* TOP-RIGHT NOTICES CONTAINER */
        .notice-stack {
          position: fixed;
          top: 20px;
          right: 20px;
          z-index: 100;
          display: flex;
          flex-direction: column;
          gap: 12px;
          max-width: 340px;
          width: calc(100% - 40px);
        }

        .notice-item {
          display: grid;
          grid-template-rows: 1fr;
          transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .notice-item__inner {
          overflow: hidden;
        }

        .notice-container {
          position: relative;
          border-radius: 16px;
          padding: 14px 16px;
          font-size: 13px;
          font-weight: 500;
          color: var(--text);
          display: flex;
          flex-direction: column;
          gap: 8px;
          line-height: 1.4;
          
          background: hsl(0 0% 0% / var(--glass-frost, 0.25));
          -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
          border: 1px solid rgba(255, 255, 255, 0.15);
          box-shadow: 
            inset 0 0 2px 1px rgba(255, 255, 255, 0.25),
            inset 0 0 10px 2px rgba(255, 255, 255, 0.08),
            0 10px 25px rgba(0, 0, 0, 0.4);

          opacity: 1;
          transform: translateY(0) scale(1);
          transform-origin: top center;
          transition: 
            opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            margin 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .notice-container--warning {
          border-left: 3px solid #f59e0b;
        }

        .notice-container--owner {
          border-left: 3px solid #ef4444;
        }

        .mac-controls {
          display: flex;
          align-items: center;
          gap: 6px;
        }

        .mac-close-toggle {
          display: none;
        }

        .mac-dot {
          width: 11px;
          height: 11px;
          border-radius: 50%;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 8px;
          color: transparent;
          cursor: pointer;
          user-select: none;
          transition: filter 0.15s ease;
        }

        .mac-dot:hover {
          filter: brightness(0.85);
          color: rgba(0, 0, 0, 0.6);
        }

        .mac-dot--close {
          background: #ff5f56;
          border: 0.5px solid #e0443e;
        }

        .notice-body {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .notice-icon {
          font-size: 16px;
          flex-shrink: 0;
        }

        #close-warning:checked ~ .notice-item,
        #close-owner:checked ~ .notice-item {
          grid-template-rows: 0fr;
        }

        #close-warning:checked ~ .notice-item .notice-container,
        #close-owner:checked ~ .notice-item .notice-container {
          opacity: 0;
          transform: translateY(-12px) scale(0.92);
          pointer-events: none;
          margin-bottom: -12px;
        }

        /* --- SETTINGS CONTENT AREA --- */
        .settings__content {
          flex: 1;
          padding: 80px 24px 40px 80px;
          display: flex;
          flex-direction: column;
          gap: 24px;
          overflow-y: auto;
          max-width: 900px;
          margin: 0 auto;
          width: 100%;
        }

        .settings__card {
          padding: 28px;
          border-radius: 24px;
          background: hsl(0 0% 0% / var(--glass-frost, 0.2));
          -webkit-backdrop-filter: blur(16px) saturate(1.3);
          backdrop-filter: blur(16px) saturate(1.3);
          border: 1px solid rgba(255, 255, 255, 0.15);
          box-shadow: 
            inset 0 0 2px 1px rgba(255, 255, 255, 0.25),
            inset 0 0 10px 4px rgba(255, 255, 255, 0.08),
            0 12px 32px rgba(0, 0, 0, 0.3);
          display: flex;
          flex-direction: column;
          gap: 20px;
        }

        .settings__header {
          border-bottom: 1px solid var(--border);
          padding-bottom: 12px;
        }

        .settings__title {
          font-size: 22px;
          font-weight: 700;
          color: #fff;
        }

        .settings__subtitle {
          font-size: 13px;
          color: var(--muted);
          margin-top: 4px;
        }

        .settings__group {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .settings__row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .settings__row:last-child {
          border-bottom: none;
        }

        .settings__label-group {
          display: flex;
          flex-direction: column;
          gap: 4px;
        }

        .settings__label {
          font-size: 14px;
          font-weight: 600;
          color: var(--text);
        }

        .settings__desc {
          font-size: 12px;
          color: var(--muted);
        }

        /* Custom Toggle Switch */
        .switch {
          position: relative;
          display: inline-block;
          width: 46px;
          height: 24px;
        }

        .switch input {
          opacity: 0;
          width: 0;
          height: 0;
        }

        .slider {
          position: absolute;
          cursor: pointer;
          top: 0; left: 0; right: 0; bottom: 0;
          background-color: rgba(255, 255, 255, 0.2);
          transition: .3s;
          border-radius: 24px;
          border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .slider:before {
          position: absolute;
          content: "";
          height: 16px;
          width: 16px;
          left: 3px;
          bottom: 3px;
          background-color: white;
          transition: .3s;
          border-radius: 50%;
        }

        input:checked + .slider {
          background-color: var(--accent);
        }

        input:checked + .slider:before {
          transform: translateX(22px);
        }

        /* Color Picker & Select Elements */
        .settings__select, .settings__input {
          background: rgba(0, 0, 0, 0.3);
          border: 1px solid var(--border);
          color: var(--text);
          padding: 8px 14px;
          border-radius: 8px;
          font-size: 13px;
          outline: none;
          cursor: pointer;
        }

        .settings__select option {
          background: var(--bg);
          color: var(--text);
        }

        .settings__color-options {
          display: flex;
          gap: 10px;
        }

        .color-dot {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          cursor: pointer;
          border: 2px solid transparent;
          transition: transform 0.2s, border-color 0.2s;
        }

        .color-dot:hover {
          transform: scale(1.15);
        }

        .color-dot--purple { background: #7c3aed; border-color: #fff; }
        .color-dot--blue { background: #0078d4; }
        .color-dot--green { background: #10b981; }
        .color-dot--red { background: #ef4444; }

        .settings__save-btn {
          align-self: flex-start;
          padding: 10px 20px;
          background: linear-gradient(135deg, var(--accent), var(--accent2));
          color: #fff;
          font-weight: 600;
          font-size: 13px;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          transition: opacity 0.2s;
        }

        .settings__save-btn:hover {
          opacity: 0.9;
        }

        @media (max-width: 600px) {
          .settings__content {
            padding: 80px 16px 24px 16px;
          }
          .settings__row {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
          }
        }