diff --git a/digital-avatar-app/backend/routers/authorizations.py b/digital-avatar-app/backend/routers/authorizations.py
index c110b4d..75c8c8b 100644
--- a/digital-avatar-app/backend/routers/authorizations.py
+++ b/digital-avatar-app/backend/routers/authorizations.py
@@ -1,32 +1,237 @@
-from fastapi import APIRouter, Depends, Body
+from fastapi import APIRouter, Body, Depends, Header, HTTPException
 from sqlalchemy.orm import Session
 
 from database import get_db
 from models import Authorization
-from responses import ok, fail
+from responses import fail, ok
+from routers.avatars import _require_owned_avatar
 
 router = APIRouter(tags=["授权"])
 
+TARGET_TYPES = {"user", "organization", "application"}
+PERMISSION_ORDER = ("friend", "chat", "publish", "browse", "interact", "takeover")
+ALLOWED_PERMISSIONS = set(PERMISSION_ORDER)
+LEGACY_PERMISSION_MAP = {
+    "read": "browse",
+    "reply": "chat",
+    "write": "publish",
+    "edit": "publish",
+}
+
+
+def _read(payload: dict, camel_key: str, snake_key: str | None = None, default=None):
+    if camel_key in payload:
+        return payload[camel_key]
+    if snake_key and snake_key in payload:
+        return payload[snake_key]
+    return default
+
+
+def _clean_text(value, field_name: str, *, max_length: int) -> str:
+    text = str(value or "").strip()
+    if not text:
+        raise ValueError(f"{field_name}不能为空")
+    if len(text) > max_length:
+        raise ValueError(f"{field_name}不能超过 {max_length} 个字符")
+    return text
+
+
+def _normalize_permissions(value) -> list[str]:
+    if not isinstance(value, list):
+        raise ValueError("权限格式不正确")
+
+    normalized = []
+    for raw in value:
+        permission = LEGACY_PERMISSION_MAP.get(str(raw).strip(), str(raw).strip())
+        if permission not in ALLOWED_PERMISSIONS:
+            raise ValueError(f"不支持的权限：{raw}")
+        if permission not in normalized:
+            normalized.append(permission)
+
+    if not [item for item in normalized if item != "takeover"]:
+        raise ValueError("请至少选择一项权限")
+    return sorted(normalized, key=PERMISSION_ORDER.index)
+
+
+def _require_authorization(db: Session, avatar_id: str, authorization_id: str) -> Authorization:
+    authorization = (
+        db.query(Authorization)
+        .filter(
+            Authorization.id == authorization_id,
+            Authorization.avatar_id == avatar_id,
+        )
+        .first()
+    )
+    if not authorization:
+        raise HTTPException(status_code=404, detail="授权不存在")
+    return authorization
+
+
+def _duplicate_target(
+    db: Session,
+    avatar_id: str,
+    target_type: str,
+    target_id: str,
+    *,
+    exclude_id: str | None = None,
+):
+    query = db.query(Authorization).filter(
+        Authorization.avatar_id == avatar_id,
+        Authorization.target_type == target_type,
+        Authorization.target_id == target_id,
+    )
+    if exclude_id:
+        query = query.filter(Authorization.id != exclude_id)
+    return query.first()
+
 
 @router.get("/avatar/{avatar_id}/authorizations")
-def list_auth(avatar_id: str, db: Session = Depends(get_db)):
-    # demo：返回全部授权（忽略具体 avatar 绑定，便于联调）
-    items = db.query(Authorization).order_by(Authorization.created_at.desc()).all()
-    return ok([a.to_dict() for a in items])
+def list_auth(
+    avatar_id: str,
+    authorization: str = Header(None),
+    db: Session = Depends(get_db),
+):
+    _require_owned_avatar(db, avatar_id, authorization)
+    items = (
+        db.query(Authorization)
+        .filter(Authorization.avatar_id == avatar_id)
+        .order_by(Authorization.created_at.desc())
+        .all()
+    )
+    return ok([item.to_dict() for item in items])
+
+
+@router.post("/avatar/{avatar_id}/authorizations")
+def create_auth(
+    avatar_id: str,
+    payload: dict = Body(...),
+    authorization: str = Header(None),
+    db: Session = Depends(get_db),
+):
+    _require_owned_avatar(db, avatar_id, authorization)
+    try:
+        target_type = _clean_text(
+            _read(payload, "targetType", "target_type", "user"),
+            "授权类型",
+            max_length=24,
+        )
+        if target_type not in TARGET_TYPES:
+            return fail("授权类型不正确", 400)
+        target_id = _clean_text(
+            _read(payload, "targetId", "target_id"),
+            "对象标识",
+            max_length=120,
+        )
+        target_name = _clean_text(
+            _read(payload, "targetName", "target_name"),
+            "对象名称",
+            max_length=50,
+        )
+        permissions = _normalize_permissions(payload.get("permissions", []))
+    except ValueError as exc:
+        return fail(str(exc), 400)
+
+    if _duplicate_target(db, avatar_id, target_type, target_id):
+        return fail("该对象已在授权列表中，可直接编辑现有授权", 409)
+
+    item = Authorization(
+        avatar_id=avatar_id,
+        target_type=target_type,
+        target_id=target_id,
+        target_name=target_name,
+        permissions=permissions,
+        status="active",
+        takeover_enabled=False,
+        takeover_mode="immediate",
+        takeover_delay_seconds=30,
+    )
+    db.add(item)
+    db.commit()
+    db.refresh(item)
+    return ok(item.to_dict(), "授权已添加")
 
 
 @router.put("/avatar/{avatar_id}/authorizations")
-def update_auth(avatar_id: str, payload: dict = Body(...), db: Session = Depends(get_db)):
-    auth_id = payload.get("id")
+def update_auth(
+    avatar_id: str,
+    payload: dict = Body(...),
+    authorization: str = Header(None),
+    db: Session = Depends(get_db),
+):
+    _require_owned_avatar(db, avatar_id, authorization)
+    auth_id = payload.get("id") or _read(payload, "authorizationId", "authorization_id")
     if not auth_id:
         return fail("缺少授权 id", 400)
-    a = db.query(Authorization).filter(Authorization.id == auth_id).first()
-    if not a:
-        return fail("授权不存在", 404)
+
+    item = _require_authorization(db, avatar_id, str(auth_id))
+    try:
+        target_type = item.target_type
+        target_id = item.target_id
+        if "targetType" in payload or "target_type" in payload:
+            target_type = _clean_text(
+                _read(payload, "targetType", "target_type"),
+                "授权类型",
+                max_length=24,
+            )
+            if target_type not in TARGET_TYPES:
+                return fail("授权类型不正确", 400)
+        if "targetId" in payload or "target_id" in payload:
+            target_id = _clean_text(
+                _read(payload, "targetId", "target_id"),
+                "对象标识",
+                max_length=120,
+            )
+        if "targetName" in payload or "target_name" in payload:
+            item.target_name = _clean_text(
+                _read(payload, "targetName", "target_name"),
+                "对象名称",
+                max_length=50,
+            )
+        if "permissions" in payload:
+            item.permissions = _normalize_permissions(payload["permissions"])
+    except ValueError as exc:
+        return fail(str(exc), 400)
+
+    if _duplicate_target(
+        db,
+        avatar_id,
+        target_type,
+        target_id,
+        exclude_id=item.id,
+    ):
+        return fail("该对象已在授权列表中", 409)
+
     if "status" in payload:
-        a.status = payload["status"]
-    if "permissions" in payload:
-        a.permissions = payload["permissions"]
+        status = str(payload["status"] or "")
+        if status not in ("active", "inactive"):
+            return fail("授权状态不正确", 400)
+        item.status = status
+
+    item.target_type = target_type
+    item.target_id = target_id
+
+    permissions = list(item.permissions or [])
+    chat_allowed = "chat" in permissions or "reply" in permissions
+    if item.status != "active" or item.target_type != "user" or not chat_allowed:
+        item.takeover_enabled = False
+        item.permissions = [permission for permission in permissions if permission != "takeover"]
+    elif item.takeover_enabled and "takeover" not in permissions:
+        item.permissions = permissions + ["takeover"]
+
     db.commit()
-    items = db.query(Authorization).order_by(Authorization.created_at.desc()).all()
-    return ok([x.to_dict() for x in items])
+    db.refresh(item)
+    return ok(item.to_dict(), "授权已更新")
+
+
+@router.delete("/avatar/{avatar_id}/authorizations/{authorization_id}")
+def delete_auth(
+    avatar_id: str,
+    authorization_id: str,
+    authorization: str = Header(None),
+    db: Session = Depends(get_db),
+):
+    _require_owned_avatar(db, avatar_id, authorization)
+    item = _require_authorization(db, avatar_id, authorization_id)
+    db.delete(item)
+    db.commit()
+    return ok({"id": authorization_id}, "授权已删除")
diff --git a/digital-avatar-app/backend/routers/takeover.py b/digital-avatar-app/backend/routers/takeover.py
index 13bb302..9fc3095 100644
--- a/digital-avatar-app/backend/routers/takeover.py
+++ b/digital-avatar-app/backend/routers/takeover.py
@@ -1,41 +1,79 @@
-"""分身接管配置 API"""
-from fastapi import APIRouter, Depends, Body
+"""数字分身单聊接管配置 API。"""
+
+from fastapi import APIRouter, Body, Depends, Header
 from sqlalchemy.orm import Session
 
 from database import get_db
-from models import Authorization
-from responses import ok, fail
+from responses import fail, ok
+from routers.authorizations import _require_authorization
+from routers.avatars import _require_owned_avatar
 
 router = APIRouter(tags=["分身接管"])
 
 
+def _has(payload: dict, camel_key: str, snake_key: str) -> bool:
+    return camel_key in payload or snake_key in payload
+
+
+def _read(payload: dict, camel_key: str, snake_key: str, default=None):
+    if camel_key in payload:
+        return payload[camel_key]
+    if snake_key in payload:
+        return payload[snake_key]
+    return default
+
+
 @router.put("/avatar/{avatar_id}/authorizations/takeover")
 def update_takeover_config(
     avatar_id: str,
     payload: dict = Body(...),
+    authorization: str = Header(None),
     db: Session = Depends(get_db),
 ):
-    """更新分身接管配置"""
-    auth_id = payload.get("authorizationId") or payload.get("authorization_id")
+    _require_owned_avatar(db, avatar_id, authorization)
+    auth_id = _read(payload, "authorizationId", "authorization_id")
     if not auth_id:
         return fail("缺少 authorization_id", 400)
 
-    auth = db.query(Authorization).filter(Authorization.id == auth_id).first()
-    if not auth:
-        return fail("授权不存在", 404)
+    auth = _require_authorization(db, avatar_id, str(auth_id))
+    enabled = bool(auth.takeover_enabled)
+    mode = auth.takeover_mode or "immediate"
+    delay = auth.takeover_delay_seconds or 30
 
-    if "takeover_enabled" in payload:
-        auth.takeover_enabled = payload["takeover_enabled"]
-    if "takeover_mode" in payload:
-        mode = payload["takeover_mode"]
+    if _has(payload, "takeoverEnabled", "takeover_enabled"):
+        raw_enabled = _read(payload, "takeoverEnabled", "takeover_enabled")
+        if not isinstance(raw_enabled, bool):
+            return fail("takeover_enabled 必须是布尔值", 400)
+        enabled = raw_enabled
+
+    if _has(payload, "takeoverMode", "takeover_mode"):
+        mode = _read(payload, "takeoverMode", "takeover_mode")
         if mode not in ("immediate", "delayed"):
             return fail("takeover_mode 必须是 immediate 或 delayed", 400)
-        auth.takeover_mode = mode
-    if "takeover_delay_seconds" in payload:
-        delay = payload["takeover_delay_seconds"]
-        if not isinstance(delay, int) or delay < 5:
-            return fail("takeover_delay_seconds 必须 >= 5", 400)
-        auth.takeover_delay_seconds = delay
 
+    if _has(payload, "takeoverDelaySeconds", "takeover_delay_seconds"):
+        delay = _read(payload, "takeoverDelaySeconds", "takeover_delay_seconds")
+        if isinstance(delay, bool) or not isinstance(delay, int) or not 5 <= delay <= 3600:
+            return fail("延迟时间需在 5 到 3600 秒之间", 400)
+
+    if enabled and auth.target_type != "user":
+        return fail("本期仅支持对会会用户开启单聊接管", 400)
+    if enabled and auth.status != "active":
+        return fail("请先启用该授权，再开启聊天接管", 400)
+
+    permissions = list(auth.permissions or [])
+    if enabled:
+        if "chat" not in permissions and "reply" not in permissions:
+            permissions.append("chat")
+        if "takeover" not in permissions:
+            permissions.append("takeover")
+    else:
+        permissions = [permission for permission in permissions if permission != "takeover"]
+
+    auth.permissions = permissions
+    auth.takeover_enabled = enabled
+    auth.takeover_mode = mode
+    auth.takeover_delay_seconds = delay
     db.commit()
-    return ok(auth.to_dict())
+    db.refresh(auth)
+    return ok(auth.to_dict(), "接管配置已保存")
diff --git a/digital-avatar-app/backend/services/takeover_service.py b/digital-avatar-app/backend/services/takeover_service.py
index 4e543e4..c11c6e7 100644
--- a/digital-avatar-app/backend/services/takeover_service.py
+++ b/digital-avatar-app/backend/services/takeover_service.py
@@ -33,7 +33,11 @@ class TakeoverService:
         self, owner_huihui_id: str, from_user_id: str
     ) -> Optional[Authorization]:
         """Check whether takeover is enabled for the given target user."""
-        avatar = self.db.query(Avatar).filter(Avatar.owner_id == owner_huihui_id).first()
+        avatar = (
+            self.db.query(Avatar)
+            .filter(Avatar.owner_id == owner_huihui_id, Avatar.status == "active")
+            .first()
+        )
         if not avatar:
             return None
 
@@ -41,10 +45,13 @@ class TakeoverService:
             self.db.query(Authorization)
             .filter(Authorization.avatar_id == avatar.id)
             .filter(Authorization.target_id == from_user_id)
+            .filter(Authorization.target_type == "user")
+            .filter(Authorization.status == "active")
             .filter(Authorization.takeover_enabled == True)
             .first()
         )
-        return auth if auth and auth.takeover_enabled else None
+        permissions = set(auth.permissions or []) if auth else set()
+        return auth if auth and "takeover" in permissions else None
 
     async def generate_reply(self, avatar_id: str, message: str) -> str:
         """Call the avatar chat endpoint to generate a reply."""
@@ -170,5 +177,8 @@ class TakeoverService:
 
         if auth.takeover_mode == "immediate":
             await self.execute_takeover(auth, message)
+        elif not self.redis:
+            logger.warning("Redis not configured, executing delayed takeover immediately")
+            await self.execute_takeover(auth, message)
         else:
             self.enqueue_delayed_message(auth, message)
diff --git a/digital-avatar-app/backend/tests/conftest.py b/digital-avatar-app/backend/tests/conftest.py
index 13651bd..a3bd5a7 100644
--- a/digital-avatar-app/backend/tests/conftest.py
+++ b/digital-avatar-app/backend/tests/conftest.py
@@ -1,6 +1,8 @@
+import uuid
+
 import pytest
 from database import init_db, SessionLocal
-from models import Authorization
+from models import Authorization, Avatar, User
 
 
 @pytest.fixture(scope="session", autouse=True)
@@ -24,3 +26,72 @@ def setup_database():
             db.commit()
     finally:
         db.close()
+
+
+@pytest.fixture
+def authorization_context():
+    """Create isolated users, avatars, and one authorization for API tests."""
+    suffix = uuid.uuid4().hex
+    owner = User(
+        id=f"owner-{suffix}",
+        huihui_user_id=f"huihui-owner-{suffix}",
+        nickname="授权测试用户",
+        app_token=f"owner-token-{suffix}",
+    )
+    other = User(
+        id=f"other-{suffix}",
+        huihui_user_id=f"huihui-other-{suffix}",
+        nickname="其他用户",
+        app_token=f"other-token-{suffix}",
+    )
+    avatar = Avatar(
+        id=f"avatar-{suffix}",
+        owner_id=owner.huihui_user_id,
+        name="授权测试分身",
+        status="active",
+        config={},
+    )
+    other_avatar = Avatar(
+        id=f"other-avatar-{suffix}",
+        owner_id=other.huihui_user_id,
+        name="其他分身",
+        status="active",
+        config={},
+    )
+    authorization = Authorization(
+        id=f"authorization-{suffix}",
+        avatar_id=avatar.id,
+        target_type="user",
+        target_id=f"contact-{suffix}",
+        target_name="测试联系人",
+        permissions=["chat", "browse"],
+        status="active",
+    )
+
+    db = SessionLocal()
+    try:
+        db.add_all([owner, other, avatar, other_avatar, authorization])
+        db.commit()
+        yield {
+            "owner": owner,
+            "other": other,
+            "avatar": avatar,
+            "other_avatar": other_avatar,
+            "authorization": authorization,
+            "owner_headers": {"Authorization": f"Bearer {owner.app_token}"},
+            "other_headers": {"Authorization": f"Bearer {other.app_token}"},
+            "suffix": suffix,
+        }
+    finally:
+        db.rollback()
+        db.query(Authorization).filter(
+            Authorization.avatar_id.in_([avatar.id, other_avatar.id])
+        ).delete(synchronize_session=False)
+        db.query(Avatar).filter(Avatar.id.in_([avatar.id, other_avatar.id])).delete(
+            synchronize_session=False
+        )
+        db.query(User).filter(User.id.in_([owner.id, other.id])).delete(
+            synchronize_session=False
+        )
+        db.commit()
+        db.close()
diff --git a/digital-avatar-app/backend/tests/test_authorizations_api.py b/digital-avatar-app/backend/tests/test_authorizations_api.py
new file mode 100644
index 0000000..968839d
--- /dev/null
+++ b/digital-avatar-app/backend/tests/test_authorizations_api.py
@@ -0,0 +1,94 @@
+from fastapi.testclient import TestClient
+
+from main import app
+
+
+client = TestClient(app)
+
+
+def test_authorization_list_is_scoped_to_owned_avatar(authorization_context):
+    context = authorization_context
+    response = client.get(
+        f"/api/avatar/{context['avatar'].id}/authorizations",
+        headers=context["owner_headers"],
+    )
+    assert response.status_code == 200
+    payload = response.json()
+    assert payload["code"] == 200
+    assert [item["id"] for item in payload["data"]] == [context["authorization"].id]
+
+    forbidden = client.get(
+        f"/api/avatar/{context['other_avatar'].id}/authorizations",
+        headers=context["owner_headers"],
+    )
+    assert forbidden.status_code == 403
+
+
+def test_create_update_and_delete_authorization(authorization_context):
+    context = authorization_context
+    avatar_id = context["avatar"].id
+    target_id = f"new-contact-{context['suffix']}"
+    created = client.post(
+        f"/api/avatar/{avatar_id}/authorizations",
+        headers=context["owner_headers"],
+        json={
+            "targetType": "user",
+            "targetId": target_id,
+            "targetName": "新联系人",
+            "permissions": ["friend", "chat", "browse"],
+        },
+    ).json()
+    assert created["code"] == 200
+    authorization_id = created["data"]["id"]
+    assert created["data"]["permissions"] == ["friend", "chat", "browse"]
+
+    duplicate = client.post(
+        f"/api/avatar/{avatar_id}/authorizations",
+        headers=context["owner_headers"],
+        json={
+            "targetType": "user",
+            "targetId": target_id,
+            "targetName": "重复联系人",
+            "permissions": ["chat"],
+        },
+    ).json()
+    assert duplicate["code"] == 409
+
+    updated = client.put(
+        f"/api/avatar/{avatar_id}/authorizations",
+        headers=context["owner_headers"],
+        json={
+            "id": authorization_id,
+            "targetName": "联系人新名称",
+            "permissions": ["interact", "publish"],
+        },
+    ).json()
+    assert updated["code"] == 200
+    assert updated["data"]["targetName"] == "联系人新名称"
+    assert updated["data"]["permissions"] == ["publish", "interact"]
+
+    deleted = client.delete(
+        f"/api/avatar/{avatar_id}/authorizations/{authorization_id}",
+        headers=context["owner_headers"],
+    ).json()
+    assert deleted["code"] == 200
+    assert deleted["data"]["id"] == authorization_id
+
+
+def test_authorization_requires_login_and_rejects_unknown_permissions(authorization_context):
+    context = authorization_context
+    avatar_id = context["avatar"].id
+    no_session = client.get(f"/api/avatar/{avatar_id}/authorizations")
+    assert no_session.status_code == 401
+
+    invalid = client.post(
+        f"/api/avatar/{avatar_id}/authorizations",
+        headers=context["owner_headers"],
+        json={
+            "targetType": "user",
+            "targetId": "invalid-target",
+            "targetName": "无效权限",
+            "permissions": ["admin"],
+        },
+    ).json()
+    assert invalid["code"] == 400
diff --git a/digital-avatar-app/backend/tests/test_takeover_api.py b/digital-avatar-app/backend/tests/test_takeover_api.py
index b7158d3..902a2d5 100644
--- a/digital-avatar-app/backend/tests/test_takeover_api.py
+++ b/digital-avatar-app/backend/tests/test_takeover_api.py
@@ -1,105 +1,125 @@
-"""Tests for PUT /api/avatar/{avatar_id}/authorizations/takeover endpoint."""
+"""Tests for the authorization takeover configuration endpoint."""
+
 from fastapi.testclient import TestClient
+
+from database import SessionLocal
 from main import app
-from database import SessionLocal, Base, engine
-from models import Authorization, Avatar
+from models import Authorization
 
 
-def setup_test_db():
-    Base.metadata.create_all(bind=engine)
+client = TestClient(app)
+
+
+def test_update_takeover_accepts_camel_case_and_persists(authorization_context):
+    context = authorization_context
+    response = client.put(
+        f"/api/avatar/{context['avatar'].id}/authorizations/takeover",
+        headers=context["owner_headers"],
+        json={
+            "authorizationId": context["authorization"].id,
+            "takeoverEnabled": True,
+            "takeoverMode": "delayed",
+            "takeoverDelaySeconds": 60,
+        },
+    )
+    assert response.status_code == 200
+    payload = response.json()
+    assert payload["code"] == 200
+    assert payload["data"]["takeoverEnabled"] is True
+    assert payload["data"]["takeoverMode"] == "delayed"
+    assert payload["data"]["takeoverDelaySeconds"] == 60
+    assert "takeover" in payload["data"]["permissions"]
+
     db = SessionLocal()
-    avatar = Avatar(name="test", status="active", config={})
-    db.add(avatar)
-    db.commit()
-    db.refresh(avatar)
-    auth = Authorization(avatar_id=avatar.id, target_id="user1", target_name="测试用户")
-    db.add(auth)
-    db.commit()
-    db.refresh(auth)
-    return db, auth.id
-
-
-def test_update_takeover_config():
-    db, auth_id = setup_test_db()
     try:
-        client = TestClient(app)
-        response = client.put(
-            f"/api/avatar/test_avatar_id/authorizations/takeover",
-            json={
-                "authorization_id": auth_id,
-                "takeover_enabled": True,
-                "takeover_mode": "delayed",
-                "takeover_delay_seconds": 60,
-            },
-        )
-        assert response.status_code == 200
-        data = response.json()
-        assert data["code"] == 200
-        assert data["data"]["takeoverEnabled"] is True
-        assert data["data"]["takeoverMode"] == "delayed"
-        assert data["data"]["takeoverDelaySeconds"] == 60
-        # 验证数据库已更新
-        auth = db.query(Authorization).filter(Authorization.id == auth_id).first()
-        assert auth.takeover_enabled is True
-        assert auth.takeover_mode == "delayed"
-        assert auth.takeover_delay_seconds == 60
+        stored = db.query(Authorization).filter(
+            Authorization.id == context["authorization"].id
+        ).first()
+        assert stored.takeover_enabled is True
+        assert stored.takeover_mode == "delayed"
+        assert stored.takeover_delay_seconds == 60
     finally:
         db.close()
 
 
-def test_update_takeover_invalid_mode():
-    db, auth_id = setup_test_db()
-    try:
-        client = TestClient(app)
-        response = client.put(
-            f"/api/avatar/test/authorizations/takeover",
-            json={
-                "authorization_id": auth_id,
-                "takeover_mode": "invalid_mode",
-            },
-        )
-        assert response.status_code == 200
-        data = response.json()
-        assert data["code"] == 400
-    finally:
-        db.close()
-
-
-def test_update_takeover_invalid_delay():
-    db, auth_id = setup_test_db()
-    try:
-        client = TestClient(app)
-        response = client.put(
-            f"/api/avatar/test/authorizations/takeover",
-            json={
-                "authorization_id": auth_id,
-                "takeover_delay_seconds": 2,
-            },
-        )
-        assert response.status_code == 200
-        data = response.json()
-        assert data["code"] == 400
-    finally:
-        db.close()
-
-
-def test_update_takeover_missing_auth_id():
-    client = TestClient(app)
-    response = client.put(
-        f"/api/avatar/test/authorizations/takeover",
-        json={"takeover_enabled": True},
+def test_disabling_authorization_also_disables_takeover(authorization_context):
+    context = authorization_context
+    endpoint = f"/api/avatar/{context['avatar'].id}/authorizations/takeover"
+    client.put(
+        endpoint,
+        headers=context["owner_headers"],
+        json={
+            "authorizationId": context["authorization"].id,
+            "takeoverEnabled": True,
+        },
     )
-    assert response.status_code == 200
-    data = response.json()
-    assert data["code"] == 400
+
+    updated = client.put(
+        f"/api/avatar/{context['avatar'].id}/authorizations",
+        headers=context["owner_headers"],
+        json={"id": context["authorization"].id, "status": "inactive"},
+    ).json()
+    assert updated["code"] == 200
+    assert updated["data"]["status"] == "inactive"
+    assert updated["data"]["takeoverEnabled"] is False
+    assert "takeover" not in updated["data"]["permissions"]
 
 
-def test_update_takeover_not_found():
-    client = TestClient(app)
-    response = client.put(
-        f"/api/avatar/test/authorizations/takeover",
-        json={"authorization_id": "nonexistent"},
+def test_takeover_rejects_invalid_values_and_cross_avatar_access(authorization_context):
+    context = authorization_context
+    endpoint = f"/api/avatar/{context['avatar'].id}/authorizations/takeover"
+
+    invalid_mode = client.put(
+        endpoint,
+        headers=context["owner_headers"],
+        json={
+            "authorization_id": context["authorization"].id,
+            "takeover_mode": "invalid",
+        },
+    ).json()
+    assert invalid_mode["code"] == 400
+
+    invalid_delay = client.put(
+        endpoint,
+        headers=context["owner_headers"],
+        json={
+            "authorization_id": context["authorization"].id,
+            "takeover_delay_seconds": 2,
+        },
+    ).json()
+    assert invalid_delay["code"] == 400
+
+    forbidden = client.put(
+        endpoint,
+        headers=context["other_headers"],
+        json={
+            "authorizationId": context["authorization"].id,
+            "takeoverEnabled": True,
+        },
     )
-    assert response.status_code == 200
-    data = response.json()
-    assert data["code"] == 404
+    assert forbidden.status_code == 403
+
+
+def test_takeover_is_limited_to_active_user_authorizations(authorization_context):
+    context = authorization_context
+    avatar_id = context["avatar"].id
+    created = client.post(
+        f"/api/avatar/{avatar_id}/authorizations",
+        headers=context["owner_headers"],
+        json={
+            "targetType": "organization",
+            "targetId": f"org-{context['suffix']}",
+            "targetName": "测试组织",
+            "permissions": ["chat"],
+        },
+    ).json()
+    response = client.put(
+        f"/api/avatar/{avatar_id}/authorizations/takeover",
+        headers=context["owner_headers"],
+        json={
+            "authorizationId": created["data"]["id"],
+            "takeoverEnabled": True,
+        },
+    ).json()
+    assert response["code"] == 400
+    assert "单聊接管" in response["message"]
diff --git a/digital-avatar-app/backend/tests/test_takeover_scheduler.py b/digital-avatar-app/backend/tests/test_takeover_scheduler.py
index 875bd5b..5d02f3f 100644
--- a/digital-avatar-app/backend/tests/test_takeover_scheduler.py
+++ b/digital-avatar-app/backend/tests/test_takeover_scheduler.py
@@ -192,7 +192,7 @@ async def test_process_message_delayed_mode(mock_db, mock_boxim, mock_auth):
 
     mock_auth.takeover_mode = "delayed"
 
-    service = TakeoverService(mock_db, mock_boxim)
+    service = TakeoverService(mock_db, mock_boxim, MagicMock())
     service.check_takeover_enabled = MagicMock(return_value=mock_auth)
     service.execute_takeover = AsyncMock()
     service.enqueue_delayed_message = MagicMock()
@@ -204,6 +204,24 @@ async def test_process_message_delayed_mode(mock_db, mock_boxim, mock_auth):
     service.execute_takeover.assert_not_awaited()
 
 
+@pytest.mark.asyncio
+async def test_process_message_delayed_mode_without_redis_falls_back_immediately(mock_db, mock_boxim, mock_auth):
+    """A missing Redis connection must not silently drop delayed replies."""
+    from services.takeover_service import TakeoverService
+
+    mock_auth.takeover_mode = "delayed"
+    service = TakeoverService(mock_db, mock_boxim)
+    service.check_takeover_enabled = MagicMock(return_value=mock_auth)
+    service.execute_takeover = AsyncMock(return_value=True)
+    service.enqueue_delayed_message = MagicMock()
+
+    message = {"owner_huihui_id": "owner_1", "from_accid": "user_1", "content": "hi"}
+    await service.process_message(message)
+
+    service.execute_takeover.assert_awaited_once_with(mock_auth, message)
+    service.enqueue_delayed_message.assert_not_called()
+
+
 @pytest.mark.asyncio
 async def test_process_message_no_takeover(mock_db, mock_boxim):
     """When takeover is not enabled, nothing should happen."""
diff --git a/digital-avatar-app/backend/tests/test_takeover_service.py b/digital-avatar-app/backend/tests/test_takeover_service.py
index f726f27..f1fa2b5 100644
--- a/digital-avatar-app/backend/tests/test_takeover_service.py
+++ b/digital-avatar-app/backend/tests/test_takeover_service.py
@@ -27,6 +27,9 @@ def mock_auth():
     auth.takeover_delay_seconds = 30
     auth.avatar_id = "avatar_123"
     auth.target_id = "target_user_123"
+    auth.target_type = "user"
+    auth.status = "active"
+    auth.permissions = ["chat", "takeover"]
     return auth
 
 
@@ -83,6 +86,7 @@ def test_check_takeover_enabled_returns_none_when_disabled(mock_db, mock_boxim,
 
     disabled_auth = MagicMock(spec=Authorization)
     disabled_auth.takeover_enabled = False
+    disabled_auth.permissions = []
     auth_filter = MagicMock()
     auth_filter.filter.return_value = auth_filter
     auth_filter.first.return_value = disabled_auth
diff --git a/digital-avatar-app/src/api/index.ts b/digital-avatar-app/src/api/index.ts
index 929be23..d7735f3 100644
--- a/digital-avatar-app/src/api/index.ts
+++ b/digital-avatar-app/src/api/index.ts
@@ -153,16 +153,41 @@ export interface Authorization {
   targetName: string
   permissions: string[]
   status: 'active' | 'inactive'
+  takeoverEnabled: boolean
+  takeoverMode: 'immediate' | 'delayed'
+  takeoverDelaySeconds: number
   createdAt: string
 }
 
+export type AuthorizationInput = Pick<
+  Authorization,
+  'targetType' | 'targetId' | 'targetName' | 'permissions'
+>
+
 // 获取授权列表
 export const getAuthorizationList = (avatarId: string) =>
   request.get<Authorization[]>(`/avatar/${avatarId}/authorizations`)
 
+// 添加授权
+export const createAuthorization = (avatarId: string, data: AuthorizationInput) =>
+  request.post<Authorization>(`/avatar/${avatarId}/authorizations`, data)
+
 // 更新授权
-export const updateAuthorization = (avatarId: string, data: Partial<Authorization>) =>
-  request.put(`/avatar/${avatarId}/authorizations`, data)
+export const updateAuthorization = (avatarId: string, data: Partial<Authorization> & { id: string }) =>
+  request.put<Authorization>(`/avatar/${avatarId}/authorizations`, data)
+
+// 删除授权
+export const deleteAuthorization = (avatarId: string, authorizationId: string) =>
+  request.delete<{ id: string }>(`/avatar/${avatarId}/authorizations/${authorizationId}`)
+
+// 更新单聊接管配置
+export const updateTakeoverConfig = (avatarId: string, data: {
+  authorizationId: string
+  takeoverEnabled: boolean
+  takeoverMode?: 'immediate' | 'delayed'
+  takeoverDelaySeconds?: number
+}) =>
+  request.put<Authorization>(`/avatar/${avatarId}/authorizations/takeover`, data)
 
 // ==================== 组织管理 API ====================
 
@@ -383,13 +408,4 @@ export const getCurrentUser = () =>
 export const logoutUser = () =>
   request.post('/huihui/logout')
 
-// 更新接管配置
-export const updateTakeoverConfig = (avatarId: string, data: {
-  authorizationId: string
-  takeoverEnabled: boolean
-  takeoverMode?: 'immediate' | 'delayed'
-  takeoverDelaySeconds?: number
-}) =>
-  request.put(`/avatar/${avatarId}/authorizations/takeover`, data)
-
 export default request
diff --git a/digital-avatar-app/src/views/AuthorizationManage.vue b/digital-avatar-app/src/views/AuthorizationManage.vue
index 6f33ecb..10625e3 100644
--- a/digital-avatar-app/src/views/AuthorizationManage.vue
+++ b/digital-avatar-app/src/views/AuthorizationManage.vue
@@ -1,570 +1,1586 @@
 <template>
-  <div class="auth-manage-page">
-    <!-- 顶部导航 -->
-    <header class="page-header">
-      <button class="back-btn" @click="goBack">‹</button>
-      <h1 class="page-title">授权管理</h1>
-      <button class="add-btn" @click="addAuthorization">+</button>
+  <div class="authorization-page">
+    <header class="topbar">
+      <div class="topbar-inner">
+        <button class="icon-button" type="button" aria-label="返回分身管理" @click="goBack">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="m15 18-6-6 6-6" />
+          </svg>
+        </button>
+        <div class="topbar-title">
+          <strong>授权管理</strong>
+          <span>控制分身可代表你的范围</span>
+        </div>
+        <button
+          class="add-button"
+          type="button"
+          :disabled="!activeAvatarId || loading"
+          aria-label="添加授权"
+          @click="openCreate"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M12 5v14M5 12h14" />
+          </svg>
+        </button>
+      </div>
     </header>
 
-    <!-- 授权列表 -->
-    <section class="auth-list" v-if="authList.length > 0">
-      <div class="auth-card" v-for="auth in authList" :key="auth.id">
-        <div class="auth-icon" :class="auth.targetType">
-          {{ getAuthIcon(auth.targetType) }}
+    <main class="page-content">
+      <section v-if="selectedAvatar" class="avatar-overview" aria-label="当前数字分身授权概览">
+        <div class="overview-glow"></div>
+        <div class="avatar-selector-row">
+          <div class="avatar-identity">
+            <img
+              v-if="selectedAvatar.photoUrl"
+              :src="selectedAvatar.photoUrl"
+              :alt="`${avatarName}的头像`"
+              class="avatar-photo"
+              referrerpolicy="no-referrer"
+            />
+            <span v-else class="avatar-fallback" aria-hidden="true">{{ initialOf(avatarName) }}</span>
+            <div>
+              <span class="eyebrow">当前管理</span>
+              <h1>{{ avatarName }}</h1>
+            </div>
+          </div>
+          <label v-if="avatarStore.avatars.length > 1" class="avatar-select-wrap">
+            <span class="sr-only">切换数字分身</span>
+            <select v-model="activeAvatarId" class="avatar-select" @change="switchAvatar">
+              <option v-for="avatar in avatarStore.avatars" :key="avatar.id" :value="avatar.id">
+                {{ avatar.displayName || avatar.name }}
+              </option>
+            </select>
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m8 10 4 4 4-4" /></svg>
+          </label>
         </div>
-        <div class="auth-info">
-          <h3 class="auth-name">{{ auth.targetName }}</h3>
-          <p class="auth-type">{{ getAuthTypeText(auth.targetType) }}</p>
-          <div class="auth-permissions">
-            <span class="permission-tag" v-for="perm in auth.permissions" :key="perm">
-              {{ getPermissionText(perm) }}
-            </span>
+
+        <p class="overview-copy">按对象精细控制交友、聊天、发布、浏览和互动权限。</p>
+        <div class="summary-grid">
+          <div class="summary-item">
+            <strong>{{ authList.length }}</strong>
+            <span>授权对象</span>
+          </div>
+          <div class="summary-item">
+            <strong>{{ activeCount }}</strong>
+            <span>当前生效</span>
+          </div>
+          <div class="summary-item">
+            <strong>{{ takeoverCount }}</strong>
+            <span>聊天接管</span>
           </div>
         </div>
-        <div class="auth-actions">
-          <span class="auth-status" :class="auth.status">
-            {{ auth.status === 'active' ? '已授权' : '已撤销' }}
+      </section>
+
+      <section v-else-if="!loading" class="no-avatar-state">
+        <span class="state-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24"><path d="M8 11a4 4 0 1 1 8 0v1M5 20a7 7 0 0 1 14 0M19 8v4m-2-2h4" /></svg>
+        </span>
+        <h2>先创建一个数字分身</h2>
+        <p>授权记录需要绑定到具体分身，创建后即可配置。</p>
+        <button type="button" class="primary-button" @click="goCreate">创建数字分身</button>
+      </section>
+
+      <template v-if="selectedAvatar">
+        <section class="list-heading">
+          <div>
+            <span class="section-kicker">ACCESS CONTROL</span>
+            <h2>授权对象</h2>
+          </div>
+          <span class="record-count">{{ filteredAuthList.length }} 项</span>
+        </section>
+
+        <nav class="filter-tabs" aria-label="授权筛选">
+          <button
+            v-for="tab in filterTabs"
+            :key="tab.value"
+            type="button"
+            :class="{ active: activeFilter === tab.value }"
+            @click="activeFilter = tab.value"
+          >
+            {{ tab.label }}
+            <span>{{ tab.count }}</span>
+          </button>
+        </nav>
+
+        <section v-if="loading" class="skeleton-list" aria-label="正在加载授权">
+          <div v-for="index in 3" :key="index" class="skeleton-card">
+            <span class="skeleton-block skeleton-avatar"></span>
+            <div class="skeleton-lines">
+              <span class="skeleton-block skeleton-title"></span>
+              <span class="skeleton-block skeleton-line"></span>
+              <span class="skeleton-block skeleton-tags"></span>
+            </div>
+          </div>
+        </section>
+
+        <section v-else-if="loadError" class="inline-state error-state">
+          <span class="state-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24"><path d="M12 9v4m0 4h.01M10.3 4.3 2.8 17.2A2 2 0 0 0 4.5 20h15a2 2 0 0 0 1.7-2.8L13.7 4.3a2 2 0 0 0-3.4 0Z" /></svg>
           </span>
-          <button class="auth-toggle-btn" @click="toggleAuth(auth)">
-            {{ auth.status === 'active' ? '撤销' : '授权' }}
-          </button>
-        </div>
-        <!-- 接管配置 -->
-        <div class="takeover-section">
-          <button class="takeover-toggle-btn" @click="toggleTakeoverEdit(auth)">
-            {{ editingTakeover[auth.id] ? '收起配置' : '配置接管' }}
-          </button>
-          <div class="takeover-form" v-if="editingTakeover[auth.id]">
-            <div class="takeover-row">
-              <label class="takeover-label">启用接管</label>
-              <label class="toggle-switch">
-                <input type="checkbox" v-model="auth.takeoverEnabled" />
-                <span class="toggle-slider"></span>
+          <h3>授权记录加载失败</h3>
+          <p>{{ loadError }}</p>
+          <button type="button" class="secondary-button" @click="loadAuthorizations">重新加载</button>
+        </section>
+
+        <section v-else-if="filteredAuthList.length" class="authorization-list" aria-live="polite">
+          <article
+            v-for="auth in filteredAuthList"
+            :key="auth.id"
+            class="authorization-card"
+            :class="{ inactive: auth.status === 'inactive', expanded: expandedTakeoverId === auth.id }"
+          >
+            <div class="card-main">
+              <span class="target-icon" :class="auth.targetType" aria-hidden="true">
+                <svg v-if="auth.targetType === 'user'" viewBox="0 0 24 24">
+                  <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 8a7 7 0 0 1 14 0" />
+                </svg>
+                <svg v-else-if="auth.targetType === 'organization'" viewBox="0 0 24 24">
+                  <path d="M4 21V7l8-4 8 4v14M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01M9 21v-3h6v3" />
+                </svg>
+                <svg v-else viewBox="0 0 24 24">
+                  <rect x="4" y="3" width="16" height="18" rx="3" /><path d="M9 7h6M10 17h4" />
+                </svg>
+              </span>
+
+              <div class="target-copy">
+                <div class="target-title-row">
+                  <div>
+                    <h3>{{ auth.targetName }}</h3>
+                    <p>{{ targetTypeText(auth.targetType) }} · {{ auth.targetId || '未设置对象标识' }}</p>
+                  </div>
+                  <button
+                    class="status-switch"
+                    :class="{ active: auth.status === 'active' }"
+                    type="button"
+                    role="switch"
+                    :aria-checked="auth.status === 'active'"
+                    :aria-label="auth.status === 'active' ? '停用授权' : '启用授权'"
+                    :disabled="isBusy(auth.id)"
+                    @click="toggleStatus(auth)"
+                  >
+                    <span></span>
+                  </button>
+                </div>
+
+                <div class="permission-row" aria-label="已授予权限">
+                  <span v-for="permission in visiblePermissions(auth.permissions)" :key="permission" class="permission-chip">
+                    {{ permissionText(permission) }}
+                  </span>
+                  <span v-if="!visiblePermissions(auth.permissions).length" class="permission-chip muted">未配置权限</span>
+                </div>
+
+                <div class="card-meta-row">
+                  <span class="status-label" :class="auth.status">
+                    <i></i>{{ auth.status === 'active' ? '授权生效中' : '授权已停用' }}
+                  </span>
+                  <span v-if="auth.takeoverEnabled" class="takeover-label">
+                    <i></i>{{ takeoverSummary(auth) }}
+                  </span>
+                  <span class="created-date">{{ formatDate(auth.createdAt) }}</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="card-actions">
+              <button type="button" class="text-action" @click="openEdit(auth)">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m14.7 6.3 3 3M4 20l3.7-.7L19 8a2.1 2.1 0 0 0-3-3L4.7 16.3 4 20Z" /></svg>
+                权限设置
+              </button>
+              <button
+                v-if="auth.targetType === 'user'"
+                type="button"
+                class="text-action takeover-action"
+                :disabled="auth.status !== 'active' || isBusy(auth.id)"
+                :title="auth.status !== 'active' ? '请先启用该授权' : ''"
+                @click="openTakeover(auth)"
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 12h8M12 8v8M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" /></svg>
+                {{ expandedTakeoverId === auth.id ? '收起接管' : '接管设置' }}
+              </button>
+              <span v-else class="takeover-unavailable">接管仅支持单聊用户</span>
+            </div>
+
+            <div v-if="expandedTakeoverId === auth.id" class="takeover-panel">
+              <div class="takeover-panel-heading">
+                <div>
+                  <span class="panel-kicker">聊天接管</span>
+                  <h4>在你未回复时由分身接续对话</h4>
+                </div>
+                <button
+                  class="status-switch large"
+                  :class="{ active: takeoverDraft.enabled }"
+                  type="button"
+                  role="switch"
+                  :aria-checked="takeoverDraft.enabled"
+                  aria-label="启用或关闭聊天接管"
+                  @click="takeoverDraft.enabled = !takeoverDraft.enabled"
+                ><span></span></button>
+              </div>
+
+              <div v-if="takeoverDraft.enabled" class="takeover-options">
+                <span class="field-label">接管时机</span>
+                <div class="mode-segments">
+                  <button
+                    type="button"
+                    :class="{ selected: takeoverDraft.mode === 'immediate' }"
+                    @click="takeoverDraft.mode = 'immediate'"
+                  >
+                    <strong>立即接管</strong>
+                    <span>收到消息后直接回复</span>
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ selected: takeoverDraft.mode === 'delayed' }"
+                    @click="takeoverDraft.mode = 'delayed'"
+                  >
+                    <strong>延迟接管</strong>
+                    <span>给你预留回复时间</span>
+                  </button>
+                </div>
+                <label v-if="takeoverDraft.mode === 'delayed'" class="delay-field">
+                  <span>等待时间</span>
+                  <div><input v-model.number="takeoverDraft.delaySeconds" type="number" min="5" max="3600" inputmode="numeric" /><em>秒</em></div>
+                </label>
+              </div>
+
+              <p class="takeover-note">
+                接管回复沿用该分身的标准问答、知识库和回复风格。停用授权会同步关闭接管。
+              </p>
+              <p v-if="takeoverError" class="form-error" role="alert">{{ takeoverError }}</p>
+              <div class="panel-actions">
+                <button type="button" class="secondary-button compact" :disabled="takeoverSaving" @click="closeTakeover">取消</button>
+                <button type="button" class="primary-button compact" :disabled="takeoverSaving" @click="saveTakeover(auth)">
+                  {{ takeoverSaving ? '保存中...' : '保存接管设置' }}
+                </button>
+              </div>
+            </div>
+          </article>
+        </section>
+
+        <section v-else class="inline-state empty-filter-state">
+          <span class="state-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24"><path d="M9 11a3 3 0 1 1 6 0v1M5 21a7 7 0 0 1 14 0M18 5h4m-2-2v4" /></svg>
+          </span>
+          <h3>{{ authList.length ? '没有符合条件的授权' : '还没有授权对象' }}</h3>
+          <p>{{ authList.length ? '切换筛选条件即可查看其他授权。' : '添加会会用户、组织或应用，并按需开放权限。' }}</p>
+          <button v-if="!authList.length" type="button" class="primary-button" @click="openCreate">添加第一个授权</button>
+        </section>
+
+        <aside class="security-note">
+          <span aria-hidden="true">
+            <svg viewBox="0 0 24 24"><path d="M12 3 4 6v5c0 5 3.4 8.7 8 10 4.6-1.3 8-5 8-10V6l-8-3Zm-3 9 2 2 4-4" /></svg>
+          </span>
+          <div>
+            <strong>最小权限原则</strong>
+            <p>只开放对方真正需要的能力。不再使用的授权建议及时停用或删除。</p>
+          </div>
+        </aside>
+      </template>
+    </main>
+
+    <Teleport to="body">
+      <div v-if="editorOpen" class="modal-backdrop" @click.self="closeEditor">
+        <section class="sheet-modal editor-modal" role="dialog" aria-modal="true" :aria-labelledby="editorTitleId">
+          <div class="sheet-handle" aria-hidden="true"></div>
+          <header class="modal-header">
+            <div>
+              <span class="section-kicker">{{ editingId ? 'EDIT ACCESS' : 'NEW ACCESS' }}</span>
+              <h2 :id="editorTitleId">{{ editingId ? '编辑授权' : '添加授权' }}</h2>
+            </div>
+            <button type="button" class="modal-close" aria-label="关闭" @click="closeEditor">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18" /></svg>
+            </button>
+          </header>
+
+          <form class="authorization-form" @submit.prevent="submitAuthorization">
+            <fieldset class="form-section">
+              <legend>授权对象类型</legend>
+              <div class="target-type-grid">
+                <button
+                  v-for="option in targetTypeOptions"
+                  :key="option.value"
+                  type="button"
+                  :class="{ selected: authForm.targetType === option.value }"
+                  @click="authForm.targetType = option.value"
+                >
+                  <span class="mini-icon" aria-hidden="true">
+                    <svg v-if="option.value === 'user'" viewBox="0 0 24 24"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 8a7 7 0 0 1 14 0" /></svg>
+                    <svg v-else-if="option.value === 'organization'" viewBox="0 0 24 24"><path d="M4 21V7l8-4 8 4v14M8 10h.01M12 10h.01M16 10h.01M9 21v-4h6v4" /></svg>
+                    <svg v-else viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="3" /><path d="M9 7h6M10 17h4" /></svg>
+                  </span>
+                  <strong>{{ option.label }}</strong>
+                  <small>{{ option.description }}</small>
+                </button>
+              </div>
+            </fieldset>
+
+            <div class="form-section field-stack">
+              <label class="input-field">
+                <span>{{ targetNameLabel }}</span>
+                <input v-model.trim="authForm.targetName" type="text" maxlength="50" :placeholder="targetNamePlaceholder" autocomplete="off" />
+              </label>
+              <label class="input-field">
+                <span>{{ targetIdLabel }}</span>
+                <input v-model.trim="authForm.targetId" type="text" maxlength="120" :placeholder="targetIdPlaceholder" autocomplete="off" />
+                <small>{{ targetIdHelp }}</small>
               </label>
             </div>
-            <div class="takeover-row">
-              <label class="takeover-label">接管模式</label>
-              <select class="takeover-select" v-model="auth.takeoverMode" :disabled="!auth.takeoverEnabled">
-                <option value="immediate">立即接管</option>
-                <option value="delayed">延迟接管</option>
-              </select>
-            </div>
-            <div class="takeover-row" v-if="auth.takeoverMode === 'delayed' && auth.takeoverEnabled">
-              <label class="takeover-label">延迟时间（秒）</label>
-              <input
-                type="number"
-                class="takeover-input"
-                v-model.number="auth.takeoverDelaySeconds"
-                min="5"
-                placeholder="30"
-              />
-            </div>
-            <div class="takeover-actions">
-              <button class="takeover-cancel-btn" @click="cancelTakeoverEdit(auth)">取消</button>
-              <button class="takeover-save-btn" @click="saveTakeoverConfig(auth)">保存</button>
-            </div>
-          </div>
-          <div class="takeover-summary" v-else-if="auth.takeoverEnabled">
-            <span class="takeover-badge enabled">已启用</span>
-            <span class="takeover-mode-text">{{ auth.takeoverMode === 'immediate' ? '立即接管' : '延迟 ' + (auth.takeoverDelaySeconds || 30) + 's' }}</span>
-          </div>
-        </div>
-      </div>
-    </section>
 
-    <!-- 空状态 -->
-    <section class="empty-state" v-else>
-      <div class="empty-icon">🔐</div>
-      <h3 class="empty-title">暂无授权</h3>
-      <p class="empty-desc">授权其他用户或应用访问你的数字分身</p>
-      <button class="empty-btn" @click="addAuthorization">添加授权</button>
-    </section>
+            <fieldset class="form-section">
+              <legend>允许分身执行</legend>
+              <p class="legend-help">可多选，后续随时调整。</p>
+              <div class="permission-grid">
+                <button
+                  v-for="permission in permissionOptions"
+                  :key="permission.value"
+                  type="button"
+                  :class="{ selected: authForm.permissions.includes(permission.value) }"
+                  :aria-pressed="authForm.permissions.includes(permission.value)"
+                  @click="togglePermission(permission.value)"
+                >
+                  <span class="permission-check">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 12 4 4 8-8" /></svg>
+                  </span>
+                  <span>
+                    <strong>{{ permission.label }}</strong>
+                    <small>{{ permission.description }}</small>
+                  </span>
+                </button>
+              </div>
+            </fieldset>
+
+            <p v-if="formError" class="form-error" role="alert">{{ formError }}</p>
+            <div class="modal-actions">
+              <button v-if="editingId" type="button" class="delete-button" :disabled="formSaving" @click="requestDeleteFromEditor">删除授权</button>
+              <span class="action-spacer"></span>
+              <button type="button" class="secondary-button" :disabled="formSaving" @click="closeEditor">取消</button>
+              <button type="submit" class="primary-button" :disabled="formSaving">
+                {{ formSaving ? '保存中...' : editingId ? '保存修改' : '确认授权' }}
+              </button>
+            </div>
+          </form>
+        </section>
+      </div>
+
+      <div v-if="deleteTarget" class="modal-backdrop confirm-backdrop" @click.self="cancelDelete">
+        <section class="confirm-modal" role="alertdialog" aria-modal="true" aria-labelledby="delete-title">
+          <span class="danger-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24"><path d="M4 7h16M9 7V4h6v3m-8 0 1 13h8l1-13M10 11v5m4-5v5" /></svg>
+          </span>
+          <h2 id="delete-title">删除这项授权？</h2>
+          <p>「{{ deleteTarget.targetName }}」将立即失去全部权限，聊天接管也会停止。此操作不可恢复。</p>
+          <div class="confirm-actions">
+            <button type="button" class="secondary-button" :disabled="deleting" @click="cancelDelete">暂不删除</button>
+            <button type="button" class="danger-button" :disabled="deleting" @click="confirmDelete">
+              {{ deleting ? '删除中...' : '确认删除' }}
+            </button>
+          </div>
+        </section>
+      </div>
+
+      <p v-if="toastMessage" class="page-toast" role="status">{{ toastMessage }}</p>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import {
+  createAuthorization,
+  deleteAuthorization,
+  getAuthorizationList,
+  updateAuthorization,
+  updateTakeoverConfig,
+  type Authorization as AuthorizationRecord,
+} from '@/api'
 import { useAvatarStore } from '@/store/avatar'
-import { getAuthorizationList, updateAuthorization, updateTakeoverConfig } from '@/api'
 import { pickAvatarId, unwrapListData } from '@/utils/avatar-page-data.js'
 
+type TargetType = AuthorizationRecord['targetType']
+type FilterValue = 'all' | 'active' | 'takeover'
+type PermissionValue = 'friend' | 'chat' | 'publish' | 'browse' | 'interact'
+
 const router = useRouter()
 const avatarStore = useAvatarStore()
 
-// 授权列表
-const authList = ref<Array<{
-  id: string
-  targetType: 'user' | 'organization' | 'application'
+const permissionOptions: Array<{ value: PermissionValue; label: string; description: string }> = [
+  { value: 'friend', label: '交友', description: '建立和维护社交关系' },
+  { value: 'chat', label: '聊天', description: '参与对话并回复消息' },
+  { value: 'publish', label: '发布', description: '代表你发布公开内容' },
+  { value: 'browse', label: '浏览', description: '读取资料与授权内容' },
+  { value: 'interact', label: '互动', description: '点赞、评论等轻互动' },
+]
+
+const targetTypeOptions: Array<{ value: TargetType; label: string; description: string }> = [
+  { value: 'user', label: '会会用户', description: '适合单聊与交友' },
+  { value: 'organization', label: '组织', description: '团队协作授权' },
+  { value: 'application', label: '应用', description: '第三方能力接入' },
+]
+
+const legacyPermissionMap: Record<string, PermissionValue> = {
+  read: 'browse',
+  reply: 'chat',
+  write: 'publish',
+  edit: 'publish',
+}
+
+const authList = ref<AuthorizationRecord[]>([])
+const activeAvatarId = ref('')
+const activeFilter = ref<FilterValue>('all')
+const loading = ref(true)
+const loadError = ref('')
+const busyIds = ref<string[]>([])
+const editorOpen = ref(false)
+const editingId = ref('')
+const formSaving = ref(false)
+const formError = ref('')
+const deleteTarget = ref<AuthorizationRecord | null>(null)
+const deleting = ref(false)
+const expandedTakeoverId = ref('')
+const takeoverSaving = ref(false)
+const takeoverError = ref('')
+const toastMessage = ref('')
+let toastTimer: number | undefined
+
+const authForm = reactive<{
+  targetType: TargetType
   targetName: string
-  permissions: string[]
-  status: 'active' | 'inactive'
-  takeoverEnabled?: boolean
-  takeoverMode?: 'immediate' | 'delayed'
-  takeoverDelaySeconds?: number
-}>>([])
+  targetId: string
+  permissions: PermissionValue[]
+}>({
+  targetType: 'user',
+  targetName: '',
+  targetId: '',
+  permissions: ['chat', 'browse'],
+})
 
-// 接管配置编辑状态（每行一个）
-const editingTakeover = ref<Record<string, boolean>>({})
+const takeoverDraft = reactive<{
+  enabled: boolean
+  mode: 'immediate' | 'delayed'
+  delaySeconds: number
+}>({
+  enabled: false,
+  mode: 'immediate',
+  delaySeconds: 30,
+})
 
-// 从后端加载授权列表
-const loadAuth = async () => {
+const selectedAvatar = computed(() =>
+  avatarStore.avatars.find((avatar: any) => avatar.id === activeAvatarId.value) || null
+)
+const avatarName = computed(() => selectedAvatar.value?.displayName || selectedAvatar.value?.name || '数字分身')
+const activeCount = computed(() => authList.value.filter((item) => item.status === 'active').length)
+const takeoverCount = computed(() => authList.value.filter((item) => item.status === 'active' && item.takeoverEnabled).length)
+const filteredAuthList = computed(() => {
+  if (activeFilter.value === 'active') return authList.value.filter((item) => item.status === 'active')
+  if (activeFilter.value === 'takeover') return authList.value.filter((item) => item.status === 'active' && item.takeoverEnabled)
+  return authList.value
+})
+const filterTabs = computed(() => [
+  { value: 'all' as const, label: '全部', count: authList.value.length },
+  { value: 'active' as const, label: '生效中', count: activeCount.value },
+  { value: 'takeover' as const, label: '已接管', count: takeoverCount.value },
+])
+
+const editorTitleId = 'authorization-editor-title'
+const targetNameLabel = computed(() => ({
+  user: '用户名称',
+  organization: '组织名称',
+  application: '应用名称',
+}[authForm.targetType]))
+const targetNamePlaceholder = computed(() => ({
+  user: '例如：张医生',
+  organization: '例如：会会产品委员会',
+  application: '例如：客户服务小程序',
+}[authForm.targetType]))
+const targetIdLabel = computed(() => ({
+  user: '会会用户 ID',
+  organization: '组织 ID',
+  application: '应用 ID',
+}[authForm.targetType]))
+const targetIdPlaceholder = computed(() => ({
+  user: '输入对方的会会用户 ID 或云信账号',
+  organization: '输入组织的唯一标识',
+  application: '输入应用的唯一标识',
+}[authForm.targetType]))
+const targetIdHelp = computed(() => authForm.targetType === 'user'
+  ? '聊天接管会使用该标识匹配发消息的人，请准确填写。'
+  : '对象标识用于防止同一对象被重复授权。')
+
+const normalizePermissions = (permissions: string[] = []) => {
+  const result: string[] = []
+  for (const raw of permissions) {
+    const normalized = legacyPermissionMap[raw] || raw
+    if (!result.includes(normalized)) result.push(normalized)
+  }
+  return result
+}
+
+const normalizeAuthorization = (item: AuthorizationRecord): AuthorizationRecord => ({
+  ...item,
+  permissions: normalizePermissions(item.permissions),
+  takeoverEnabled: Boolean(item.takeoverEnabled),
+  takeoverMode: item.takeoverMode || 'immediate',
+  takeoverDelaySeconds: item.takeoverDelaySeconds || 30,
+})
+
+const errorMessage = (error: any, fallback: string) =>
+  error?.response?.data?.detail || error?.response?.data?.message || error?.message || fallback
+
+const showToast = (message: string) => {
+  toastMessage.value = message
+  if (toastTimer) window.clearTimeout(toastTimer)
+  toastTimer = window.setTimeout(() => { toastMessage.value = '' }, 2600)
+}
+
+const replaceAuthorization = (updated: AuthorizationRecord) => {
+  const index = authList.value.findIndex((item) => item.id === updated.id)
+  const normalized = normalizeAuthorization(updated)
+  if (index >= 0) authList.value.splice(index, 1, normalized)
+  else authList.value.unshift(normalized)
+}
+
+const loadAuthorizations = async () => {
+  if (!activeAvatarId.value) {
+    authList.value = []
+    loading.value = false
+    return
+  }
+  loading.value = true
+  loadError.value = ''
+  expandedTakeoverId.value = ''
   try {
-    if (!avatarStore.avatars.length) {
-      await avatarStore.loadAvatars()
-    }
-    const avatarId = pickAvatarId(avatarStore.currentAvatarId, avatarStore.avatars)
-    if (!avatarId) {
-      authList.value = []
-      return
-    }
-    const res: any = await getAuthorizationList(avatarId)
-    authList.value = unwrapListData(res)
-  } catch (e) {
-    console.error('加载授权失败', e)
+    const response = await getAuthorizationList(activeAvatarId.value)
+    authList.value = unwrapListData(response).map(normalizeAuthorization)
+  } catch (error: any) {
+    authList.value = []
+    loadError.value = errorMessage(error, '请检查网络后重试')
+  } finally {
+    loading.value = false
   }
 }
 
-// 获取授权图标
-const getAuthIcon = (type: string) => {
-  const map: Record<string, string> = {
-    'user': '👤',
-    'organization': '🏢',
-    'application': '📱'
-  }
-  return map[type] || '🔑'
+const switchAvatar = async () => {
+  avatarStore.currentAvatarId = activeAvatarId.value
+  activeFilter.value = 'all'
+  await loadAuthorizations()
 }
 
-// 获取授权类型文本
-const getAuthTypeText = (type: string) => {
-  const map: Record<string, string> = {
-    'user': '用户',
-    'organization': '组织',
-    'application': '应用'
-  }
-  return map[type] || type
+const openCreate = () => {
+  if (!activeAvatarId.value) return
+  editingId.value = ''
+  Object.assign(authForm, {
+    targetType: 'user',
+    targetName: '',
+    targetId: '',
+    permissions: ['chat', 'browse'] as PermissionValue[],
+  })
+  formError.value = ''
+  editorOpen.value = true
 }
 
-// 获取权限文本
-const getPermissionText = (perm: string) => {
-  const map: Record<string, string> = {
-    'read': '读取',
-    'write': '写入',
-    'reply': '回复',
-    'edit': '编辑'
-  }
-  return map[perm] || perm
+const openEdit = (authorization: AuthorizationRecord) => {
+  editingId.value = authorization.id
+  Object.assign(authForm, {
+    targetType: authorization.targetType,
+    targetName: authorization.targetName,
+    targetId: authorization.targetId,
+    permissions: visiblePermissions(authorization.permissions),
+  })
+  formError.value = ''
+  editorOpen.value = true
 }
 
-// 切换授权状态（写入后端）
-const toggleAuth = async (auth: any) => {
-  const newStatus = auth.status === 'active' ? 'inactive' : 'active'
+const closeEditor = () => {
+  if (formSaving.value) return
+  editorOpen.value = false
+  formError.value = ''
+}
+
+const togglePermission = (permission: PermissionValue) => {
+  const index = authForm.permissions.indexOf(permission)
+  if (index >= 0) authForm.permissions.splice(index, 1)
+  else authForm.permissions.push(permission)
+}
+
+const submitAuthorization = async () => {
+  formError.value = ''
+  if (!authForm.targetName.trim()) {
+    formError.value = `请填写${targetNameLabel.value}`
+    return
+  }
+  if (!authForm.targetId.trim()) {
+    formError.value = `请填写${targetIdLabel.value}`
+    return
+  }
+  if (!authForm.permissions.length) {
+    formError.value = '请至少选择一项权限'
+    return
+  }
+
+  formSaving.value = true
+  const payload = {
+    targetType: authForm.targetType,
+    targetName: authForm.targetName.trim(),
+    targetId: authForm.targetId.trim(),
+    permissions: [...authForm.permissions],
+  }
   try {
-    const avatarId = pickAvatarId(avatarStore.currentAvatarId, avatarStore.avatars)
-    if (!avatarId) return
-    const res: any = await updateAuthorization(avatarId, {
-      id: auth.id,
-      status: newStatus
+    const updated = editingId.value
+      ? await updateAuthorization(activeAvatarId.value, { id: editingId.value, ...payload })
+      : await createAuthorization(activeAvatarId.value, payload)
+    replaceAuthorization(updated)
+    editorOpen.value = false
+    showToast(editingId.value ? '授权设置已更新' : '授权已添加并生效')
+  } catch (error: any) {
+    formError.value = errorMessage(error, '授权保存失败，请重试')
+  } finally {
+    formSaving.value = false
+  }
+}
+
+const isBusy = (id: string) => busyIds.value.includes(id)
+const setBusy = (id: string, busy: boolean) => {
+  busyIds.value = busy
+    ? [...busyIds.value, id]
+    : busyIds.value.filter((item) => item !== id)
+}
+
+const toggleStatus = async (authorization: AuthorizationRecord) => {
+  if (isBusy(authorization.id)) return
+  setBusy(authorization.id, true)
+  const nextStatus = authorization.status === 'active' ? 'inactive' : 'active'
+  try {
+    const updated = await updateAuthorization(activeAvatarId.value, {
+      id: authorization.id,
+      status: nextStatus,
     })
-    authList.value = unwrapListData(res)
-  } catch (e) {
-    alert('操作失败，请重试')
+    replaceAuthorization(updated)
+    if (expandedTakeoverId.value === authorization.id && nextStatus === 'inactive') closeTakeover()
+    showToast(nextStatus === 'active' ? '授权已启用' : '授权已停用，聊天接管已同步关闭')
+  } catch (error: any) {
+    showToast(errorMessage(error, '操作失败，请重试'))
+  } finally {
+    setBusy(authorization.id, false)
   }
 }
 
-// 添加授权
-const addAuthorization = () => {
-  alert('添加授权功能开发中...')
+const requestDeleteFromEditor = () => {
+  const target = authList.value.find((item) => item.id === editingId.value)
+  if (!target) return
+  editorOpen.value = false
+  deleteTarget.value = target
 }
 
-// 返回
-const goBack = () => {
-  router.back()
+const cancelDelete = () => {
+  if (!deleting.value) deleteTarget.value = null
 }
 
-// 切换接管配置编辑状态
-const toggleTakeoverEdit = (auth: any) => {
-  editingTakeover.value[auth.id] = !editingTakeover.value[auth.id]
-}
-
-// 保存接管配置
-const saveTakeoverConfig = async (auth: any) => {
-  const avatarId = pickAvatarId(avatarStore.currentAvatarId, avatarStore.avatars)
-  if (!avatarId) return
-
-  const delay = auth.takeoverMode === 'delayed' ? (auth.takeoverDelaySeconds ?? 30) : undefined
-
+const confirmDelete = async () => {
+  if (!deleteTarget.value || deleting.value) return
+  deleting.value = true
+  const target = deleteTarget.value
   try {
-    await updateTakeoverConfig(avatarId, {
-      authorizationId: auth.id,
-      takeoverEnabled: auth.takeoverEnabled ?? false,
-      takeoverMode: auth.takeoverMode || 'immediate',
-      takeoverDelaySeconds: delay,
-    })
-    editingTakeover.value[auth.id] = false
-  } catch (e: any) {
-    alert('保存接管配置失败：' + (e?.message || '请重试'))
+    await deleteAuthorization(activeAvatarId.value, target.id)
+    authList.value = authList.value.filter((item) => item.id !== target.id)
+    if (expandedTakeoverId.value === target.id) closeTakeover()
+    deleteTarget.value = null
+    showToast('授权已删除')
+  } catch (error: any) {
+    showToast(errorMessage(error, '删除失败，请重试'))
+  } finally {
+    deleting.value = false
   }
 }
 
-// 取消编辑接管配置
-const cancelTakeoverEdit = (auth: any) => {
-  // 重新加载以恢复原始值
-  loadAuth()
-  editingTakeover.value[auth.id] = false
+const openTakeover = (authorization: AuthorizationRecord) => {
+  if (expandedTakeoverId.value === authorization.id) {
+    closeTakeover()
+    return
+  }
+  expandedTakeoverId.value = authorization.id
+  takeoverDraft.enabled = Boolean(authorization.takeoverEnabled)
+  takeoverDraft.mode = authorization.takeoverMode || 'immediate'
+  takeoverDraft.delaySeconds = authorization.takeoverDelaySeconds || 30
+  takeoverError.value = ''
 }
 
-onMounted(() => {
-  loadAuth()
+const closeTakeover = () => {
+  if (takeoverSaving.value) return
+  expandedTakeoverId.value = ''
+  takeoverError.value = ''
+}
+
+const saveTakeover = async (authorization: AuthorizationRecord) => {
+  takeoverError.value = ''
+  if (
+    takeoverDraft.enabled
+    && takeoverDraft.mode === 'delayed'
+    && (!Number.isInteger(takeoverDraft.delaySeconds) || takeoverDraft.delaySeconds < 5 || takeoverDraft.delaySeconds > 3600)
+  ) {
+    takeoverError.value = '等待时间需填写 5 到 3600 秒之间的整数'
+    return
+  }
+  takeoverSaving.value = true
+  try {
+    const updated = await updateTakeoverConfig(activeAvatarId.value, {
+      authorizationId: authorization.id,
+      takeoverEnabled: takeoverDraft.enabled,
+      takeoverMode: takeoverDraft.mode,
+      takeoverDelaySeconds: takeoverDraft.mode === 'delayed' ? takeoverDraft.delaySeconds : 30,
+    })
+    replaceAuthorization(updated)
+    expandedTakeoverId.value = ''
+    showToast(takeoverDraft.enabled ? '聊天接管已开启' : '聊天接管已关闭')
+  } catch (error: any) {
+    takeoverError.value = errorMessage(error, '接管设置保存失败，请重试')
+  } finally {
+    takeoverSaving.value = false
+  }
+}
+
+const visiblePermissions = (permissions: string[] = []): PermissionValue[] => {
+  const normalized = normalizePermissions(permissions)
+  return permissionOptions
+    .map((option) => option.value)
+    .filter((permission) => normalized.includes(permission))
+}
+
+const permissionText = (permission: string) =>
+  permissionOptions.find((item) => item.value === permission)?.label || permission
+const targetTypeText = (type: TargetType) => targetTypeOptions.find((item) => item.value === type)?.label || type
+const takeoverSummary = (authorization: AuthorizationRecord) => authorization.takeoverMode === 'delayed'
+  ? `延迟 ${authorization.takeoverDelaySeconds || 30} 秒接管`
+  : '立即接管'
+const initialOf = (text: string) => Array.from(text.trim())[0] || '分'
+const formatDate = (value: string) => {
+  if (!value) return ''
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`
+}
+
+const goBack = () => router.push('/avatar/manage')
+const goCreate = () => router.push('/avatar/create')
+
+onMounted(async () => {
+  if (!avatarStore.avatars.length) await avatarStore.loadAvatars()
+  activeAvatarId.value = pickAvatarId(avatarStore.currentAvatarId, avatarStore.avatars) || ''
+  await loadAuthorizations()
 })
 </script>
 
 <style scoped>
-.auth-manage-page {
-  min-height: 100vh;
-  background: #F8F9FA;
-  padding-bottom: 80px;
+.authorization-page {
+  --orange: #f66b16;
+  --orange-deep: #d94d08;
+  --orange-soft: #fff1e6;
+  --ink: #202126;
+  --muted: #7b8193;
+  --line: #ece7e1;
+  --surface: #ffffff;
+  min-height: 100dvh;
+  padding-bottom: 112px;
+  overflow-x: hidden;
+  color: var(--ink);
+  background:
+    radial-gradient(circle at 8% 12%, rgba(255, 201, 155, .26), transparent 26%),
+    radial-gradient(circle at 92% 36%, rgba(255, 229, 199, .38), transparent 24%),
+    #f7f7f8;
+  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
 }
 
-/* 顶部导航 */
-.page-header {
-  display: flex;
+button,
+input,
+select { font: inherit; }
+
+button { cursor: pointer; }
+button:disabled { cursor: not-allowed; opacity: .52; }
+
+svg {
+  width: 1em;
+  height: 1em;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  color: #fff;
+  background: linear-gradient(112deg, #f56a13 0%, #ff8532 100%);
+  box-shadow: 0 8px 28px rgba(190, 69, 5, .16);
+}
+
+.topbar-inner {
+  max-width: 720px;
+  min-height: 70px;
+  margin: 0 auto;
+  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
+  display: grid;
+  grid-template-columns: 44px 1fr 44px;
   align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  background: white;
-  border-bottom: 1px solid #EDEEF1;
+  gap: 10px;
 }
 
-.back-btn {
-  background: none;
-  border: none;
-  font-size: 24px;
-  cursor: pointer;
-  padding: 4px 8px;
-  color: #18191C;
+.icon-button,
+.add-button {
+  width: 44px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 15px;
+  color: #fff;
+  background: rgba(255, 255, 255, .16);
+  transition: background .2s ease;
 }
 
-.page-title {
-  font-size: 17px;
-  font-weight: 600;
-  margin: 0;
-  color: #18191C;
-}
+.icon-button:hover,
+.add-button:hover { background: rgba(255, 255, 255, .25); }
+.icon-button svg,
+.add-button svg { font-size: 25px; }
 
-.add-btn {
-  background: #F97316;
-  color: white;
-  border: none;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  font-size: 20px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.topbar-title { min-width: 0; }
+.topbar-title strong {
+  display: block;
+  font-size: 19px;
+  line-height: 1.25;
+  letter-spacing: .02em;
 }
-
-/* 授权列表 */
-.auth-list {
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.auth-card {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 16px;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
-.auth-icon {
-  font-size: 24px;
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 12px;
-  background: #FFF0E6;
-  flex-shrink: 0;
-}
-
-.auth-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.auth-name {
-  font-size: 15px;
-  font-weight: 600;
-  margin: 0 0 4px;
-  color: #18191C;
-}
-
-.auth-type {
-  font-size: 12px;
-  color: #9398AE;
-  margin: 0 0 8px;
-}
-
-.auth-permissions {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.permission-tag {
-  padding: 4px 8px;
-  background: #F3F4F6;
-  border-radius: 6px;
+.topbar-title span {
+  display: block;
+  margin-top: 3px;
+  overflow: hidden;
+  color: rgba(255, 255, 255, .78);
   font-size: 11px;
-  color: #6B7280;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.auth-actions {
+.page-content {
+  width: min(100%, 720px);
+  margin: 0 auto;
+  padding: 18px 16px 0;
+}
+
+.avatar-overview {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  padding: 20px;
+  border: 1px solid rgba(255, 255, 255, .7);
+  border-radius: 24px;
+  color: #fff;
+  background: linear-gradient(135deg, #292b31 0%, #37343a 58%, #4a352b 100%);
+  box-shadow: 0 18px 38px rgba(39, 35, 32, .18);
+}
+
+.overview-glow {
+  position: absolute;
+  z-index: -1;
+  right: -72px;
+  top: -86px;
+  width: 220px;
+  height: 220px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 124, 42, .62), transparent 68%);
+}
+
+.avatar-selector-row,
+.avatar-identity {
   display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-.auth-status {
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.auth-status.active {
-  color: #22C55E;
-}
-
-.auth-status.inactive {
-  color: #9398AE;
-}
-
-.auth-toggle-btn {
-  padding: 6px 12px;
-  border-radius: 8px;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  border: none;
-  background: #F97316;
-  color: white;
-}
-
-/* 空状态 */
-.empty-state {
-  display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding: 80px 20px;
 }
 
-.empty-icon {
-  font-size: 64px;
-  margin-bottom: 20px;
+.avatar-selector-row { justify-content: space-between; gap: 14px; }
+.avatar-identity { min-width: 0; gap: 12px; }
+
+.avatar-photo,
+.avatar-fallback {
+  width: 50px;
+  height: 50px;
+  flex: 0 0 50px;
+  border: 2px solid rgba(255, 255, 255, .72);
+  border-radius: 17px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
 }
 
-.empty-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: #18191C;
-  margin: 0 0 10px;
+.avatar-photo { object-fit: cover; }
+.avatar-fallback {
+  display: grid;
+  place-items: center;
+  color: #8b3d0c;
+  background: linear-gradient(145deg, #ffd4ad, #fff0df);
+  font-size: 20px;
+  font-weight: 800;
 }
 
-.empty-desc {
-  font-size: 14px;
-  color: #9398AE;
-  margin: 0 0 24px;
+.eyebrow,
+.section-kicker,
+.panel-kicker {
+  display: block;
+  color: rgba(255, 255, 255, .58);
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+}
+
+.avatar-identity h1 {
+  margin: 4px 0 0;
+  overflow: hidden;
+  font-size: 20px;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.avatar-select-wrap {
+  position: relative;
+  flex: 0 0 auto;
+}
+
+.avatar-select {
+  min-width: 84px;
+  height: 38px;
+  padding: 0 31px 0 12px;
+  border: 1px solid rgba(255, 255, 255, .2);
+  border-radius: 12px;
+  outline: none;
+  appearance: none;
+  color: #fff;
+  background: rgba(255, 255, 255, .1);
+  font-size: 12px;
+}
+
+.avatar-select-wrap svg {
+  position: absolute;
+  right: 9px;
+  top: 50%;
+  pointer-events: none;
+  transform: translateY(-50%);
+  font-size: 16px;
+}
+
+.overview-copy {
+  margin: 18px 0;
+  color: rgba(255, 255, 255, .68);
+  font-size: 13px;
+  line-height: 1.65;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  border: 1px solid rgba(255, 255, 255, .1);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, .07);
+  backdrop-filter: blur(8px);
+}
+
+.summary-item {
+  position: relative;
+  padding: 12px 8px;
   text-align: center;
 }
 
-.empty-btn {
-  padding: 12px 32px;
-  background: #F97316;
-  color: white;
-  border: none;
+.summary-item + .summary-item::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 20%;
+  width: 1px;
+  height: 60%;
+  background: rgba(255, 255, 255, .12);
+}
+
+.summary-item strong { display: block; font-size: 22px; line-height: 1.1; }
+.summary-item span { display: block; margin-top: 5px; color: rgba(255, 255, 255, .58); font-size: 10px; }
+
+.list-heading {
+  margin: 28px 2px 12px;
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+}
+
+.section-kicker { color: #c5652a; }
+.list-heading h2,
+.modal-header h2 {
+  margin: 4px 0 0;
+  color: var(--ink);
+  font-size: 21px;
+  line-height: 1.25;
+}
+
+.record-count {
+  padding: 5px 9px;
+  border-radius: 999px;
+  color: #a94d18;
+  background: #ffeadb;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.filter-tabs {
+  display: flex;
+  gap: 7px;
+  margin-bottom: 12px;
+  padding: 4px;
+  border: 1px solid #ebe7e3;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, .76);
+}
+
+.filter-tabs button {
+  min-height: 38px;
+  flex: 1;
+  border: 0;
   border-radius: 10px;
-  font-size: 15px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-/* 接管配置 */
-.takeover-section {
-  margin-top: 8px;
-  padding-top: 12px;
-  border-top: 1px solid #F3F4F6;
-  width: 100%;
-}
-
-.takeover-toggle-btn {
-  background: none;
-  border: none;
-  color: #6366F1;
+  color: #737888;
+  background: transparent;
   font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  padding: 4px 0;
+  font-weight: 650;
+  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
 }
 
-.takeover-form {
+.filter-tabs button span {
+  margin-left: 3px;
+  color: #a3a7b2;
+  font-size: 10px;
+}
+
+.filter-tabs button.active {
+  color: #9e430e;
+  background: #fff;
+  box-shadow: 0 4px 12px rgba(50, 43, 39, .08);
+}
+
+.authorization-list,
+.skeleton-list { display: grid; gap: 12px; }
+
+.authorization-card {
+  overflow: hidden;
+  border: 1px solid rgba(230, 224, 218, .88);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, .95);
+  box-shadow: 0 10px 28px rgba(61, 50, 42, .07);
+  transition: border-color .2s ease, box-shadow .2s ease;
+}
+
+.authorization-card:hover {
+  border-color: #f0c6a9;
+  box-shadow: 0 14px 34px rgba(61, 50, 42, .1);
+}
+
+.authorization-card.inactive { background: rgba(255, 255, 255, .72); }
+.authorization-card.inactive .card-main { opacity: .68; }
+
+.card-main {
+  display: flex;
+  gap: 13px;
+  padding: 16px 16px 13px;
+}
+
+.target-icon {
+  width: 48px;
+  height: 48px;
+  flex: 0 0 48px;
+  display: grid;
+  place-items: center;
+  border-radius: 16px;
+  color: #c8520d;
+  background: #fff0e5;
+}
+
+.target-icon.organization { color: #226a59; background: #e9f6f1; }
+.target-icon.application { color: #3d5e97; background: #edf2fb; }
+.target-icon svg { font-size: 24px; }
+
+.target-copy { min-width: 0; flex: 1; }
+.target-title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.target-title-row > div { min-width: 0; }
+.target-title-row h3 {
+  margin: 0;
+  overflow: hidden;
+  color: #24252a;
+  font-size: 16px;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.target-title-row p {
+  margin: 4px 0 0;
+  overflow: hidden;
+  color: #9195a3;
+  font-size: 11px;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-switch {
+  position: relative;
+  width: 42px;
+  height: 24px;
+  flex: 0 0 42px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: #d6d8de;
+  transition: background .22s ease;
+}
+
+.status-switch span {
+  position: absolute;
+  left: 3px;
+  top: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
+  transition: transform .22s ease;
+}
+
+.status-switch.active { background: var(--orange); }
+.status-switch.active span { transform: translateX(18px); }
+.status-switch.large { width: 48px; height: 28px; flex-basis: 48px; }
+.status-switch.large span { width: 22px; height: 22px; }
+.status-switch.large.active span { transform: translateX(20px); }
+
+.permission-row {
+  min-height: 25px;
+  margin-top: 11px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.permission-chip {
+  padding: 4px 8px;
+  border: 1px solid #eee4dc;
+  border-radius: 7px;
+  color: #745b4d;
+  background: #fbf8f5;
+  font-size: 11px;
+  line-height: 1;
+}
+
+.permission-chip.muted { color: #a2a5af; }
+
+.card-meta-row {
+  margin-top: 11px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  color: #999da9;
+  font-size: 11px;
+}
+
+.status-label,
+.takeover-label { display: inline-flex; align-items: center; gap: 5px; }
+.status-label i,
+.takeover-label i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #b7bac3;
+}
+.status-label.active { color: #178159; }
+.status-label.active i { background: #22b87b; box-shadow: 0 0 0 3px rgba(34, 184, 123, .12); }
+.takeover-label { color: #c45512; }
+.takeover-label i { background: #f97316; animation: pulse 1.8s ease-in-out infinite; }
+.created-date { margin-left: auto; }
+
+.card-actions {
+  min-height: 47px;
+  padding: 7px 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border-top: 1px solid #f0ece8;
+  background: #fdfcfa;
+}
+
+.text-action {
+  min-height: 34px;
+  padding: 0 9px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 0;
+  border-radius: 9px;
+  color: #656a77;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.text-action:hover { color: #9c430f; background: #fff0e6; }
+.text-action svg { font-size: 15px; }
+.takeover-action { margin-left: auto; color: #b94e0c; }
+.takeover-unavailable { margin-left: auto; padding-right: 4px; color: #a8abb5; font-size: 11px; }
+
+.takeover-panel {
+  padding: 17px 16px 16px;
+  border-top: 1px solid #f0d8c6;
+  background: linear-gradient(180deg, #fff8f2 0%, #fff 100%);
+}
+
+.takeover-panel-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.panel-kicker { color: #d2611c; }
+.takeover-panel-heading h4 { margin: 4px 0 0; color: #343137; font-size: 13px; line-height: 1.45; }
+.takeover-options { margin-top: 18px; }
+.field-label { display: block; margin-bottom: 8px; color: #69646a; font-size: 11px; font-weight: 700; }
+
+.mode-segments {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.mode-segments button {
+  min-height: 67px;
+  padding: 10px;
+  border: 1px solid #e7e2dd;
+  border-radius: 13px;
+  text-align: left;
+  color: #5e6068;
+  background: #fff;
+}
+
+.mode-segments button.selected {
+  border-color: #f1782f;
+  color: #9f430e;
+  background: #fff3ea;
+  box-shadow: inset 0 0 0 1px #f1782f;
+}
+
+.mode-segments strong { display: block; font-size: 12px; }
+.mode-segments span { display: block; margin-top: 5px; color: #999ba4; font-size: 9px; line-height: 1.35; }
+
+.delay-field {
   margin-top: 10px;
+  padding: 10px 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid #ece5df;
+  border-radius: 12px;
+  color: #666872;
+  background: #fff;
+  font-size: 11px;
+}
+
+.delay-field > div { display: flex; align-items: center; gap: 7px; }
+.delay-field input {
+  width: 76px;
+  height: 34px;
+  padding: 0 8px;
+  border: 1px solid #dfd9d3;
+  border-radius: 8px;
+  outline: none;
+  color: #393a40;
+  text-align: center;
+}
+.delay-field em { color: #8d909b; font-style: normal; }
+
+.takeover-note {
+  margin: 13px 0 0;
+  padding: 10px 11px;
+  border-radius: 10px;
+  color: #7c6d64;
+  background: rgba(246, 107, 22, .07);
+  font-size: 11px;
+  line-height: 1.6;
+}
+
+.panel-actions,
+.modal-actions,
+.confirm-actions { display: flex; align-items: center; gap: 9px; }
+.panel-actions { justify-content: flex-end; margin-top: 14px; }
+
+.primary-button,
+.secondary-button,
+.danger-button,
+.delete-button {
+  min-height: 42px;
+  padding: 0 17px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.primary-button { border: 1px solid var(--orange); color: #fff; background: linear-gradient(135deg, #f56a13, #ff8130); box-shadow: 0 8px 18px rgba(231, 89, 9, .18); }
+.secondary-button { border: 1px solid #dfdce0; color: #686b77; background: #fff; }
+.danger-button { border: 1px solid #df4e4e; color: #fff; background: #df4e4e; }
+.delete-button { border: 0; color: #d84949; background: #fff1f1; }
+.compact { min-height: 36px; padding: 0 13px; border-radius: 10px; font-size: 10px; }
+
+.inline-state,
+.no-avatar-state {
+  padding: 46px 22px;
+  border: 1px dashed #e1d8d0;
+  border-radius: 20px;
+  text-align: center;
+  background: rgba(255, 255, 255, .72);
+}
+
+.no-avatar-state { margin-top: 10px; }
+.state-icon,
+.danger-icon {
+  width: 50px;
+  height: 50px;
+  margin: 0 auto 14px;
+  display: grid;
+  place-items: center;
+  border-radius: 17px;
+  color: #c55614;
+  background: #ffeadc;
+}
+.state-icon svg,
+.danger-icon svg { font-size: 25px; }
+.inline-state h3,
+.no-avatar-state h2 { margin: 0; font-size: 17px; }
+.inline-state p,
+.no-avatar-state p { max-width: 360px; margin: 8px auto 18px; color: #8b8f9d; font-size: 11px; line-height: 1.65; }
+.error-state .state-icon { color: #c23f3f; background: #fff0f0; }
+
+.security-note {
+  margin-top: 15px;
+  padding: 14px;
+  display: flex;
+  align-items: flex-start;
+  gap: 11px;
+  border: 1px solid #e9e5e1;
+  border-radius: 16px;
+  color: #656975;
+  background: rgba(255, 255, 255, .68);
+}
+.security-note > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 11px; color: #39806b; background: #e8f5f0; }
+.security-note > span svg { font-size: 19px; }
+.security-note strong { display: block; color: #40434b; font-size: 11px; }
+.security-note p { margin: 4px 0 0; font-size: 9px; line-height: 1.6; }
+
+.skeleton-card {
+  padding: 16px;
+  display: flex;
+  gap: 13px;
+  border: 1px solid #eae7e4;
+  border-radius: 20px;
+  background: #fff;
+}
+.skeleton-block { display: block; border-radius: 8px; background: linear-gradient(90deg, #f0eeec 25%, #faf9f8 50%, #f0eeec 75%); background-size: 200% 100%; animation: shimmer 1.45s infinite; }
+.skeleton-avatar { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 16px; }
+.skeleton-lines { flex: 1; display: grid; gap: 9px; }
+.skeleton-title { width: 45%; height: 15px; }
+.skeleton-line { width: 72%; height: 10px; }
+.skeleton-tags { width: 58%; height: 22px; }
+
+.modal-backdrop {
+  position: fixed;
+  z-index: 1000;
+  inset: 0;
+  padding: 16px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  background: rgba(26, 24, 24, .52);
+  backdrop-filter: blur(5px);
+}
+
+.sheet-modal {
+  width: min(100%, 620px);
+  max-height: min(90dvh, 820px);
+  overflow-y: auto;
+  border-radius: 24px 24px 18px 18px;
+  background: #fbfaf9;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
+  animation: sheet-in .24s ease-out both;
+}
+
+.sheet-handle { width: 42px; height: 4px; margin: 9px auto 1px; border-radius: 999px; background: #d9d5d2; }
+.modal-header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  padding: 16px 18px 14px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid #ece8e4;
+  background: rgba(251, 250, 249, .96);
+  backdrop-filter: blur(10px);
+}
+.modal-close { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #e4e0dc; border-radius: 12px; color: #656873; background: #fff; }
+.modal-close svg { font-size: 20px; }
+
+.authorization-form { padding: 4px 18px calc(18px + env(safe-area-inset-bottom)); }
+.form-section { margin: 0; padding: 18px 0; border: 0; border-bottom: 1px solid #eeeae6; }
+.form-section legend,
+.input-field > span { color: #44464e; font-size: 12px; font-weight: 750; }
+.legend-help { margin: 4px 0 11px; color: #9295a0; font-size: 9px; }
+
+.target-type-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
+.target-type-grid button {
+  min-width: 0;
+  min-height: 100px;
+  padding: 10px 6px;
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  background: #FAFBFC;
-  border-radius: 8px;
-  padding: 12px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #e6e2de;
+  border-radius: 14px;
+  color: #5f626c;
+  background: #fff;
 }
+.target-type-grid button.selected { border-color: #ef752d; color: #a8450c; background: #fff1e7; box-shadow: inset 0 0 0 1px #ef752d; }
+.mini-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: #b94e0d; background: #fff0e5; }
+.mini-icon svg { font-size: 17px; }
+.target-type-grid strong { margin-top: 7px; font-size: 10px; }
+.target-type-grid small { margin-top: 3px; overflow: hidden; color: #9b9ea8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
 
-.takeover-row {
+.field-stack { display: grid; gap: 14px; }
+.input-field { display: grid; gap: 7px; }
+.input-field input {
+  width: 100%;
+  height: 46px;
+  padding: 0 13px;
+  border: 1px solid #dedad7;
+  border-radius: 12px;
+  outline: none;
+  color: #303139;
+  background: #fff;
+  font-size: 12px;
+  transition: border-color .2s ease, box-shadow .2s ease;
+}
+.input-field input:focus { border-color: #ed742c; box-shadow: 0 0 0 3px rgba(237, 116, 44, .12); }
+.input-field small { color: #9699a4; font-size: 10px; line-height: 1.55; }
+
+.permission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
+.permission-grid button {
+  min-height: 62px;
+  padding: 9px;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 9px;
+  border: 1px solid #e7e3df;
+  border-radius: 13px;
+  text-align: left;
+  color: #62656f;
+  background: #fff;
 }
+.permission-grid button.selected { border-color: #ee7730; color: #94400d; background: #fff3eb; }
+.permission-check { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border: 1px solid #d9d6d3; border-radius: 8px; color: transparent; background: #fafafa; }
+.permission-grid button.selected .permission-check { border-color: var(--orange); color: #fff; background: var(--orange); }
+.permission-check svg { font-size: 15px; stroke-width: 2.4; }
+.permission-grid strong { display: block; font-size: 11px; }
+.permission-grid small { display: block; margin-top: 3px; color: #9a9da6; font-size: 9px; line-height: 1.35; }
 
-.takeover-label {
-  font-size: 13px;
-  color: #374151;
-  font-weight: 500;
-  min-width: 72px;
-  flex-shrink: 0;
-}
+.form-error { margin: 12px 0 0; padding: 9px 11px; border-radius: 10px; color: #b53d3d; background: #fff0f0; font-size: 10px; line-height: 1.5; }
+.modal-actions { padding-top: 16px; }
+.action-spacer { flex: 1; }
 
-/* 切换开关 */
-.toggle-switch {
-  position: relative;
-  display: inline-block;
-  width: 40px;
-  height: 22px;
-  flex-shrink: 0;
-}
+.confirm-backdrop { align-items: center; }
+.confirm-modal { width: min(100%, 380px); padding: 24px 20px 20px; border-radius: 22px; text-align: center; background: #fff; box-shadow: 0 24px 70px rgba(0, 0, 0, .28); animation: modal-in .2s ease-out both; }
+.danger-icon { color: #cf4141; background: #fff0f0; }
+.confirm-modal h2 { margin: 0; color: #2d2e34; font-size: 18px; }
+.confirm-modal p { margin: 9px 0 19px; color: #838792; font-size: 11px; line-height: 1.65; }
+.confirm-actions { justify-content: center; }
+.confirm-actions button { flex: 1; }
 
-.toggle-switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.toggle-slider {
-  position: absolute;
-  cursor: pointer;
-  inset: 0;
-  background: #D1D5DB;
-  border-radius: 22px;
-  transition: background 0.2s;
-}
-
-.toggle-slider::before {
-  content: '';
-  position: absolute;
-  height: 16px;
-  width: 16px;
-  left: 3px;
-  bottom: 3px;
-  background: white;
-  border-radius: 50%;
-  transition: transform 0.2s;
-}
-
-.toggle-switch input:checked + .toggle-slider {
-  background: #6366F1;
-}
-
-.toggle-switch input:checked + .toggle-slider::before {
-  transform: translateX(18px);
-}
-
-.takeover-select {
-  flex: 1;
-  padding: 6px 10px;
-  border: 1px solid #E5E7EB;
-  border-radius: 6px;
-  font-size: 13px;
-  color: #374151;
-  background: white;
-  outline: none;
-}
-
-.takeover-select:disabled {
-  background: #F3F4F6;
-  color: #9CA3AF;
-}
-
-.takeover-input {
-  flex: 1;
-  padding: 6px 10px;
-  border: 1px solid #E5E7EB;
-  border-radius: 6px;
-  font-size: 13px;
-  color: #374151;
-  background: white;
-  outline: none;
-  width: 80px;
-}
-
-.takeover-actions {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  margin-top: 4px;
-}
-
-.takeover-cancel-btn {
-  padding: 6px 16px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  border: 1px solid #E5E7EB;
-  background: white;
-  color: #6B7280;
-}
-
-.takeover-save-btn {
-  padding: 6px 16px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  border: none;
-  background: #6366F1;
-  color: white;
-}
-
-/* 接管配置摘要 */
-.takeover-summary {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 6px;
-}
-
-.takeover-badge {
-  padding: 2px 8px;
-  border-radius: 4px;
+.page-toast {
+  position: fixed;
+  z-index: 1200;
+  left: 50%;
+  bottom: calc(88px + env(safe-area-inset-bottom));
+  max-width: calc(100vw - 40px);
+  margin: 0;
+  padding: 11px 17px;
+  border: 1px solid rgba(255, 255, 255, .16);
+  border-radius: 999px;
+  color: #fff;
+  background: rgba(35, 34, 38, .94);
+  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
   font-size: 11px;
-  font-weight: 600;
+  line-height: 1.35;
+  text-align: center;
+  transform: translateX(-50%);
+  animation: toast-in .22s ease-out both;
 }
 
-.takeover-badge.enabled {
-  background: #EEF2FF;
-  color: #6366F1;
+@keyframes shimmer { to { background-position: -200% 0; } }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
+@keyframes sheet-in { from { opacity: 0; transform: translateY(22px); } }
+@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
+@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
+
+@media (min-width: 640px) {
+  .page-content { padding-top: 24px; }
+  .authorization-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
+  .authorization-card.expanded { grid-column: 1 / -1; }
+  .modal-backdrop { align-items: center; }
+  .sheet-modal { border-radius: 24px; }
+  .sheet-handle { display: none; }
+  .authorization-form { padding-left: 22px; padding-right: 22px; }
 }
 
-.takeover-mode-text {
-  font-size: 12px;
-  color: #6B7280;
+@media (max-width: 380px) {
+  .page-content { padding-left: 12px; padding-right: 12px; }
+  .avatar-overview { padding: 17px; }
+  .avatar-photo,
+  .avatar-fallback { width: 44px; height: 44px; flex-basis: 44px; }
+  .overview-copy { font-size: 11px; }
+  .card-main { padding-left: 13px; padding-right: 13px; }
+  .target-icon { width: 43px; height: 43px; flex-basis: 43px; }
+  .permission-grid { grid-template-columns: 1fr; }
+  .modal-actions { flex-wrap: wrap; }
+  .delete-button { width: 100%; order: 2; }
+  .action-spacer { display: none; }
+  .modal-actions .secondary-button,
+  .modal-actions .primary-button { flex: 1; }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
+}
+
+button:focus-visible,
+select:focus-visible,
+input:focus-visible { outline: 3px solid rgba(255, 132, 55, .32); outline-offset: 2px; }
 </style>