@w-iris/react 0.1.1

package/styles.css

@@ -0,0 +1,1953 @@
+.wi-button,
+.wi-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 1px solid transparent;
+  border-radius: var(--wi-radius-md);
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background var(--wi-motion-fast) ease,
+    border-color var(--wi-motion-fast) ease,
+    color var(--wi-motion-fast) ease,
+    opacity var(--wi-motion-fast) ease;
+}
+
+.wi-button:focus-visible,
+.wi-icon-button:focus-visible,
+.wi-input:focus-visible {
+  outline: 3px solid var(--wi-color-focus);
+  outline-offset: 2px;
+}
+
+.wi-button:disabled,
+.wi-icon-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.wi-button--sm {
+  min-height: 2.25rem;
+  padding: 0 0.75rem;
+  font-size: 0.875rem;
+}
+
+.wi-button--md {
+  min-height: 2.75rem;
+  padding: 0 1rem;
+  font-size: 0.95rem;
+}
+
+.wi-button--lg {
+  min-height: 3.25rem;
+  padding: 0 1.25rem;
+  font-size: 1rem;
+}
+
+.wi-button--primary {
+  background: var(--wi-color-primary);
+  border-color: var(--wi-color-primary);
+  color: #ffffff;
+}
+
+.wi-button--primary:hover:not(:disabled) {
+  background: var(--wi-color-primary-hover);
+  border-color: var(--wi-color-primary-hover);
+}
+
+.wi-button--secondary {
+  background: var(--wi-color-surface);
+  border-color: var(--wi-color-border);
+  color: var(--wi-color-text);
+}
+
+.wi-button--ghost {
+  background: transparent;
+  color: var(--wi-color-primary);
+}
+
+.wi-button--ghost:hover:not(:disabled),
+.wi-icon-button:hover:not(:disabled) {
+  background: rgba(37, 99, 235, 0.08);
+}
+
+.wi-button--danger {
+  background: var(--wi-color-danger);
+  border-color: var(--wi-color-danger);
+  color: #ffffff;
+}
+
+.wi-button__spinner {
+  width: 1rem;
+  height: 1rem;
+}
+
+.wi-icon-button {
+  width: 2.5rem;
+  height: 2.5rem;
+  background: transparent;
+  color: var(--wi-color-primary);
+}
+
+.wi-spinner {
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 999px;
+  animation: wi-spin 0.75s linear infinite;
+}
+
+.wi-spinner--sm {
+  width: 1rem;
+  height: 1rem;
+}
+
+.wi-spinner--lg {
+  width: 2rem;
+  height: 2rem;
+}
+
+@keyframes wi-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.wi-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.5rem;
+  padding: 0.25rem 0.6rem;
+  border-radius: var(--wi-radius-full);
+  border: 1px solid var(--wi-color-border);
+  background: var(--wi-color-surface);
+  color: var(--wi-color-muted);
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+
+.wi-badge--primary {
+  background: rgba(37, 99, 235, 0.1);
+  color: var(--wi-color-primary);
+}
+
+.wi-badge--success {
+  background: rgba(22, 163, 74, 0.1);
+  color: var(--wi-color-success);
+}
+
+.wi-badge--warning {
+  background: rgba(245, 158, 11, 0.12);
+  color: #92400e;
+}
+
+.wi-badge--danger {
+  background: rgba(220, 38, 38, 0.1);
+  color: var(--wi-color-danger);
+}
+
+.wi-card {
+  border: 0;
+  border-radius: var(--wi-radius-lg);
+  background: var(--wi-color-surface);
+  box-shadow: var(--wi-shadow-sm);
+}
+
+.wi-avatar {
+  display: inline-grid;
+  place-items: center;
+  overflow: hidden;
+  border-radius: var(--wi-radius-full);
+  background: rgba(37, 99, 235, 0.12);
+  color: var(--wi-color-primary);
+  font-weight: 500;
+}
+
+.wi-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.wi-avatar--sm {
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.75rem;
+}
+
+.wi-avatar--md {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.wi-avatar--lg {
+  width: 3.25rem;
+  height: 3.25rem;
+  font-size: 1.1rem;
+}
+
+.wi-field {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.wi-field__label {
+  color: var(--wi-color-text);
+  font-size: 0.88rem;
+  font-weight: 500;
+}
+
+.wi-input {
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0 0.85rem;
+  border: 1px solid var(--wi-color-border-strong);
+  border-radius: var(--wi-radius-md);
+  background: var(--wi-color-surface);
+  color: var(--wi-color-text);
+}
+
+.wi-input--error {
+  border-color: var(--wi-color-danger);
+}
+
+.wi-textarea {
+  min-height: 7rem;
+  padding-top: 0.75rem;
+  resize: vertical;
+}
+
+.wi-field__helper,
+.wi-field__error {
+  font-size: 0.82rem;
+}
+
+.wi-field__helper {
+  color: var(--wi-color-muted);
+}
+
+.wi-field__error {
+  color: var(--wi-color-danger);
+}
+
+.wi-empty-state {
+  display: grid;
+  place-items: center;
+  gap: 0.55rem;
+  min-height: 12rem;
+  padding: 1.5rem;
+  color: var(--wi-color-muted);
+  text-align: center;
+}
+
+.wi-empty-state strong {
+  color: var(--wi-color-text);
+  font-size: 1.05rem;
+}
+
+.wi-empty-state p {
+  margin: 0;
+}
+
+.wi-empty-state__icon {
+  display: grid;
+  place-items: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--wi-radius-full);
+  background: rgba(37, 99, 235, 0.1);
+  color: var(--wi-color-primary);
+}
+
+.wi-app-shell {
+  min-height: 100vh;
+  background: var(--wi-color-page);
+}
+
+.wi-app-shell__sidebar {
+  position: fixed;
+  z-index: 996;
+  top: 7rem;
+  left: 2rem;
+  width: 300px;
+  height: calc(100vh - 9rem);
+  overflow-y: auto;
+  border: 0;
+  border-radius: var(--wi-radius-lg);
+  background: var(--wi-color-surface);
+  box-shadow: var(--wi-shadow-sm);
+}
+
+.wi-app-shell__workspace {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.wi-app-shell__topbar {
+  position: fixed;
+  z-index: 997;
+  inset: 0 0 auto 0;
+  height: 5rem;
+  border-bottom: 0;
+  background: var(--wi-color-surface);
+  box-shadow: var(--wi-shadow-sm);
+}
+
+.wi-app-shell__main {
+  min-width: 0;
+  flex: 1;
+  padding: 7rem 2rem 2rem 22rem;
+}
+
+.wi-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 0.5rem 1.5rem 1.5rem;
+}
+
+.wi-sidebar__brand {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 4rem;
+  color: var(--wi-color-heading);
+  font-size: 1.4rem;
+  font-weight: 500;
+}
+
+.wi-sidebar__brand::before {
+  content: "";
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.65rem;
+  background:
+    linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(34, 197, 94, 0.85)),
+    var(--wi-color-primary);
+  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.22);
+}
+
+.wi-sidebar__items {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.wi-sidebar__item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  min-height: 2.85rem;
+  padding: 0 1rem;
+  border: 0;
+  border-radius: var(--wi-radius-md);
+  background: transparent;
+  color: var(--wi-color-text);
+  font-weight: 400;
+  text-align: left;
+  cursor: pointer;
+}
+
+.wi-sidebar__item:hover,
+.wi-sidebar__item.is-active {
+  background: #f6f9ff;
+  color: var(--wi-color-primary);
+}
+
+.wi-sidebar__item.is-active {
+  font-weight: 500;
+}
+
+.wi-topbar {
+  min-height: 5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0 2rem;
+}
+
+.wi-topbar__title {
+  min-width: 0;
+  flex: 1;
+  color: var(--wi-color-heading);
+  font-size: 1.35rem;
+  font-weight: 500;
+}
+
+.wi-topbar__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.wi-page-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  margin: 0 0 1.5rem;
+}
+
+.wi-page-header__eyebrow {
+  margin-bottom: 0.35rem;
+  color: var(--wi-color-primary);
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.wi-page-header h1 {
+  margin: 0;
+  color: var(--wi-color-heading);
+  font-size: 1.75rem;
+  line-height: 1.1;
+  font-weight: 500;
+}
+
+.wi-page-header p {
+  max-width: 44rem;
+  margin: 0.5rem 0 0;
+  color: var(--wi-color-muted);
+  line-height: 1.55;
+}
+
+.wi-page-header__actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.wi-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  background: rgba(15, 23, 42, 0.45);
+}
+
+.wi-dialog {
+  width: min(100%, 36rem);
+  border-radius: var(--wi-radius-lg);
+  background: var(--wi-color-surface);
+  box-shadow: var(--wi-shadow-md);
+}
+
+.wi-dialog__header,
+.wi-dialog__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem;
+  border-bottom: 1px solid var(--wi-color-border);
+}
+
+.wi-dialog__footer {
+  justify-content: flex-end;
+  border-top: 1px solid var(--wi-color-border);
+  border-bottom: 0;
+}
+
+.wi-dialog__header h2 {
+  margin: 0;
+  font-size: 1.15rem;
+}
+
+.wi-dialog__body {
+  padding: 1rem;
+}
+
+.wi-dialog__description {
+  margin: 0;
+  color: var(--wi-color-muted);
+  line-height: 1.55;
+}
+
+.wi-loading-state {
+  display: grid;
+  gap: 0.75rem;
+  padding: 1rem;
+}
+
+.wi-loading-state span {
+  color: var(--wi-color-muted);
+  font-weight: 500;
+}
+
+.wi-data-toolbar,
+.wi-filter-bar,
+.wi-bulk-action-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.85rem;
+  border: 1px solid #edf0f4;
+  border-radius: var(--wi-radius-lg);
+  background: var(--wi-color-surface);
+}
+
+.wi-data-toolbar {
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.wi-data-toolbar__search {
+  width: min(100%, 22rem);
+}
+
+.wi-data-toolbar__search .p-inputtext,
+.wi-data-toolbar__search {
+  min-width: 0;
+}
+
+.wi-data-toolbar__actions,
+.wi-row-actions,
+.wi-bulk-action-bar > div {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.wi-filter-bar {
+  flex-wrap: wrap;
+  margin-bottom: 0.75rem;
+}
+
+.wi-row-actions__button {
+  width: 2.25rem;
+  height: 2.25rem;
+  display: inline-grid;
+  place-items: center;
+  border: 0;
+  border-radius: var(--wi-radius-full);
+  background: transparent;
+  color: var(--wi-color-primary);
+  cursor: pointer;
+}
+
+.wi-row-actions__button:hover {
+  background: rgba(37, 99, 235, 0.08);
+}
+
+.wi-row-actions__button.is-danger {
+  color: var(--wi-color-danger);
+}
+
+.wi-bulk-action-bar {
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+  border-color: rgba(37, 99, 235, 0.24);
+  background: rgba(37, 99, 235, 0.06);
+}
+
+.wi-form-section {
+  display: grid;
+  grid-template-columns: minmax(12rem, 0.35fr) minmax(0, 1fr);
+  gap: 1rem;
+  padding: 1rem 0;
+  border-bottom: 1px solid var(--wi-color-border);
+}
+
+.wi-form-section h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.wi-form-section p {
+  margin: 0.35rem 0 0;
+  color: var(--wi-color-muted);
+  line-height: 1.5;
+}
+
+.wi-form-section__body,
+.wi-auth-form {
+  display: grid;
+  gap: 0.9rem;
+}
+
+.wi-auth-form {
+  width: min(100%, 28rem);
+}
+
+.wi-auth-form h2 {
+  margin: 0;
+}
+
+.wi-audit-log {
+  display: grid;
+  gap: 0.6rem;
+}
+
+.wi-audit-log__item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  gap: 0.75rem;
+  align-items: center;
+  padding: 0.75rem;
+  border: 1px solid var(--wi-color-border);
+  border-radius: var(--wi-radius-md);
+  background: var(--wi-color-surface);
+}
+
+.wi-audit-log__item span,
+.wi-audit-log__item time {
+  color: var(--wi-color-muted);
+  font-size: 0.9rem;
+}
+
+.wi-stat-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 0.35rem 1rem;
+  padding: 1.25rem;
+}
+
+.wi-stat-card__icon {
+  grid-row: span 2;
+  width: 3rem;
+  height: 3rem;
+  display: grid;
+  place-items: center;
+  border-radius: var(--wi-radius-md);
+  background: rgba(37, 99, 235, 0.1);
+  color: var(--wi-color-primary);
+}
+
+.wi-stat-card span {
+  color: var(--wi-color-muted);
+  font-size: 0.95rem;
+  font-weight: 400;
+}
+
+.wi-stat-card strong {
+  color: var(--wi-color-heading);
+  font-size: 1.85rem;
+  font-weight: 500;
+}
+
+.wi-mixi-shell {
+  min-height: 100vh;
+  background: var(--wi-color-page);
+  color: var(--wi-color-text);
+}
+
+.wi-mixi-topbar {
+  position: fixed;
+  z-index: 997;
+  inset: 0 0 auto 0;
+  height: 5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0 2rem;
+  background: var(--wi-color-surface);
+  box-shadow: var(--wi-shadow-sm);
+}
+
+.wi-mixi-icon-button,
+.wi-mixi-menu-button {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border: 0;
+  border-radius: var(--wi-radius-full);
+  background: transparent;
+  color: var(--wi-color-text);
+  cursor: pointer;
+}
+
+.wi-mixi-icon-button:hover,
+.wi-mixi-menu-button:hover {
+  background: var(--wi-color-surface-muted);
+  color: var(--wi-color-primary);
+}
+
+.wi-mixi-icon-button .wi-badge {
+  position: absolute;
+  top: 0.1rem;
+  right: -0.15rem;
+  min-height: 1.15rem;
+  padding: 0.1rem 0.35rem;
+  font-size: 0.68rem;
+}
+
+.wi-mixi-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.7rem;
+  min-width: max-content;
+  color: var(--wi-color-heading);
+  font-size: 1.25rem;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.wi-mixi-brand-mark {
+  display: inline-grid;
+  place-items: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.65rem;
+  background: var(--wi-color-heading);
+  color: #ffffff;
+  font-size: 1rem;
+}
+
+.wi-mixi-breadcrumb {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: var(--wi-color-muted);
+  font-size: 0.92rem;
+  white-space: nowrap;
+}
+
+.wi-mixi-breadcrumb a:hover {
+  color: var(--wi-color-primary);
+}
+
+.wi-mixi-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.wi-mixi-breadcrumb__item i {
+  color: var(--wi-color-border-strong);
+  font-size: 0.75rem;
+}
+
+.wi-mixi-breadcrumb__item span {
+  color: var(--wi-color-heading);
+  font-weight: 500;
+}
+
+.wi-mixi-topbar__spacer {
+  flex: 1;
+}
+
+.wi-mixi-topbar__title {
+  max-width: 24rem;
+  overflow: hidden;
+  color: var(--wi-color-heading);
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wi-mixi-topbar__actions,
+.wi-mixi-user {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.wi-mixi-sidebar {
+  position: fixed;
+  z-index: 996;
+  top: 7rem;
+  left: 2rem;
+  width: 300px;
+  height: calc(100vh - 9rem);
+  overflow-y: auto;
+  padding: 1rem 0;
+  border-radius: var(--wi-radius-lg);
+  background: var(--wi-color-surface);
+  box-shadow: var(--wi-shadow-sm);
+  transition:
+    transform var(--wi-motion-normal) ease,
+    width var(--wi-motion-normal) ease;
+}
+
+.wi-mixi-menu-section {
+  padding: 0 1.5rem 0.85rem;
+  color: var(--wi-color-muted);
+  font-size: 0.76rem;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.wi-mixi-menu,
+.wi-mixi-submenu {
+  display: grid;
+  gap: 0.15rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.wi-mixi-submenu {
+  padding: 0.2rem 0 0.35rem;
+}
+
+.wi-mixi-menu-link {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  min-height: 2.85rem;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--wi-color-text);
+  font: inherit;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+}
+
+.wi-mixi-menu-link:hover,
+.wi-mixi-menu-item.is-active > .wi-mixi-menu-link {
+  background: #f6f9ff;
+  color: var(--wi-color-primary);
+}
+
+.wi-mixi-menu-link i:first-child {
+  width: 1.25rem;
+  text-align: center;
+}
+
+.wi-mixi-menu-link span {
+  min-width: 0;
+  flex: 1;
+}
+
+.wi-mixi-menu-caret {
+  margin-left: auto;
+  transition: transform var(--wi-motion-fast) ease;
+}
+
+.wi-mixi-menu-caret.is-open {
+  transform: rotate(180deg);
+}
+
+.wi-mixi-menu-badge {
+  flex: 0 0 auto;
+}
+
+.wi-mixi-main {
+  min-width: 0;
+  padding: 7rem 2rem 5rem 22rem;
+}
+
+.wi-mixi-footer {
+  position: fixed;
+  right: 2rem;
+  bottom: 1rem;
+  left: 22rem;
+  color: var(--wi-color-muted);
+  font-size: 0.9rem;
+}
+
+.wi-mixi-mask {
+  display: none;
+}
+
+.wi-mixi-shell.is-collapsed .wi-mixi-sidebar {
+  width: 5rem;
+}
+
+.wi-mixi-shell.is-collapsed .wi-mixi-main {
+  padding-left: 9rem;
+}
+
+.wi-mixi-shell.is-collapsed .wi-mixi-footer {
+  left: 9rem;
+}
+
+.wi-mixi-shell.is-collapsed .wi-mixi-menu-section,
+.wi-mixi-shell.is-collapsed .wi-mixi-menu-link span,
+.wi-mixi-shell.is-collapsed .wi-mixi-menu-caret {
+  display: none;
+}
+
+.wi-admin-auth-page {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 2rem;
+  background: var(--wi-color-page);
+}
+
+.wi-admin-auth-stack {
+  width: min(100%, 44rem);
+  display: grid;
+  justify-items: center;
+  gap: 1.25rem;
+}
+
+.wi-admin-auth-logo,
+.wi-admin-auth-logo-mark {
+  display: grid;
+  place-items: center;
+}
+
+.wi-admin-auth-logo-mark {
+  width: 6rem;
+  height: 2.5rem;
+  border-radius: 0;
+  background: transparent;
+  color: #ffffff;
+  font-size: 0;
+  font-weight: 500;
+}
+
+.wi-admin-auth-logo-mark::before {
+  content: "";
+  color: var(--wi-color-heading);
+  font-size: 1.5rem;
+  letter-spacing: 0.08em;
+}
+
+.wi-admin-auth-card {
+  width: 100%;
+  padding: 0.3rem;
+  border-radius: 56px;
+  background: linear-gradient(180deg, var(--wi-color-primary) 10%, rgba(16, 185, 129, 0) 30%);
+}
+
+.wi-admin-auth-card__inner {
+  overflow: hidden;
+  border-radius: 53px;
+  background: var(--wi-color-surface);
+  box-shadow: none;
+}
+
+.wi-admin-auth-card__heading {
+  padding: 4rem 2rem 2rem;
+  text-align: center;
+}
+
+.wi-admin-auth-card__icon {
+  width: 3.125rem;
+  height: 3.125rem;
+  display: inline-grid;
+  place-items: center;
+  margin-bottom: 1rem;
+  color: var(--wi-color-primary);
+  font-size: 3rem;
+}
+
+.wi-sakai-mark {
+  position: relative;
+  width: 3.125rem;
+  height: 3.125rem;
+  display: inline-block;
+  border: 0.25rem solid currentColor;
+  border-top-color: transparent;
+  border-radius: 999px;
+}
+
+.wi-sakai-mark::before,
+.wi-sakai-mark::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 0.78rem;
+  transform: translateX(-50%);
+  border-radius: 999px;
+}
+
+.wi-sakai-mark::before {
+  width: 4.4rem;
+  height: 1.1rem;
+  border-top: 0.25rem solid currentColor;
+}
+
+.wi-sakai-mark::after {
+  width: 1.35rem;
+  height: 1.35rem;
+  border: 0.25rem solid currentColor;
+  background: var(--wi-color-surface);
+}
+
+.wi-admin-auth-card h1 {
+  margin: 0 0 1rem;
+  color: #0f172a;
+  font-size: 2.5rem;
+  line-height: 1.16;
+  font-weight: 400;
+}
+
+.wi-admin-auth-card p {
+  margin: 0;
+  color: var(--wi-color-muted);
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1.45;
+}
+
+.wi-admin-auth-form {
+  display: grid;
+  gap: 0.65rem;
+  width: min(100% - 4rem, 30rem);
+  margin: 0 auto;
+  padding: 0 0 4rem;
+  background: var(--wi-color-surface);
+}
+
+.wi-admin-auth-form label,
+.wi-admin-security-card label {
+  color: var(--wi-color-heading);
+  font-size: 1.25rem;
+  line-height: 1.35;
+  font-weight: 500;
+}
+
+.wi-admin-auth-form .p-inputtext,
+.wi-admin-auth-form .p-password,
+.wi-admin-auth-form .p-password .p-inputwrapper,
+.wi-admin-auth-form .p-password input,
+.wi-admin-auth-form .wi-button,
+.wi-admin-security-card .p-inputtext,
+.wi-admin-security-card .p-password,
+.wi-admin-security-card .p-password .p-inputwrapper,
+.wi-admin-security-card .p-password input,
+.wi-admin-security-card .wi-button {
+  width: 100%;
+}
+
+.wi-admin-auth-form .p-password,
+.wi-admin-security-card .p-password {
+  display: block;
+}
+
+.wi-admin-auth-form .p-inputtext {
+  padding: 1rem;
+}
+
+.wi-admin-auth-form__row,
+.wi-admin-auth-check {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.wi-admin-auth-form__row {
+  justify-content: space-between;
+  margin: 0.5rem 0 2rem;
+}
+
+.wi-admin-auth-form a,
+.wi-admin-link-button {
+  color: var(--wi-color-primary);
+  font-weight: 500;
+}
+
+.wi-admin-auth-form > label {
+  margin: 0.55rem 0 0;
+}
+
+.wi-admin-auth-form > .p-inputtext,
+.wi-admin-auth-form > .p-password {
+  margin-bottom: 1rem;
+}
+
+.wi-admin-auth-form > .wi-button {
+  margin-top: 0.75rem;
+  min-height: 3.6rem;
+  padding: 1rem;
+  font-size: 1.25rem;
+  font-weight: 500;
+}
+
+.wi-admin-link-button {
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.wi-admin-auth-form__mfa {
+  text-align: center;
+  font-size: 1.5rem;
+  letter-spacing: 0.2rem;
+}
+
+.wi-admin-auth-form__footer {
+  margin-top: 0.9rem;
+  font-size: 1rem;
+  line-height: 1.45;
+  text-align: center;
+}
+
+.wi-admin-auth-form__footer a {
+  display: inline-block;
+  margin-left: 0.25rem;
+}
+
+.wi-admin-logout-view {
+  display: grid;
+  justify-items: center;
+  gap: 1rem;
+  width: min(100% - 4rem, 30rem);
+  margin: 0 auto;
+  padding: 0 0 4rem;
+  color: var(--wi-color-muted);
+  font-weight: 500;
+}
+
+.wi-admin-avatar-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.wi-admin-avatar-status {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 0.75rem;
+  height: 0.75rem;
+  border: 2px solid var(--wi-color-surface);
+  border-radius: var(--wi-radius-full);
+  background: var(--wi-color-success);
+}
+
+.wi-admin-user-info {
+  display: flex;
+  min-width: 0;
+}
+
+.wi-admin-user-info--vertical {
+  flex-direction: column;
+}
+
+.wi-admin-user-info--horizontal {
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.wi-admin-user-info__name {
+  overflow: hidden;
+  color: var(--wi-color-heading);
+  font-size: 0.9rem;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wi-admin-user-info__meta {
+  color: var(--wi-color-muted);
+  font-size: 0.78rem;
+}
+
+.wi-admin-user-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.65rem;
+  min-height: 3rem;
+  padding: 0.25rem 0.5rem;
+  border: 0;
+  border-radius: var(--wi-radius-full);
+  background: transparent;
+  cursor: pointer;
+}
+
+.wi-admin-user-button:hover {
+  background: var(--wi-color-surface-muted);
+}
+
+.wi-admin-user-button__arrow {
+  color: var(--wi-color-muted);
+  font-size: 0.8rem;
+}
+
+.wi-admin-user-panel .p-overlaypanel-content {
+  padding: 0;
+}
+
+.wi-admin-user-panel__header {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  min-width: 18rem;
+  padding: 1rem;
+}
+
+.wi-admin-user-panel__header div {
+  display: grid;
+  gap: 0.2rem;
+}
+
+.wi-admin-user-panel__header span,
+.wi-admin-user-panel__header small {
+  color: var(--wi-color-muted);
+}
+
+.wi-admin-user-panel__items,
+.wi-admin-user-panel__footer {
+  display: grid;
+  padding: 0.5rem;
+  border-top: 1px solid var(--wi-color-border);
+}
+
+.wi-admin-user-panel__item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 2.75rem;
+  padding: 0 0.75rem;
+  border: 0;
+  border-radius: var(--wi-radius-md);
+  background: transparent;
+  color: var(--wi-color-text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.wi-admin-user-panel__item:hover {
+  background: var(--wi-color-surface-muted);
+  color: var(--wi-color-primary);
+}
+
+.wi-admin-user-panel__item.is-danger {
+  color: var(--wi-color-danger);
+}
+
+.wi-admin-user-panel__item span {
+  flex: 1;
+}
+
+.wi-admin-header {
+  height: 5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0 2rem;
+  background: var(--wi-color-surface);
+  box-shadow: var(--wi-shadow-sm);
+}
+
+.wi-admin-header__icon {
+  display: inline-grid;
+  place-items: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border: 0;
+  border-radius: var(--wi-radius-full);
+  background: transparent;
+  color: var(--wi-color-text);
+  cursor: pointer;
+}
+
+.wi-admin-header__icon:hover {
+  background: var(--wi-color-surface-muted);
+  color: var(--wi-color-primary);
+}
+
+.wi-admin-header__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.7rem;
+  color: var(--wi-color-heading);
+  font-size: 1.25rem;
+  font-weight: 500;
+}
+
+.wi-admin-header__mark {
+  display: inline-grid;
+  place-items: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.65rem;
+  background: var(--wi-color-heading);
+  color: #ffffff;
+}
+
+.wi-admin-header__breadcrumb,
+.wi-admin-header__breadcrumb span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.wi-admin-header__breadcrumb {
+  color: var(--wi-color-muted);
+  font-size: 0.92rem;
+}
+
+.wi-admin-header__breadcrumb i {
+  color: var(--wi-color-border-strong);
+  font-size: 0.75rem;
+}
+
+.wi-admin-header__spacer {
+  flex: 1;
+}
+
+.wi-admin-header__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.wi-admin-left-menu {
+  width: 300px;
+  max-height: calc(100vh - 9rem);
+  overflow-y: auto;
+  padding: 1rem 0;
+  border-radius: var(--wi-radius-lg);
+  background: var(--wi-color-surface);
+  box-shadow: var(--wi-shadow-sm);
+}
+
+.wi-admin-left-menu__title {
+  padding: 0 1.5rem 0.85rem;
+  color: var(--wi-color-muted);
+  font-size: 0.76rem;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.wi-admin-left-menu ul {
+  display: grid;
+  gap: 0.15rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.wi-admin-left-menu ul ul {
+  padding-bottom: 0.35rem;
+}
+
+.wi-admin-left-menu a {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 2.85rem;
+  padding: 0 1rem;
+  color: var(--wi-color-text);
+  font-weight: 500;
+}
+
+.wi-admin-left-menu ul ul a {
+  padding-left: 2.25rem;
+}
+
+.wi-admin-left-menu a:hover,
+.wi-admin-left-menu li.is-active > a {
+  background: #f6f9ff;
+  color: var(--wi-color-primary);
+}
+
+.wi-admin-left-menu a span {
+  flex: 1;
+}
+
+.wi-admin-profile-card,
+.wi-admin-security-card {
+  border-radius: var(--wi-radius-lg);
+  background: var(--wi-color-surface);
+  box-shadow: var(--wi-shadow-sm);
+}
+
+.wi-admin-profile-card {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 1.5rem;
+}
+
+.wi-admin-profile-card .wi-avatar--lg {
+  width: 8rem;
+  height: 8rem;
+  font-size: 3rem;
+}
+
+.wi-admin-profile-card__body {
+  min-width: 0;
+  flex: 1;
+}
+
+.wi-admin-profile-card h2 {
+  margin: 0;
+  color: var(--wi-color-heading);
+  font-size: 1.8rem;
+}
+
+.wi-admin-profile-card p,
+.wi-admin-profile-card__completion span {
+  color: var(--wi-color-muted);
+}
+
+.wi-admin-profile-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+.wi-admin-profile-card__tags span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.35rem 0.65rem;
+  border-radius: var(--wi-radius-full);
+  background: rgba(37, 99, 235, 0.1);
+  color: var(--wi-color-primary);
+  font-weight: 500;
+}
+
+.wi-admin-profile-card__completion {
+  width: min(100%, 22rem);
+  margin-top: 1rem;
+}
+
+.wi-admin-profile-card__completion div {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.35rem;
+}
+
+.wi-admin-profile-card__completion progress {
+  width: 100%;
+  height: 0.75rem;
+}
+
+.wi-admin-security-card {
+  display: grid;
+  gap: 0.85rem;
+  padding: 1.25rem;
+}
+
+.wi-admin-security-card h2 {
+  margin: 0;
+  color: var(--wi-color-heading);
+}
+
+.wi-prime-scope .p-component,
+.wi-admin-auth-page .p-component,
+.wi-mixi-shell .p-component {
+  font-family: var(--wi-font-sans);
+}
+
+.wi-prime-scope .p-datatable .p-datatable-thead > tr > th,
+.wi-mixi-shell .p-datatable .p-datatable-thead > tr > th {
+  background: #f8f9fa;
+  color: var(--wi-color-heading);
+  font-weight: 500;
+}
+
+.wi-prime-scope .p-datatable .p-datatable-tbody > tr > td,
+.wi-prime-scope .p-datatable .p-datatable-thead > tr > th,
+.wi-mixi-shell .p-datatable .p-datatable-tbody > tr > td,
+.wi-mixi-shell .p-datatable .p-datatable-thead > tr > th {
+  padding: 1rem;
+}
+
+.wi-prime-scope .p-inputtext,
+.wi-prime-scope .p-dropdown,
+.wi-prime-scope .p-multiselect,
+.wi-prime-scope .p-calendar .p-inputtext,
+.wi-prime-scope .p-inputnumber .p-inputtext,
+.wi-admin-auth-page .p-inputtext,
+.wi-admin-auth-page .p-password,
+.wi-admin-security-card .p-inputtext,
+.wi-admin-security-card .p-password,
+.wi-data-toolbar .p-inputtext,
+.wi-filter-bar .p-inputtext,
+.wi-filter-bar .p-dropdown {
+  border-color: var(--wi-color-border);
+  border-radius: var(--wi-radius-md);
+}
+
+.wi-prime-scope .p-button,
+.wi-mixi-shell .p-button,
+.wi-admin-auth-page .p-button,
+.wi-admin-security-card .p-button {
+  border-radius: var(--wi-radius-md);
+}
+
+@media (max-width: 820px) {
+  .wi-app-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .wi-app-shell__sidebar {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 6rem 1rem 0;
+  }
+
+  .wi-page-header {
+    flex-direction: column;
+  }
+
+  .wi-form-section {
+    grid-template-columns: 1fr;
+  }
+
+  .wi-app-shell__main {
+    padding: 1rem;
+  }
+
+  .wi-topbar {
+    padding: 0 1rem;
+  }
+
+  .wi-mixi-topbar {
+    gap: 0.5rem;
+    padding: 0 1rem;
+  }
+
+  .wi-mixi-brand span:last-child,
+  .wi-mixi-breadcrumb,
+  .wi-mixi-topbar__title {
+    display: none;
+  }
+
+  .wi-mixi-sidebar {
+    top: 5.75rem;
+    left: 1rem;
+    width: min(300px, calc(100vw - 2rem));
+    height: calc(100vh - 7rem);
+    transform: translateX(calc(-100% - 1.5rem));
+  }
+
+  .wi-mixi-shell.is-mobile-open .wi-mixi-sidebar {
+    transform: translateX(0);
+  }
+
+  .wi-mixi-main {
+    padding: 6rem 1rem 4rem;
+  }
+
+  .wi-mixi-footer {
+    position: static;
+    padding: 0 1rem 1rem;
+  }
+
+  .wi-mixi-shell.is-collapsed .wi-mixi-sidebar {
+    width: min(300px, calc(100vw - 2rem));
+  }
+
+  .wi-mixi-shell.is-collapsed .wi-mixi-main {
+    padding-left: 1rem;
+  }
+
+  .wi-mixi-shell.is-collapsed .wi-mixi-menu-section,
+  .wi-mixi-shell.is-collapsed .wi-mixi-menu-link span,
+  .wi-mixi-shell.is-collapsed .wi-mixi-menu-caret {
+    display: initial;
+  }
+
+  .wi-mixi-shell.is-mobile-open .wi-mixi-mask {
+    position: fixed;
+    z-index: 995;
+    inset: 0;
+    display: block;
+    border: 0;
+    background: rgba(15, 23, 42, 0.32);
+  }
+
+  .wi-admin-auth-card__heading {
+    padding: 2rem 1rem 1rem;
+  }
+
+  .wi-admin-auth-form {
+    width: min(100% - 2rem, 30rem);
+    padding: 0 0 2rem;
+  }
+
+  .wi-admin-header {
+    padding: 0 1rem;
+  }
+
+  .wi-admin-header__brand span:last-child,
+  .wi-admin-header__breadcrumb,
+  .wi-admin-user-info,
+  .wi-admin-user-button__arrow {
+    display: none;
+  }
+
+  .wi-admin-left-menu {
+    width: 100%;
+  }
+
+  .wi-admin-profile-card {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 640px) {
+  .wi-admin-auth-page {
+    place-items: center;
+    padding: 1rem;
+  }
+
+  .wi-admin-auth-stack {
+    width: 100%;
+    gap: 0.75rem;
+  }
+
+  .wi-admin-auth-card {
+    border-radius: 32px;
+    padding: 0.22rem;
+    background: linear-gradient(180deg, var(--wi-color-primary) 8%, rgba(16, 185, 129, 0) 28%);
+  }
+
+  .wi-admin-auth-card__inner {
+    border-radius: 29px;
+  }
+
+  .wi-admin-auth-card__heading {
+    padding: 2.5rem 1.25rem 1.5rem;
+  }
+
+  .wi-admin-auth-card__icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .wi-sakai-mark {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-width: 0.2rem;
+  }
+
+  .wi-sakai-mark::before {
+    width: 3.5rem;
+    height: 0.9rem;
+    border-top-width: 0.2rem;
+  }
+
+  .wi-sakai-mark::after {
+    width: 1.05rem;
+    height: 1.05rem;
+    border-width: 0.2rem;
+  }
+
+  .wi-admin-auth-card h1 {
+    font-size: 1.8rem;
+    line-height: 1.2;
+  }
+
+  .wi-admin-auth-card p {
+    font-size: 1rem;
+    line-height: 1.45;
+  }
+
+  .wi-admin-auth-form {
+    width: min(100% - 2rem, 30rem);
+    padding-bottom: 2rem;
+  }
+
+  .wi-admin-logout-view {
+    width: min(100% - 2rem, 30rem);
+    padding-bottom: 2rem;
+  }
+
+  .wi-admin-auth-form label,
+  .wi-admin-security-card label {
+    font-size: 1rem;
+  }
+
+  .wi-admin-auth-form > .p-inputtext,
+  .wi-admin-auth-form > .p-password {
+    margin-bottom: 0.85rem;
+  }
+
+  .wi-admin-auth-form__row {
+    align-items: flex-start;
+    gap: 0.75rem;
+    margin: 0.35rem 0 1.4rem;
+  }
+
+  .wi-admin-auth-form > .wi-button {
+    margin-top: 0.5rem;
+    min-height: 3.1rem;
+    font-size: 1.05rem;
+  }
+}
+
+@media (max-width: 420px) {
+  .wi-admin-auth-page {
+    padding: 0.75rem;
+  }
+
+  .wi-admin-auth-card {
+    border-radius: 24px;
+  }
+
+  .wi-admin-auth-card__inner {
+    border-radius: 21px;
+  }
+
+  .wi-admin-auth-card__heading {
+    padding: 2rem 1rem 1.25rem;
+  }
+
+  .wi-admin-auth-card h1 {
+    font-size: 1.45rem;
+  }
+
+  .wi-admin-auth-form {
+    width: min(100% - 1.5rem, 30rem);
+  }
+
+  .wi-admin-logout-view {
+    width: min(100% - 1.5rem, 30rem);
+  }
+
+.wi-admin-auth-form__row {
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 1024px) {
+  .wi-data-toolbar {
+    align-items: stretch;
+    flex-wrap: wrap;
+  }
+
+  .wi-data-toolbar__search {
+    flex: 1 1 18rem;
+    width: auto;
+  }
+
+  .wi-data-toolbar__actions {
+    flex: 1 1 auto;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
+
+  .wi-stat-card {
+    padding: 1rem;
+  }
+
+  .wi-stat-card strong {
+    font-size: 1.55rem;
+  }
+
+  .wi-dialog {
+    max-height: calc(100vh - 2rem);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .wi-dialog__body {
+    min-height: 0;
+    overflow: auto;
+  }
+}
+
+@media (max-width: 768px) {
+  .wi-card {
+    border-radius: 10px;
+  }
+
+  .wi-page-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .wi-page-header h1 {
+    font-size: 1.5rem;
+  }
+
+  .wi-page-header__actions {
+    flex-wrap: wrap;
+  }
+
+  .wi-page-header__actions > * {
+    flex: 1 1 auto;
+  }
+
+  .wi-button--lg {
+    min-height: 3rem;
+    padding-inline: 1rem;
+  }
+
+  .wi-data-toolbar,
+  .wi-filter-bar,
+  .wi-bulk-action-bar {
+    align-items: stretch;
+    flex-direction: column;
+    padding: 0.75rem;
+  }
+
+  .wi-data-toolbar__search,
+  .wi-data-toolbar__search .p-inputtext,
+  .wi-filter-bar > *,
+  .wi-bulk-action-bar > div {
+    width: 100%;
+  }
+
+  .wi-data-toolbar__actions,
+  .wi-row-actions,
+  .wi-bulk-action-bar > div {
+    flex-wrap: wrap;
+    justify-content: stretch;
+  }
+
+  .wi-data-toolbar__actions > *,
+  .wi-bulk-action-bar > div > * {
+    flex: 1 1 auto;
+  }
+
+  .wi-form-section {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+  }
+
+  .wi-audit-log__item {
+    grid-template-columns: 1fr;
+    gap: 0.35rem;
+  }
+
+  .wi-stat-card {
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+  }
+
+  .wi-stat-card__icon {
+    grid-row: span 2;
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  .wi-empty-state {
+    min-height: 10rem;
+    padding: 1rem;
+  }
+
+  .wi-dialog-backdrop {
+    align-items: end;
+    padding: 0;
+  }
+
+  .wi-dialog {
+    width: 100%;
+    max-height: 92vh;
+    border-radius: 16px 16px 0 0;
+  }
+
+  .wi-dialog__header,
+  .wi-dialog__footer {
+    padding: 0.85rem;
+  }
+
+  .wi-dialog__footer {
+    align-items: stretch;
+    flex-direction: column-reverse;
+  }
+
+  .wi-dialog__footer > * {
+    width: 100%;
+  }
+
+  .wi-prime-scope .p-datatable,
+  .wi-mixi-shell .p-datatable {
+    font-size: 0.92rem;
+  }
+}
+
+@media (max-width: 560px) {
+  .wi-topbar {
+    min-height: 4.25rem;
+    padding-inline: 0.75rem;
+  }
+
+  .wi-topbar__title {
+    font-size: 1.05rem;
+  }
+
+  .wi-topbar__actions {
+    gap: 0.35rem;
+  }
+
+  .wi-icon-button,
+  .wi-mixi-icon-button,
+  .wi-mixi-menu-button,
+  .wi-admin-header__icon {
+    width: 2.35rem;
+    height: 2.35rem;
+  }
+
+  .wi-button {
+    min-width: 0;
+    white-space: normal;
+  }
+
+  .wi-button--md,
+  .wi-button--lg {
+    width: 100%;
+  }
+
+  .wi-badge {
+    max-width: 100%;
+    justify-content: center;
+    white-space: normal;
+  }
+
+  .wi-page-header h1 {
+    font-size: 1.35rem;
+  }
+
+  .wi-page-header p {
+    font-size: 0.95rem;
+  }
+
+  .wi-row-actions {
+    gap: 0.25rem;
+  }
+
+  .wi-row-actions__button {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .wi-auth-form {
+    width: 100%;
+  }
+
+  .wi-input,
+  .wi-textarea {
+    font-size: 1rem;
+  }
+
+  .wi-stat-card strong {
+    font-size: 1.35rem;
+  }
+
+  .wi-mixi-topbar__actions .wi-mixi-icon-button:not(.wi-mixi-menu-button):first-child {
+    display: none;
+  }
+}
+
+@media (max-width: 380px) {
+  .wi-mixi-brand span:last-child,
+  .wi-topbar__title {
+    display: none;
+  }
+
+  .wi-page-header__actions,
+  .wi-data-toolbar__actions {
+    flex-direction: column;
+  }
+
+  .wi-stat-card {
+    grid-template-columns: 1fr;
+  }
+
+  .wi-stat-card__icon {
+    grid-row: auto;
+  }
+}